/* ==========================================================================
   뉴젠솔루션중부호남 광주지사 - 공통 스타일
   팔레트: 네이비 #1B2A4A / 오프화이트 #F5F7FA / 틸 액센트 #0E9488
   ========================================================================== */

:root {
  /* 다크 그레이 + 라이트 그린 - 시안 색상 그대로 반영 */
  --navy-900: #2E3136;   /* 상단 바 · 가장 진한 배경 */
  --navy-800: #3A3F44;   /* 본문 진한 글자 */
  --navy-700: #4A5057;
  --teal-600: #8FC862;   /* 강조색(라이트 그린) - 진한 쪽 */
  --teal-500: #A3D977;   /* 강조색 기준 */
  --teal-400: #BCE49B;
  --bg: #F6F7F4;         /* 화면 바탕 */
  --blue-tint: #EDF2E6;
  --blue-tint-soft: #F5F8F1;
  --surface: #FFFFFF;
  --border: #E1E4E0;
  --text-900: #2E3136;
  --text-600: #5C6169;
  --text-400: #8D939C;
  --danger: #D64545;
  --danger-bg: #FBEAEA;
  /* [2026-08-30, 25차 디자인 전면 교체] 사장님이 직접 만들어 오신 참고 디자인(이중 테두리 액자+모서리
     장식, 남색+골드 톤, "Quotation" 필기체 제목의 청첩장/증서 느낌)을 그대로 재현하기 위한 전용 색상.
     이 색은 가격제안서(.quote-*)에만 쓰고 다른 화면(계약서/기타서비스 등)에는 적용하지 않음. 남색 계열도
     화면 전체에서 쓰는 --navy-800(#3A3F44, 짙은 회색에 가까움)과는 결이 달라(사장님이 주신 참고 디자인
     벡터 파일 자체에 이미 이 남색이 그대로 박혀있어 그것과 맞춤) 별도 변수로 둠. */
  --quote-navy: #182A43;      /* 제목/본문 진한 남색 - 사장님이 주신 벡터 파일에 이미 이 색으로 그려져 있음 */
  --quote-navy-2: #34445B;    /* 표 헤더 영문/보조 텍스트용 살짝 옅은 남색 (역시 벡터 원본 색) */
  --quote-gold: #B08A4A;      /* 골드 포인트 - "OFFER" 등 영문 소제목 */
  --quote-gold-line: #C9A876; /* 테두리/모서리 장식/구분선용 옅은 골드 */
  --quote-tan-bg: #F6EFDD;    /* 표 헤더 등 옅은 베이지 배경 */
  --quote-hair: #E4D9BE;      /* 얇은 구분선 */
  /* [2026-09-24 33차 신규, 기준규칙 v1 3장] 영업타임라인·휴대폰 화면 공통 규칙 값 - 화면 코드에 숫자를 직접
     쓰지 않고 이 값만 씀. 간격 6 · 글자 5 · 모서리 3 · 의미 색 4가지. 다른 메뉴에는 아직 적용하지 않음. */
  --nz-s1: 4px; --nz-s2: 8px; --nz-s3: 12px; --nz-s4: 16px; --nz-s5: 24px; --nz-s6: 32px;
  --nz-fs1: 12px; --nz-fs2: 13px; --nz-fs3: 14px; --nz-fs4: 16px; --nz-fs5: 20px;
  --nz-lh1: 18px; --nz-lh2: 20px; --nz-lh3: 22px; --nz-lh4: 24px; --nz-lh5: 28px;
  --nz-ls1: 0; --nz-ls2: 0; --nz-ls3: -0.1px; --nz-ls4: -0.2px; --nz-ls5: -0.4px;
  --nz-bg: #FFFFFF; --nz-line: #E3E6E2; --nz-fill: #F6F7F5;
  --nz-ink: #2E3136; --nz-ink2: #5C6169; --nz-ink3: #8D939C;
  --nz-g: #8FC862; --nz-g-ink: #3F6F1E; --nz-g-soft: #EEF6E6; --nz-g-line: #CFE5BC; --nz-g-ring: rgba(143, 200, 98, .45);
  --nz-o-ink: #A4521A; --nz-o-soft: #FDF1E4; --nz-o-line: #F1CDA9;
  --nz-r-ink: #B53A3A; --nz-r-soft: #FBEAEA;
  --nz-b-ink: #2F6FAE; --nz-b-soft: #EAF2FB;
  --nz-r6: 6px; --nz-r10: 10px; --nz-rp: 999px;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(20, 33, 58, 0.06), 0 1px 2px rgba(20, 33, 58, 0.04);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg); /* [51차] 그라데이션 없앰(사장님 규칙) */
  color: var(--text-900);
  font-family: "Noto Sans KR", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, button {
  font-size: 1rem;
}

::selection { background: rgba(14, 148, 136, 0.2); }

/* focus visibility (접근성) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
}

/* ---------------- 로그인 화면 ---------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg); /* [51차] 그라데이션 없앰 */
  padding: 24px;
}

.login-shell {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.login-brand {
  margin-bottom: 32px;
}

.login-brand .org {
  font-size: 1.05rem;
  color: var(--teal-600);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.login-brand .branch {
  margin-top: 6px;
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--navy-800);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 44px 40px;
}

.login-card h1 {
  font-size: 1.4rem;
  margin: 0 0 28px;
  color: var(--text-900);
  font-weight: 700;
}

.field {
  text-align: left;
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.88rem;
  color: var(--text-600);
  margin-bottom: 6px;
  font-weight: 600;
}

.field input, .field select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #FAFBFD;
  transition: border-color .15s ease, background .15s ease;
}

.field input:focus, .field select:focus {
  border-color: var(--teal-600);
  background: #fff;
  outline: none;
}

.btn-primary {
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-radius: 10px;
  background: var(--navy-800);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  margin-top: 8px;
  transition: background .15s ease, transform .05s ease;
}
.btn-primary:hover { background: var(--navy-700); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.login-error {
  min-height: 20px;
  color: var(--danger);
  font-size: 0.88rem;
  margin-top: 14px;
  font-weight: 600;
}

.login-foot {
  margin-top: 24px;
  color: var(--text-400);
  font-size: 0.82rem;
}

/* ---------------- 대시보드 레이아웃 (상단 메뉴형 - 아이패드 등 터치기기 사용 고려) ---------------- */
.app-shell-top {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topnav {
  background: var(--navy-800);
  color: #EAF0F6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  flex-shrink: 0;
}

.topnav-brand .org {
  font-size: 0.72rem;
  color: var(--teal-500);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.topnav-brand .branch {
  font-size: 1.05rem;
  font-weight: 800;
  margin-top: 2px;
  line-height: 1.3;
}

.topnav-user {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.topnav-user .user-box { text-align: right; }

.topnav-user .name {
  font-weight: 700;
  font-size: 0.92rem;
}

.topnav-user .role {
  font-size: 0.78rem;
  color: var(--teal-500);
  margin-top: 2px;
}

.logout-btn {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #C6D0E0;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}
.logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.topnav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;                 /* 메뉴 항목 간격을 더 좁게 */
  background: var(--navy-900);
  padding: 10px 12px;
  flex-shrink: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 12px 11px;     /* 좌우 여백을 줄여 항목끼리 더 가깝게 */
  border-radius: 9px;
  background: transparent;
  border: none;
  color: #C6D0E0;
  font-size: 1.06rem;
  font-weight: 700;
  position: relative;
  flex-shrink: 0;
}

.nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }

.nav-link.active {
  background: rgba(14, 148, 136, 0.2);
  color: #fff;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;
  height: 3px;
  border-radius: 4px;
  background: var(--teal-500);
}

.nav-group {
  position: relative;
  flex-shrink: 0;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.nav-group.open .nav-dropdown { display: flex; }
.nav-dropdown .nav-link { width: 100%; padding: 10px 14px; font-size: 0.98rem; }

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.topbar h2 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--navy-800);
}

.topbar .sub {
  font-size: 0.82rem;
  color: var(--text-400);
  margin-top: 2px;
}

.content {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

.card + .card { margin-top: 18px; }

.card h3 {
  margin: 0 0 16px;
  font-size: 1rem;
  color: var(--navy-800);
}

.placeholder-box {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 60px 24px;
  text-align: center;
  color: var(--text-400);
}

.placeholder-box .big {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-600);
  margin-bottom: 6px;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.data-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-600);
  font-weight: 700;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* [2026-08-31, 38차 신규] 계약서 목록(세무사랑Pro/기타서비스/일반계약서 공용) 전용 - 다른 화면의
   .data-table에는 영향 주지 않도록 별도 클래스로 범위를 좁힘. 헤더 가운데 정렬 + "상호" 클릭 가능 표시 +
   관리항목 버튼이 넘칠 때 자연스럽게 다음 줄로 넘어가도록(줄바꿈이 어색하게 끊기지 않게 flex-wrap 사용) */
.tlc-list-table th { text-align: center; }
.tlc-company-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--navy-800);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tlc-company-link:hover { color: var(--teal-600); }
.tlc-manage-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 700;
}

.badge.main { background: #E9F2FF; color: var(--navy-800); }
.badge.role-sales { background: #E6F7F5; color: var(--teal-600); }
.badge.role-cs { background: #FFF3E0; color: #B7791F; }
.badge.inactive { background: #F0F1F4; color: var(--text-400); }

.btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-weight: 600; font-size: 0.85rem; }
.btn:hover { background: #F5F7FA; }
.btn.small { padding: 6px 10px; font-size: 0.8rem; }
.btn.danger { color: var(--danger); border-color: #F3C9C9; background: var(--danger-bg); }
.btn.danger:hover { background: #F7DADA; }
/* 목록 관리항목(방문/수정/PDF출력) - 한번이라도 실행되면 계속 빨간색으로 남아 이력을 표시함 */
.quote-action-used { color: var(--danger) !important; border-color: #F3C9C9 !important; font-weight: 700; }
/* 메일 "전송실패" - 그냥 이력 표시(quote-action-used)보다 더 눈에 띄게, 배경까지 채워서 놓치지 않게 함 */
.mail-status-failed { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; font-weight: 800; }
.btn.primary { background: var(--navy-800); color: #fff; border: none; }
.btn.primary:hover { background: var(--navy-700); }

/* [2026-09-17 신규] 마케팅진행 - 추천받을 리스트 카드형 목록. 사장님 지적("어디를 눌러야 상담이
   시작되는지 추측하기 힘듦")에 따라, 줄 전체가 클릭 가능한 카드이고 오른쪽에 항상 "상담 시작 →"
   pill 버튼이 보이도록 만들어 클릭 대상이 명확하게 함(카드/버튼에 쓰는 기존 navy-800/teal/border
   톤을 그대로 재사용 - 별도 색상 신규 도입 없음). 업체 검색 결과에도 동일하게 재사용함. */
.tmcs-pick-list { display: flex; flex-direction: column; gap: var(--nz-s2); }
.tmcs-pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nz-s3);
  width: 100%; text-align: left; padding: var(--nz-s3) var(--nz-s4);
  border: 1.5px solid var(--border); border-radius: 10px; background: #fff;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.tmcs-pick-row:hover { border-color: var(--teal-600); background: var(--blue-tint-soft); }
.tmcs-pick-info { display: flex; flex-direction: column; gap: var(--nz-s1); min-width: 0; }
.tmcs-pick-name { display: flex; align-items: center; gap: var(--nz-s2); font-weight: 700; color: var(--navy-800); font-size: var(--nz-fs4); }
.tmcs-pick-meta { font-size: var(--nz-fs2); color: var(--text-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmcs-pick-cta {
  flex: 0 0 auto; padding: var(--nz-s2) var(--nz-s4); border-radius: 8px; background: var(--navy-800); color: #fff;
  font-weight: 700; font-size: var(--nz-fs2); white-space: nowrap;
}
.tmcs-tier-chip { display: inline-block; padding: 2px var(--nz-s2); border-radius: 999px; font-size: var(--nz-fs1); font-weight: 700; }
.tmcs-reco-count { font-size: var(--nz-fs2); color: var(--text-400); margin-bottom: var(--nz-s2); }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--border);
}

.settings-tab {
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-weight: 700;
  color: var(--text-400);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}

.settings-tab.active {
  color: var(--navy-800);
  border-bottom-color: var(--teal-600);
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy-800);
  color: #fff;
  padding: 20px 28px;
  border-radius: 14px;
  font-size: 1.28rem;
  font-weight: 700;
  max-width: min(560px, 90vw);
  line-height: 1.5;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  /* [Round E, 2026-08-31] 기존 z-index:50은 모달(60)/캡처용 임시 레이어(999990) 등 다른 화면 요소보다
     낮아서 모달이 열려있는 동안 토스트가 그 뒤로 가려지는 문제가 있었음(사장님 지적) - 화면에 있는 어떤
     요소보다도 항상 위에 뜨도록 최상단 값으로 올림 */
  z-index: 1000000;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }

.hidden { display: none !important; }

@media (max-width: 860px) {
  .topnav { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .topnav-menu { padding: 8px 10px; }
  .content { padding: 18px; }
}

@media (max-width: 480px) {
  .topnav-brand .branch { font-size: 0.94rem; }
  .topnav-user .user-box { display: none; }
}

/* ---------------- 거래처관리: 세그먼트 입력(전화번호 등) ---------------- */
.seg-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.seg-input input {
  width: 100%;
  text-align: center;
  padding: 12px 4px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #FAFBFD;
  letter-spacing: 0.03em;
}
.seg-input input:focus { border-color: var(--teal-600); background: #fff; outline: none; }
.seg-input .dash { color: var(--text-400); font-weight: 700; }

/* ---------------- 거래처관리: 평가하기 아이콘 선택 ---------------- */
.eval-panel {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.eval-group { margin-bottom: 14px; }
.eval-group:last-child { margin-bottom: 0; }
.eval-group .eval-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-600);
  margin-bottom: 8px;
}
.icon-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-choice {
  padding: 10px 18px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-600);
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-choice:hover { border-color: var(--teal-500); }
.icon-choice.selected {
  border-color: var(--teal-600);
  background: rgba(14, 148, 136, 0.10);
  color: var(--teal-600);
}
.icon-choice .ic { font-size: 1.05rem; }

/* ---------------- 거래처관리: 상태 강조 표시 ---------------- */
.status-strong { font-weight: 800; font-size: 0.92rem; }
.status-strong.active { color: var(--teal-600); }
.status-strong.stopped { color: var(--danger); }
.status-strong.unregistered { color: var(--text-400); }
/* [2026-09-13 신규] 텔레마케팅 대상 - "보류" 상태 전용 색(성공=teal active, 거부=danger stopped 재사용,
   보류만 새 색 필요 - 기존 role-cs 뱃지에 쓰던 amber 계열 재사용) */
.status-strong.hold { color: #B7791F; }

.eval-summary { font-size: 0.95rem; color: var(--navy-800); font-weight: 700; }

/* ---------------- 거래처관리: 폼 섹션 ---------------- */
.form-section-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--navy-800);
  margin: 22px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-note {
  font-size: 0.8rem;
  color: var(--text-400);
  margin: -6px 0 14px;
}

/* ---------------- 모달(히스토리 등) ---------------- */
/* 목록 관리열 버튼(계약서확인/CMS관리 등) 아래에 뜨는 작은 드롭다운 메뉴 - 내용검토/다운로드 2개짜리 */
.tlc-dropdown-menu {
  position: absolute;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 33, 58, 0.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 110px;
}
.tlc-dropdown-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  color: var(--navy-800);
}
.tlc-dropdown-menu button:hover { background: var(--blue-tint-soft); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 33, 58, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(20,33,58,0.25);
}
.modal-box h3 { margin-top: 0; }

/* [2026-08-31, 38차 신규] 계약서 상세 모달(showTaxLoveContractDetailModal, "상호" 클릭시 열림) 전용 -
   정보/수정폼을 한 화면에 동시에 펼쳐서 보여주기 위한 2단 레이아웃. 폭은 아이패드 세로 해상도(768px)를
   넘지 않는 선에서 확장(720px + 좌우 여백). 화면이 좁아지면(태블릿보다 작은 화면) 1단으로 자동 전환. */
.tlcd-modal-box { max-width: 720px; }
.tlcd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 700px) {
  .tlcd-grid { grid-template-columns: 1fr; }
}
.modal-close {
  float: right;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  color: var(--text-400);
  cursor: pointer;
}

.import-block {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.import-block h4 { margin: 0 0 6px; font-size: 0.95rem; color: var(--navy-800); }
.import-block p { margin: 0 0 12px; font-size: 0.84rem; color: var(--text-600); }
.import-result {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-600);
}
.import-result.error { color: var(--danger); }

.vr-badge {
  display: inline-block;
  padding: var(--nz-s1) var(--nz-s2);
  border-radius: 100px;
  font-size: var(--nz-fs1);
  font-weight: 700;
  white-space: nowrap;
}
.vr-badge.pending { background: #FFF3E0; color: #B7791F; }
.vr-badge.scheduled { background: #E9F2FF; color: var(--navy-800); }
.vr-badge.done { background: #E6F7F5; color: var(--teal-600); }
.vr-badge.unable { background: var(--danger-bg); color: var(--danger); }

.vr-client-result { transition: background .1s ease; }
.vr-client-result:hover { background: var(--bg); }

.clickable-cell { cursor: pointer; }
.clickable-cell:hover { background: rgba(14, 148, 136, 0.06); }

.pending-vr-title {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-800);
}

.pending-vr-box {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 200px;
  cursor: pointer;
  background: var(--blue-tint-soft);
  text-align: center;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pending-vr-box {
  position: relative;
  overflow: hidden;
}
.pending-vr-box:hover {
  border-color: var(--teal-500);
  box-shadow: 0 2px 10px rgba(14, 148, 136, 0.12);
}
.pending-vr-box.unable:hover {
  border-color: var(--danger);
  box-shadow: 0 2px 10px rgba(214, 69, 69, 0.15);
}
.pending-vr-box.done:hover {
  border-color: var(--navy-700);
}
.box-ribbon {
  display: block;
  margin: -14px -16px 10px;
  padding: 6px 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  text-align: center;
}
.box-ribbon.done { background: var(--navy-800); }
.box-ribbon.unable { background: var(--danger); }
.pending-vr-company {
  font-weight: 800;
  color: var(--navy-800);
  font-size: 1rem;
  margin-bottom: 6px;
}
.pending-vr-type {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal-600);
  background: rgba(14, 148, 136, 0.10);
  padding: 2px 9px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.pending-vr-eval {
  font-size: 0.82rem;
  color: var(--text-600);
}

.schedule-strip {
  display: flex;
  gap: 4px;
  /* 날짜 칸이 가로로 넘쳐 스크롤되지 않고 한 줄 안에 모두 들어오도록 폭을 나눠 가짐 */
  padding: 4px 2px 8px;
}
.schedule-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
  min-height: 200px;
  border-right: 1px solid var(--border);
}
.schedule-col:last-child { border-right: none; }
.schedule-col-label {
  text-align: center;
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--navy-800);
  margin-bottom: 10px;
  white-space: nowrap;
}
.schedule-col-label.rest-day {
  color: var(--danger);
}
.schedule-col.today .schedule-col-label {
  color: var(--teal-600);
  position: relative;
}
.schedule-col.today .schedule-col-label::after {
  content: "오늘";
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  color: #fff;
  background: var(--teal-500);
  border-radius: 20px;
  padding: 1px 8px;
  margin: 4px auto 0;
  width: fit-content;
}
.schedule-col-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.schedule-item {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--teal-500);
  padding: 7px 4px 7px 8px;
  cursor: pointer;
  font-size: 0.76rem;
  text-align: left;
  transition: background .1s ease;
}
.schedule-item:hover { background: rgba(14, 148, 136, 0.08); }
.schedule-item.done {
  border-left-color: var(--navy-700);
  color: var(--text-400);
}
.schedule-item.unable {
  border-left-color: var(--danger);
}
.schedule-item.unable .schedule-item-time { color: var(--danger); }
.schedule-item-time {
  font-weight: 700;
  color: var(--navy-800);
}
.schedule-item.done .schedule-item-time { color: var(--text-400); }
.schedule-item-company {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-visit-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.today-visit-row:last-child { border-bottom: none; }
.today-visit-num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.today-visit-main { flex: 1; min-width: 0; }
.today-visit-box { max-width: 320px; text-align: left; }
.nearby-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-400);
  margin: 10px 0 6px;
}
.nearby-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nearby-box {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 140px;
  max-width: 180px;
  cursor: pointer;
  background: var(--blue-tint-soft);
  transition: border-color .12s ease;
}
.nearby-box:hover { border-color: var(--teal-500); }
.nearby-company {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nearby-addr {
  font-size: 0.74rem;
  color: var(--text-400);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-eval-toggle {
  padding: 18px 32px;
  border-radius: 12px;
  border: none;
  background: var(--teal-600);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(14, 148, 136, 0.35);
}
.btn-eval-toggle:hover { background: var(--teal-500); }

.form-subgroup-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 14px 0 8px;
}

/* CMS 신청서 - 입력칸을 필요한 만큼만 압축해서 공간을 아낌(요청사항: 칸이 너무 커서 불편했음) */
.cms-field-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cms-field-sm { width: 100px; }
.cms-field-md { width: 220px; }
.cms-field-sm input, .cms-field-md input { width: 100%; }
.cms-phone-row { display: flex; align-items: center; gap: 4px; }
.cms-phone-row input { text-align: center; padding: 8px 4px; }
.cms-phone-row span { color: var(--text-400); }
/* [Round E, 2026-08-31] 은행명 글자수가 제각각(국민은행~IBK기업은행)이라 flex-wrap으로는 박스 크기가
   들쭉날쭉하고 줄도 안 맞았음(사장님 지적) - 4열 grid로 바꿔서 모든 박스 크기를 동일하게 맞춤 */
.cms-bank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.cms-bank-btn { width: 100%; text-align: center; box-sizing: border-box; }
.cms-bank-btn.selected { background: var(--teal-500); border-color: var(--teal-600); color: var(--navy-900); font-weight: 800; }
@media (max-width: 560px) {
  .cms-bank-grid { grid-template-columns: repeat(3, 1fr); }
}

.form-row.compact {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.form-row.compact .field { margin-bottom: 0; }
.form-row.compact .field label {
  font-size: 0.76rem;
  margin-bottom: 4px;
}
.form-row.compact .field input,
.form-row.compact .field select {
  padding: 9px 10px;
  font-size: 0.88rem;
  border-radius: 7px;
}
.form-row.compact .seg-input input {
  padding: 9px 3px;
  font-size: 0.88rem;
}

/* ---------------- 가격제안서 작성: 신규작성 -> 종이가 떨어지며 펼쳐지는 연출 ---------------- */
.quote-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.quote-stage {
  overflow: hidden; /* 낙하 애니메이션이 화면 위쪽에서 시작되므로 넘치는 부분을 가림 */
  padding-top: 6px;
}
.quote-stage-empty {
  color: var(--text-400);
  font-size: 0.9rem;
  padding: 60px 0;
}

/* 신규 작성시 "일반업체 / 세무·회계"를 고르는 화면 - 버튼 모양은 제품선택의 .quote-product-box를 그대로 재사용 */
.quote-kind-chooser { padding: 60px 0; text-align: center; }
.quote-kind-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 18px;
}
.quote-kind-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 12px;
  justify-content: center;
}
.quote-kind-grid .quote-product-box { padding: 20px 14px; font-size: 0.92rem; }

/* 세무/회계 제품에 금액 구분이 여러 개일 때(e공단 세무사무소·노무사무소 등) 제품 상자 아래에 펼쳐지는 선택창 */
.tax-option-picker {
  grid-column: 1 / -1;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin: 2px 0 6px;
  background: var(--blue-tint-soft);
}
.tax-option-picker-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 8px;
}

/* [2026-08-29 수정] 예전엔 .quote-page(용지+오른쪽 서랍/탭 UI 전체를 감싸는 영역)에 종이결 배경을 걸어서
   "문서와 탭 영역이 하나의 표면으로 보이도록" 만들었는데, 사장님이 "현재 인쇄 이미지 배경이 전체에
   적용되어있는데 가격제안서에만 배경 적용 및 색상 적용"이라고 요청하심 - 배경/색상을 화면 전체(탭 UI
   포함)가 아니라 실제 용지(.quote-paper-doc, 아래) 하나에만 적용되도록 범위를 좁힘. .quote-page 자체는
   세무사랑Pro/기타서비스/일반계약서의 .tlc-page/.gen-page처럼 배경 없는 순수 레이아웃 컨테이너로 되돌림 */
.quote-page {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.quote-doc-area {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-start; /* 가운데 정렬하지 않고 왼쪽 정렬 - 서랍이 열려도 이 너비는 줄어들지 않음 */
}

/* [2026-08-29 수정] #quotePaperDoc(.quote-paper-doc)은 세무사랑Pro의 .tlc-paper-doc처럼 "페이지가
   몇 장이든 그걸 감싸는 얇은 바깥 틀"로만 씀 - 실제로 눈에 보이는 종이(배경/여백/그림자)는 전부 그
   안쪽의 .quote-page-sheet(바로 아래)가 담당함. exportMultiSheetPdf가 wrapEl(=이 요소) 안에서
   sheetSelector(=.quote-page-sheet)로 자식 페이지 요소들을 찾아 캡처 직전에 여백/그림자/테두리를
   잠깐 지우는 방식이라, 캡처 대상 자체에 그 스타일이 있으면(자기 자신은 querySelectorAll로 못 찾음)
   지워지지 않고 그대로 캡처돼버림 - 그래서 반드시 이렇게 바깥/안쪽 두 겹으로 나눠야 함. */
.quote-paper-doc {
  width: 794px;
  box-sizing: border-box;
}

/* [2026-08-29 신규] "양식 규격을 기존 계약서 규격처럼 변경" 요청 반영 - 세무사랑Pro/기타서비스/일반계약서의
   .tlc-page-sheet와 동일하게 A4 실측 픽셀(794x1123, 96dpi 기준)의 고정 크기 용지로 바꿈(예전엔 .quote-paper-doc
   자체가 max-width 830px에 높이는 내용에 따라 자유롭게 늘어나는 카드형이었음). 이 요소가 이제 "한 장(페이지)"의
   단위이며, exportMultiSheetPdf가 이 요소를 캡처해서 297mm마다 자동으로 여러 페이지 PDF로 잘라줌(내용이
   길어지면 세무사랑Pro 등과 똑같이 자동으로 페이지가 늘어남 - 가격제안서는 내용 길이가 가변적이라 정적으로
   미리 페이지를 나눠둘 필요 없이 이 요소 하나만 있어도 충분함). 종이 질감 배경도 이제 이 용지 안쪽에만
   적용되어 탭 UI에는 더 이상 번지지 않음(사장님 요청: "현재 인쇄 이미지 배경이 전체에 적용되어있는데
   가격제안서에만 배경 적용 및 색상 적용"). 여백(padding)은 "상하좌우 간격 최대한 좁게" 요청에 따라
   계약서들의 기본 여백(40px 48px 60px)보다 눈에 띄게 좁힌 값으로 설정함(가독성이 깨지지 않는 선에서
   최대한 타이트하게). */
/* [2026-08-30, 25차] 사장님이 직접 만든 참고 디자인을 재현하기 위한 전용 서체 - Google Fonts CDN을
   쓰지 않고 프로젝트(public/fonts)에 폰트 파일을 직접 포함시킴. 예전 Alex Brush는 구글폰트 CDN에서
   못 받아오면 완전히 다른 대체 서체로 보이는 위험이 있었는데(이 세션에서 실제로 그 문제를 겪음),
   이번엔 그 위험 자체를 없앰 - 네트워크 상태와 무관하게 사장님 화면에서 항상 동일하게 보임. */
@font-face {
  font-family: 'Noto Serif KR Quote';
  src: url('/fonts/noto-serif-kr-korean-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif KR Quote';
  src: url('/fonts/noto-serif-kr-korean-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond Quote';
  src: url('/fonts/eb-garamond-latin-600-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* [2026-08-31, 37차 수정 — 사장님이 애초에 요청한 적 없는 요소였음을 지적하심] 35/36차까지 "페이지마다
   배경색이 미세하게 다르다"는 문제를 종이 질감용 gradient(비네트+가는 격자무늬, 25차에서 임의로 추가한
   장식) 쪽을 고쳐서 해결하려 했었는데, 사장님이 "내가 구현하라고 준 색상에 그러데이션이 있었어? 난 그런
   적이 없는데"라고 직접 지적하심 — 맞는 말씀임, 이 gradient 텍스처는 25차 참고 디자인(이중 테두리 액자+
   모서리 장식)을 재현하면서 "증서 느낌"을 내려고 임의로 얹은 것이었지 사장님이 지정한 색상이 아니었음.
   페이지마다 색이 달라 보이는 문제의 근본 원인이 결국 이 gradient 자체였으므로, 매번 다른 방식으로
   땜질하는 대신 아예 통째로 없애고 사장님이 원래 지정하신 단색 배경(#FBFAF4)만 남김 — 이러면 페이지가
   몇 장이든 전부 완전히 동일한 단색이라 애초에 색이 달라질 방법 자체가 없어짐. */
.quote-page-sheet {
  width: 794px;
  min-height: 1123px;
  background: #FBFAF4;
  box-shadow: 0 24px 60px rgba(20, 33, 58, 0.22), inset 0 0 46px rgba(120, 100, 70, 0.06), var(--shadow);
  border: 1px solid #E7E0D0;
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* [2026-08-30, 25차 신규] 사장님이 주신 참고 디자인의 이중 테두리 액자 + 모서리 장식. .quote-page-sheet
   안쪽 가장자리를 따라 얇은 골드 이중선을 두르고, 네 모서리에는 별도 장식(다이아몬드+꺾인 선) 이미지를
   겹쳐서 "증서/청첩장" 느낌을 냄. PDF 저장(html2canvas)·화면 편집 모두 동일하게 보이는 순수 CSS+SVG라
   구글폰트 같은 네트워크 의존이 전혀 없음. 실제 프린터 인쇄(@media print)에서는 잉크 절약을 위해
   기존 규칙과 동일하게 숨김(아래 @media print 참고). */
.quote-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--quote-gold-line);
  pointer-events: none;
}
.quote-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--quote-gold-line);
}
.quote-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.quote-corner svg { width: 100%; height: 100%; display: block; }
.quote-corner.tl { top: 8px; left: 8px; }
.quote-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.quote-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.quote-corner.br { bottom: 8px; right: 8px; transform: scale(-1, -1); }

.quote-inner {
  position: relative;
  padding: 26px 34px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.quote-header { text-align: center; margin-bottom: 4px; }
/* [2026-08-30, 25차] "Quotation" 글자를 서체가 아니라 사장님이 직접 만들어 오신 벡터(외곽선) 이미지로
   교체함 - 폰트가 아니라 이미 선으로 그려진 그림이라 어떤 브라우저·네트워크에서도 항상 똑같이 보임
   (이전까지 겪었던 "구글폰트가 안 불러와지면 서체가 완전히 달라 보이는" 문제 자체가 원천적으로 사라짐).
   색상도 벡터 파일 자체에 이미 남색(#182A43)으로 그려져 있어 별도 색 지정이 필요 없음. */
.quote-title-en {
  height: 62px;
  display: block;
  margin: 0 auto;
}
.quote-mini-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.quote-mini-divider .ln { width: 54px; height: 1px; background: var(--quote-gold-line); }
.quote-mini-divider .dm { width: 6px; height: 6px; background: var(--quote-gold-line); transform: rotate(45deg); flex: none; }
.quote-title {
  font-family: 'Noto Serif KR Quote', 'Noto Serif KR', serif;
  font-weight: 700;
  font-size: 2.15rem;
  color: var(--quote-navy);
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  margin-bottom: 10px;
}
.quote-offer-en {
  /* [2026-08-30, 27차] "OFFER 글씨 너무 작아서 안보임 - 2.5배 크게" 요청 - 15px → 38px(약 2.5배) */
  height: 38px;
  display: block;
  margin: 0 auto 8px;
}
.quote-meta {
  text-align: right;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-600);
  letter-spacing: 0.02em;
  margin-top: 10px;
  margin-bottom: 10px;
}
.quote-hr { height: 1px; background: var(--quote-hair); margin-bottom: 18px; }
.quote-parties {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
  padding-bottom: 0;
  border-bottom: none;
}
.quote-customer, .quote-seller {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--quote-navy-2);
}
/* [2026-08-30, 30차 → 31차 제거] "CLIENT INFORMATION 상호 글씨가 2자 3자 글씨와 간격 동일하게" 요청을
   30차에서는 이 고정폭 라벨 flex 정렬(.quote-info-row/.quote-info-label)로 해결했었는데, 31차에서 사장님이
   "상호:" 라벨 텍스트 자체에 공백( )을 넣는 더 단순한 방식으로 직접 지정하셔서 그쪽으로 교체함
   (app.js의 CLIENT INFORMATION 마크업 참고 - 이제 다시 평범한 div 한 줄씩임). 이 두 규칙은 더 이상 어떤
   마크업에서도 쓰이지 않아 제거함. */
.quote-seller {
  padding-left: 26px;
  border-left: 1px solid var(--quote-hair);
}
/* [2026-08-30, 29차] "대표이사 홍기표 옆에 도장이미지 첨부" 요청 - 사장님이 주신 실제 회사 도장 원본을
   해상도만 높여(QUOTE_SEAL_CEO, app.js 참고) 이름 옆에 인라인으로 붙임. */
.quote-ceo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quote-seal-img {
  height: 34px;
  width: auto;
  display: block;
}
.quote-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--quote-navy);
  margin-bottom: 8px;
  letter-spacing: 0.14em;
}
.quote-section-label::after { content: ''; flex: 1; height: 1px; background: var(--quote-hair); }
.quote-product-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  background: transparent;
  table-layout: fixed;
}
.quote-product-table th,
.quote-product-table td {
  border: 1px solid var(--quote-hair);
  padding: 10px 6px;
  font-size: 0.8rem;
  text-align: center;
  color: var(--quote-navy-2);
  word-break: keep-all;
}
.quote-product-table th {
  background: var(--quote-tan-bg);
  padding: 9px 6px 10px;
  font-weight: 700;
  color: var(--quote-navy);
  line-height: 1.5;
}
.quote-product-table td {
  font-weight: 500;
}
.quote-th-en {
  /* [2026-08-30, 27차] "박스 안 품명/규격 등 영어 글씨 너무 작아서 안 보임 - 다른 글씨랑 비슷하게" 요청 -
     9px → 15px(옆 한글 라벨(0.8rem≈12.8px)과 비슷한 눈에 띄는 크기로) */
  display: block;
  height: 15px;
  margin: 4px auto 0;
  opacity: 0.9;
}
.quote-section-divider td {
  background: rgba(24, 42, 67, 0.9);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
  padding: 6px;
}
.quote-empty-msg {
  text-align: center;
  color: var(--text-400);
  padding: 34px 0;
  font-size: 0.85rem;
}

/* [2026-08-30 추가] "1.견적명세 총합계 아래에 박스 추가 - 윗 박스(견적금액 박스)보다 조금 더 두껍게,
   금액은 윗 박스와 라인이 정렬되도록" 요청 - .quote-offer-price-box와 동일한 좌우 padding(14px 18px)·
   flex 구조(라벨 좌측/금액 우측, space-between)를 그대로 맞춰서 금액 열의 오른쪽 끝이 정확히 같은
   위치에 정렬되게 하고, 테두리는 점선 1.5px 대신 실선 2px + 옅은 배경을 넣어 더 강조되어 보이도록 함.
   [2026-08-30 재수정] 박스 아래에 안내문구(.quote-maint-summary-note)가 추가되면서, "제품 미선택시
   출력에서 안 보이게" 처리 대상이 박스 하나가 아니라 박스+문구 세트가 됨 - 이 둘을 함께 감싸는 바깥
   래퍼 .quote-maint-summary-wrap을 신규로 두고, 빈 상태(.quote-maint-summary-empty) 클래스는 이제
   박스가 아니라 이 래퍼에 매김(화면에서는 흐리게 자리만 남기고, 인쇄/PDF 저장에서는 완전히 숨김 -
   아래 @media print 및 exportMultiSheetPdf 쪽 처리와 세트). */
.quote-maint-summary-wrap {
  margin-top: 10px;
  margin-bottom: 6px;
}
.quote-maint-summary-wrap.quote-maint-summary-empty {
  opacity: 0.5;
}
.quote-maint-summary-box {
  border: 1.5px solid var(--quote-navy);
  border-radius: 4px;
  padding: 14px 18px;
  background: rgba(24, 42, 67, 0.04);
}
/* [2026-08-30 추가] "월납과 연납이 동시에 노출될 수 없음 - 하나만 출력, 존재하지 않을 땐 노출금지" 요청 -
   두 줄(.quote-maint-summary-row) 중 해당하지 않는 쪽은 JS(updateMaintenanceSummaryBox)에서
   .hidden(전역 유틸리티 클래스, display:none) 처리함. */
.quote-maint-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.quote-maint-summary-label {
  font-weight: 800;
  font-size: 1.032rem;
  color: var(--quote-navy);
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.quote-maint-summary-value {
  font-weight: 700;
  font-size: 1.68rem;
  color: var(--quote-navy);
  font-family: 'Noto Serif KR Quote', Georgia, serif;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* [2026-08-30 추가] "박스 아래에 문구 추가... 한줄로 정렬" 요청 - 박스 바로 아래, 한 줄로 고정되는
   작은 안내문구(면책 문구). 표 본문보다 작고 옅은 색으로 처리해서 박스 안 금액에 시선이 먼저 가도록 함. */
.quote-maint-summary-note {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-600);
  text-align: center;
  white-space: nowrap;
}

.quote-offer-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 1px solid var(--quote-gold-line);
  padding: 14px 20px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
}
.quote-offer-price-box::before,
.quote-offer-price-box::after {
  content: '';
  position: absolute;
  top: 5px; bottom: 5px;
  width: 1px;
  background: var(--quote-gold-line);
}
.quote-offer-price-box::before { left: 5px; }
.quote-offer-price-box::after { right: 5px; }
/* [2026-08-30, 28차] "견적금액 / OFFER PRICE 와 일금···원정 이 2줄로 나오는데 한줄로 정렬" 요청 -
   기존엔 라벨(.quote-offer-price-label)과 금액 한글표기(.quote-offer-price-words)가 각각 div로
   위아래 두 줄로 쌓여 있었음 - 한 줄에 나란히(베이스라인 정렬) 붙여 쓰도록 flex row로 바꾸고, 함께
   "크기도 조금 더 크게" 요청에 맞춰 금액 한글표기 글자 크기도 키움. */
.quote-offer-price-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 20px;   /* [2026-08-30, 30차] "견적금액/OFFER PRICE 하고 금액(한글표기) 간격 지금보다 2배로 멀리" - 10px → 20px */
  flex-wrap: nowrap;
}
.quote-offer-price-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--quote-navy);
  white-space: nowrap;
  flex: 0 0 auto;
}
.quote-offer-price-label .q-en {
  font-family: 'EB Garamond Quote', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--quote-gold);
  margin-left: 3px;
  letter-spacing: 0.02em;
}
.quote-offer-price-words {
  /* [2026-08-30, 29차] "글씨 더 150% 크게" 요청 - 0.9rem → 1.35rem(150%) 확대. 커진 글자가 오른쪽
     금액 숫자(.quote-offer-price-value)와 겹쳐 보이던 원인은 이 요소에 flex-shrink 기본값(1)이 남아있어
     공간이 부족하면 박스 자체는 좁아지는데 안의 글자(white-space:nowrap)는 줄어들지 않아 밖으로
     삐져나왔기 때문 - flex-shrink:0으로 고정해서 항상 글자 실제 너비만큼 자기 자리를 확보하도록 함. */
  font-size: 1.35rem;   /* [29차] 0.9rem → 1.35rem(150%) 확대 */
  font-weight: 600;
  color: var(--text-600);
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;   /* [29차] 겹침 방지 - 박스가 좁아져도 글자 너비만큼은 항상 확보 */
}
.quote-offer-price-value {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--quote-navy);
  font-family: 'Noto Serif KR Quote', Georgia, 'Times New Roman', serif;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* [2026-08-30, 25차] "N. 한글제목 / ENGLISH" 형태의 섹션 제목 네 곳(견적명세/견적조건/특이사항/제품 도입
   진행 방법) 전부 이 하나의 마크업/클래스로 통일함(이전엔 .quote-desc-title 하나 + .quote-terms-title
   3곳 재사용으로 나뉘어 있었음). 참고 디자인처럼 한글 제목 뒤에 옅은 골드 이탤릭 영문 소제목을 붙이고,
   오른쪽에 옅은 선을 채워 제목 줄을 시각적으로 마무리함. "OFFER DESCRIPTION"/"TERMS OF ESTIMATE" 두
   문구는 사장님이 주신 벡터 파일 세트에 없어서(표 헤더·조건 라벨용 벡터만 있었음) 같은 느낌의 이탤릭
   서체(EB Garamond, 역시 프로젝트에 직접 포함해 네트워크 의존 없음)로 직접 타이핑함 - 나머지 두 섹션
   (특이사항/제품 도입 진행 방법)의 영문 소제목도 통일감을 위해 같은 서체로 맞춤. */
.quote-sec-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 10px;
  flex-wrap: nowrap;
}
/* [2026-08-30, 27차] "1. 견적명세" 등 제목이 실제 화면에서 "견적명 / 세"처럼 글자 중간에서 줄바꿈되던
   버그 수정 - 한글은 기본적으로 어느 글자 사이에서나 줄바꿈이 허용되는데(word-break 기본값), 오른쪽의
   채움선(.qst-fill, flex:1)이 남는 공간을 다 차지하면서 제목 쪽 여유 폭이 좁아져 이 기본 동작 때문에
   글자가 잘려 보였음 - 제목 부분(번호/한글/슬래시/영문)은 절대 줄바꿈되지 않도록 고정하고, 폭이 부족한
   경우 채움선 쪽이 먼저 줄어들도록 함. */
.quote-sec-title .qst-num,
.quote-sec-title .qst-kr {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--quote-navy);
  white-space: nowrap;
}
.quote-sec-title .qst-slash { color: #C7BFA9; white-space: nowrap; }
.quote-sec-title .qst-en {
  font-family: 'EB Garamond Quote', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--quote-gold);
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.quote-sec-title .qst-fill { flex: 1; height: 1px; background: var(--quote-hair); }

.quote-terms-section { margin-top: 6px; }
.quote-terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.quote-terms-table td {
  border-bottom: 1px solid var(--quote-hair);
  padding: 10px 12px;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: middle;
}
.quote-terms-table tr:last-child td { border-bottom: none; }
/* [2026-08-30, 28차] "①납품기일/지급조건/인도장소/제품보증/견적유효기간 하단 영어 글씨 너무 작고
   정렬이 안맞음, 위 글씨와 가운데 정렬" 요청 - 라벨 열 전체를 가운데 정렬로 바꾸고(한글 라벨과 그
   아래 영문 벡터 이미지가 같은 가운데 축에 맞춰지도록), 영문 벡터 이미지 크기도 키움. */
.quote-terms-table .term-label {
  width: 30%;
  color: var(--quote-navy);
  background: transparent;
  text-align: center;
}
.quote-terms-table .term-label .tl-kr {
  font-weight: 700;
  font-size: 0.88rem;
  display: block;
}
.quote-terms-table .term-label .tl-en {
  display: block;
  height: 18px;   /* [28차] 14px → 18px 확대 */
  margin: 5px auto 0;   /* [28차] 가운데 정렬(block 이미지는 text-align이 아니라 margin auto로 정렬됨) */
  opacity: 0.85;
}

.quote-etc-notes-section { margin-top: 4px; }
.quote-etc-notes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.quote-etc-notes-table td {
  border-bottom: 1px solid var(--quote-hair);
  padding: 8px 10px;
  font-weight: 500;
  line-height: 1.6;
}
.quote-etc-notes-table td:first-child {
  text-align: center;
  color: var(--quote-navy);
  font-weight: 700;
}

.quote-adopt-section { margin-top: 4px; }

/* [2026-08-30 되돌림, 25차에서 색상만 새 팔레트로 맞춤] 사장님이 "하단 정보는 표기 처음 상태가 더
   깔끔한거 같아"라고 하셔서 감사 인사말/카드 없이 작은 텍스트 형태를 유지함 - 색만 새 남색/골드 톤에
   맞춰 옅게 조정. */
.quote-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--quote-hair);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-600);
  text-align: center;
  line-height: 1.7;
}

/* 오른쪽 세로 탭 + 왼쪽으로 열리는 서랍 패널 - 서랍은 종이 위에 윗장처럼 겹쳐서 나타나고
   문서(quote-doc-area) 너비는 서랍이 열려도 줄어들지 않음(서랍을 flex 흐름에서 빼고 절대좌표로 겹침) */
.quote-drawer-tabs-wrap {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  flex: 0 0 auto;
  margin-left: 12px;
  z-index: 6;
}
.quote-side-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  z-index: 2;
}
.quote-side-tab {
  padding: 14px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy-800);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.quote-side-tab:hover { border-color: var(--teal-500); }
.quote-side-tab.active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

.quote-drawer {
  position: absolute;
  top: 0;
  right: 100%; /* 탭 영역의 왼쪽 끝에 오른쪽 끝이 붙어서, 폭이 늘어날수록 종이 쪽으로(왼쪽으로) 펼쳐짐 */
  width: 0;
  overflow: hidden;
  transition: width .38s cubic-bezier(0.3, 0.7, 0.3, 1);
  z-index: 1;
  background: #FBF9F4;
  border: 1px solid #E7E0D0;
  box-shadow: -14px 0 32px rgba(20, 33, 58, 0.18);
}
/* [2026-09-18 수정] 고객정보 입력칸(특히 이메일)이 좁아서 확인이 어렵다는 지적에 맞춰 드로어 폭을
   살짝 넓힘(320px -> 348px). 아래 860px/480px 이하 반응형 값은 화면이 좁을 때 전용이라 그대로 둠. */
.quote-drawer.open { width: 348px; }
.quote-drawer-inner {
  width: 348px;
  padding: 16px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.quote-drawer-panel { display: none; }
.quote-drawer-panel.active { display: block; }
.quote-drawer-panel .field { margin-bottom: 12px; }
.quote-drawer-panel .field label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-600);
  margin-bottom: 4px;
  font-weight: 700;
}
.quote-drawer-panel .field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
}

.quote-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.quote-product-box {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--blue-tint-soft);
  padding: 12px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-800);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.quote-product-box:hover { border-color: var(--teal-500); }
.quote-product-box:active { transform: scale(0.97); }
/* [2026-09-11] 고른 항목 표시를 선택상자(.quote-select-box)와 똑같이 맞춤 - 예전에는 제품상자만
   골라도 겉모습이 그대로여서, 같은 패널 안에서 어떤 건 색이 바뀌고 어떤 건 안 바뀌어 헷갈렸음 */
.quote-product-box.selected {
  border-color: var(--navy-800);
  background: var(--navy-800);
  color: #fff;
}
.quote-product-flying {
  position: fixed;
  z-index: 999;
  pointer-events: none;
}
.quote-remove-row-btn {
  border: none;
  background: transparent;
  color: var(--danger);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  /* [2026-08-29] .quote-paper-doc가 이제 계약서들과 같은 A4 고정 규격(794px)이 되어, 화면이 좁아져도
     줄어들지 않고 그대로 유지됨(tlc-page-sheet 등도 동일한 방식 - 좁은 화면에서는 좌우로 스크롤해서 봄).
     예전의 padding 축소 규칙은 가변 너비 카드형 레이아웃 때만 의미가 있었으므로 제거함. */
  .quote-drawer.open { width: 260px; }
  .quote-drawer-inner { width: 260px; }
}
@media (max-width: 480px) {
  .quote-drawer.open { width: 82vw; }
  .quote-drawer-inner { width: 82vw; }
}

/* ---------------- 모듈선택/기타선택: 깔끔한 박스형 선택 (1열 정렬) ---------------- */
.quote-select-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.quote-select-box {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  background: var(--blue-tint-soft);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-800);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.quote-select-box:hover { border-color: var(--teal-500); }
.quote-select-box:active { transform: scale(0.97); }
.quote-select-box.selected {
  border-color: var(--navy-800);
  background: var(--navy-800);
  color: #fff;
}
.quote-select-box.selected .quote-select-box-name,
.quote-select-box.selected .quote-select-box-price { color: #fff; }
.quote-select-box-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--navy-800);
  margin-bottom: 4px;
}
.quote-select-box-price {
  font-size: 0.76rem;
  color: var(--text-600);
}
.quote-select-box .quoteEtcPrice {
  width: 100%;
  margin: 6px 0 2px;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  text-align: center;
  box-sizing: border-box;
}
.quote-sub-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.kaerab-sub-count {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
  color: inherit;
}

/* 무거운 물체가 붕 떠올랐다가 쿵 떨어지며 흔들리는 연출용 클론 + 먼지 파티클 */
.quote-heavy-flying {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  box-sizing: border-box;
}
.quote-dust-particle {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(150, 135, 110, 0.6); /* [51차] 단색 */
  pointer-events: none;
  z-index: 998;
}

/* ---------------- 설정 > 가격제안서 제품등록 (제품 > 모듈/기타서비스 계층 관리) ---------------- */
.qp-product-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: var(--nz-s2);
  overflow: hidden;
}
.qp-product-head {
  display: flex;
  align-items: center;
  gap: var(--nz-s2);
  padding: var(--nz-s2) var(--nz-s3);
  background: var(--blue-tint-soft);
}
/* 세무대리 제품등록 - 제품명 아래 "가격제안서 규격" 입력칸 2개(1번=기본, 2번=추가) */
.tap-spec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 10px;
  background: var(--blue-tint-soft);
}
.tap-spec-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-600);
  white-space: nowrap;
}
.tap-spec-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 0.85rem;
}
.qp-expand-btn {
  border: none;
  background: transparent;
  font-size: var(--nz-fs4);
  cursor: pointer;
  color: var(--navy-800);
  width: 22px;
}
.qp-product-body {
  padding: var(--nz-s3) var(--nz-s4);
  border-top: 1px solid var(--border);
  background: #fff;
}
.qp-section-label {
  font-size: var(--nz-fs2);
  font-weight: 800;
  color: var(--teal-600);
  margin-bottom: var(--nz-s2);
}
.qp-mini-table th, .qp-mini-table td { font-size: var(--nz-fs2); padding: var(--nz-s2); }
.qp-mini-table input[type="text"],
.qp-mini-table input[type="number"] {
  width: 100%;
  padding: var(--nz-s2) var(--nz-s2);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
}
.qp-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nz-s2);
  align-items: center;
  margin-top: var(--nz-s2);
}
.qp-add-row input[type="text"],
.qp-add-row input[type="number"] {
  padding: var(--nz-s2) var(--nz-s2);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  width: 130px;
}
.qp-check {
  display: flex;
  align-items: center;
  gap: var(--nz-s1);
  font-size: var(--nz-fs2);
  color: var(--text-600);
}

/* ---------------- 고객정보: 레이저로 새기는 듯한 텍스트 등장 애니메이션 ---------------- */
@keyframes laserEngrave {
  0%   { opacity: 0; color: #fff; text-shadow: 0 0 6px #fff, 0 0 16px var(--teal-400), 0 0 28px var(--teal-500); transform: scale(1.3); }
  35%  { opacity: 1; color: var(--teal-400); text-shadow: 0 0 10px var(--teal-400), 0 0 20px var(--teal-500); transform: scale(1.1); }
  70%  { opacity: 1; color: var(--teal-600); text-shadow: 0 0 6px rgba(14, 148, 136, 0.5); transform: scale(1.02); }
  100% { opacity: 1; color: var(--navy-800); text-shadow: none; transform: scale(1); }
}
.laser-char {
  display: inline-block;
  opacity: 0;
  animation: laserEngrave 0.7s ease-out forwards;
}

/* ---------------- 가격제안서: 인쇄 미리보기 / PDF 저장 시 특정 영역만 인쇄 ---------------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body.print-scoped * { visibility: hidden; }
  body.print-scoped .print-area,
  body.print-scoped .print-area * { visibility: visible; }
  /* .quote-page가 position:relative라서 print-area의 절대좌표가 페이지 진짜 시작점이 아니라
     이 요소 기준으로 잡혀 시작지점이 어긋나고 내용이 잘리던 문제 - 인쇄시에는 위치 기준을 제거함 */
  body.print-scoped .quote-page,
  body.print-scoped .quote-doc-area,
  body.print-scoped .quote-stage,
  body.print-scoped .content,
  body.print-scoped .modal-overlay,
  body.print-scoped .modal-box {
    position: static !important;
  }
  body.print-scoped .quote-drawer-tabs-wrap,
  body.print-scoped .quote-toolbar {
    display: none !important;
  }
  /* 인쇄 대상 문서는 용지 맨 위에서 시작해야 함.
     예전에는 position:absolute; top:0 으로 억지로 끌어올렸는데, 숨긴 요소들이 자리를 차지하는 문제가 근본원인이어서
     제대로 고쳐지지 않았음(실측 89.8mm 지점 시작). 이제는 인쇄 직전에 나머지 요소를 실제로 빼버리므로 이 억지 보정이 필요없음 */
  body.print-scoped .print-area {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
  }
  /* 세무사랑Pro/기타서비스/일반계약서 등 여러 페이지로 이어지는 계약서 전용 인쇄 영역 - .print-area와 달리 position:absolute를 쓰지 않음
     (position:absolute가 걸리면 내부의 여러 페이지가 자연스럽게 나뉘지 못하고 한 페이지로 뭉개지는 문제가 있어 이 문서들에는 부적합했음).
     .tlc-page/.tlc-doc-area 등 조상 요소는 이미 position:static !important 처리되어 있어서 absolute 없이도 시작지점이 어긋나지 않음 */
  body.print-scoped .print-area-doc,
  body.print-scoped .print-area-doc * { visibility: visible; }
  body.print-scoped .print-area-doc {
    width: 100%;
    max-width: none !important;
  }
  /* 삭제(×) 버튼 칸은 화면에서만 필요하고 인쇄/PDF 저장에는 나오면 안 됨 */
  body.print-scoped .quote-product-table th:last-child,
  body.print-scoped .quote-product-table td:last-child {
    display: none;
  }
  /* [2026-08-30 추가 → 수정] 제품(모듈)이 하나도 담기지 않은(혹은 월납·연납 어느 쪽에도 해당하지 않는)
     예상 유지보수료 박스+안내문구는 화면 편집 중에만 자리를 보여주는 것이고, 실제 인쇄에는 나오면 안 됨
     (PDF 저장 경로는 exportMultiSheetPdf의 emptyMaintBoxes 처리로 별도 대응함 - window.print()로 인쇄할
     때는 이 규칙이 적용됨). 박스 아래 안내문구까지 함께 감싸는 바깥 래퍼(.quote-maint-summary-wrap)
     기준으로 숨김 처리하도록 선택자를 변경함. */
  body.print-scoped .quote-maint-summary-wrap.quote-maint-summary-empty {
    display: none;
  }
  /* 견적명세표가 여러 페이지로 넘어갈 때, 브라우저가 thead/tfoot을 페이지마다 자동으로 반복 출력하는 기본 동작을 막음
     (품명/규격 등 헤더는 맨 처음 한 번만, 총 합계는 맨 마지막 한 번만 나오도록) - 실제 크로미움 인쇄엔진으로 재현/검증완료 */
  .quote-product-table thead,
  .quote-product-table tfoot {
    display: table-row-group;
  }
  /* [2026-08-29 신규] .quote-page-sheet가 이제 화면용 종이 질감 배경/그림자/테두리를 갖게 되어(위 CSS 참고),
     실제 프린터로 출력할 때(이 인쇄 경로 - "미리보기"/"출력하기" 버튼, window.print() 방식)까지 그 장식이
     그대로 나가면 잉크 낭비 + 실제 용지 위에 부자연스러운 회색 배경이 찍히는 문제가 생김. PDF 저장(서버에
     저장되는 파일)은 이 인쇄 경로가 아니라 exportMultiSheetPdf의 화면 캡처(html2canvas) 방식이라 이 규칙의
     영향을 받지 않고 종이 질감 배경이 그대로 살아있음 - 여기서는 "실물 프린터로 찍는 경우"만 흰 배경으로
     되돌림(계약서들의 .tlc-page-sheet 인쇄 규칙과 동일한 방식) */
  body.print-scoped .quote-page-sheet {
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    width: auto !important;
    min-height: auto !important;
  }
  /* [2026-08-30, 25차 신규] 이중 테두리 액자 + 모서리 장식도 위 규칙과 같은 이유(잉크 절약)로 실물
     프린터 출력에서는 숨김 - PDF 저장(exportMultiSheetPdf, html2canvas 캡처 방식)에는 영향 없음 */
  body.print-scoped .quote-frame,
  body.print-scoped .quote-corner {
    display: none !important;
  }
  body.print-scoped .tlc-drawer-tabs-wrap,
  body.print-scoped .tlc-toolbar {
    display: none !important;
  }
  body.print-scoped .tlc-page,
  body.print-scoped .tlc-doc-area {
    position: static !important;
  }
  /* 세무사랑Pro 계약서 3페이지가 인쇄시 각각 별도 용지로 나뉘도록 처리.
     주의: 화면용 min-height(1123px = A4 297mm 전체)를 인쇄에서 반드시 풀어줘야 함.
     용지 여백 12mm를 빼면 실제 인쇄 가능한 높이는 273mm뿐이라, 297mm짜리 상자는 24mm가 무조건 다음 장으로 넘어가
     "한 줄짜리 자투리 페이지"가 시트마다 생기고 총 페이지가 두 배가 됨(실제 출력물 측정으로 확인: 3페이지 → 6페이지).
     내용 자체는 242mm 정도라 상자 높이만 풀어주면 한 장에 정상적으로 들어감 - 일반계약서/기타서비스에는 이미 적용돼 있던 규칙 */
  .tlc-page-sheet {
    page-break-after: always;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    width: auto !important;
    min-height: auto !important;
  }
  .tlc-page-sheet:last-child { page-break-after: auto; }
  .tlc-drawer-tabs-wrap, .tlc-toolbar { display: none !important; }
}

/* ---------------- 가격제안서 목록: 검색/필터 + 진행상황별 칸반보드 ---------------- */
.quote-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.quote-filter-row input[type="date"],
.quote-filter-row input[type="text"],
.quote-filter-row select {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
}

.quote-kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: start;
}
.quote-kanban-col {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  min-height: 120px;
}
.quote-kanban-col-title {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--navy-800);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qkc-count {
  background: var(--blue-tint-soft);
  color: var(--navy-800);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 800;
}
.qkc-empty {
  color: var(--text-400);
  font-size: 0.78rem;
  text-align: center;
  padding: 14px 0;
}
.qkc-more {
  color: var(--text-400);
  font-size: 0.72rem;
  text-align: center;
  margin-top: 4px;
}

.quote-kanban-box {
  background: var(--blue-tint-soft);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.quote-kanban-box:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.quote-kanban-box:last-child { margin-bottom: 0; }
.qkb-company { font-weight: 800; font-size: 0.85rem; color: var(--navy-800); }
.qkb-phone { font-size: 0.76rem; color: var(--text-600); margin-top: 2px; }
.qkb-date { font-size: 0.72rem; color: var(--text-400); margin-top: 4px; }
.qkb-total { font-weight: 800; font-size: 0.82rem; color: var(--teal-600); margin-top: 4px; }

/* 진행상황 유지 경과일에 따라 점점 붉게 - 2/7/10/14일 */
.quote-kanban-box.aging-2 { background: #FDECEC; border-color: #F3B8B8; }
.quote-kanban-box.aging-7 { background: #FBD3D3; border-color: #EE9797; }
.quote-kanban-box.aging-10 { background: #F6A8A8; border-color: #E56A6A; }
.quote-kanban-box.aging-14 { background: #EE7373; border-color: #D94747; }
.quote-kanban-box.aging-14 .qkb-company,
.quote-kanban-box.aging-14 .qkb-phone,
.quote-kanban-box.aging-14 .qkb-date { color: #fff; }

.quote-schedule-item { border-left: 3px solid var(--teal-500); }
.quote-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--teal-600);
  background: var(--blue-tint-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

.quote-print-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.quote-print-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.quote-print-table th, .quote-print-table td { border: 1px solid #333; padding: 8px; font-size: 0.85rem; }

/* ---------------- 대시보드: 내 가격제안서 현황 (여백 최소화, 화면 꽉 차게, 컬럼은 박스 처리 없음) ---------------- */
.myqb-card { padding: 16px 12px; }
.myqb-title { text-align: center; margin-top: 0; margin-bottom: 12px; }
.myqb-board {
  /* 상태 개수가 몇 개든 항상 한 줄에 들어오도록 - 칸 수를 숫자로 고정하지 않고 자동으로 가로 배치함
     (예전에는 7칸으로 고정돼 있어서 상태가 8개가 되자 마지막 칸이 다음 줄로 밀려났음) */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  gap: 4px;
}
.myqb-col {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 0 8px;
}
.myqb-col:last-child { border-right: none; }
.myqb-col-title { text-align: center; justify-content: center; gap: 6px; }

.myqb-col .quote-kanban-box {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--teal-500);
  border-radius: 0;
  padding: 8px 4px 8px 8px;
  text-align: left;
}
.myqb-col .quote-kanban-box:last-child { border-bottom: none; }
.myqb-col .quote-kanban-box:hover { background: rgba(14, 148, 136, 0.06); transform: none; box-shadow: none; }
.myqb-col .quote-kanban-box.aging-2 { background: transparent; border-left-color: #E9A6A6; }
.myqb-col .quote-kanban-box.aging-7 { background: transparent; border-left-color: #E07C7C; }
.myqb-col .quote-kanban-box.aging-10 { background: transparent; border-left-color: #D65656; }
.myqb-col .quote-kanban-box.aging-14 { background: rgba(217, 71, 71, 0.08); border-left-color: #C93737; }
.myqb-col .quote-kanban-box.aging-14 .qkb-company,
.myqb-col .quote-kanban-box.aging-14 .qkb-phone,
.myqb-col .quote-kanban-box.aging-14 .qkb-date { color: var(--text-900); }

/* 좁은 화면에서도 한 줄을 유지하되 칸 여백만 줄임(예전에는 4칸·2칸으로 쪼개져 여러 줄이 됐음) */
@media (max-width: 960px) {
  .myqb-col { padding: 0 3px; }
  .myqb-col .quote-kanban-box { padding: 6px 2px 6px 5px; }
}
@media (max-width: 560px) {
  .myqb-board { gap: 2px; }
  .myqb-col { padding: 0 2px; }
}

/* ---------------- 가격제안서: 유지보수료 표기 전용 행 + 버튼 선택 상태 ---------------- */
.quote-row-excluded { opacity: 0.65; }
.quote-row-excluded td { font-style: italic; }
.quote-excluded-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  font-style: normal;
  color: var(--text-600);
  background: var(--blue-tint-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
#maintIncludeBtn.selected, #maintDisplayOnlyBtn.selected {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

/* ---------------- 세무사랑Pro 계약서 작성 (tlc- 네임스페이스, 가격제안서와 완전히 독립) ---------------- */
.tlc-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}
/* 지금 작성 중인 계약서 종류를 한눈에 알 수 있도록 - 메인 메뉴(상단 네비게이션)와 같은 녹색으로 강조 */
/* 신규작성/추가작성처럼 "지금 이 흐름으로 진행 중"임을 표시하는 공용 상태 - 처음엔 흰색 기본 버튼이었다가
   눌러서 진행을 시작하면 이 클래스가 붙어 초록색으로 바뀜(계약서 종류 선택 버튼과 같은 색 체계) */
.btn.selected {
  background: var(--teal-500);
  border-color: var(--teal-600);
  color: var(--navy-900);
  font-weight: 800;
}
.tlc-toolbar .btn.active {
  background: var(--teal-500);
  border-color: var(--teal-600);
  color: var(--navy-900);
  font-weight: 800;
}
.tlc-stage-empty {
  color: var(--text-400);
  font-size: 0.9rem;
  padding: 60px 0;
  text-align: center;
}
.tlc-page {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.tlc-doc-area {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}
/* A4 실제 비율(210mm x 297mm)을 96dpi 기준 픽셀로 그대로 사용 - 인쇄시 화면과 동일하게 보이도록 함.
   문서는 3페이지(tlc-page-sheet)가 세로로 쌓이는 구조이며, 각 페이지가 독립된 A4 용지 한 장임 */
.tlc-paper-doc {
  width: 794px;
  box-sizing: border-box;
}
.tlc-page-sheet {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 33, 58, 0.22), var(--shadow);
  border: 1px solid #E2E6EC;
  padding: 40px 48px 60px;
  box-sizing: border-box;
  margin-bottom: 24px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-900);
  position: relative;
}
.tlc-page-sheet:last-child { margin-bottom: 0; }
/* 원본 계약서 특유의 "전체 내용을 감싸는 굵은 테두리 박스" - 제목부터 서명란까지 전부 하나의 박스 안에 들어있음.
   [2026-08-28 재수정] 예전엔 2·3페이지(.tlc-outer-box)를 "항상 페이지 상단~하단까지 고정 크기"인 절대위치
   빈 박스(콘텐츠는 그 위에 정상 흐름대로 따로 배치)로 만들어뒀었는데, 사장님이 주신 원본 PDF(내용 없는 버전)를
   직접 실측해보니 원본조차 1·2·3페이지 박스 높이가 서로 다 다르고(그 페이지 실제 내용이 끝나는 지점에서
   박스가 끝남), 심지어 2페이지와 3페이지도 서로 다름 — "페이지마다 고정된 하나의 크기"라는 이전 가정 자체가
   틀렸던 것. 그 잘못된 가정 위에서 1페이지를 "2·3페이지와 똑같은 995px"로 강제로 맞췄던 게 바로 이번에
   사장님이 다시 지적하신 문제의 원인이었음.
   그래서 2·3페이지도 1페이지처럼 "실제로 내용을 감싸는 진짜 테두리 박스"(.tlc-outer-box-wrap, border를 가진
   일반 블록 요소)로 통일함 — 페이지마다 그 페이지의 실제 내용 분량만큼만 박스가 자연스럽게 감싸고 끝남
   (2·3페이지 내용은 고정된 약관 문구라 매번 결과가 같음). 실측 결과 기존 방식 대비 2페이지 약 300px,
   3페이지 약 230px씩 박스 안쪽에 남던 빈 공간이 사라짐. 각 페이지 안에서 내용이 넘치면(향후 내용이 추가되는
   경우) 강제로 잘리지 않고 페이지 밖으로 자연스럽게 흘러넘쳐서 다음 페이지로 이어짐 — 이건 정상 동작.
   (.tlc-outer-box는 더 이상 마크업에서 쓰이지 않지만, app.js의 캡처 직전 안전장치 코드가 이 클래스를
   찾아서 처리하는 부분이 있어 혹시 몰라 규칙만 남겨둠 - 해당 코드는 매치되는 요소가 없으면 아무 일도 안 함.) */
.tlc-outer-box-wrap {
  border: 1.6px solid #1a1a1a;
  padding: 6px 14px 2px;
  margin: 12px 0 6px; /* 상단 12px: 원본 대비 박스 시작 위치 실측 비교로 조정된 값(1페이지 기준, 2·3페이지에도 동일 적용) */
}
/* 1페이지(.tlc-obw-cover)만 - [회원정보]부터 [설치 및 A/S]/[유지보수료 입금계좌] 표까지 하나의 박스 안에
   들어가는데, 내용이 매우 짧은 극단적인 경우에도 박스가 지나치게 작아 보이지 않도록 최소 높이를 둠(설정 >
   인쇄물 조정 > 세무사랑Pro 계약서에서 사장님이 직접 조절 가능, 기본 995px - 실측상 일반적인 내용 분량일 땐
   이 최소값에 거의 닿지 않고 자연스럽게 채워짐). 2·3페이지는 내용(고정 약관 문구)이 항상 충분히 길어서
   최소 높이가 필요 없으므로 이 모디파이어를 붙이지 않음. */
.tlc-outer-box-wrap.tlc-obw-cover {
  display: flex;
  flex-direction: column;
  min-height: var(--tlc-box-min-height, 995px);
}
.tlc-outer-box-wrap .tlc-doc-title { margin: 2px 0 16px; }
.tlc-outer-box-wrap.tlc-obw-cover > .tlc-install-table { margin-top: auto; }
.tlc-page-footer {
  position: absolute;
  bottom: 20px;
  left: 48px;
  right: 48px;
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-400);
}
.tlc-doc-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy-800);
  text-align: center;
  margin: 6px 0 16px;
}
.tlc-section-title {
  font-weight: 800;
  color: var(--navy-800);
  background: var(--blue-tint-soft);
  padding: 2px 8px;
  margin: 4px 0 2px;
  border-radius: 4px;
  font-size: 0.765rem;
}
.tlc-info-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 1px;
}
.tlc-info-table th, .tlc-info-table td,
.tlc-module-table th, .tlc-module-table td {
  border: 1px solid var(--navy-800);
  padding: 1px 8px;
  font-size: 0.8rem;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}
.tlc-info-table th {
  background: transparent;
  font-weight: 700;
  width: 130px;
  white-space: nowrap;
  text-align: center; /* 라벨(제목) 가운데 정렬 */
}
/* [회원정보]/[설치관련 정보] 표의 값(td)도 라벨과 함께 가운데 정렬 (모듈표/설치A·S표는 이미 각자 규칙으로 가운데 정렬됨) */
.tlc-info-table td {
  text-align: center;
}
.tlc-install-label {
  text-align: center;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.5;
  width: 110px;
  white-space: normal;
}
/* [모듈관련 정보] 표에 담긴 항목(세무사랑Pro 기본/추가)을 화면에서 바로 뺄 수 있는 삭제(×) 표시.
   박스로 된 별도 칸이 아니라 금액 옆에 작게 붙는 형태로 표기하고, 화면 확인/작업용이라
   인쇄·PDF 저장에는 나오면 안 되므로 print-scoped에서 숨김(신규작성/추가작성 공용) */
.tlc-row-del-btn {
  display: inline-block;
  border: none;
  background: none;
  color: #c0392b;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 6px;
  margin: 0;
  vertical-align: middle;
}
.tlc-row-del-btn:hover { color: #921f1f; }
body.print-scoped .tlc-module-table .tlc-row-del-btn { display: none; }

/* 설치 및 A/S 표: "지정점명/담당자/전화번호/팩스번호" 라벨칸이 값칸과 동일한 너비를 차지해서
   "뉴젠솔루션중부호남 광주지사" 같은 값이 두 줄로 넘어가는 문제 - 라벨칸 너비를 30%가량 줄여서 값칸에 공간을 더 줌
   (신규작성/추가작성 모두 같은 표를 재사용하므로 한 번의 수정으로 둘 다 적용됨) */
.tlc-install-table th:not(.tlc-install-label) {
  width: 91px;
}
/* 지정점명/담당자/전화번호/팩스번호/유지보수료입금계좌 값칸을 가운데 정렬 */
.tlc-install-table td {
  text-align: center;
}
.tlc-module-table { width: 100%; border-collapse: collapse; margin-bottom: 1px; }
.tlc-module-table th { background: transparent; font-weight: 700; text-align: center; }
.tlc-module-table td { text-align: center; }
/* 금액(VAT포함)/합계 금액은 오른쪽 정렬 + 오른쪽 여백을 3칸(3ch)만큼 띄움 */
.tlc-module-table .tlc-amt-cell { text-align: right; padding-right: 3ch; }
.tlc-terms-text p { margin: 0 0 6px; font-size: 0.78rem; line-height: 1.55; }
.tlc-clause-box {
  display: flex;
  gap: 0;
  border: 1px solid var(--navy-800);
  margin-bottom: 2px;
}
.tlc-clause-col {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
}
.tlc-clause-col:first-child { border-right: 1px solid var(--navy-800); }
.tlc-clause-col p { margin: 0 0 2px; font-size: 0.78rem; line-height: 1.28; }
.tlc-clause-col p:last-child { margin-bottom: 0; }
.tlc-consent-table {
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 0.78rem;
  width: 100%;
  table-layout: fixed;
}
.tlc-consent-table td {
  border: 1px solid var(--border);
  padding: 2px 6px;
  overflow-wrap: break-word;
}
.tlc-consent-table td:first-child { font-weight: 700; background: #e3f3ec; width: 34%; }
.tlc-terms-text p.tlc-chapter { font-weight: 800; margin-top: 14px; color: var(--navy-800); text-align: center; }
.tlc-terms-text p.tlc-article { font-weight: 700; margin-top: 8px; }
/* hwp/pdf 원본 대조 결과 2·3페이지 모두 항목간 간격이 좁아서(원본과 동일하게) 둘 다 압축 적용 */
#tlcSheet2 .tlc-terms-text p, #tlcSheet3 .tlc-terms-text p { margin: 0 0 3px; line-height: 1.35; }
#tlcSheet2 .tlc-terms-text p.tlc-chapter, #tlcSheet3 .tlc-terms-text p.tlc-chapter { margin-top: 8px; }
#tlcSheet2 .tlc-terms-text p.tlc-article, #tlcSheet3 .tlc-terms-text p.tlc-article { margin-top: 4px; }
/* 3페이지는 이미 내용이 거의 가득 차 있어(실측 여유 9px) 원래 여백을 유지하고,
   2페이지는 실측 여유가 175px이라 그 안에서 안전하게 여백을 넓혀 고르게 펼침 */
#tlcSheet2 .tlc-terms-text p { margin-bottom: 5px; line-height: 1.50; }
#tlcSheet2 .tlc-terms-text p.tlc-chapter { margin-top: 13px; }
#tlcSheet2 .tlc-terms-text p.tlc-article { margin-top: 7px; }
.tlc-doc-number { text-align: right; font-size: 0.72rem; color: var(--text-600); margin-bottom: -6px; }
.tlc-sign-line { font-size: 0.8rem; margin: 6px 0; }
.tlc-sign-final {
  margin: 5px 0;
  padding: 5px 10px;
  text-align: center;
}
.tlc-sign-final .tlc-sign-line {
  font-size: 0.92rem;
  line-height: 2;
  margin: 0;
}
.tlc-sign-final .tlc-sign-fitline {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: block;
}
.tlc-sign-final .tlc-sign-gap,
.tlc-sign-final .tlc-sign-part {
  display: inline-block;
  border-bottom: 1px solid var(--text-900);
  min-width: 60px;
  text-align: center;
}
.tlc-sign-final .tlc-sign-date { letter-spacing: 2px; }
.tlc-footer-org {
  text-align: right;
  font-size: 0.76rem;
  color: var(--text-400);
  margin-top: 20px;
}
.tlc-doc-placeholder {

  color: var(--text-400);
  font-size: 0.85rem;
  text-align: center;
  padding: 40px 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-top: 20px;
}
.tlc-field-row {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #EEE;
  font-size: 0.85rem;
}
.tlc-field-label {
  flex: 0 0 150px;
  font-weight: 700;
  color: var(--navy-800);
}
.tlc-field-value {
  flex: 1;
  color: var(--text-900);
}

/* 오른쪽 탭 + 서랍 - 가격제안서와 동일하게 문서 위에 겹쳐서(오버레이) 열림, 문서 크기는 줄지 않음 */
.tlc-drawer-tabs-wrap {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  flex: 0 0 auto;
  margin-left: 12px;
  z-index: 6;
}
.tlc-side-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  z-index: 2;
}
.tlc-side-tab {
  padding: 14px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy-800);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tlc-side-tab:hover { border-color: var(--teal-500); }
.tlc-side-tab.active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

.tlc-drawer {
  position: absolute;
  top: 0;
  right: 100%;
  width: 0;
  overflow: hidden;
  transition: width .38s cubic-bezier(0.3, 0.7, 0.3, 1);
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: -14px 0 32px rgba(20, 33, 58, 0.18);
}
.tlc-drawer.open { width: 320px; }
.tlc-drawer-inner {
  width: 320px;
  padding: 16px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.tlc-drawer-panel { display: none; }
.tlc-drawer-panel.active { display: block; }
.tlc-drawer-panel .field { margin-bottom: 12px; }
.tlc-drawer-panel .field label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-600);
  margin-bottom: 4px;
  font-weight: 700;
}
.tlc-drawer-panel .field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
}
/* 전자서명 모달 - 계약서 화면을 가리더라도 크게 표시하되, 아이패드(768px~)에서도 화면을 넘어가지 않도록 vw 기준 상한을 둠 */
.sign-modal-box { max-width: min(880px, 94vw) !important; max-height: 92vh; box-sizing: border-box; }
.sign-modal-box .field { box-sizing: border-box; }
.sign-modal-box h3 { margin-bottom: 18px; }

.sign-section { margin-bottom: 22px; }
.sign-section-title { font-size: 0.9rem; font-weight: 700; color: var(--navy-800); margin-bottom: 10px; }
.sign-section-subtitle { font-size: 0.76rem; font-weight: 400; color: var(--text-400); }

/* 서명자 구분 - 카드형 선택 박스 */
.sign-type-row { display: flex; gap: 12px; }
.sign-type-card {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer;
  font-weight: 700; font-size: 0.95rem; color: var(--text-600); background: #fff;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sign-type-card input { width: 16px; height: 16px; accent-color: var(--teal-600); }
.sign-type-card.selected { border-color: var(--teal-600); background: var(--blue-tint-soft); color: var(--teal-700); }

/* 대리인 정보 입력 박스 */
.sign-modal-agent-fields { padding: 14px 16px; border: 1.5px solid #e0a800; border-radius: 10px; background: #fff8e6; margin-bottom: 0; }
.sign-modal-agent-fields.hidden { display: none; }
.sign-modal-agent-title { font-size: 0.83rem; font-weight: 700; color: #a05a00; margin-bottom: 12px; }
.sign-modal-agent-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sign-modal-agent-row .field { flex: 1 1 140px; margin-bottom: 0; }
.sign-modal-agent-row .field input { box-sizing: border-box; }

.tlc-legal-notice-box.sign-modal-legal-box { max-height: 220px; font-size: 0.79rem; line-height: 1.7; }
.sign-modal-legal-box p { margin: 0 0 12px 0; }

/* 동의사항 - 왼쪽 설명 + 오른쪽 "동의합니다" 체크박스, 여러 줄이어도 오와 열이 맞도록 grid로 정렬 */
.sign-consent-row {
  display: grid; grid-template-columns: 1fr 128px; align-items: center; gap: 14px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 16px;
  margin-bottom: 10px; background: #fafbfd; cursor: pointer; box-sizing: border-box;
}
.sign-consent-row:last-child { margin-bottom: 0; }
.sign-consent-text b { display: block; font-size: 0.86rem; color: var(--navy-800); margin-bottom: 3px; }
.sign-consent-desc { font-size: 0.74rem; color: var(--text-400); line-height: 1.5; }
.sign-consent-check {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 8px;
  font-weight: 700; font-size: 0.82rem; color: var(--text-600); background: #fff;
  transition: border-color .15s ease, background .15s ease, color .15s ease; white-space: nowrap;
}
.sign-consent-check input { width: 16px; height: 16px; accent-color: var(--teal-600); flex-shrink: 0; }
.sign-consent-check.checked { border-color: var(--teal-600); background: var(--blue-tint-soft); color: var(--teal-700); }

.sign-modal-canvas {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 960 / 360;
  border: 2px solid var(--border); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; box-sizing: border-box;
}
/* [Round E, 2026-08-31] 서명 캔버스를 3등분하는 연한 세로 점선 안내선 - 별도 요소로 캔버스 위에 얹어서
   "다시 그리기"(clearRect)를 눌러도 안내선은 지워지지 않게 함(캔버스에 직접 그리면 지우기마다 다시 그려야 함) */
.sign-canvas-wrap { position: relative; }
.sign-canvas-divider {
  position: absolute; top: 6px; bottom: 6px; width: 0;
  border-left: 1px dashed rgba(20, 33, 58, 0.22); pointer-events: none;
}
/* 서명 이미지를 "(서명 또는 인)" 문구 위에 겹쳐서 실제 서명한 것처럼 보이게 함 - 글씨보다 아래로, 20% 더 크게 */
.sign-overlay-wrap { position: relative; display: inline-block; white-space: nowrap; }
.sign-overlay-label { opacity: 0.5; }
/* [2026-09-05] 서명 크기를 계약서 종류와 상관없이 똑같이 맞춤(사장님 요청). 예전에는 3.2em이라
   문서마다 글자 크기가 달라 서명 굵기가 제각각이었음 - 실제로 재보니 세무사랑Pro 47.1px,
   기타서비스/일반계약서 32.6px로 세무사랑Pro가 가장 두꺼웠음. 가장 진한 세무사랑Pro 기준(47px)으로
   통일함. CMS 신청서는 인감칸 크기에 맞춘 별도 규칙(.gen-cms-doc .sign-overlay-img)이 있어 그대로 둠. */
.sign-overlay-img { position: absolute; left: -15px; bottom: -10px; height: 47px; max-width: 220px; object-fit: contain; pointer-events: none; z-index: 2; display: none; }
/* [73차, 사장님 요청] 개인정보 동의 "(고객사) 확인자" 서명은 오른쪽 끝 간인과 겹쳐서 조금만 안쪽(이름 줄 쪽)으로 */
.sign-confirm-wrap .sign-overlay-img { left: -78px; max-width: 130px; }
/* [2026-08-28 신규] 세무사랑Pro 간인(페이지 사이 서명 겹침 표시) - 갑(구매자/고객) 서명 이미지만 사용함
   (을/한국세무사회측은 계약서 본문에 이미 "직인생략"이라고 명시돼 있어 간인도 생략 - 실존 단체의 도장을
   임의로 만들어 넣는 것은 하지 않음). 페이지(.tlc-page-sheet) 하단 경계에 절반만 걸치도록 배치해서,
   PDF 저장 시 페이지가 그 경계에서 잘릴 때 자연스럽게 위/아래 페이지에 반씩 나뉘어 찍히도록 함(같은
   이미지 하나를 걸쳐놓는 방식이라 별도로 반쪽씩 나눌 필요 없이 항상 정확히 이어짐). 전자서명 전에는
   숨겨져 있다가(서명 없이는 간인도 없음) insertSignatureImage()에서 표시됨.
   [2026-08-28 수정] 사장님 요청: (1) 구매자(갑)는 왼쪽, 판매자(을)는 오른쪽에 자리하는 게 원칙 -
   두 자리(-buyer / -seller)로 분리함. 단, 을(한국세무사회) 측은 실제 직인 이미지가 없어서(직인생략)
   -seller 쪽 요소는 항상 자리만 있고 JS에서 절대 이미지를 넣지 않음(실존 단체 도장을 임의로 만드는 것은
   문서위조이므로 이 원칙은 앞으로도 변경 금지). (2) 크기를 기존 대비 가로/세로 2배로 키움(60px -> 120px)
   - 같은 서명 이미지를 확대해서 그리는 것이라 필체 굵기도 함께 두꺼워 보임. bottom도 절반(-60px)으로
   맞춰서 페이지 경계에 정확히 절반씩 걸치는 동작은 그대로 유지됨.
   [2026-08-28 재수정] 처음엔 -buyer를 right:160px로 뒀는데, -seller(right:30px)와 함께 결국 둘 다
   페이지 오른쪽에 몰려있는 모양이 되어 "구매자가 왼쪽에 온다"는 원칙이 실제로는 안 보였음(사장님 지적:
   "구매자 하단 간인이 지금도 오른쪽에서 나옴"). -buyer를 left 기준으로 바꿔서 실제로 페이지 왼쪽-중간에
   오도록 고침 - 이제 -buyer(왼쪽)와 -seller(오른쪽)가 페이지 좌우로 분명하게 나뉘어 배치됨. */
.tlc-ganin-mark {
  position: absolute;
  bottom: -60px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0.88;
  transform: rotate(-4deg);
  z-index: 6;
  pointer-events: none;
  display: none;
}
/* [2026-09-11] 세무사랑Pro 을(한국세무사회) 간인 - 도장 이미지를 만들지 않고 계약서 원문에 적힌
   "한국세무사회장(직인생략)" 글자를 검은 테두리 박스로 표기함. 갑 서명과 세로 중앙이 맞도록 같은
   높이(120px) 자리를 쓰되, 글자가 들어가야 해서 가로만 넓게 잡음. */
/* [2026-09-11] 을 간인 전용 크기 규칙은 없앰 - 갑(.tlc-ganin-mark)과 완전히 같은 크기·같은 자리를 씀.
   을만 크기를 따로 주던 것이 "갑은 보이는데 을만 안 보이는" 문제의 원인이었음. */
/* [2026-09-11] 1부·2부가 맞닿는 가운데(사본 경계) 간인 - 편집 화면에서도 결과물과 똑같이 보이도록 함.
   PDF에서는 고객용이 오른쪽 가장자리, 관리용이 왼쪽 가장자리에 반쪽씩 찍히는데, 화면에서는 고객용 기준
   (오른쪽 가장자리)으로 보여줌. 위쪽(25%)이 갑, 아래쪽(75%)이 을이고 종이 밖으로 절반이 걸쳐 나감. */
.tlc-edge-ganin {
  position: absolute;
  right: -64px;
  width: 128px;
  height: 128px;
  object-fit: contain;
  opacity: 0.88;
  z-index: 6;
  pointer-events: none;
  display: none;
  transform: translateY(-50%) rotate(-3deg);
}
.tlc-edge-ganin-buyer { top: 25%; }
.tlc-edge-ganin-seller { top: 75%; }

.tlc-ganin-mark-buyer { left: 160px; }
/* [2026-09-05] 판매자(을) 간인이 너무 오른쪽으로 치우쳐 보인다는 사장님 지적 - 구매자(갑)의 left:160px와
   정확히 대칭이 되도록 right도 같은 160px로 맞춤(예전 30px). 종이 폭이 같으므로 두 간인이 좌우 같은
   거리만큼 안쪽으로 들어와 가운데 기준 대칭으로 놓임. */
.tlc-ganin-mark-seller { right: 160px; }

.sign-legal-wrap { position: relative; }
.sign-legal-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 86%; text-align: center;
  background: #1f9d55; color: #fff; font-size: 0.92rem; font-weight: 700; line-height: 1.5;
  padding: 14px 22px; border-radius: 14px; cursor: pointer; z-index: 3;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: opacity .2s ease;
}
.sign-legal-hint.hidden { opacity: 0; pointer-events: none; }
.sign-legal-hint.error { background: #c0392b; cursor: default; }


@media (max-width: 600px) {
  .sign-type-row { flex-direction: column; }
  .sign-consent-row { grid-template-columns: 1fr; }
  .sign-consent-check { justify-self: start; }
}

/* 전자서명 */
.tlc-sign-radio-group { display: flex; gap: 14px; font-size: 0.85rem; }
.tlc-sign-radio-group label { display: flex; align-items: center; gap: 5px; font-weight: 400; cursor: pointer; }
.tlc-legal-notice-box {
  max-height: 130px; overflow-y: auto; font-size: 0.72rem; line-height: 1.5;
  border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--blue-tint-soft); color: var(--text-600); margin-bottom: 6px;
}
.tlc-legal-notice-box p { margin: 0 0 6px 0; }
.tlc-agree-checkbox { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8rem; font-weight: 700; cursor: pointer; color: var(--text-700); }
.tlc-agree-checkbox input { margin-top: 2px; }
.tlc-consent-detail { font-size: 0.7rem; color: var(--text-400); margin: 4px 0 0 22px; line-height: 1.5; }
#tlcSignCanvas { display: block; max-width: 100%; }
.tlc-sign-status-ok { color: var(--green-600, #1a8a4a); font-weight: 700; }
.tlc-sign-status-pending { color: var(--text-400); }
.tlc-client-result {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
}
.tlc-client-result:hover { background: var(--blue-tint-soft); }
.tlc-product-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.tlc-product-list-row:last-child { border-bottom: none; }

@media (max-width: 900px) {
  .tlc-drawer.open { width: 260px; }
  .tlc-drawer-inner { width: 260px; }
}
/* 계약서 용지(.tlc-paper-doc)는 화면 폭에 따라 크기가 바뀌지 않고 항상 A4 고정 크기(위 1683행)를 유지함.
   예전에는 900px 이하 화면에서 폭을 100%로 늘리는 반응형 규칙이 있었는데, 이게 캡처 시점의 실제 창 폭에 따라
   조건부로 개입하면서(windowWidth로 우회하고 있었지만 완벽히 막히지 않는 경우가 있었음) 정렬 오차의 원인이 되어
   아예 제거함 - 인쇄물 정확도가 좁은 화면에서의 편집 편의보다 우선이라는 판단(작은 화면에서는 좌우로 스크롤해서 봄) */
/* 인쇄/PDF 저장(print-scoped) 중에는 화면 너비가 좁아도(모바일/작은 창) 위 모바일 반응형 규칙을 적용하지 않고
   항상 일반(데스크톱) 화면 구성 그대로 인쇄/저장되도록 함 - 좁은 화면에서 인쇄하면 여백이 달라져 정렬이 어긋나는 문제 방지
   (선택자 자체가 위 미디어쿼리보다 구체적이어서 창 너비와 무관하게 항상 우선 적용됨) */
body.print-scoped .tlc-paper-doc {
  width: 794px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.etc-page-sheet {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  margin: 0 auto 24px auto;
  padding: 34px 40px;
  position: relative;
  box-shadow: 0 0 8px rgba(0,0,0,.35);
  font-size: 11.5px;
  color: #111;
  box-sizing: border-box;
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  display: flex;
  flex-direction: column;
}
.etc-page-sheet:last-child { margin-bottom: 0; }

/* ===== 기타서비스 계약서 내용 스타일 (etc-contract-doc 범위 안에서만 적용, 다른 화면과 충돌 없음) ===== */
.etc-contract-doc table { border-collapse: collapse; width: 100%; }
.etc-contract-doc td, .etc-contract-doc th { border: 1px solid #000; padding: 3px 6px; font-size: 11.5px; vertical-align: middle; }
.etc-contract-doc .title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  margin: 4px 0 2px 0;
}
.etc-contract-doc .appno { text-align:right; font-size:11px; margin-top:-22px; margin-bottom:6px; }
.etc-contract-doc .intro {
  border: 1px solid #000;
  padding: 8px 10px;
  font-size: 10.7px;
  line-height: 1.55;
  margin-bottom: 8px;
}
.etc-contract-doc .sectionbar {
  display:inline-block;
  padding: 0;
  font-weight:700;
  font-size:12.5px;
  margin: 6px 0 2px 0;
}
.etc-contract-doc .checks {
  text-align:center;
  border:1px solid #000;
  padding:5px 0;
  font-size:12px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.etc-contract-doc .checks .promo { font-size:9px; }
.etc-contract-doc .label-cell { background:#f2f2f2; font-weight:600; width:16%; text-align:center; }
.etc-contract-doc .cust-table td { font-size: 9.8px; }
.etc-contract-doc .small-note { font-size:9.7px; line-height:1.4; margin: 2px 0 0 2px; }
.etc-contract-doc .sig-img {
  height: 30px;
  vertical-align: middle;
  margin-left: 2px;
}
.etc-contract-doc .footer-logo {
  position: static;
  margin-top: auto;
  padding-top: 14px;
}
.etc-contract-doc .footer-logo img { height: 30px; }
.etc-contract-doc .p1-date { text-align:right; font-size:12px; margin: 11px 0 3px 0; }
.etc-contract-doc .sign-line { font-size:12px; margin: 3px 0; }
.etc-contract-doc .sign-block { margin-top: 8px; }
.etc-contract-doc .sign-block .gap { height: 21px; }
.etc-contract-doc .privacy {
  border:1px solid #000;
  padding:5px 8px;
  font-size:10.2px;
  line-height:1.4;
  margin-top: 8px;
}
.etc-contract-doc .article-title { font-weight:700; margin-top:2.1px; margin-bottom:0.35px; }
.etc-contract-doc .article-body { margin: 0 0 0 4px; line-height:1.4; }
.etc-contract-doc .article-body p { margin: 1px 0; }
.etc-contract-doc.p2 table.signtbl td { padding: 5.6px 7px; font-size: 8.5px; line-height: 1.6; }
.etc-contract-doc.p2 .colhead { text-align:left; font-weight:700; font-size:11.1px; width:50%; }
.etc-contract-doc.p2 .rowlabel { width: 50%; font-weight:400; }

@media print {
  body.print-scoped .etc-page-sheet {
    page-break-after: always;
    box-shadow: none !important;
    margin: 0 !important;
    width: auto !important;
    min-height: auto !important;
  }
  body.print-scoped .etc-page-sheet:last-child { page-break-after: auto; }
}

/* ===== 일반계약서 스타일 (기타서비스와 동일한 문서 재사용, gen- 네임스페이스로 완전 독립) ===== */
.gen-page-sheet {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  margin: 0 auto 24px auto;
  padding: 34px 40px;
  position: relative;
  box-shadow: 0 0 8px rgba(0,0,0,.35);
  font-size: 11.5px;
  color: #111;
  box-sizing: border-box;
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  display: flex;
  flex-direction: column;
}
.gen-page-sheet:last-child { margin-bottom: 0; }

/* ===== 기타서비스 계약서 내용 스타일 (gen-contract-doc 범위 안에서만 적용, 다른 화면과 충돌 없음) ===== */
.gen-contract-doc table { border-collapse: collapse; width: 100%; }
.gen-contract-doc td, .gen-contract-doc th { border: 1px solid #000; padding: 3px 6px; font-size: 11.5px; vertical-align: middle; }
.gen-contract-doc .title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  margin: 4px 0 2px 0;
}
.gen-contract-doc .appno { text-align:right; font-size:11px; margin-top:-22px; margin-bottom:6px; }
.gen-contract-doc .intro {
  border: 1px solid #000;
  padding: 8px 10px;
  font-size: 10.7px;
  line-height: 1.55;
  margin-bottom: 8px;
}
.gen-contract-doc .sectionbar {
  display:inline-block;
  padding: 0;
  font-weight:700;
  font-size:12.5px;
  margin: 6px 0 2px 0;
}
.gen-contract-doc .checks {
  text-align:center;
  border:1px solid #000;
  padding:5px 0;
  font-size:12px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.gen-contract-doc .checks .promo { font-size:9px; }
.gen-contract-doc .label-cell { background:#f2f2f2; font-weight:600; width:16%; text-align:center; }
.gen-contract-doc .cust-table td { font-size: 9.8px; }
.gen-contract-doc .small-note { font-size:9.7px; line-height:1.4; margin: 2px 0 0 2px; }
.gen-contract-doc .sig-img {
  height: 30px;
  vertical-align: middle;
  margin-left: 2px;
}
.gen-contract-doc .footer-logo {
  position: static;
  margin-top: auto;
  padding-top: 14px;
}
.gen-contract-doc .footer-logo img { height: 30px; }
.gen-contract-doc .p1-date { text-align:right; font-size:12px; margin: 11px 0 3px 0; }
.gen-contract-doc .sign-line { font-size:12px; margin: 3px 0; }
.gen-contract-doc .sign-block { margin-top: 8px; }
.gen-contract-doc .sign-block .gap { height: 21px; }

/* ===== CMS 출금이체신청서 (gen-cms-doc 범위 안에서만 적용, 일반계약서 저장시에만 사용) ===== */
.gen-cms-doc { font-size: 11px; line-height: 1.35; }
.gen-cms-doc .cms-doc-title { text-align:center; font-size:1.5em; font-weight:700; margin:0 0 10px; }
.gen-cms-doc .cms-sec { font-size:1em; font-weight:700; margin:10px 0 4px; }
.gen-cms-doc .cms-table { border-collapse:collapse; width:100%; margin:2px 0 4px; }
/* [2026-09-03, 44차 후속수정4-2] "출금이체 신청내용" 표에서 은행 체크리스트 행(colspan=3)만 폭이 다른
   행(주소 등, 역시 colspan=3)보다 눈에 띄게 좁게 나와서 표 전체 틀이 어긋나 보이던 문제(사장님 지적:
   "다른 박스랑 모양을 맞춰야지"). 처음엔 표 자동 레이아웃 탓으로 보고 width:100%/인라인 width:84%를
   시도했으나 전부 안 먹혔음 - 진짜 원인은 그 td 자체에 display:flex를 직접 줬던 것이었음. td에 flex를
   직접 걸면 브라우저가 그 칸을 더 이상 정상적인 표 칸으로 취급하지 않게 되면서 colspan="3"이 원래대로
   3칸 폭을 다 합쳐 계산되지 않고 칸 1개 폭만큼만 계산되는 문제가 있었음(실측으로 원인 확정: width:84%를
   줬을 때 결과값이 "표 전체의 84%"가 아니라 "칸 1개 폭의 84%"로 나온 것으로 확인). 그래서 flex는 td가
   아니라 td 안의 별도 div(.cms-bank-checklist)로 옮기고, td 자체는 평범한 표 칸으로 그대로 둠 - 이제
   colspan 폭 계산이 다른 행과 똑같이 정상 동작함. table-layout:fixed는 첫 번째 행에 적어둔 폭
   (16%/34%/16%/34%)만 기준으로 모든 행의 칸 폭을 고정해서 앞으로 어떤 행의 내용이 바뀌어도 다른 행과
   폭이 어긋나는 일 자체를 원천 차단하는 안전장치로 같이 적용함(이 표에만, 다른 cms-table들엔 영향 없음). */
.gen-cms-doc .cms-fixed-table { table-layout: fixed; }
.gen-cms-doc .cms-table td { border:1px solid #000; padding:3px 6px; vertical-align:middle; text-align:center; }
.gen-cms-doc .cms-lbl { background:#f4f3ee; white-space:nowrap; font-weight:600; }
/* [2026-08-31] "신청내용 항목들은 가운데 정렬하지 말고 왼쪽 끝선에서 1칸 띄우고 정렬" 요청 반영 - 값이
   들어가는 일반 데이터 칸만 왼쪽 정렬(라벨칸은 그대로 가운데, 서명줄/위임장 칸도 서명 배치상 가운데 유지) */
.gen-cms-doc .cms-table:not(.cms-sig-table):not(.cms-delegate-table):not(.cms-delegate-sig-table) td:not(.cms-lbl):not(#cmsOutBankChecklist) {
  text-align: left;
  padding-left: 1em;
}
/* [2026-08-31] 거래은행 체크리스트 - 표준 CMS 신청서 양식처럼 은행명을 전부 나열하고 선택된 곳만
   □ -> ☑로 표시함(사장님이 불러주신 19개 은행 목록 그대로, JS의 CMS_BANK_LIST와 항상 짝을 맞춤)
   [2026-09-01, Round G] "3줄로 정렬" 요청에 맞춰 한때 grid(7칸 고정)로 바꿔봤으나, 마지막 줄이
   7칸을 다 못 채워서(19÷7=7/7/5) 칸 너비가 줄고 오른쪽이 비어 "이빨 빠진" 것처럼 보인다는 지적을
   받음(사장님: "박스칸을 줄이면 어떻게 해... 그냥 박스모양 원상태로 두고") - 정확히 3줄로 맞추는 것보다
   원래 박스 모양(칸 크기·간격)을 그대로 유지하는 게 우선이므로 이 블록 전체를 39차 후속 수정 7(Round F)
   당시 값 그대로 되돌림(display:flex, gap:2px 12px).

   [2026-09-03, 44차 후속수정4] 그런데 Round F로 되돌린 flex-wrap 방식은 "칸 크기를 안 건드린다"는
   목적은 지켰지만, 결과적으로 줄 수 자체가 원본(7/7/5, 3줄)과 달라져 버림(실측: 4/3/3/3/3/2, 6줄) -
   사장님이 "원본과 현재 금융기관 선택하는 칸이 잘못 구현되어있음"으로 다시 지적하심. 처음엔 원본과 같은
   3줄(7/7/5)로 맞추려고 flex 줄을 고정했었는데, 그 과정에서 칸(td) 폭이 다른 행과 안 맞는 등 다른 문제가
   반복됨(원인은 위 .cms-fixed-table 주석 참고 - td에 직접 준 display:flex가 colspan 폭 계산을 깨뜨린
   것). 사장님이 "3칸(3줄)까지 원본대로 맞출 필요는 없다, 대신 항목들을 가운데 정렬하고 줄을 정확히
   맞춰달라"고 정리해주셔서, 줄 수를 원본과 똑같이 맞추는 것은 포기하고 진짜 CSS grid로 바꿈 - grid는
   항목이 몇 줄로 떨어지든 매 줄이 항상 같은 세로 열에 정확히 맞춰지는 게 보장되어서(예전 flex 방식은
   줄마다 개수가 달라지면 항목들이 서로 다른 위치에 놓여 "줄이 안 맞는" 느낌을 줬음), "가운데 정렬 + 줄을
   정확히 맞춰달라"는 요청에 가장 안전하게 맞음. 19개를 4열로 나누면 4/4/4/4/3, 5줄로 떨어짐(마지막 줄
   3칸만 채워지지만, "3줄 아니어도 된다"고 하셨으므로 문제 없음 - 39차 이빨빠짐 문제와 달리 grid는 칸
   너비 자체를 유지한 채 미채움 칸만 비는 것이라 다른 항목들 모양은 전혀 안 흔들림). */
.gen-cms-doc .cms-bank-checklist { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px 6px; box-sizing:border-box; }
.gen-cms-doc .cms-bank-check-item { white-space:nowrap; font-size:.92em; text-align:center; }
.gen-cms-doc .cms-bank-check-item.checked { font-weight:700; }
.gen-cms-doc .cms-bank-check-box { display:inline-block; margin-right:2px; }
/* [2026-09-03, 44차 후속수정4] 대리인이 대신 작성한 경우, 신청인/예금주 동의란 서명 자리("(인)" 위)에
   실제 서명 이미지 대신 도장처럼 겹쳐 찍히는 "대리인 작성" 표시(사장님 요청: "신청인/예금주 사인 처럼
   붉은색 글씨로 표기, (인) 겹치게"). 이전엔 서명줄 "위"에 붙는 별도 안내 줄(.cms-proxy-tag)이었는데,
   이번엔 서명 이미지와 완전히 같은 자리(.sign-overlay-wrap 안)에 배치해서 실제 도장처럼 보이게 함. */
.gen-cms-doc .cms-proxy-stamp { position:absolute; left:50%; bottom:0; transform:translateX(-50%) rotate(-6deg); color:#c0392b; font-weight:800; font-size:1.05em; border:1.5px solid #c0392b; border-radius:3px; padding:0 4px; white-space:nowrap; background:rgba(255,255,255,.55); }
.gen-cms-doc .cms-agree-box { border:1px solid #000; padding:6px 10px; margin:6px 0; font-size:.92em; }
.gen-cms-doc .cms-agree-box h3 { margin:4px 0 3px; font-size:1em; text-align:center; }
.gen-cms-doc .cms-date-line { text-align:center; margin:6px 0; }
.gen-cms-doc .cms-sig-table td { position: relative; }
.gen-cms-doc .cms-fine-note { font-size:.78em; color:#333; margin:4px 0 2px; }
.gen-cms-doc .cms-two-col { display:flex; gap:10px; margin-top:6px; align-items:stretch; }
.gen-cms-doc .cms-col-left, .gen-cms-doc .cms-col-right { flex:1; min-width:0; border:1px solid #000; padding:6px 8px; }
/* [2026-09-03, 44차 후속수정4] 위임장 칸(cms-col-right)은 좌측 약관 칸과 높이를 맞추기 위해 위 규칙에서
   flex:1로 늘어나는데(내용은 짧음), 그 안의 내용은 그냥 위에서부터 순서대로 쌓이기만 해서 서명란 아래로
   빈 공간이 그대로 남았음. 이 칸 자체를 세로 방향 flex로 만들고, 서명란 표(cms-delegate-sig-table)에
   위/아래 margin을 auto로 주면 "날짜줄까지의 내용은 원래 자리에, 서명란은 그 아래 남는 공간 안에서
   상하 가운데"로 자연스럽게 배치됨(사장님 요청: "신청인(위임자) 서명란 내용은 상하 가운데 정렬"). */
.gen-cms-doc #cmsDelegateBox { display:flex; flex-direction:column; }
/* [2026-09-03, 44차 후속수정4-2] 사장님 추가 요청 반영: (1) 위임 문구는 가운데 정렬, (2) 날짜(년월일)
   글씨 크기 2배, (3) 날짜를 문구로부터 아래로 3줄 정도 더 띄움(margin-top). 서명란 아래 여백은
   기존 auto-margin 상하 가운데 정렬 그대로 유지. */
.gen-cms-doc .cms-delegate-date-line { font-size:2em; margin-top:45px; margin-bottom:16px; }
.gen-cms-doc .cms-delegate-sig-table { margin-top:auto; margin-bottom:auto; }
.gen-cms-doc .cms-law-title, .gen-cms-doc .cms-delegate-title { text-align:center; font-weight:700; margin:0 0 4px; font-size:1em; }
.gen-cms-doc .cms-law-body { font-size:.82em; text-align:justify; }
.gen-cms-doc .cms-law-body p { margin:0 0 3px; }
.gen-cms-doc .cms-delegate-table td { padding: 8px 6px; }
.gen-cms-doc .cms-delegate-note { font-size:.86em; margin:4px 0; text-align:center; }
.gen-cms-doc .cms-docs-table td { text-align:left; }
/* [2026-09-01, Round G] 원래 이 오버레이는 셀(td) 안에 글자가 한 줄(이름 + "(인) 또는 서명")만 있다고
   가정하고 "top"(칸 맨 위) 기준으로 만들어져 있었음. 그런데 Round F에서 대리인이 서명하면 그 위에
   "(대리인 작성)" 표를 한 줄 더 붙였고(같은 칸 안), 그러면 이 칸이 2줄이 되는데도 도장 이미지는 여전히
   "칸 맨 위"(=이제는 "(대리인 작성)" 글자가 있는 줄)에 그려져서 실제 서명 텍스트("OO (인) 또는 서명")와는
   전혀 다른 위치(한 줄 위)에 찍히는 문제였음(사장님 지적: "대리인 사인이 전혀 다른곳으로 작성되고있음" -
   실측으로 원인 확정). "맨 위" 대신 "맨 아래" 기준으로 바꾸면 위에 안내 줄이 몇 줄 붙든 상관없이 항상
   마지막 줄(=서명 텍스트가 있는 줄) 위에 찍히므로 이렇게 바꿈. */
.gen-cms-doc .sign-overlay-wrap { position:absolute; left:0; bottom:-4px; width:100%; height:100%; display:inline-block; pointer-events:none; }
.gen-cms-doc .sign-overlay-img { position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:2.4em; max-width:90%; object-fit:contain; display:none; }

.gen-contract-doc .privacy {
  border:1px solid #000;
  padding:5px 8px;
  font-size:10.2px;
  line-height:1.4;
  margin-top: 8px;
}
.gen-contract-doc .article-title { font-weight:700; margin-top:2.1px; margin-bottom:0.35px; }
.gen-contract-doc .article-body { margin: 0 0 0 4px; line-height:1.4; }
.gen-contract-doc .article-body p { margin: 1px 0; }
.gen-contract-doc.p2 table.signtbl td { padding: 5.6px 7px; font-size: 8.5px; line-height: 1.6; }
.gen-contract-doc.p2 .colhead { text-align:left; font-weight:700; font-size:11.1px; width:50%; }
.gen-contract-doc.p2 .rowlabel { width: 50%; font-weight:400; }

@media print {
  /* 계약서 인쇄: 표준 A4 용지 기준(용지 여백은 @page에서 관리).
     예전에 PDF 바로저장을 만들면서 넣었던 "시트 크기 강제고정 + 넘치면 잘라내기 + 자동축소"는
     출력이 오히려 나빠져서 전부 걷어냈고, 이제는 설정 > 인쇄물 조정에서 사장님이 직접 맞추는 방식으로 바뀜 */
  body.print-scoped .gen-page-sheet,
  body.print-scoped .etc-page-sheet {
    page-break-after: always;
    page-break-inside: avoid;
    box-shadow: none !important;
    margin: 0 !important;
    width: auto !important;
    min-height: auto !important;
  }
  body.print-scoped .gen-page-sheet:last-child,
  body.print-scoped .etc-page-sheet:last-child { page-break-after: auto; }
}

/* 항목이 [사용제품 관련정보]/견적명세 표에 새로 추가될 때, 종이가 날아오는 연출과 어울리도록 오른쪽에서 왼쪽으로 살짝 밀려들어오며 자리잡는 연출 (세무사랑Pro/기타서비스/일반계약서/가격제안서 공통 재사용) */
@keyframes rowSlideIn {
  0% { transform: translateX(36px); opacity: 0; box-shadow: inset 0 0 0 2px var(--teal-500); }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; box-shadow: inset 0 0 0 0 transparent; }
}
.row-slide-in { animation: rowSlideIn 0.55s cubic-bezier(0.22, 0.7, 0.25, 1.05); }

/* 스마트백업 관제 목록 페이지 이동(10개씩) */
.sb-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.sb-pager-info {
  margin-left: 8px;
  font-size: 0.82rem;
  color: var(--text-400);
}

/* 설정 > 인쇄물 조정 - 항목별 슬라이더 + 숫자 입력 */
.print-adj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.print-adj-row label {
  flex: 0 0 170px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-600);
}
.print-adj-row input[type="range"] { flex: 1; min-width: 120px; }
.print-adj-row input[type="number"] {
  flex: 0 0 78px;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 0.85rem;
  text-align: right;
}
.print-adj-unit { flex: 0 0 26px; font-size: 0.82rem; color: var(--text-400); }

/* 화면에서 "여기서 다음 장으로 넘어갑니다"를 알려주는 점선(인쇄물에는 나오지 않음) */
.page-break-guide {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed #d24;
  pointer-events: none;
  z-index: 5;
}
.page-break-guide span {
  position: absolute;
  right: 6px;
  top: 2px;
  background: #d24;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
@media print { .page-break-guide { display: none !important; } }

/* 1페이지 시작 지점 표시선 - 다음 장 경계선과 구분되도록 초록색 */
.page-break-guide-start { border-top-color: #17a673; }
.page-break-guide-start span { background: #17a673; }

/* ==================================================================
   상담(전산화 진단) - 아이패드 프로 11인치 가로(1194x834) 기준
   ================================================================== */
.cs-stage { opacity: 0; transform: translateY(14px); transition: opacity .32s ease, transform .32s ease; }
.cs-stage.cs-in { opacity: 1; transform: none; }
.cs-panel {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: var(--nz-s4) var(--nz-s5);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cs-head { text-align: center; margin-bottom: var(--nz-s4); }
.cs-title { font-size: 1.42rem; font-weight: 800; color: var(--navy-800); letter-spacing: -0.4px; }
.cs-sub { font-size: var(--nz-fs4); color: var(--text-600); margin-top: var(--nz-s2); line-height: 1.6; }

/* 업종 선택 */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nz-s4); margin-top: var(--nz-s2); }
.cs-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--nz-s2);
  padding: var(--nz-s5) var(--nz-s4); border: 2px solid var(--border); border-radius: 16px;
  background: #fff; cursor: pointer;
  animation: csPop .42s cubic-bezier(.2,.9,.3,1.3) backwards;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cs-card:active { transform: scale(.96); }
.cs-card:hover { border-color: var(--teal-500); box-shadow: 0 8px 22px rgba(20,90,120,.10); }
.cs-card-label { font-size: var(--nz-fs5); font-weight: 800; color: var(--navy-800); }
.cs-card-note { font-size: var(--nz-fs3); color: var(--text-400); }

/* 진행 표시 + 질문 */
.cs-progress { height: 6px; background: var(--blue-tint-soft); border-radius: 999px; overflow: hidden; }
.cs-progress-bar { height: 100%; background: var(--teal-500); border-radius: 999px; transition: width .45s cubic-bezier(.3,.9,.3,1); }
.cs-question {
  font-size: 1.5rem; font-weight: 800; color: var(--navy-800);
  margin: var(--nz-s2) 0 var(--nz-s5); line-height: 1.5; letter-spacing: -0.3px;
  animation: csFadeUp .4s ease backwards;
}
.cs-options { display: flex; flex-direction: column; gap: var(--nz-s3); }
.cs-option {
  display: flex; align-items: center; gap: var(--nz-s3); text-align: left;
  padding: var(--nz-s4) var(--nz-s4); border: 2px solid var(--border); border-radius: 14px;
  background: #fff; font-size: var(--nz-fs4); color: var(--navy-800); cursor: pointer;
  animation: csSlideIn .38s ease backwards;
  transition: transform .14s ease, border-color .16s ease, background .16s ease;
}
.cs-option:hover { border-color: var(--teal-500); background: var(--blue-tint-soft); }
.cs-option:active { transform: scale(.985); }
.cs-option-dot {
  flex: 0 0 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); transition: all .18s ease;
}
.cs-option.cs-picked { border-color: var(--teal-500); background: var(--blue-tint-soft); }
.cs-option.cs-picked .cs-option-dot { background: var(--teal-500); border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(40,160,150,.18); }
.cs-back { margin-top: var(--nz-s4); align-self: flex-start; background: none; border: none; color: var(--text-400); font-size: var(--nz-fs3); cursor: pointer; }

/* 목표 선택 */
.cs-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--nz-s3); margin-top: var(--nz-s3); }
.cs-goal {
  display: flex; flex-direction: column; gap: var(--nz-s2); text-align: left;
  padding: var(--nz-s4) var(--nz-s4); border: 2px solid var(--border); border-radius: 16px; background: #fff; cursor: pointer;
  animation: csPop .42s cubic-bezier(.2,.9,.3,1.3) backwards;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cs-goal:hover { border-color: var(--teal-500); box-shadow: 0 8px 20px rgba(20,90,120,.10); }
.cs-goal:active { transform: scale(.97); }
.cs-goal-lv { font-size: var(--nz-fs2); font-weight: 800; color: var(--teal-500); }
.cs-goal-name { font-size: var(--nz-fs5); font-weight: 800; color: var(--navy-800); }
.cs-goal-short { font-size: var(--nz-fs3); color: var(--text-600); }
.cs-goal-why { font-size: var(--nz-fs3); color: var(--text-400); line-height: 1.5; margin-top: var(--nz-s1); }
.cs-goal-tag {
  margin-top: var(--nz-s2); align-self: flex-start; background: var(--teal-500); color: #fff;
  font-size: var(--nz-fs1); font-weight: 700; padding: var(--nz-s1) var(--nz-s2); border-radius: 999px;
}

/* 리포트 - 왼쪽 현재 / 오른쪽 목표 */
.cs-report-head { text-align: center; margin-bottom: var(--nz-s2); }
.cs-actions { display: flex; justify-content: center; gap: var(--nz-s2); margin-top: var(--nz-s3); }
.cs-note { text-align: center; font-size: var(--nz-fs2); color: var(--text-400); margin-top: var(--nz-s2); }

/* [2026-09-24 26차 신규] 영업타임라인 상담 건에 연결된 업무흐름 진단 화면에서, 단계를 넘어갈 때마다
   계속 눈에 띄도록 매 화면 맨 위에 고정으로 띄우는 자동저장 안내 - 팝업/토스트 대신(9장 "의미 없는
   팝업창 금지" 원칙) 조용히 항상 보이는 배지 형태. */
.cs-autosave-badge {
  display: flex; align-items: center; gap: var(--nz-s2); justify-content: center;
  background: var(--teal-50, #eefaf5); color: var(--teal-700, #17835f);
  border: 1px solid var(--teal-500); border-radius: 999px;
  font-size: var(--nz-fs1); font-weight: 700; padding: var(--nz-s2) var(--nz-s3); margin: 0 auto var(--nz-s3); width: fit-content;
}

@keyframes csPop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes csSlideIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes csFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes csNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* 아이패드 세로로 돌렸을 때도 깨지지 않도록 */
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 상담 - 확장 구성(고객구분 / 단계별 상세 열림 / 단계적 로드맵 / 제품 설명) */
.cs-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-left: auto; margin-right: auto; }

/* [2026-09-02, 43차 신규] 신규상담방문 - 구/시/군처럼 선택지가 많은(최대 27개) 박스 그리드는 기존
   .cs-grid(3열 고정)보다 훨씬 촘촘하고 살짝 더 작은 카드가 필요해서 전용 클래스를 추가함. 입력창(상세주소/
   업체정보 등)은 "박스형태"가 아니라 좁고 가운데 정렬된 일반 폼으로 두라는 사장님 요청에 따라
   .cs-field-narrow로 폭을 제한함. */
.cs-grid-gu { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--nz-s2); margin-top: var(--nz-s2); }
.cs-card-sm { padding: var(--nz-s3) var(--nz-s2); gap: var(--nz-s1); border-radius: 12px; }
.cs-card-sm .cs-card-label { font-size: var(--nz-fs3); }
.cs-field-narrow { max-width: 420px; width: 100%; margin: 0 auto; }
.cs-field-narrow .field:last-child { margin-bottom: 0; }
.cs-tip {
  margin-top: var(--nz-s3); text-align: center; font-size: var(--nz-fs3); color: var(--text-600);
  background: var(--blue-tint-soft); border-radius: 10px; padding: var(--nz-s2) var(--nz-s3);
}
.cs-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: var(--nz-fs3); color: var(--text-600); line-height: 1.6;
  transition: max-height .32s ease, opacity .28s ease, margin .28s ease;
}
.cs-detail.cs-open { max-height: 240px; opacity: 1; margin-top: var(--nz-s2); }
.cs-prod {
  border: 1.5px solid var(--border); border-radius: 14px; padding: var(--nz-s3) var(--nz-s4); background: #fff;
  animation: csPop .4s cubic-bezier(.2,.9,.3,1.3) backwards;
}
.cs-prod-base { border-color: var(--teal-500); background: #f4fbfa; }
.cs-prod-upper { border-color: var(--navy-800); }
.cs-prod-reason { display: block; font-size: var(--nz-fs2); color: var(--teal-500); font-weight: 700; margin-top: var(--nz-s2); }

/* 리포트는 내용이 많아 세로가 길어질 수 있으므로, 아이패드 한 화면 안에서 내부 스크롤로 처리 */
.cs-panel-report { max-height: calc(100vh - 258px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cs-panel-report .cs-prod { padding: var(--nz-s3) var(--nz-s3); }

/* 상담 - 적응형 진단 추가 요소 */
.cs-panel-bridge { align-items: center; justify-content: center; text-align: center; }
.cs-bridge { display: flex; flex-direction: column; align-items: center; gap: var(--nz-s3); padding: var(--nz-s6) 0; }
.cs-next { margin-top: var(--nz-s2); min-width: 180px; }
.cs-warn {
  margin-top: var(--nz-s3); padding: var(--nz-s3) var(--nz-s3); border-radius: 10px; font-size: var(--nz-fs3); line-height: 1.55;
  background: #fff8ec; border: 1.5px solid #e8c07d; color: #8a5a10;
}
.cs-prod-addon { border-color: #7c8cff; background: #f6f7ff; }

/* 결과 화면: 화살표 대신 목표 단계를 좌우로 바꿔보는 버튼 */

/* 상담 - 세무·회계사무소 제품 안내 (질문 없이 아래로 나열) */
.cs-taxlist { display: flex; flex-direction: column; gap: var(--nz-s2); margin-top: var(--nz-s2); }
.cs-taxitem:hover { border-color: var(--teal-500); box-shadow: 0 6px 18px rgba(20,90,120,.08); }
.cs-taxbody { flex: 1; min-width: 0; }
.cs-taxtop { display: flex; align-items: center; gap: var(--nz-s2); flex-wrap: wrap; }
.cs-taxname { font-size: var(--nz-fs5); font-weight: 800; color: var(--navy-800); }
.cs-taxtag {
  font-size: var(--nz-fs1); font-weight: 700; padding: 2px var(--nz-s2); border-radius: 999px;
  background: var(--teal-500); color: #fff;
}
.cs-taxwhen { font-size: var(--nz-fs3); font-weight: 700; color: var(--teal-500); margin-top: var(--nz-s1); }
.cs-taxdesc { font-size: var(--nz-fs3); color: var(--text-600); line-height: 1.62; margin-top: var(--nz-s1); }

/* 상담 결과 - 현재 문제점 / 올라가면 얻는 점 / 뉴젠 강점 */
.cs-points-cap {
  margin-top: var(--nz-s4); text-align: center; font-size: var(--nz-fs3); font-weight: 800; color: var(--navy-800);
  animation: csFadeUp .5s ease backwards; animation-delay: .2s;
}

/* 상담 결과 - 제품 한줄소개·기능 태그, 회사 신뢰 정보 */
.cs-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nz-s2); margin-top: var(--nz-s4);
  padding: var(--nz-s3) var(--nz-s2); border-radius: 14px;
  background: var(--navy-900);
}
.cs-fact-num { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.cs-fact-num i { font-style: normal; font-size: var(--nz-fs2); font-weight: 700; margin-left: 2px; opacity: .85; }
.cs-fact-label { display: block; font-size: var(--nz-fs1); color: #c6d0e0; margin-top: 2px; }
.cs-facts-note { text-align: center; font-size: var(--nz-fs1); color: var(--text-400); margin-top: var(--nz-s2); }

/* ── 상담 결과: 항목이 하나씩 "쾅" 하고 박히듯 등장하는 연출 ────────── */
@keyframes csSlam {
  0%   { opacity: 0; transform: scale(1.55) translateY(-16px); filter: blur(6px); }
  55%  { opacity: 1; transform: scale(.94) translateY(0); filter: blur(0); }
  72%  { transform: scale(1.04); }
  86%  { transform: scale(.985); }
  100% { transform: scale(1); }
}
@keyframes csSlamGlow {
  0%, 45% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  60%     { box-shadow: 0 0 0 7px rgba(23,166,115,.20); }
  100%    { box-shadow: 0 0 0 0 rgba(23,166,115,0); }
}
@keyframes csSlamGlowRed {
  0%, 45% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  60%     { box-shadow: 0 0 0 7px rgba(217,83,79,.20); }
  100%    { box-shadow: 0 0 0 0 rgba(217,83,79,0); }
}

/* 불편한 점 - 붉은 계열로 쾅 */
/* 달라지는 점 - 초록 계열로 쾅 */
/* 뉴젠 강점 카드 - 조금 더 묵직하게 */
/* 제품 기능 태그 - 가볍게 톡톡 */
/* 회사 수치 - 마지막에 크게 */

/* 세무·회계사무소 - 한국세무사회 강조 배너 / 한 뿌리 설명 */
.cs-family {
  margin-top: var(--nz-s3); border: 1.5px dashed var(--teal-500); border-radius: 14px;
  padding: var(--nz-s3) var(--nz-s4); background: #f4fbfa;
  animation: csSlamIn .6s cubic-bezier(.2,.9,.25,1.15) backwards; animation-delay: .15s;
}
.cs-family-title { font-size: var(--nz-fs4); font-weight: 800; color: var(--navy-800); }
.cs-family-desc { font-size: var(--nz-fs3); color: var(--text-600); line-height: 1.65; margin-top: var(--nz-s2); }
.cs-family-desc b { color: var(--navy-800); }

/* "쾅" 하고 들어오는 강조 등장 - 문제점 / 얻는 점 / 강점 카드에 사용 */
@keyframes csSlamIn {
  0%   { opacity: 0; transform: scale(1.14) translateY(-10px); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(.975) translateY(0); filter: blur(0); }
  75%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
@keyframes csSlamSide {
  0%   { opacity: 0; transform: translateX(-26px) scale(1.06); filter: blur(2px); }
  60%  { opacity: 1; transform: translateX(3px) scale(.99); filter: blur(0); }
  100% { transform: translateX(0) scale(1); }
}

/* 기존 등장 효과를 임팩트 있는 쪽으로 교체하고, 간격을 넉넉히 두어 하나씩 눈에 들어오게 함 */
.cs-prod { animation: csSlamIn .7s cubic-bezier(.2,.9,.25,1.2) backwards; }
.cs-fact {
  text-align: center;
  animation: csSlamIn .72s cubic-bezier(.2,.9,.25,1.25) backwards;
}

/* 세무·회계사무소 화면 - 한국세무사회 공식 강조 영역 */
.cs-taxhero {
  border-radius: 16px; padding: var(--nz-s4) var(--nz-s5);
  background: var(--navy-900);
  color: #fff; animation: csFadeUp .5s ease backwards;
}
.cs-taxbadge {
  display: inline-block; background: var(--teal-500); color: #fff;
  font-size: var(--nz-fs1); font-weight: 800; padding: var(--nz-s1) var(--nz-s3); border-radius: 999px;
  animation: csPop .5s cubic-bezier(.2,.9,.3,1.4) backwards;
}
.cs-taxhero-title { font-size: 1.22rem; font-weight: 800; margin-top: var(--nz-s2); letter-spacing: -0.3px; }
.cs-taxhero-body { font-size: var(--nz-fs3); color: #c6d0e0; line-height: 1.65; margin-top: var(--nz-s2); }
.cs-taxhero-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nz-s2); margin-top: var(--nz-s3); }
.cs-taxhero-point {
  display: flex; align-items: flex-start; gap: var(--nz-s2);
  font-size: var(--nz-fs2); color: #e8eef7; line-height: 1.5;
  animation: csSlideIn .45s ease backwards;
}
.cs-taxhero-point span {
  flex: 0 0 16px; height: 16px; border-radius: 50%; background: var(--teal-500);
  font-size: var(--nz-fs1); display: flex; align-items: center; justify-content: center; margin-top: 2px;
}

/* ── 결과 화면 강조 애니메이션 ──────────────────────────────
   문제점 / 달라지는 점 / 강점 항목이 한 박자씩 쉬면서 "쾅" 하고 자리잡도록
   기존보다 느리고 임팩트 있게 다시 지정함 */
@keyframes csSlam {
  0%   { opacity: 0; transform: scale(1.28) translateY(-10px); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(.965) translateY(0); filter: blur(0); }
  75%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes csSlamShadow {
  0%, 45% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  60%     { box-shadow: 0 8px 22px rgba(20,60,90,.20); }
  100%    { box-shadow: 0 2px 8px rgba(20,60,90,.06); }
}
.cs-taxitem {
  display: flex;
  gap: var(--nz-s3);
  align-items: flex-start;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: var(--nz-s3) var(--nz-s4);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
  animation: csSlam .8s cubic-bezier(.22,1.05,.36,1) backwards,
             csSlamShadow .8s ease backwards;
}
/* 체크 표시와 느낌표는 카드가 자리잡은 뒤 한 번 더 튀어오르게 */
@keyframes csPunch {
  0%, 40% { transform: scale(0); }
  62%     { transform: scale(1.35); }
  80%     { transform: scale(.92); }
  100%    { transform: scale(1); }
}

/* 상담 결과 - 영역별 육각형 그래프 */
.cs-radar-now, .cs-radar-goal { transform-origin: center; }
.cs-radar-now {
  animation: csRadarGrow 1.1s cubic-bezier(.22,1.05,.36,1) backwards;
  animation-delay: .35s;
}
/* 개선 후 도형은 지금 상태가 그려진 뒤에 뒤이어 커지며 나타남 */
.cs-radar-goal {
  animation: csRadarGrow 1.25s cubic-bezier(.22,1.05,.36,1) backwards;
  animation-delay: 1.15s;
}
.cs-radar-legend {
  display: flex; justify-content: center; gap: var(--nz-s4); margin-top: 2px;
  font-size: var(--nz-fs1); color: var(--text-600);
}
.cs-radar-legend span { display: flex; align-items: center; gap: var(--nz-s1); }
.cs-radar-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.cs-lg-now { background: none; border-top: 2px dashed #8a94a6; } /* [51차] 그라데이션 대신 점선 */
.cs-lg-goal { background: #17a673; }
@keyframes csRadarGrow {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

/* 상담 결과 - 도입 과정 */
.cs-roll-cap {
  margin-top: var(--nz-s4); text-align: center; font-size: var(--nz-fs4); font-weight: 800; color: var(--navy-800);
}
.cs-roll-sub { text-align: center; font-size: var(--nz-fs2); color: var(--text-600); margin-top: var(--nz-s1); }
/* 번호와 기간을 박스 위쪽 바깥에 걸쳐 놓아, 본문 글이 좁아지지 않게 함 */
.cs-roll-head {
  position: absolute; top: -14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: var(--nz-s2);
}
.cs-roll-title { font-size: var(--nz-fs4); font-weight: 800; color: var(--navy-800); }
.cs-roll-desc { font-size: var(--nz-fs3); color: var(--text-600); line-height: 1.65; margin-top: var(--nz-s2); }
.cs-roll-todo { display: flex; flex-wrap: wrap; gap: var(--nz-s1); margin-top: var(--nz-s2); }
.cs-roll-todo span {
  font-size: var(--nz-fs1); color: var(--navy-800); background: var(--blue-tint-soft);
  border-radius: 5px; padding: 2px var(--nz-s2);
}

/* 상담 결과 - 도입시 주의사항 */

/* 상담 결과 - 영역 구분선 (진단 결과 / 진행 방향 / 제품 / 강점을 눈에 띄게 나눔) */
.cs-prods-cap {
  text-align: center; font-size: var(--nz-fs4); font-weight: 800; color: var(--navy-800); margin-bottom: var(--nz-s2);
}

/* 계약 이후 진행 방향 - 화살표가 진행 방향으로 천천히 흐름 */
.cs-roll {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--nz-s2);
  margin-top: var(--nz-s3);
}
.cs-roll-arrow {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 22px; color: var(--teal-500); font-size: 1.5rem; font-weight: 800;
  animation: csFadeUp .6s ease backwards;
}
.cs-roll-arrow span { display: inline-block; animation: csFlow 2.2s ease-in-out infinite; }
@keyframes csFlow {
  0%, 100% { transform: translateX(-4px); opacity: .45; }
  50%      { transform: translateX(5px); opacity: 1; }
}
@media (max-width: 900px) {
  .cs-roll-arrow { flex-basis: 100%; height: 20px; }
  .cs-roll-arrow span { transform: rotate(90deg); animation: csFlowV 2.2s ease-in-out infinite; }
  @keyframes csFlowV {
    0%, 100% { transform: rotate(90deg) translateX(-4px); opacity: .45; }
    50%      { transform: rotate(90deg) translateX(5px); opacity: 1; }
  }
}

/* 왼쪽(지금) 칸의 그래프는 비교용이 아니므로 조금 작게 */

/* 과한 단계 상승 주의 - 노란색 계열로 문제점(빨강)·장점(초록)과 구분됨 */


/* 진단 결과 → 목표 순서로 눈이 따라가도록, 오른쪽 칸을 한 박자 늦게 보여줌 */

/* 그래프 축 이름이 잘리지 않도록 좌우 여백 확보 */
.cs-radar {
  display: block;
  margin: 2px auto 0;
  width: 100%;
  max-width: 290px;
  height: auto;
  overflow: visible;
}
.cs-radar text { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* ── 진단 결과 상단: 단계 숫자 옆에 설명을 크게 배치 ── */

/* 단계 이동 버튼 - 크게 키우고 박스 밖으로 살짝 걸치게 */

/* ── 계약 이후 진행 방향: 뒤로 갈수록 진해지는 녹색(색 계열은 동일) ── */
.cs-roll-step {
  display: block;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  padding: var(--nz-s6) var(--nz-s4) var(--nz-s3);
  margin-top: var(--nz-s3);
  position: relative;
  animation: csSlam .9s cubic-bezier(.22,1.05,.36,1) backwards;
  flex: 1 1 290px;
  max-width: 420px;
  border-color: color-mix(in srgb, #17a673 calc(22% + var(--tone, 0) * 58%), #dbe3ec) !important;
  background: color-mix(in srgb, #17a673 calc(4% + var(--tone, 0) * 12%), #fff) !important;
}
.cs-roll-no {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--nz-fs3);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(20,60,90,.18);
  background: color-mix(in srgb, #17a673 calc(45% + var(--tone, 0) * 55%), #cfe6dd) !important;
}
.cs-roll-when {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: var(--nz-s1) var(--nz-s3);
  font-size: var(--nz-fs1);
  font-weight: 800;
  border-color: color-mix(in srgb, #17a673 calc(30% + var(--tone, 0) * 60%), #dbe3ec) !important;
  color: color-mix(in srgb, #0f8a5f calc(55% + var(--tone, 0) * 45%), #7aa197) !important;
}

/* ── 목표 선택 화면: 단계 개념 설명 ── */
.cs-goal-now {
  display: inline-block; background: var(--blue-tint-soft); color: var(--navy-800);
  border-radius: 999px; padding: var(--nz-s2) var(--nz-s4); font-size: var(--nz-fs4); font-weight: 800; margin-bottom: var(--nz-s2);
}
.cs-goal-now b { color: var(--teal-500); }
.cs-goal-intro {
  max-width: 760px; margin: var(--nz-s2) auto 0; font-size: var(--nz-fs3); color: var(--text-600); line-height: 1.7;
}
.cs-goal-cur { margin-top: var(--nz-s2); font-size: var(--nz-fs3); color: var(--text-400); }
.cs-goal-pick {
  display: block; font-size: var(--nz-fs2); color: var(--navy-800); background: var(--blue-tint-soft);
  border-radius: 7px; padding: var(--nz-s2) var(--nz-s2); margin-top: var(--nz-s2); line-height: 1.5;
}

/* 권해드리는 단계 - 더 크게, 등장이 끝난 뒤 천천히 두근거리며 강조 (요청에 따라 기존 대비 20% 느리게 조정: 2.4s -> 2.88s) */
.cs-goal-reco {
  border-color: var(--teal-500);
  background: #f4fbfa;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 28px rgba(20,120,110,.20);
  animation: csPop .5s cubic-bezier(.2,.9,.3,1.3) backwards,
             csHeartbeat 2.88s ease-in-out 2s infinite;
}
@keyframes csHeartbeat {
  0%, 100% { transform: scale(1.06); }
  28%      { transform: scale(1.115); }
  46%      { transform: scale(1.06); }
  64%      { transform: scale(1.10); }
}
.cs-goal-reco:hover { animation-play-state: paused; }
.cs-goal-reco .cs-goal-name { font-size: 1.24rem; }
.cs-goal-reco .cs-goal-lv { font-size: var(--nz-fs3); }

/* 메일전송 확인창 경고 문구 - 기존 진단화면 두근거림(csHeartbeat)을 그대로 재사용하되 더 느리게(3.4s) */
.mail-warn-box {
  text-align: center; padding: 18px 20px; margin: 16px 0;
  border: 1.5px solid #e8b4b4; border-radius: 12px; background: #fdf2f2;
}
.mail-warn-title {
  color: #c0392b; font-weight: 800; font-size: 1.15rem; margin-bottom: 8px;
  animation: csHeartbeat 3.4s ease-in-out infinite;
  display: inline-block;
}
.mail-warn-sub { color: #a94442; font-size: 0.84rem; line-height: 1.6; white-space: nowrap; }

/* ===== 계약서 저장 완료 연출 (전자서명 완료된 저장에만 표시되는 장식용 애니메이션) =====
   실제 계약서 화면(용지) DOM은 전혀 건드리지 않고 body에 별도로 얹는 오버레이라, 기존 양식/캡처 로직과는
   완전히 분리되어 있음 - 이 부분이 실패하거나 없어도 계약서 저장/PDF 등록 자체에는 영향이 없음 */
.contract-preparing-overlay {
  /* z-index를 계약서 캡처(exportMultiSheetPdf) 중 종이에 임시로 붙는 z-index(99999)보다 높게 잡아야 함 - 캡처가
     진행되는 약 1초 동안 종이가 화면 맨 위로 잠깐 고정되는데, 그 순간에도 "준비중" 안내가 가려지지 않고 계속
     보여야 하기 때문(실측 결과: 낮게 잡았더니 캡처 중에는 안내문구가 종이 뒤에 가려 안 보이는 문제가 있었음) */
  position: fixed; inset: 0; z-index: 999990;
  background: rgba(255,255,255,.86);
  display: flex; align-items: center; justify-content: center;
}
.cpo-box { text-align: center; }
.cpo-spinner {
  width: 46px; height: 46px; margin: 0 auto 14px;
  border: 4px solid var(--border); border-top-color: var(--teal-500);
  border-radius: 50%; animation: cpoSpin 0.9s linear infinite;
}
@keyframes cpoSpin { to { transform: rotate(360deg); } }
.cpo-text { font-size: 1.02rem; font-weight: 700; color: var(--navy-800); line-height: 1.6; }

.contract-complete-overlay {
  position: fixed; inset: 0; z-index: 999991;
  background: rgba(15,25,35,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .4s ease;
}
.contract-complete-overlay.cc-fadeout { opacity: 0; }
.cc-stage {
  position: relative; width: 420px; height: 300px; max-width: 90vw;
  animation: ccStageShake .28s ease-out 1.9s 1;
}
@keyframes ccStageShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-0.4deg); }
  45% { transform: translateX(3px) rotate(0.3deg); }
  70% { transform: translateX(-2px); }
}
/* 문서 카드 - 실제 종이 문서처럼 보이도록 헤더바/본문 줄/서명란 뼈대를 함께 그려넣음(단순 아이콘이 아닌
   "문서 이미지"처럼 보이게 하기 위함 - 요청사항) */
.cc-doc {
  position: absolute; top: 10px; width: 190px; height: 254px;
  background: #fff; border-radius: 8px; box-shadow: 0 16px 34px rgba(0,0,0,.32);
  padding: 16px 16px 14px; box-sizing: border-box;
  opacity: 0;
}
.cc-doc::after {
  /* 종이 오른쪽 위 모서리가 살짝 접힌 느낌을 주는 장식 */
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 16px 16px 0; border-color: transparent var(--bg-200, #eef1f4) transparent transparent;
  border-radius: 0 8px 0 0;
}
.cc-doc-tag {
  position: absolute; top: -11px; left: 14px; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; color: #fff; background: var(--teal-500);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.cc-doc-right .cc-doc-tag { background: var(--navy-700, #33475b); }
.cc-doc-head { height: 10px; width: 62%; border-radius: 3px; background: var(--teal-500); opacity: .85; margin-bottom: 14px; }
.cc-doc-right .cc-doc-head { background: var(--navy-700, #33475b); }
.cc-doc-line { height: 7px; border-radius: 3px; background: #d8dee4; margin-bottom: 9px; }
.cc-doc-sign {
  margin-top: 18px; height: 30px; border-top: 1px solid #d8dee4;
  display: flex; align-items: center; justify-content: flex-end;
}
.cc-doc-sign::before {
  content: ''; width: 46px; height: 18px; margin-top: 6px;
  background: none; border-bottom: 2px solid #9fb0be; /* [51차] 서명 흉내 그라데이션 → 선 */
  opacity: .8;
}
/* 등장(0.1~1.0s) → 모임(1.0~1.8s) → 도장(1.7~2.3s) → 메세지(2.5~3.2s) → 3.8s에 전체 페이드아웃(요청사항: 3~4초, 천천히).
   등장/모임을 하나의 animation으로 합쳐둠 - transform 속성에 애니메이션 두 개를 따로 걸면(등장용/모임용) 브라우저가
   겹치는 순간 "모임" 쪽 시작값을 등장 애니메이션이 멈춘 위치가 아니라 원래 기본값(transform:none)에서부터
   다시 잡아버려 카드가 순간 이동하듯 튀는 문제가 있었음(실측으로 확인) - 한 애니메이션 안에 구간별 키프레임으로
   전부 넣어서 항상 이전 프레임 값에서 이어지게 함 */
.cc-doc-left  { left: 8px;  animation: ccDocLeft  1.7s ease-out .1s forwards; }
.cc-doc-right { right: 8px; animation: ccDocRight 1.7s ease-out .1s forwards; }
@keyframes ccDocLeft {
  0%   { opacity: 0; transform: translateX(-260px) rotate(-9deg); }
  53%  { opacity: 1; transform: translateX(0)       rotate(-3deg); }
  100% { opacity: 1; transform: translateX(58px)    rotate(-5deg); }
}
@keyframes ccDocRight {
  0%   { opacity: 0; transform: translateX(260px) rotate(9deg); }
  53%  { opacity: 1; transform: translateX(0)      rotate(3deg); }
  100% { opacity: 1; transform: translateX(-58px)  rotate(5deg); }
}
/* 도장(각인) 연출 - 위에서 큰 도장이 문서 위로 떨어지듯 내려와 눌리는 느낌을 임팩트(오버슈트)와 잉크 번짐
   효과로 표현함. mix-blend-mode:multiply로 종이 위에 잉크가 스며든 것처럼 보이게 함(단순히 위에 얹힌
   스티커가 아니라 "각인"처럼 보이게 하기 위함 - 요청사항) */
.cc-stamp-wrap {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
}
.cc-stamp {
  position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px;
  border-radius: 50%; border: 5px solid #c23b3b; color: #c23b3b;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-weight: 900; font-size: 1.05rem; line-height: 1.25; letter-spacing: .02em; text-align: center;
  box-shadow: inset 0 0 0 3px rgba(194,59,59,.35);
  mix-blend-mode: multiply; opacity: 0; transform: scale(2.6) rotate(-26deg);
  animation: ccStampIn .6s cubic-bezier(.25,.9,.3,1.25) 1.7s forwards;
}
.cc-stamp span { display: block; }
@keyframes ccStampIn {
  0%   { opacity: 0; transform: scale(2.6) rotate(-26deg); }
  55%  { opacity: .95; transform: scale(.82) rotate(-9deg); }
  75%  { opacity: 1; transform: scale(1.08) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(-10deg); }
}
.cc-stamp-impact {
  position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px;
  border-radius: 50%; background: rgba(194,59,59,.25);
  opacity: 0; transform: scale(.4);
  animation: ccImpactFlash .5s ease-out 1.85s forwards;
}
@keyframes ccImpactFlash {
  0%   { opacity: .8; transform: scale(.4); }
  100% { opacity: 0; transform: scale(2.1); }
}
.cc-message {
  margin-top: 22px; color: #fff; font-size: 1.5rem; font-weight: 800; text-align: center; line-height: 1.6;
  opacity: 0; transform: translateY(10px);
  animation: ccMsgIn .7s ease-out 2.5s forwards;
}
@keyframes ccMsgIn { to { opacity: 1; transform: translateY(0); } }

/* ── 진단 결과: 칸 제목을 한 줄 가운데로 ── */
.cs-lv-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  align-items: center;
  width: 100%;
}

/* 단계 이동 화살표 - 박스 안 정중앙 */

/* 상담 결과 → 가격제안서 · 계약서로 이어가기 */
.cs-handoff-body b { display: block; font-size: var(--nz-fs4); color: var(--navy-800); }
.cs-handoff-body span { font-size: var(--nz-fs2); color: var(--text-600); }

/* 추천 제품 카드를 눌러 문서로 이어가기 */
.cs-prod { display: block; width: 100%; text-align: left; cursor: pointer; }
.cs-prod:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,120,110,.16); }
.cs-prods-hint { text-align: center; font-size: var(--nz-fs3); color: var(--text-600); margin-top: var(--nz-s2); }

/* 제품 선택 후 나오는 문서 선택 */
.cs-pickdoc-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--nz-s2); }
.cs-pickdoc-btn {
  display: flex; align-items: center; gap: var(--nz-s3); text-align: left;
  border: 1.5px solid var(--border); border-radius: 12px; padding: var(--nz-s3) var(--nz-s3); background: #fff; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.cs-pickdoc-btn:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.cs-pickdoc-btn:active { transform: scale(.98); }

/* 추천 제품 카드 - 이름과 선택 버튼만 크게(설명은 위쪽에서 이미 안내함) */
.cs-prod {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--nz-s3);
  min-height: 132px; padding: var(--nz-s5) var(--nz-s4); cursor: pointer;
}
.cs-prod-name-big {
  font-size: 1.5rem; font-weight: 800; color: var(--navy-800); letter-spacing: -0.5px;
}
.cs-prod-go-big {
  display: inline-block; background: var(--teal-500); color: #fff;
  font-size: var(--nz-fs3); font-weight: 800; padding: var(--nz-s2) var(--nz-s4); border-radius: 999px;
  box-shadow: 0 4px 12px rgba(20,120,110,.25);
}
.cs-prod:hover .cs-prod-go-big { filter: brightness(1.08); }
.cs-prod:active {
  transform: scale(.98);
}

/* 설정 > 상담 제품 노출 */
.cp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; cursor: pointer; background: #fff;
}
.cp-row:hover { border-color: var(--teal-500); }
.cp-name { font-size: .95rem; font-weight: 800; color: var(--navy-800); min-width: 110px; }
.cp-tag { flex: 1; font-size: .8rem; color: var(--text-400); }
.cp-state {
  font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--blue-tint-soft); color: var(--navy-800);
}

/* ── 추천 제품: 고르면 그 카드만 크게 남고 나머지는 작아져 위로 정렬 ── */
.cs-prods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--nz-s3);
  margin-top: var(--nz-s3);
  justify-items: center;
}
.cs-prod-summary {
  font-size: var(--nz-fs2); color: var(--text-600); line-height: 1.55; text-align: center;
  max-width: 260px;
}
.cs-prod {
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease,
              min-height .32s ease, padding .32s ease;
}
/* 고른 카드 - 가운데 크게 */
.cs-prod-picked {
  border-color: var(--teal-500) !important;
  box-shadow: 0 12px 30px rgba(20,120,110,.22);
  transform: scale(1.04);
}
/* 안 고른 카드 - 작아지고 흐려짐 */
.cs-prod-mini {
  min-height: 0; padding: var(--nz-s2) var(--nz-s3); opacity: .55;
}
.cs-prod-mini .cs-prod-name-big { font-size: var(--nz-fs4); }
.cs-prod-mini .cs-prod-summary { display: none; }
.cs-prod-mini .cs-prod-go-big { font-size: var(--nz-fs1); padding: var(--nz-s1) var(--nz-s3); }
.cs-prod-mini:hover { opacity: 1; }

/* 고른 제품의 강점 - 하나씩 쾅쾅 등장 */
.cs-proddetail { margin-top: var(--nz-s4); }
.cs-pd-cap {
  text-align: center; font-size: var(--nz-fs4); font-weight: 800; color: var(--navy-800); margin-bottom: var(--nz-s2);
}

/* 강점이 다 나온 뒤 등장하는 작성 버튼 */
#csPickDoc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-top: 16px; max-width: 720px; margin-left: auto; margin-right: auto;
  animation: csSlam .8s cubic-bezier(.22,1.05,.36,1) backwards;
}

/* 설정 > 제품 노출 선택 */
.cp-item { border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.cp-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; flex-wrap: wrap; }
.cp-toggle {
  flex: 1; min-width: 140px; text-align: left; background: none; border: none; cursor: pointer;
  font-size: 1rem; font-weight: 800; color: var(--navy-800);
}
.cp-toggle i { font-style: normal; font-size: .8rem; color: var(--teal-500); transition: transform .2s ease; display: inline-block; }
.cp-open .cp-toggle i { transform: rotate(180deg); }
.cp-sw { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-600); cursor: pointer; }
.cp-edit { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 14px; }
.cp-open .cp-edit { max-height: 1400px; padding: 0 14px 14px; }
.cp-label { display: block; font-size: .82rem; font-weight: 700; color: var(--text-600); margin: 10px 0 5px; }
.cp-edit textarea, .cpPointTitle {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .86rem; font-family: inherit; line-height: 1.5;
}
.cpPoint {
  display: grid; grid-template-columns: 1fr 34px; gap: 6px; align-items: start;
  border: 1px solid var(--border); border-radius: 9px; padding: 9px; margin-bottom: 7px; background: #fafbfc;
}
.cpPoint .cpPointTitle { grid-column: 1; font-weight: 700; }
.cpPoint .cpPointBody { grid-column: 1; }
.cpPointDel {
  grid-column: 2; grid-row: 1 / span 2; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--border); background: #fff; color: var(--danger); font-size: 1.1rem; cursor: pointer;
}

/* 환경설정 > 자동 실행 예약 상태 */
.sched-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 8px;
}
.sched-name { font-size: .92rem; font-weight: 700; color: var(--navy-800); min-width: 130px; }
.sched-state { font-size: .78rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; }
.sched-ok { background: #e6f7f0; color: #0f8a5f; }
.sched-no { background: #fdecec; color: #c0392b; }
.sched-next { font-size: .8rem; color: var(--text-400); }

/* ==================================================================
   상단 브랜드 · 메뉴 다시 정리
   - 메뉴는 글자 수와 상관없이 같은 크기 박스로 균일하게
   - 선택은 밑줄이 아니라 박스 색으로 표시
   ================================================================== */
.topnav-brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  flex: 0 0 38px; height: 38px; border-radius: 11px;
  background: var(--teal-500); color: #23262A;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; letter-spacing: -0.5px;
}
.brand-text .org {
  font-size: .68rem; font-weight: 700; letter-spacing: 1.4px;
  color: var(--teal-500); text-transform: uppercase;
}
.brand-text .branch {
  font-size: .96rem; font-weight: 700; color: #fff; letter-spacing: -0.3px; margin-top: 1px;
}
/* [2026-09-19] 화면에 지금 어떤 빌드가 떠 있는지 한눈에 확인할 수 있게 추가한 작은 표시.
   캐시 문제로 "방금 드린 버전이 아닌 것 같다"는 혼선이 있었는데, 이걸 보면 새로고침만으로
   즉시 최신 버전인지 스스로 확인 가능(사장님이 매번 개발자도구를 열 필요 없음). */
.brand-build-tag {
  font-size: .62rem; font-weight: 600; color: rgba(255,255,255,.38);
  letter-spacing: .2px; margin-top: 2px;
}

/* 메뉴 - 균일한 크기의 박스 */
.topnav-menu {
  gap: 6px;
  padding: 9px 14px;
  background: var(--navy-900);
  border-top: 1px solid rgba(255,255,255,.06);
}
.topnav-menu .nav-link {
  justify-content: center;
  min-width: 104px;              /* 글자 수가 달라도 같은 폭 */
  height: 40px;                  /* 같은 높이 */
  padding: 0 14px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  color: #C7CBD1;
  letter-spacing: -0.2px;
  transition: background .16s ease, color .16s ease;
}
.topnav-menu .nav-link:hover { background: rgba(255,255,255,.09); color: #fff; }

/* 선택 표시 - 밑줄 대신 박스 색상 */
.topnav-menu .nav-link.active {
  background: var(--teal-500);
  color: #23262A;
  font-weight: 800;
}
.topnav-menu .nav-link.active::after { display: none; }  /* 기존 녹색 밑줄 제거 */

/* 하위 메뉴 - 삼각형 표시 없이, 열렸을 때만 밝게 */
.nav-group-toggle.open { background: rgba(255,255,255,.12); color: #fff; }
.nav-dropdown .nav-link {
  min-width: 0; height: auto; padding: 10px 14px; border-radius: 8px;
  justify-content: flex-start;
}

/* ── 로그인 화면 ─────────────────────────────────────────────── */
.login-page {
  background: #2E3136; /* [51차] 단색 */
}
.login-brand { text-align: center; }
.login-mark {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px;
  background: var(--teal-500); color: #23262A;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px;
  box-shadow: 0 8px 22px rgba(163,217,119,.28);
}
.login-brand .org {
  font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  color: var(--teal-500); text-transform: uppercase;
}
.login-brand .branch {
  font-size: 1.06rem; font-weight: 700; color: #fff; margin-top: 4px; letter-spacing: -0.3px;
}
.login-card {
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}
.login-card h1 {
  font-size: 1.4rem; font-weight: 800; color: var(--navy-800); letter-spacing: -0.4px;
  margin-bottom: 4px;
}
.login-sub { font-size: .88rem; color: var(--text-400); margin: 0 0 20px; }
.login-card .btn-primary {
  background: var(--teal-500); color: #23262A; font-weight: 800;
  border: none; border-radius: 10px;
  transition: filter .16s ease, transform .12s ease;
}
.login-card .btn-primary:hover { filter: brightness(1.06); }
.login-card .btn-primary:active { transform: scale(.985); }
.login-card input:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(163,217,119,.22);
}
.login-foot { color: rgba(255,255,255,.45); }

/* 보수 관리 화면 - 왼쪽 만료 현황 / 오른쪽 스마트백업 검토를 나란히 */
.maint-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
.maint-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maint-side-head h3 { margin: 0; }
.maint-side-cap { font-size: .82rem; color: var(--text-400); margin: 8px 0 6px; }
.maint-side-table th, .maint-side-table td { font-size: .84rem; padding: 7px 8px; }
@media (max-width: 1100px) { .maint-split { grid-template-columns: 1fr; } }

/* [2026-09-11] 주소·이메일 입력 공통 모양 - 가격제안서/계약서 3종이 같은 규칙을 쓰도록 한 곳에 모음 */
.addr-sel {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-900);
  font-size: 0.85rem;
}
.addr-sel:focus { border-color: var(--teal-500); outline: none; }
.addr-helper {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.addr-helper .addr-sel { flex: 1; min-width: 0; }
/* [2026-09-18 수정, 사장님 지적 "메일주소 입력 칸이 너무 좁아서 확인이 조금 어려워"] 아이디/도메인
   입력칸 + 목록선택을 한 줄에 욱여넣었더니(320px짜리 좁은 드로어 안이라) 셋 다 너무 작아져서 실제
   입력한 주소를 눈으로 확인하기 어려웠음. 목록선택(email-domain-pick)만 줄바꿈해서 다음 줄 전체
   폭을 쓰도록 하고, 그만큼 아이디/도메인 입력칸(위 .seg-input input)이 한 줄을 넉넉하게 나눠 쓰게 됨. */
.seg-input.email-seg { flex-wrap: wrap; }
.seg-input.email-seg .email-domain-pick {
  flex: 1 1 100%;
  min-width: 0;
  margin-left: 0;
  margin-top: 6px;
  padding: 8px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-900);
  font-size: 0.82rem;
}
.seg-input.email-seg .email-domain-pick:focus { border-color: var(--teal-500); outline: none; }

/* [2026-09-11] 계약서 고객정보의 메일 입력 - 입력칸과 도메인 선택을 한 줄에 나란히 */
.email-row { display: flex; gap: 6px; align-items: center; }
.email-row input { flex: 1; min-width: 0; }
.email-helper {
  flex: 0 0 auto;
  max-width: 44%;
  padding: 8px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-900);
  font-size: 0.82rem;
}
.email-helper:focus { border-color: var(--teal-500); outline: none; }

/* [2026-09-11] 주소 3칸(일반계약서 기준) - 세무사랑Pro·기타서비스도 같은 모양으로 */
.addr-triplet { display: flex; flex-direction: column; gap: 6px; }
.addr-triplet .addr-tri-detail {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.addr-triplet .addr-tri-detail:focus { border-color: var(--teal-500); outline: none; }

/* [2026-09-12] 장 경계에서 갈라지면 안 되는 묶음(.keep-together).
   계약서 용지(.gen-page-sheet / .etc-page-sheet)가 flex-direction:column 이라, 그냥 div로 감싸면
   그 묶음이 "눌려서(flex-shrink)" 높이가 줄고 바로 뒤 문구와 겹쳐 보였음(사장님 지적: 담당지점 표 위에
   "본 계약서를 2부 작성하여…" 문구가 겹침). 눌리지 않도록 고정하고 폭도 한 줄 전체를 쓰게 함. */
.keep-together {
  flex: 0 0 auto;
  width: 100%;
  align-self: stretch;
}

/* [2026-09-12, 사장님 지적 - 기타서비스 스크롤이 따로 놀고 움직이는 한계가 다름]
   원인: 마지막 장에도 간인이 붙어 있어서, 종이 아래로 60px 삐져나간 만큼 문서 영역이 넘쳤음.
   그래서 화면 전체 스크롤과 별개로 안쪽 영역에 짧은 스크롤이 하나 더 생겨, 마우스 위치에 따라
   움직이는 범위가 달라졌음(일반계약서는 마지막 장에 간인이 없어서 이 문제가 없었음).
   장 경계 간인은 "다음 장이 있을 때" 찍는 것이므로 마지막 장에는 애초에 필요 없음 - 화면에서 숨김.
   (PDF는 페이지 경계마다 따로 그리므로 이 규칙과 무관하게 정상 출력됨) */
.tlc-paper-doc .tlc-page-sheet:last-child .tlc-ganin-mark,
.tlc-paper-doc .gen-page-sheet:last-child .tlc-ganin-mark,
.tlc-paper-doc .etc-page-sheet:last-child .tlc-ganin-mark {
  display: none !important;
}

/* ==================================================================
   [2026-09-13] 새 대시보드 - 사장님과 맞춘 시안 그대로
   ================================================================== */
.dash-stat-row{display:grid; grid-template-columns:repeat(5,1fr); gap: var(--nz-s3); margin-bottom: var(--nz-s4);}
.dash-stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding: var(--nz-s3) var(--nz-s4); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;}
.dash-stat:hover{border-color:var(--teal-500); background:var(--blue-tint-soft);}
.dash-stat-label{font-size: var(--nz-fs2); color:var(--text-500); font-weight:700;}
.dash-stat-num{font-size:1.7rem; font-weight:800; margin-top: var(--nz-s2); color:var(--text-900);}
.dash-stat-num span{font-size: var(--nz-fs3); font-weight:700; color:var(--text-400); margin-left: var(--nz-s1);}
.dash-stat-sub{font-size: var(--nz-fs1); color:var(--text-400); margin-top: var(--nz-s1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.dash-sec-head{display:flex; align-items:center; gap: var(--nz-s2); margin-bottom: var(--nz-s3);}
.dash-sec-title{font-size: var(--nz-fs4); font-weight:800;}
.dash-badge{background:var(--teal-500); color:#fff; font-size: var(--nz-fs1); font-weight:800; padding: 2px var(--nz-s2); border-radius:999px;}
.dash-badge.red{background:#D9534F;}
.dash-sec-right{margin-left: auto; font-size: var(--nz-fs1); color:var(--text-400);}

.dash-split{display:grid; grid-template-columns:1fr 250px; gap: var(--nz-s4); align-items:start;}
.dash-split-left{min-width:0;}
.dash-split-right{border-left:1px solid var(--border); padding-left: var(--nz-s4);}

.dash-hours{display:flex; border:1px solid var(--border); border-radius:10px; background:var(--blue-tint-soft); padding: var(--nz-s2) var(--nz-s3); margin-bottom: var(--nz-s4);}
.dash-hour{flex:1; text-align:center; font-size: var(--nz-fs3); font-weight:700; color:var(--text-500);}
.dash-hour::after{content:""; display:block; width:1px; height:8px; background:#C9CFD6; margin: var(--nz-s1) auto 0;}
.dash-hour.now span{display:inline-block; background:var(--teal-600); color:#fff; border-radius:8px; padding: 2px var(--nz-s2); font-size: var(--nz-fs3);}
.dash-hour.now::after{background:var(--teal-600); height:13px; width:3px;}

.dash-daysep{display:flex; align-items:center; gap: var(--nz-s2); margin: var(--nz-s3) 0 var(--nz-s2); font-size: var(--nz-fs1); font-weight:800; color:var(--text-400);}
.dash-daysep::after{content:""; flex:1; height:1px; background:var(--border);}
.dash-daysep.today{color:var(--teal-600);}
.dash-daysep.today::after{background:var(--teal-500);}

.dash-tl{position:relative; padding-left: var(--nz-s5);}
.dash-tl::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--border);}
.dash-tl-item{position:relative; margin-bottom: var(--nz-s2);}
.dash-tl-item::before{content:""; position:absolute; left:-20px; top:20px; width:10px; height:10px; border-radius:50%; background:#C9CFD6; border:2px solid #fff;}
.dash-tl-item.today::before{background:var(--teal-600);}
.dash-tl-item.late::before{background:#D9534F;}

.dash-row{display:flex; align-items:center; gap: var(--nz-s3); border:1px solid var(--border); border-radius:10px; padding: var(--nz-s3) var(--nz-s4); background:var(--surface); cursor:pointer;}
.dash-row.today{background:var(--blue-tint-soft); border-color:var(--teal-500); border-left:4px solid var(--teal-600);}
.dash-row.today .dash-time{color:var(--teal-600);}
.dash-row.sel{border-bottom-left-radius:0; border-bottom-right-radius:0;}
.dash-time{font-weight:800; font-size:1.3rem; min-width:82px; color:var(--navy-800); line-height:1.15;}
.dash-time small{display:block; font-size: var(--nz-fs1); font-weight:700; color:var(--text-400); margin-top: 1px;}
.dash-row.today .dash-time small{color:var(--teal-600);}
.dash-name{font-weight:800; font-size: var(--nz-fs4);}
.dash-meta{font-size: var(--nz-fs1); color:var(--text-500); margin-top: 2px;}
.dash-amt{margin-left: auto; font-weight:800; font-size: var(--nz-fs3); white-space:nowrap;}
.dash-chip{font-size: var(--nz-fs1); font-weight:800; padding: var(--nz-s1) var(--nz-s2); border-radius:999px; background:#fff; color:var(--teal-600); border:1px solid var(--teal-500); white-space:nowrap;}
.dash-chip.gray{background:#F2F4F6; color:var(--text-400); border-color:var(--border);}
.dash-row.empty{color:var(--text-400); font-size: var(--nz-fs2); cursor:default; padding: var(--nz-s3) var(--nz-s4);}
.dash-row.empty .dash-time{color:var(--text-400); font-weight:700; font-size: var(--nz-fs3);}

.dash-expand{border:1px solid var(--teal-500); border-top:none; border-left:4px solid var(--teal-600);
  border-radius:0 0 10px 10px; background:var(--blue-tint-soft); padding: var(--nz-s3) var(--nz-s4);}
.dash-exp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap: var(--nz-s3) var(--nz-s4); font-size: var(--nz-fs2);}
.dash-exp-grid .k{color:var(--text-400); font-size: var(--nz-fs1);}
.dash-exp-grid .v{font-weight:700; margin-top: 2px;}

/* 방문 시각 경과 - 붉게 번쩍임 */
@keyframes dashFlash{0%,100%{background:#FDF0EF; border-color:#D9534F;}50%{background:#F8D7D5; border-color:#B93B37;}}
.dash-row.late{animation:dashFlash 1.1s ease-in-out infinite; border-left:4px solid #D9534F;}
.dash-row.late .dash-time, .dash-row.late .dash-name{color:#D9534F;}
.dash-siren{display:inline-flex; align-items:center; gap: var(--nz-s1); font-size: var(--nz-fs1); font-weight:800; color:#fff; background:#D9534F; padding: var(--nz-s1) var(--nz-s2); border-radius:999px; white-space:nowrap;}

.dash-more-wrap{display:flex; justify-content:flex-end; margin-top: var(--nz-s3);}
.dash-more-btn{border:1px solid var(--border); background:#fff; border-radius:9px; padding: var(--nz-s2) var(--nz-s4); font-size: var(--nz-fs2); font-weight:800; color:var(--text-500); cursor:pointer;}
.dash-more-btn:hover{border-color:var(--teal-500); color:var(--teal-600);}

.dash-side-title{font-size: var(--nz-fs3); font-weight:800; margin-bottom: var(--nz-s1);}
.dash-side-sub{font-size: var(--nz-fs1); color:var(--text-400); margin-bottom: var(--nz-s3); line-height:1.45;}
.dash-side-sub b{color:var(--teal-600);}
.dash-rec{border:1px solid var(--border); border-radius:9px; padding: var(--nz-s2) var(--nz-s3); margin-bottom: var(--nz-s2); cursor:pointer; background:var(--blue-tint-soft);}
.dash-rec:hover{border-color:var(--teal-500);}
.dash-rec .nm{font-size: var(--nz-fs3); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dash-rec .ds{font-size: var(--nz-fs1); color:var(--text-400); margin-top: var(--nz-s1);}
.dash-side-empty{font-size: var(--nz-fs1); color:var(--text-400); text-align:center; padding: var(--nz-s5) var(--nz-s2); line-height:1.6;}

.dash-week{display:grid; grid-template-columns:repeat(5,1fr); gap: var(--nz-s2);}
.dash-day{border:1px solid var(--border); border-radius:10px; padding: var(--nz-s3) var(--nz-s2); text-align:center;}
.dash-day.on{background:var(--blue-tint-soft); border-color:var(--teal-500);}
.dash-day .d{font-size: var(--nz-fs2); font-weight:800; color:var(--text-500);}
.dash-day.on .d{color:var(--teal-600);}
.dash-day .c{font-size:1.2rem; font-weight:800; margin: var(--nz-s2) 0 var(--nz-s1);}
.dash-day .n{font-size: var(--nz-fs1); color:var(--text-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.dash-todo-split{display:grid; grid-template-columns:340px 1fr; gap: var(--nz-s4); align-items:start;}
.dash-todo-right{border-left:1px solid var(--border); padding-left: var(--nz-s4); min-height:180px;}
.dash-simple{display:flex; flex-direction:column; gap: var(--nz-s2);}
.dash-simple-item{display:flex; align-items:center; gap: var(--nz-s2); border:1px solid var(--border); border-radius:8px; padding: var(--nz-s3) var(--nz-s3); font-size: var(--nz-fs3); cursor:pointer;}
.dash-simple-item.sel{background:var(--blue-tint-soft); border-color:var(--teal-500);}
.dash-simple-item.alarm{background:#FDF0EF; border-color:#D9534F;}
.dash-simple-item .nm{font-weight:800;}
.dash-simple-item .rt{margin-left: auto; font-size: var(--nz-fs1); color:var(--text-400);}
.dash-dot{width:7px; height:7px; border-radius:50%; background:var(--teal-600); flex:0 0 auto;}
.dash-dot.red{background:#D9534F;}

.dash-td-title{font-size: var(--nz-fs3); font-weight:800; margin-bottom: var(--nz-s3);}
.dash-td-row{display:flex; align-items:center; gap: var(--nz-s3); border:1px solid var(--border); border-radius:9px; padding: var(--nz-s3) var(--nz-s3); margin-bottom: var(--nz-s2); cursor:pointer; font-size: var(--nz-fs3); background:var(--surface);}
.dash-td-row:hover{border-color:var(--teal-500);}
.dash-td-row.alarm{background:#FDF0EF; border-color:#D9534F;}
.dash-td-row .cm{font-weight:800; min-width:120px;}
.dash-td-row .tp{font-size: var(--nz-fs1); font-weight:800; padding: 2px var(--nz-s2); border-radius:999px; background:var(--blue-tint-soft); color:var(--teal-600); border:1px solid var(--teal-500); white-space:nowrap;}
.dash-td-row .tp.red{background:#fff; color:#D9534F; border-color:#D9534F;}
.dash-td-row .memo{color:var(--text-500); font-size: var(--nz-fs2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-td-row .rt{margin-left: auto; font-size: var(--nz-fs1); color:var(--text-400); white-space:nowrap;}

/* ==================================================================
   [2026-09-13] 평가하기 화면 - 계약서·대시보드와 같은 모양으로 통일
   ================================================================== */
.ev-modal{max-width:660px; width:94vw; padding: 0; overflow:hidden;}
.ev-head{padding: var(--nz-s4) var(--nz-s5) var(--nz-s4); border-bottom:1px solid var(--border); position:relative;}
.ev-cname{font-size:1.18rem; font-weight:800;}
.ev-cmeta{font-size: var(--nz-fs2); color:var(--text-400); margin-top: var(--nz-s1);}
.ev-tags{display:flex; gap: var(--nz-s2); margin-top: var(--nz-s2); flex-wrap:wrap;}
.ev-tg{font-size: var(--nz-fs1); font-weight:800; padding: var(--nz-s1) var(--nz-s2); border-radius:999px; background:var(--blue-tint-soft); color:var(--teal-600); border:1px solid var(--teal-500);}

.ev-tabs{display:flex; gap: var(--nz-s2); padding: var(--nz-s3) var(--nz-s5) 0;}
.ev-tab{flex:1; text-align:center; padding: var(--nz-s2) var(--nz-s2); font-size: var(--nz-fs3); font-weight:800; color:var(--text-400);
  border:1px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; background:#F7F9FA; cursor:pointer;}
.ev-tab.on{background:#fff; color:var(--navy-800); position:relative; top:1px;}

.ev-body{border-top:1px solid var(--border); padding: var(--nz-s4) var(--nz-s5) var(--nz-s1); margin-top: -1px; max-height:56vh; overflow-y:auto;}
.ev-grp{margin-bottom: var(--nz-s4);}
.ev-grp-label{font-size: var(--nz-fs2); font-weight:800; margin-bottom: var(--nz-s2);}
.ev-grp-label small{font-weight:400; font-size: var(--nz-fs1); color:var(--text-400); margin-left: var(--nz-s1);}

.ev-choices{display:flex; gap: var(--nz-s2);}
.ev-choice{flex:1; border:1.5px solid var(--border); border-radius:11px; padding: var(--nz-s3) var(--nz-s2); text-align:center; cursor:pointer; background:#fff;
  transition:border-color .15s ease, background .15s ease;}
.ev-choice:hover{border-color:var(--teal-500);}
.ev-choice.on{background:var(--blue-tint-soft); border-color:var(--teal-600);}
.ev-choice .ic{font-size:1.35rem; line-height:1; color:var(--text-400);}
.ev-choice.on .ic{color:var(--teal-600);}
.ev-choice .tx{font-size: var(--nz-fs2); font-weight:800; margin-top: var(--nz-s2);}
.ev-choice.on .tx{color:var(--teal-600);}

.ev-note{background:var(--blue-tint-soft); border:1px solid var(--border); border-radius:10px; padding: var(--nz-s3) var(--nz-s3);
  font-size: var(--nz-fs2); color:var(--text-500); line-height:1.6; margin-bottom: var(--nz-s4);}

.ev-pick{display:flex; flex-wrap:wrap; gap: var(--nz-s2);}
.ev-pk{border:1.5px solid var(--border); border-radius:9px; padding: var(--nz-s2) var(--nz-s3); font-size: var(--nz-fs2); font-weight:700; background:#fff; cursor:pointer;}
.ev-pk:hover{border-color:var(--teal-500);}
.ev-pk.on{background:var(--blue-tint-soft); border-color:var(--teal-600); color:var(--teal-600);}

.ev-hist{border:1px solid var(--border); border-radius:10px; padding: var(--nz-s3) var(--nz-s3); font-size: var(--nz-fs2); line-height:1.9; color:var(--text-500);}
.ev-hist b{color:var(--text-900);}

.ev-foot{display:flex; gap: var(--nz-s2); padding: var(--nz-s4) var(--nz-s5) var(--nz-s4); border-top:1px solid var(--border); background:#FBFCFC;}
.ev-foot .btn{border-radius:10px; padding: var(--nz-s3) var(--nz-s4); font-size: var(--nz-fs3); font-weight:800;}
.ev-foot .ev-main{flex:1;}
.ev-foot .ev-ghost{background:#fff; color:var(--text-500); border:1.5px solid var(--border);}

/* ------------------------------------------------------------------ *
 * 영업타임라인 (stl-*), 2026-09-19 신규
 * [2026-09-19 3차 수정, 사장님 피드백 반영] "기획할 때부터 나뉘어진 영역 없게 해달라고 했는데 테두리가
 * 있어서 답답해 보인다"는 지적 반영 - 화면 전체를 감싸던 .card(테두리+그림자)를 걷어내고 .stl-page 하나로
 * 통일해 순백색(--surface) 바탕 위에 내용이 그냥 놓이도록 함. 정보상자/칩/뱃지에 깔던 회색 음영(--bg)과
 * 테두리도 전부 제거 - 다만 "진행중/완료"처럼 실제로 눈에 띄어야 하는 상태만 색 채움 뱃지로 남기고,
 * "예정/패스/해당없음"처럼 아직 의미 없는 상태는 테두리도 배경도 없는 민무늬 텍스트로 낮춤.
 * 또한 "전화상담 구간에도 날짜가 있어야 하지 않냐" 요청으로 원형 마커 앞(왼쪽)에 날짜 칸(.stl-stage-date-col)을
 * 추가 - 실제 등록/예정일이 있는 구간(전화상담/방문상담)만 표시하고, 아직 데이터 연동 전인 구간은 비워둠.
 * 그라디언트는 쓰지 않음(작업 규칙) - 전부 기존 토큰(--navy-800/--teal-600 등) 단색만 사용.
 * ------------------------------------------------------------------ */
/* [2026-09-19 4차 수정] 넓은 화면에서 흰 배경이 다 못 덮는 문제 - #content 자식에 음수마진으로 흉내내던
   방식 대신, 뷰포트에 맞춰 실제로 늘어나는 #content 자체에 배경을 칠해서 화면 크기와 무관하게 항상 꽉 채움 */
#content.stl-content-bg{background:var(--surface);}

.stl-pick-compact{margin-bottom:var(--nz-s5); max-width:360px;}
.stl-pick-inputwrap{position:relative;}
.stl-pick-inputwrap input{width:100%; padding:var(--nz-s2) var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-r6); font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-pick-dropdown{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; background:var(--nz-bg); border-radius:var(--nz-r10); box-shadow:var(--shadow); max-height:280px; overflow-y:auto; padding:var(--nz-s2);}
.stl-pick-opt{display:flex; flex-direction:column; gap:var(--nz-s1); width:100%; text-align:left; background:none; border:none; border-radius:var(--nz-r6); padding:var(--nz-s2) var(--nz-s3); cursor:pointer; font-size:var(--nz-fs2); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-pick-opt:hover{background:var(--nz-fill);}
.stl-pick-opt-name{font-weight:700; color:var(--text-900);}
.stl-pick-opt-meta{color:var(--text-600); font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-pick-empty{padding:var(--nz-s3); color:var(--text-400); font-size:var(--nz-fs2); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-pick-selected{display:flex; align-items:center; gap:var(--nz-s2); font-size:var(--nz-fs3); font-weight:700; color:var(--text-900); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-pick-selected .btn{font-weight:500;}

.stl-header-card{display:flex; flex-wrap:wrap; align-items:baseline; gap:0; margin-bottom:var(--nz-s5);}
.stl-header-name{font-size:var(--nz-fs4); font-weight:700; color:var(--text-900); margin-right:var(--nz-s4); line-height:var(--nz-lh4); letter-spacing:var(--nz-ls4);}
.stl-header-meta{display:flex; flex-wrap:wrap; color:var(--text-600); font-size:var(--nz-fs2); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-header-meta span:not(:last-child)::after{content:'·'; margin:0 var(--nz-s3); color:var(--text-400);}

/* [2026-09-19 5차 수정, 사장님 지적] "가운데서 왜 오른쪽으로 와? 가운데서 왼쪽으로 끝으로 가야지" -
   4차에서 오른쪽으로 밀었던 방향이 반대였음. 기본은 가운데 정렬(margin:auto)로 시작하고, 어느 구간이든
   박스가 열려있는 동안은 왼쪽 끝(영역의 왼쪽 여백 시작점)까지 붙도록 이동 - 닫히면 다시 가운데로 돌아옴.
   화면 폭마다 "가운데 정렬로 생기는 왼쪽 여백" 크기가 다르므로 고정 %가 아니라, 여는 순간 실제 여백을
   측정해 --stl-shift로 넘겨줌(app.js openTimelineFor 참고) - 그만큼만 음수로 옮기면 정확히 왼쪽 끝에 붙음. */
/* [2026-09-19 8차 수정 — 9차에서 사장님이 다시 뒤집으심] "타임라인이 왜 왼쪽으로 가? 상담내용을
   오른쪽(화면 가운데 넓은 공간)에서 더 크게 써야지"라는 지적으로 8차에서 5차의 "구간 열면 왼쪽 끝까지
   이동"을 없앴었는데, 9차에서 사장님이 "상담이 시작되면(=구간이 열리면) 타임라인은 왼쪽으로 이동하고,
   질문은 화면 가운데 넓은 공간에서 열려야 한다 - 열린 게 없을 땐 타임라인이 가운데로 온다. 이건
   절대적인 규칙이니 앞으로 뭘 하더라도 이 동작 자체는 건드리지 말 것"이라고 최종 확정하심(8차의 판단이
   틀렸던 것 - 5차 동작이 맞았음). *** 이 전환 규칙(닫힘=가운데 1단 / 열림=왼쪽 타임라인+오른쪽 큰 내용)
   자체는 사장님이 "절대적"이라고 명시하신 부분이라 향후 어떤 작업을 하더라도 임의로 없애거나 반대로
   바꾸지 말 것. ***
   [2026-09-20 10차 수정, 사장님 재지적] 9차는 왼쪽 열을 고정폭(340px)으로 박아놔서 "열린 창 크기와
   무관하게 항상 같은 폭만큼만 이동"하는 문제가 있었음 - 사장님 요구는 "이동하는 정도는 입력하는 창에
   크기 얼마나 되느냐에 따라 다르게", "열린 정보가 최대한 열린창에서 중앙에 위치"였음(고정폭이 아니라
   열린 내용의 실제 폭 기준으로 매번 다시 계산되어야 함). 그래서 고정폭 340px 대신
   grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) 사용 - 가운데(auto) 열은 항상 콘텐츠의
   실제 폭만큼만 차지하고, 양옆 두 minmax(0,1fr) 열은 항상 같은 비율(1fr:1fr)로 나머지 공간을 나눠
   가지므로 수학적으로 가운데 열이 전체 폭의 정중앙에 위치함(콘텐츠 폭이 얼마든 상관없이 항상 중앙).
   타임라인은 1열에 놓고 justify-self:end로 오른쪽(=가운데 열과 맞닿는 쪽)에 붙임 - 그러면 가운데 열
   콘텐츠가 커질수록 1열 자체가 좁아지면서 타임라인이 자동으로 더 왼쪽까지 밀려나고, 콘텐츠가 작으면
   덜 밀려남 - "이동 정도가 열린 창 크기에 따라 달라짐" 요구를 그리드 계산만으로 만족시킴(고정값 없음).
   또한 이 전환에 순간 이동이 아니라 부드러운 애니메이션이 필요하다는 지적(여러 차례 반복됨)에 따라,
   app.js에 FLIP 기법(stlFlipTimeline) 도입 - 클래스 토글/내용 교체 "전"과 "후"의 실제 화면 좌표를 재서
   그 차이만큼 transform으로 역이동 시켜놓고, 곧바로 transform:none으로 트랜지션을 걸어 되돌리는
   방식으로 그리드 레이아웃 변화(직접 트랜지션이 안 걸리는 grid-template-columns 값 변화)까지 부드럽게
   보이도록 함. 이 전환용 transition은 JS가 필요할 때만 잠깐 붙였다 떼므로 기본 상태에서는 정의하지 않음.
   [2026-09-20 11차 수정, 사장님 지적] "대화 창이 열린 뒤 타임라인이 이동되면 안 됨 - 대화 길이가
   길다고 타임라인과 대화창이 계속 그 상황에 맞게 조정되면 안 됨, 계속 움직이면 눈이 아픔, 창이
   열리면서 위치가 잡히면 그대로 잠시 고정되어야 함" - 10차의 가운데 열(auto)은 "지금 보이는 질문
   텍스트의 실제 폭"에 매번 다시 맞춰졌기 때문에, 질문이 바뀔 때마다(문장 길이가 다르면) 타임라인과
   스포트라이트가 계속 좌우로 움찔거리는 문제가 있었음. 그래서 auto(콘텐츠 폭 추종) 대신 고정값
   min(620px,100%)으로 바꿈 - 이제 가운데 열 폭은 "이 구간(전화상담 어드바이저)이 열려있는 동안"
   항상 같은 값으로 고정되고, 질문이 바뀌어도(글자 수가 달라져도) 그 고정된 폭 안에서 텍스트만
   줄바꿈될 뿐 타임라인/스포트라이트의 위치 자체는 전혀 움직이지 않음. "이동량이 열린 창 크기에
   따라 다르게"라는 원래 요구는 "질문 하나하나의 글자 수"가 아니라 "지금 열려있는 구간(=박스)의
   종류"를 기준으로 이해해야 함 - 즉 열기/닫기, 다른 구간으로 바꿔 열기처럼 "박스 자체가 바뀌는
   순간"에만 이동이 있고(이때는 여전히 FLIP 애니메이션으로 부드럽게 이동), 같은 대화가 진행되는
   동안(질문만 바뀔 때)은 절대 움직이지 않음 - app.js stlWireCallAdvisor의 render()에서
   stlFlipTimeline 래핑을 제거해서 질문 전환마다 위치 재계산 자체가 아예 일어나지 않도록 함.
   [2026-09-20 12차 수정, 사장님 지적 + 제공 참고자료 반영] 두 가지 문제/요청:
   (1) "내 컴퓨터 화면에서는 중앙이지만 화면이 작아지기 시작하면 중앙이 아니라 왼쪽으로 치우쳐 있고
   화면이 작아지면 타임라인하고 겹쳐버리는 문제, 아이패드 가로모드를 최하 사이즈 기준으로" - 11차의
   가운데 열 min(620px,100%)은 화면이 좁아지면 100%까지 커질 수 있어서, 양옆 minmax(0,1fr) 열이
   진짜로 0까지 눌리면서 타임라인 내용이 밀려날 공간이 없어 옆(가운데 열)으로 흘러넘쳐 겹쳐 보이는
   문제가 있었음. 그래서 가운데 열은 minmax(320px,620px)로(최소 320px은 보장하되 그 밑으로는 더
   안 줄임), 양옆 두 열은 minmax(220px,1fr)로(최소 220px은 항상 보장) 바꿔서 타임라인/판단패널
   내용이 겹칠 공간 자체가 생기지 않도록 함. 세 값의 최소 합(220+320+220+gap)이 아이패드 가로
   최소 폭(~1024px) 안에 넉넉히 들어오도록 계산함. 그래도 더 좁아지는 경우(아이패드 세로 등,
   사장님도 "세로는 너무 좁아서 가로로 쓸 예정"이라고 하신 범위 밖)를 대비해 980px 미만에서는
   아예 1열로 쌓이는 안전장치(아래 미디어쿼리)를 추가해 겹침 자체가 물리적으로 불가능하게 함.
   (2) "이 타임라인은 네비게이션 같은 느낌이라서 진행 상태/정보를 판단 할 수있도록 도와줘야함 ...
   현재 판단 내용 오른쪽에 박스로 표기" - 사장님이 주신 참고 HTML(ERP_소개건_전화상담_룰테스트_v1)의
   오른쪽 카드("CRM 현재 판단": 상태 태그 + 기본원칙 + 대화기록)를 그리드 3번째(오른쪽) 열로 새로
   추가함(#stlJudgmentPanel, app.js stlWireCallAdvisor의 renderJudgment 참고) - 지금까지 비어서
   균형만 잡던 오른쪽 1fr 열에 실제 내용이 들어감. minmax(0,1fr)가 아니라 minmax(220px,1fr)로 바꿔도
   양옆 두 열이 여전히 "같은 최소값+같은 비율"이라 가운데 열이 정중앙에 오는 수학적 성질은 그대로
   유지됨(10차 절대규칙 안 깨짐). */
.stl-timeline{display:flex; flex-direction:column; max-width:640px; margin:0 auto;}
#stlTimelineArea.stl-area-open{display:grid; grid-template-columns:minmax(220px,1fr) minmax(320px,620px) minmax(220px,1fr); gap:var(--nz-s2) var(--nz-s6); align-items:start;}
#stlTimelineArea.stl-area-open .stl-header-card{grid-column:1 / -1;}
#stlTimelineArea.stl-area-open .stl-timeline{grid-column:1; grid-row:2; justify-self:end; max-width:min(560px, 100%); min-width:0; margin:0;}
#stlTimelineArea.stl-area-open .stl-advisor-spotlight{grid-column:2; grid-row:2; max-width:620px; margin:var(--nz-s1) 0 var(--nz-s5); width:100%; min-width:0;}
#stlTimelineArea.stl-area-open #stlJudgmentPanel{grid-column:3; grid-row:2; justify-self:start; max-width:min(300px, 100%); min-width:0; margin:var(--nz-s1) 0 var(--nz-s5); width:100%;}
/* 겹침 방지 최종 안전장치 - 위 minmax 최소값 합보다도 화면이 좁아지면(아이패드 세로, 폰 등) 3단
   그리드를 포기하고 1열로 쌓음 - 이러면 어떤 경우에도 물리적으로 겹칠 수가 없음. */
@media (max-width: 980px) {
  #stlTimelineArea.stl-area-open{grid-template-columns:1fr; gap:var(--nz-s5);}
  #stlTimelineArea.stl-area-open .stl-timeline{grid-column:1; grid-row:2; justify-self:center; max-width:min(560px, 100%); width:100%;}
  #stlTimelineArea.stl-area-open .stl-advisor-spotlight{grid-column:1; grid-row:3; max-width:min(620px, 100%); margin:var(--nz-s1) auto var(--nz-s5); justify-self:center;}
  #stlTimelineArea.stl-area-open #stlJudgmentPanel{grid-column:1; grid-row:4; max-width:min(560px, 100%); margin:0 auto var(--nz-s5); justify-self:center;}
}
.stl-stage-row{display:flex; gap:var(--nz-s2); min-width:0;}
/* [2026-09-20 13차 수정, 사장님 지적] "날짜(위)/상담중·상담종료(아래) 2줄로 분리, 가운데 정렬" - 예전엔
   우측정렬 한 줄짜리 텍스트였던 걸, 위=날짜/아래=짧은 진행상태(상담중/상담종료/방문예정/방문완료)로 된
   작은 2줄 배지로 바꿈. */
.stl-stage-date-col{width:60px; flex:0 0 auto; padding-top:0;}
.stl-stage-datebadge{display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;}
.stl-stage-datebadge-date{font-size:var(--nz-fs1); color:var(--text-400); font-variant-numeric:tabular-nums; font-weight:700; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-stage-datebadge-status{font-size:var(--nz-fs1); font-weight:700; color:var(--text-600); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-stage-datebadge-status.active{color:var(--nz-ink);}
.stl-stage-datebadge-status.done{color:var(--nz-g-ink);}
.stl-stage-line-col{display:flex; flex-direction:column; align-items:center; width:18px; flex:0 0 auto;}
.stl-stage-dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--nz-line); background:var(--nz-bg); flex:0 0 auto; margin-top:var(--nz-s1);}
.stl-stage-dot.done{background:var(--teal-600); border-color:var(--teal-600);}
.stl-stage-dot.active{background:var(--nz-bg); border-color:var(--navy-800); box-shadow:0 0 0 4px var(--nz-g-soft);}
.stl-stage-dot.skip{background:var(--text-400); border-color:var(--text-400);}
.stl-stage-dot.na{background:var(--nz-r-soft); border-color:var(--nz-r-ink);}
.stl-stage-line{flex:1; width:2px; min-height:26px; background:var(--nz-line); margin-top:var(--nz-s1);}

/* 구간 한 줄 = 제목열 + 박스(내용 있을 때만 옆에 생김), 내용 많아지면 줄바꿈되어 위/아래로도 늘어남
   [2026-09-20 12차 수정, 사장님 지적] "화면이 작아지면 타임라인하고 겹쳐버리는 문제" - 그리드 열
   폭 자체는 겹치지 않도록 고쳤지만(위 #stlTimelineArea.stl-area-open 참고), 이 안쪽 flex 체인은
   원래 고정 min-width(180px)/max-width(380px)를 쓰고 있어서, 그리드 열이 그보다 좁아지면(아이패드
   가로 등) 이 안의 내용이 flex의 기본 "자동 최소폭"(min-width:auto, 콘텐츠 폭만큼) 때문에 부모
   경계를 넘어 옆 칸(스포트라이트)으로 시각적으로 흘러넘쳤음(그리드 자체는 안 겹쳐도, 그 안의 내용이
   overflow:visible로 넘쳐 보이는 것 — 별개의 원인). min-width:0을 체인 전체에 넣어 "자동 최소폭"을
   없애고, 고정 180px/380px는 min(...,100%)로 바꿔서 진짜 좁을 때는 100%(=그때 남은 폭)까지만
   쓰도록 함 - 이제 글자가 줄바꿈되며 줄어들 뿐 옆으로 넘치지 않음. */
.stl-stage-top{flex:1; padding-bottom:var(--nz-s5); display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--nz-s4); min-width:0; transition:padding-bottom .28s ease;}
/* [2026-09-23 23차 신규, 사장님 요청 "왼쪽 타임라인 간격이 열려있는 메뉴 만큼 간격을 벌려주면 좋겠어"]
   실제 상세 내용은 오른쪽 스포트라이트에 크게 펼쳐지고 왼쪽 타임라인의 인라인 박스(.stl-box)는 원래
   짧은 요약만 담아 줄 높이가 거의 안 늘어나므로, 지금 열려있는 구간의 줄만 아래쪽 세로선
   (.stl-stage-line, flex:1이라 줄 전체 높이를 그대로 따라감)이 눈에 띄게 길어지도록 별도로 여백을
   더 줌 - 열려있는 단계가 타임라인에서도 "자리를 차지하고 있다"는 게 보이도록. 별도 JS 클래스 토글
   없이 이미 존재하는 .stl-box.open 상태를 :has()로 그대로 참조함(이 상태를 붙이고 떼는 로직은
   openTimelineFor/stlAnimateStageOpen/Close에 이미 있으므로 그대로 연동됨).*/
.stl-stage-row:has(.stl-box.open) .stl-stage-top{padding-bottom:calc(var(--nz-s6) * 3);}
.stl-stage-head-col{display:flex; flex-direction:column; gap:var(--nz-s2); min-width:0; flex:0 1 min(180px,100%);}
.stl-stage-head{display:flex; align-items:center; gap:var(--nz-s2); text-align:left; background:none; border:none; padding:0; cursor:pointer;}
.stl-stage-num{font-size:var(--nz-fs2); font-weight:700; color:var(--text-400); flex:0 0 auto; line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
/* [2026-09-20 16차 수정, 사장님 지적] 위 .stl-box-detail b 와 동일한 원리 - 가장 긴 라벨(4글자) 폭을
   기준(4em)으로 고정하고, 짧은 라벨은 그 안에서 글자 사이를 균등분할로 벌림(app.js stlSpreadLabel()). */
.stl-stage-label{display:flex; flex:0 0 4em; width:4em; justify-content:space-between; font-weight:700; color:var(--text-900); font-size:var(--nz-fs3); white-space:nowrap; line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
/* 진행중/완료만 실제로 눈에 띄어야 하는 상태라 색 채움 뱃지로 두고, 예정/패스/해당없음은 테두리·배경 없는 민무늬 텍스트 */
.stl-stage-badge{font-size:var(--nz-fs2); color:var(--text-400); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-stage-badge.done{font-size:var(--nz-fs1); font-weight:700; padding:var(--nz-s1) var(--nz-s2); border-radius:var(--nz-rp); background:var(--nz-g-soft); color:var(--nz-g-ink); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-stage-badge.active{font-size:var(--nz-fs1); font-weight:700; padding:var(--nz-s1) var(--nz-s2); border-radius:var(--nz-rp); background:var(--navy-800); color:#fff; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-stage-badge.na{color:var(--nz-r-ink);}

.stl-summary-stack{display:flex; flex-direction:column; gap:var(--nz-s1);}
.stl-summary-chip{font-size:var(--nz-fs2); color:var(--text-600); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-summary-chip::before{content:'– ';}

/* 박스: 접혔을 때 자리 차지 안 함 -> 펼치면 제목 옆에 내용 크기만큼만 생김(전체 폭 아님, 테두리·음영 없음)
   [2026-09-19 5차 수정, 테스트 중 발견] 기존엔 :empty일 때만 숨겼는데, 한번 열었던 박스는 내용이 채워진
   채로 남아있어서 open 클래스를 떼도(닫아도) 계속 보여버리는 문제가 있었음(구간을 여러 개 열었다 닫으면
   내용이 화면에 계속 쌓여 보임) - "안 지난 구간은 아직 안 보여야 한다"는 원래 의도와 어긋나서, 내용이
   있어도 open이 아니면 항상 숨기도록 기본값을 명시함. */
/* [2026-09-23 10차 수정, 사장님 요청] "위→아래로 스르륵 펼쳐짐"을 위해 고정 16px 페이드 대신
   max-height를 app.js(stlAnimateBoxOpen/stlAnimateBoxClose)가 실측 scrollHeight 기준으로 직접
   전환시킴 - CSS는 접힌 기본 상태(overflow 숨김)만 정의하고, 실제 펼침/접힘 트랜지션은 인라인
   스타일로 제어(그래야 내용 높이가 매번 달라져도 정확히 그 높이까지만 펼쳐짐). */
.stl-box{display:none;}
.stl-box.open{display:block; max-width:min(380px,100%); min-width:0; flex:1 1 min(260px,100%); overflow:hidden;}
.stl-box-note{font-size:var(--nz-fs2); color:var(--text-600); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
/* [2026-09-20 13차 수정] 좁은 폭에서 라벨/값이 겹쳐 보이는 문제 - flex-wrap을 켜고 값(span) 쪽에
   min-width:0을 줘서, 공간이 부족하면 값이 다음 줄로 자연스럽게 내려가도록 고침.
   [2026-09-20 16차 수정, 사장님 제시 이미지 그대로] "상 호 / 담 당 자 / 연 락 처 / 상 담 일 /
   진행상황"처럼 라벨 글자 사이를 균등하게 벌려서(균등분할) 전부 같은 폭에 맞춰 끝나도록 만들어달라는
   요청 - 한글 문서(한글/워드)의 균등분할 기능과 같은 방식. text-align-last:justify +
   text-justify:inter-character로 각 라벨을 고정폭(가장 긴 라벨 "진행상황" 기준) 안에서 글자
   사이 간격을 균등하게 벌려 채움 - 4글자인 "진행상황"은 이미 폭을 꽉 채우므로 벌어지지 않고,
   2~3글자인 나머지는 그 폭에 맞춰 글자 사이가 균등하게 벌어짐(표에서 오른쪽 정렬만 하던 이전
   방식이 아니라, 사장님이 처음부터 원하신 균등분할 자체를 그대로 적용).*/
.stl-box-detail div{display:flex; align-items:baseline; gap:var(--nz-s2); font-size:var(--nz-fs2); margin-bottom:var(--nz-s2); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-box-detail div:last-child{margin-bottom:0;}
/* [2026-09-20 16차 수정, 사장님 지적] 라벨(상호/담당자/연락처/상담일 등)을 "균등분할"로 - 짧은 라벨도
   가장 긴 라벨("진행상황" 4글자)과 같은 폭을 채우도록 글자 사이 간격을 벌림. text-align-last:justify +
   text-justify:inter-character 조합은 브라우저에 따라 text-justify 지원이 갈려서(비표준에 가까운
   속성 - 지원 안 하면 조용히 무시되고 그냥 붙어보임) 안 믿음직해서, 글자를 한 글자씩 개별 span으로
   쪼갠 뒤(stlSpreadLabel()) flex + justify-content:space-between 으로 직접 균등 배치하는 방식으로
   교체함 - 이 방식은 어떤 브라우저에서도 항상 동일하게 렌더링됨.
   [2026-09-20 16차 재수정, 사장님 지적] 폭을 72px로 고정 픽셀값을 썼더니 "진행상황"(4글자, 붙어있는
   상태) 실제 글자폭보다 박스가 더 넓어서, 진행상황 라벨 뒤에 불필요한 빈 공간이 생기고 그만큼 값(상담중
   등) 시작 위치가 다른 줄보다 밀려나 보이는 문제가 있었음. "진행상황 글자 4개에 영역을 고정"하라는
   요청대로, 폭을 72px 같은 임의의 값이 아니라 한글 4글자가 딱 채우는 폭인 4em으로 바꿔서 진행상황
   라벨 뒤에 빈 공간이 전혀 남지 않도록 함 - 나머지 짧은 라벨들은 이 4em 폭에 맞춰 균등분할됨. */
.stl-box-detail b{display:flex; flex:0 0 4em; width:4em; justify-content:space-between; color:var(--text-600); font-weight:700; white-space:nowrap;}
.stl-box-detail span{color:var(--text-900); min-width:0; word-break:break-all;}

/* [2026-09-19 5차 신규, 사장님 자료 반영] 전화상담 대화형 어드바이저 - "나뉘어진 영역 없게" 원칙 그대로
   유지 - 박스/카드 테두리나 회색 음영은 쓰지 않고, 위쪽 여백만으로 정보상자와 구분함. 추천멘트/금지멘트도
   배경을 칠하는 대신 색(글자색)만으로 구분함(금지멘트=danger 색). */
.stl-advisor{margin-top:var(--nz-s4); display:flex; flex-direction:column; gap:var(--nz-s2); max-width:min(380px,100%); min-width:0;}
.stl-advisor-label{font-size:var(--nz-fs1); font-weight:700; color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
/* [2026-09-20 11차 신규, 사장님 지적] "소개자가 누군지도 중요 정보이니 박스로 만들어서 전화상담
   어드바이저 밑으로 넣어줘" - 소개건 상담일 때, 소개해주신 분 성함을 통화 내내(인사말 지나간 뒤에도)
   계속 보이도록 어드바이저 라벨 바로 아래에 강조 박스로 표시. 다른 곳은 전부 "나뉘어진 영역 없게"
   원칙으로 테두리·배경을 안 쓰지만, 여기는 사장님이 명시적으로 "박스로" 요청하신 부분이라 예외적으로
   옅은 배경(--blue-tint)을 씀. */
.stl-advisor-referrer{margin-top:var(--nz-s1); padding:var(--nz-s2) var(--nz-s3); background:var(--nz-g-soft); border-radius:var(--nz-r10); font-size:var(--nz-fs2); color:var(--text-900); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-advisor-referrer b{color:var(--nz-ink); font-weight:700; margin-right:var(--nz-s2);}
.stl-advisor-history{display:flex; flex-direction:column; gap:var(--nz-s1); margin-bottom:var(--nz-s1);}
.stl-advisor-history-row{font-size:var(--nz-fs1); color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-history-row::before{content:none;} /* [51차] 기호 아이콘 없앰 */
.stl-advisor-history-empty{font-size:var(--nz-fs1); color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-state{font-size:var(--nz-fs1); font-weight:700; color:var(--nz-g-ink); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
/* [2026-09-23 23차 수정, 사장님 지적] "내가 말해야 하는 내용이 많은데 쭉 이어저 있어서 읽기가 불편 -
   1줄/2줄/3줄 이렇게 구성해서 보기 편하게" - question 문구 안에 자연스러운 끊어읽기 지점마다 줄바꿈(\n)을
   심어두고, white-space:pre-line으로 그 줄바꿈이 실제 화면에서도 그대로 반영되게 함(escapeHtml은 \n을
   건드리지 않으므로 <br> 변환 없이 이 속성 하나로 충분). */
.stl-advisor-question{font-size:var(--nz-fs3); font-weight:700; color:var(--text-900); white-space:pre-line; line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-advisor-prohibited{font-size:var(--nz-fs1); color:var(--nz-r-ink); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-prohibited::before{content:'금지: '; font-weight:700;}
.stl-advisor-note{width:100%; resize:vertical; font-family:inherit; font-size:var(--nz-fs2); padding:var(--nz-s2) var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-r10); color:var(--text-900); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
/* [2026-09-23 23차 수정, 사장님 지적] "대화 선택에서 박스로 만들지 말고 글씨 아래 강조 표시" - 화살표
   프리픽스 대신 텍스트 아래 옅은 밑줄 한 줄로만 "선택 가능한 항목"임을 표시하고, hover/포커스 시 밑줄과
   글자색이 강조색으로 바뀌게 함. 배경/테두리로 감싸는 박스 형태는 쓰지 않음. */
.stl-advisor-options{display:flex; flex-direction:column; gap:var(--nz-s1); margin-top:var(--nz-s1); margin-bottom:var(--nz-s2);}
.stl-advisor-opt{text-align:left; background:none; border:none; border-bottom:1px solid var(--nz-line); padding:var(--nz-s2) var(--nz-s1) var(--nz-s2); cursor:pointer; font-size:var(--nz-fs2); color:var(--nz-ink); font-weight:700; transition:color .15s ease, border-color .15s ease; line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
/* [2026-09-23 23차 수정, 사장님 지적] 마지막 옵션만 구분선이 안 보여 목록이 통일되지 않아 보이는 버그 -
   기존엔 카드 맨 아래에 선이 닿는 걸 피하려고 :last-child에서 border-bottom을 없앴는데, 오히려 마지막
   줄만 빠진 것처럼 보이는 문제가 됨. 다른 옵션들과 똑같이 선을 보이게 두고(카드 자체 padding이 있어
   카드 테두리에 붙어 보이지 않음), 목록이 끝나는 자리는 아래 margin-bottom으로 여백만 살짝 줌. */
.stl-advisor-opt:hover, .stl-advisor-opt:focus-visible{color:var(--nz-g-ink); border-bottom-color:var(--teal-600);}
.stl-advisor-result{font-size:var(--nz-fs2); color:var(--text-600); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-advisor-result b{color:var(--text-900);}
.stl-advisor-actions{display:flex; gap:var(--nz-s2); margin-top:var(--nz-s1);}
/* [2026-09-23 23차 신규, 사장님 요청] "대화 진행중 중단/결정 버튼 - 상대가 말하기 전에 또는 갑작스런
   전환으로 중지 될 수 있잖아 그러면 중단/결정 버튼을 통해서 대응할 수 있도록" - 평소엔 눈에 덜 띄는 텍스트
   링크로 두고, 누르면 통화 결과 4가지(방문/자료발송/비방문상담/보류)로 바로 건너뛸 수 있는 패널을 펼침
   (룰트리를 그대로 따라가지 않아도 아무 때나 결론을 낼 수 있게 하는 안전판).*/
.stl-advisor-escape{margin-top:var(--nz-s2);}
.stl-advisor-escape-toggle{background:none; border:none; padding:0; cursor:pointer; font-family:inherit; font-size:var(--nz-fs1); font-weight:500; color:var(--text-400); text-decoration:underline; text-underline-offset:2px; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-escape-toggle:hover{color:var(--text-600);}
.stl-advisor-escape-panel{margin-top:var(--nz-s2); padding:var(--nz-s3) var(--nz-s3); background:var(--nz-fill); border-radius:var(--nz-r10); display:flex; flex-direction:column; gap:var(--nz-s2);}
.stl-advisor-escape-panel[hidden]{display:none;}
.stl-advisor-escape-hint{font-size:var(--nz-fs1); color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-escape-opt{text-align:left; background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r6); padding:var(--nz-s2) var(--nz-s3); cursor:pointer; font-family:inherit; font-size:var(--nz-fs2); font-weight:700; color:var(--nz-ink); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-advisor-escape-opt:hover{border-color:var(--teal-600); color:var(--nz-g-ink);}
/* [2026-09-20 16차 수정, 사장님 지적] "저장 후 보이는 상담내용보기/다시시작 버튼 지금보다 절반 크기로
   줄이고 상하좌우 정렬 위 글씨 기준으로 정렬을 잘해봐" - 완료 후 왼쪽 좁은 칸(mountEl)에 뜨는 이
   버튼 2개만 대상(가운데 넓은 칸의 "완료(기록 저장)" 버튼 등 다른 .stl-advisor-actions는 그대로 둠).
   기존 .btn.small(6px 10px, .8rem)의 절반 수준으로 줄이고, white-space:nowrap으로 글자가 어색하게
   줄바꿈되던 것도 없앰. align-items:center로 위쪽 "완료 처리됨" 라벨과 좌측 정렬·기준선을 맞춤. */
.stl-advisor-actions-mini{align-items:center; gap:var(--nz-s2); margin-top:var(--nz-s1);}
.stl-advisor-actions-mini .btn{padding:var(--nz-s1) var(--nz-s2); font-size:var(--nz-fs1); font-weight:700; border-radius:var(--nz-r6); white-space:nowrap; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}

/* [2026-09-20 17차 신규, 사장님 요청 / 2026-09-22 19차 수정, 사장님 지적 "현재 단계라는 저 박스 삭제 /
   진행 중인 메뉴 아래에 기능들 적용"] 단계이동 기능의 모양(.stl-mover 박스, 추천 버튼, 폼, 이동 이력)은
   그대로 재사용하되, 화면 위(header-card)에 항상 떠 있던 별도 박스는 없앰 - 이제 "진행중"으로 열린
   단계의 스포트라이트(가운데 넓은 칸) 안에 내용 끝부분으로 바로 얹힘(.stl-mover-embedded, 아래).
   .stl-mover-wrap/.stl-mover-row/.stl-mover-current는 별도 헤더 줄이 필요했던 예전 구조 전용이라 함께
   제거함 - 지금 열려있는 단계가 곧 "현재 단계"이므로 다시 표기할 필요가 없음. */
/* [2026-09-23 23차 수정, 사장님 지적 "박스 모양 삭제 - 뭔가 따로 놀고있는 디자인"] 이 블록은 이제
   .stl-mover-embedded 하나로만 쓰이는데(화면 위 고정 헤더용 변형은 19차에 이미 삭제됨), 정작
   스포트라이트(가운데 카드) "안"에 얹히는 용도라 그 안에서 또 회색 테두리 박스를 두르면 카드 속에
   카드가 있는 모양이 됨 - 특히 전화상담처럼 주 버튼(완료→자동이동)을 이 블록 밖에서 따로 그리는
   경우, 정작 이 박스 안에는 보조 링크(다른 단계로·이동 이력)만 남아 마치 관계 없는 상자가 뚝 떨어져
   있는 것처럼 보였음. 박스 테두리/배경/둥근모서리를 없애고, 위 내용과 자연스럽게 이어지도록 구분선
   하나로만 시각적 경계를 표시함(카드 자체 배경은 그대로 이어짐).*/
.stl-mover{border-top:1px solid var(--nz-line); padding-top:var(--nz-s3);}
.stl-mover-embedded{margin-top:var(--nz-s4);}
.stl-mover-note{font-size:var(--nz-fs1); color:var(--nz-g-ink); font-weight:700; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
/* [2026-09-23 21차 수정, 사장님 지적 "버튼들 규칙성도 없고 너무 난잡"] 주요 행동(추천/차선 버튼)과
   보조 링크(다른 단계로/이동 이력)를 한 줄에 섞지 않고 줄을 나눠 위계를 분리함 - 아래 .stl-mover-links. */
.stl-mover-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--nz-s2); margin-top:var(--nz-s3);}
.stl-mover-embedded .stl-mover-note + .stl-mover-actions{margin-top:var(--nz-s2);}
.stl-mover-links{display:flex; align-items:center; gap:var(--nz-s2); margin-top:var(--nz-s2);}
.stl-mover-actions:empty + .stl-mover-links{margin-top:0;}
.stl-mover-dot{color:var(--text-400); font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-mover-rec{background:var(--nz-bg); border:1px solid var(--nz-line); color:var(--text-600); font-weight:500;}
.stl-mover-rec:hover{background:var(--nz-fill); color:var(--text-900);}
.stl-mover-other{font-family:inherit; font-size:var(--nz-fs2); font-weight:500; color:var(--text-600); background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r6); padding:var(--nz-s2) var(--nz-s3); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-mover-form{margin-top:var(--nz-s3);}
.stl-mover-formwrap{background:none; padding:0; gap:var(--nz-s2);}
.stl-mover-formtitle{font-size:var(--nz-fs2); font-weight:700; color:var(--text-900); margin-bottom:var(--nz-s1); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-mover-form-actions{display:flex; align-items:center; gap:var(--nz-s2); margin-top:var(--nz-s1);}
.stl-mover-history{margin-top:var(--nz-s3);}
.stl-mover-hist-item b{color:var(--text-900);}
.stl-mover-hist-meta{font-size:var(--nz-fs1); color:var(--text-400); margin-top:var(--nz-s1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-mover-hist-detail{font-size:var(--nz-fs1); color:var(--text-600); margin-top:var(--nz-s1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
/* [2026-09-22 19차 신규] "다른 단계로 이동"/"이동 이력 보기"처럼 예외적으로만 쓰는 보조 동작 - 눈에 덜
   띄는 링크 형태로 둬서, 위 자동 이동 버튼(주 동작)과 시각적으로 구분되도록 함. */
.link-btn{background:none; border:none; padding:0; color:var(--text-400); font-size:var(--nz-fs2); font-weight:500; text-decoration:underline; cursor:pointer; font-family:inherit; line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.link-btn:hover{color:var(--text-600);}

/* [2026-09-23 21차 신규, 사장님 지적 "완료 버튼 색상은 강조 깜박거림 / 여기 누르면 다음이야 라는 느낌"]
   타임라인 전반에서 "다음 단계로 진행"을 뜻하는 주요 행동 버튼의 공용 스타일 - 강조색(--teal-600, 이
   프로젝트의 강조색)을 바탕으로 눈에 띄게 하고, 문구도 짧게(예: "고객진단 진행 →") 줄여서 설명보다는
   행동 유도에 집중함. 준비가 되면 .stl-pulse를 같이 붙여 깜빡이게 함(아래 stlPulseGlow, 이 색으로 통일).*/
.stl-cta{display:inline-flex; align-items:center; gap:var(--nz-s1); background:var(--teal-600); color:#fff; border:none; border-radius:var(--nz-rp); padding:var(--nz-s2) var(--nz-s4); font-family:inherit; font-weight:700; font-size:var(--nz-fs3); cursor:pointer; transition:background .15s ease; line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-cta:hover{background:var(--teal-500);}
.stl-cta:disabled{opacity:.6; cursor:not-allowed;}
/* [2026-09-23 24차 신규, 사장님 지적 "업무흐름진단 누르기 버튼 박스가 좌우로 너무 길어 잘 보이지 않고"] -
   .stl-advisor-spotlight가 세로 flex(align-items 기본값 stretch)라서 그 안의 버튼은 모두 컨테이너
   너비(약 560~620px)만큼 옆으로 길게 늘어나 있었음. 이 버튼은 문구가 짧아서 늘어나면 특히 가늘고 길게
   보여 잘 안 띄었으므로, 내용 너비만큼만 차지하도록 늘어남을 막음(다른 .stl-cta 버튼들의 기존 모습은
   그대로 둠 - 이 버튼만 지적된 사항이라 범위를 좁게 한정함).*/
.stlGoConsultBtn{align-self:flex-start;}
/* [2026-09-24 27차 신규, 사장님 지적 "업무흐름진단이 강제 되는데 업무흐름진단 없이 방문결과 입력도
   가능해야함"] "업무흐름 진단 열기" CTA 옆에 동급으로 보이는 보조 버튼("업무흐름 진단 없이 방문결과만
   기록 →")을 나란히 두기 위한 줄 - 좁은 화면에서는 자연스럽게 줄바꿈됨. */
.stl-visit-next-actions{display:flex; align-items:center; gap:var(--nz-s2); flex-wrap:wrap; align-self:flex-start;}
.stlVisitResultBtn{color:var(--nz-ink2); border-color:var(--nz-line);}

/* [2026-09-19 8차 신규, 사장님 지적] "대화형 말풍선들이 중앙에서 나와야지 / 질문·답변은 중앙에서 조금
   더 크게 표현, 선택되면 지금 자리로 이동" - 지금 답해야 하는 질문 하나만 화면 가운데(.stl-header-card
   바로 아래, 타임라인보다 위)에 크게 띄우는 영역. 답을 고르면 그 줄은 위 .stl-advisor-history(작은 이력
   목록)로 내려가고, 여기는 곧바로 다음 질문으로 바뀜 - "말풍선이 중앙에서 나왔다가, 답하면 제자리로
   이동"하는 느낌. 테두리/음영 박스 대신 왼쪽 얇은 포인트 색 띠 하나로만 "지금 말하고 있다"는 느낌을 줌
   (나뉘어진 영역 금지 원칙 유지 - 완전히 감싸는 박스는 아님). 빈 상태(:empty)면 자리 자체를 차지하지 않음. */
.stl-advisor-spotlight:empty{display:none;}
/* [2026-09-23 10차 수정, 사장님 요청] 등장/퇴장은 이제 app.js가 opacity+translateX를 인라인으로
   직접 제어(좌→우로 슬라이드 인, 닫을 때 역순으로 슬라이드 아웃) - 그래서 고정 페이드 keyframe은 뗌. */
.stl-advisor-spotlight{max-width:560px; margin:var(--nz-s1) auto var(--nz-s5); padding-left:var(--nz-s4); border-left:3px solid var(--navy-800); display:flex; flex-direction:column; gap:var(--nz-s2);}
.stl-advisor-spotlight .stl-advisor-role{font-size:var(--nz-fs1); font-weight:700; color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-spotlight .stl-advisor-state{font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-advisor-spotlight .stl-advisor-question{font-size:var(--nz-fs4); font-weight:700; line-height:var(--nz-lh4); letter-spacing:var(--nz-ls4);}
.stl-advisor-spotlight .stl-advisor-prohibited{font-size:var(--nz-fs2); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-advisor-spotlight .stl-advisor-note{max-width:460px;}
.stl-advisor-spotlight .stl-advisor-options{gap:var(--nz-s2); margin-top:var(--nz-s1);}
.stl-advisor-spotlight .stl-advisor-opt{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-advisor-spotlight .stl-advisor-result{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}

/* [2026-09-20 12차 신규, 사장님 지적] "대화형 아래 조언 멘트 하단에 박스로 표기" - 지금 질문에 대한
   짧은 코칭 멘트(rule.advice)를 대화 영역 맨 아래에 박스로 표시. 소개자 박스와 마찬가지로 사장님이
   명시적으로 "박스로" 요청한 예외라 옅은 배경을 씀(소개자 박스와 색을 다르게 해서 구분 - 소개자는
   --blue-tint, 조언은 --bg 중립 톤 + 왼쪽 포인트 띠). */
.stl-advisor-tip{margin-top:var(--nz-s1); padding:var(--nz-s2) var(--nz-s3); background:var(--nz-fill); border-left:3px solid var(--teal-600); border-radius:0 var(--nz-r10) var(--nz-r10) 0; font-size:var(--nz-fs2); color:var(--text-600); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-advisor-tip b{display:block; color:var(--nz-g-ink); font-weight:700; font-size:var(--nz-fs1); margin-bottom:var(--nz-s1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}

/* [2026-09-20 12차 신규, 사장님 제공 참고자료(ERP_소개건_전화상담_룰테스트_v1.html) 반영] "현재 판단
   내용 오른쪽에 박스로 표기 최대한 깔끔하고 항목별로 작은 박스로 사용 등장 할때 오른쪽에서 날아오듯이
   추가" - 그리드 3번째(오른쪽) 열에 놓이는 "CRM 현재 판단" 패널. 상태 태그 + 기본원칙 + 대화기록(항목별
   작은 박스)으로 구성. 빈 상태(:empty)면 자리 자체를 차지하지 않음(스포트라이트와 동일한 패턴). */
.stl-judgment-panel:empty{display:none;}
.stl-judgment-panel{display:flex; flex-direction:column; gap:var(--nz-s2);}
.stl-judgment-label{font-size:var(--nz-fs1); font-weight:700; color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-judgment-tag{align-self:flex-start; font-size:var(--nz-fs1); font-weight:700; padding:var(--nz-s1) var(--nz-s3); border-radius:var(--nz-rp); background:var(--nz-g-soft); color:var(--nz-ink); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-judgment-box{background:var(--nz-fill); border-radius:var(--nz-r10); padding:var(--nz-s2) var(--nz-s3); font-size:var(--nz-fs2); color:var(--nz-ink2); animation:stlJudgmentFlyIn .28s ease both; line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}
.stl-judgment-box b{display:block; font-size:var(--nz-fs1); font-weight:700; color:var(--text-400); margin-bottom:var(--nz-s1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-judgment-principle{background:var(--nz-fill); line-height:1.6;}
/* [2026-09-23 23차 신규] 중단/결정 버튼으로 트리를 건너뛰고 상담원이 직접 결론을 고른 기록임을 대화
   기록 목록에서 구분해서 보여줌. */
.stl-judgment-manual{margin-top:var(--nz-s1); font-size:var(--nz-fs1); font-weight:700; color:var(--nz-g-ink); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-judgment-history-label{font-size:var(--nz-fs1); font-weight:700; color:var(--text-400); margin-top:var(--nz-s2); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-judgment-empty{font-size:var(--nz-fs1); color:var(--text-400); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
@keyframes stlJudgmentFlyIn{from{opacity:0; transform:translateX(18px);} to{opacity:1; transform:translateX(0);}}

/* [2026-09-21 18차 신규, 사장님 지시 5-7 반영] 고객진단/견적검토/협의 - 스포트라이트(가운데)에서 쓰는
   체크박스/라디오 선택지 목록, select, 라벨/값 한 줄(재통화 추천 시점 등), "자동 저장됨" 안내문. call
   어드바이저의 .stl-advisor-* 계열과 같은 톤(테두리 없이 여백/색으로만 구분)을 그대로 따름. */
.stl-check-list{display:flex; flex-direction:column; gap:var(--nz-s1);}
.stl-check-row{display:flex; align-items:center; gap:var(--nz-s2); font-size:var(--nz-fs3); color:var(--text-900); padding:var(--nz-s1) var(--nz-s1); cursor:pointer; line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-check-row input{accent-color:var(--navy-800); width:16px; height:16px; flex:none;}
.stl-field-title{font-size:var(--nz-fs1); font-weight:700; color:var(--text-400); margin-top:var(--nz-s3); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-field-row{margin-top:var(--nz-s1);}
.stl-input{width:100%; font-family:inherit; font-size:var(--nz-fs3); font-weight:500; color:var(--text-900); background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r6); padding:var(--nz-s2) var(--nz-s3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-input:focus{outline:2px solid var(--nz-g-soft); border-color:var(--navy-800);}
.stl-info-row{display:flex; align-items:baseline; gap:var(--nz-s2); font-size:var(--nz-fs3); margin-top:var(--nz-s2); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-info-k{color:var(--text-400); font-weight:700; flex:none;}
.stl-info-v{color:var(--text-900);}
.stl-save-note{margin-top:var(--nz-s3); font-size:var(--nz-fs1); color:var(--nz-g-ink); font-weight:700; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}

/* [2026-09-21 18차 신규, 사장님 지시 5-7 ④] "선택할 필요 있는 버튼은 깜박거리고 있다가 누르면 반영되고
   사라지고" - 다음 행동이 준비된 버튼(단계 이동 1순위 추천, 가격제안서/계약서 작성 이동)에 붙는 은은한
   펄스. 색을 바꾸지 않고 그림자만 커졌다 사라지게 해서 튀지 않으면서도 눈에 띄도록 함. */
.stl-pulse{animation:stlPulseGlow 1.6s ease-in-out infinite;}
@keyframes stlPulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(143,200,98,.45);} 50%{box-shadow:0 0 0 7px rgba(143,200,98,0);}}

/* [2026-09-20 14차 수정, 사장님 지적] "일정메뉴창은 대시보드에있는거 가져와서 오른쪽 화면에
   보여주면된다고 했는데 왜 안했지? ... 대시보드에 보면 상하로 타임라인으로 된 일정표있는데 그거
   가져와서 보여달라" - 13차에 새로 만들었던 간이 격자 위젯을 버리고, 대시보드 "오늘 방문 일정"
   컴포넌트(loadDashSchedule, .dash-* 클래스 전부 그대로)를 방문 확정 화면에 재사용함.
   [2026-09-20 15차 수정, 사장님 지적] "일정창 박스에 넣지 말고 자연스럽게 펼쳐지도록 / 근처 방문
   추천·주간방문일정 볼필요 없음 제외" - loadDashSchedule을 opts.compact=true로 불러서 카드 테두리·
   근처 방문 추천·주간 방문 일정 자체를 아예 그리지 않게 했으므로(app.js 참고), 여기 CSS도 그 두
   섹션을 숨기는 게 아니라 남은(시간눈금+오늘/앞으로의 일정 타임라인) 부분만 좁은 상담창 폭에 맞춰
   여백을 줄이는 용도로 단순화함.
   [2026-09-20 15차 2번째 수정, 사장님 지적] "일정 더보기 누르면 박스가 생기로 스크롤 하지 말고
   그냥 밑으로 쭉 늘어나도록 해줘" - 처음엔 내용이 길어질 걸 대비해 높이를 제한하고 안에서
   스크롤되게 했었는데, 그게 오히려 "일정 더 보기(2주)"를 누르면 늘어난 내용이 답답한 박스 안에
   갇혀 자체 스크롤되는 모양이 됨 - 원래 의도("일정창 박스에 넣지 말고")와 반대였음. 높이 제한/
   스크롤을 아예 없애고, 페이지 자체가 길어지면 브라우저 스크롤을 쓰도록 함.*/
.stl-sched-wrap{margin-top:var(--nz-s4);}
.stl-sched-wrap .dash-split{grid-template-columns:1fr; gap: 0;}
.stl-sched-wrap .dash-sec-title{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-sched-wrap .dash-sec-right{font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-sched-wrap .dash-hours{padding: var(--nz-s2) var(--nz-s2); margin-bottom: var(--nz-s3);}
.stl-sched-wrap .dash-row{padding: var(--nz-s2) var(--nz-s3); gap: var(--nz-s2);}

/* [2026-09-20 15차 신규, 사장님 요청] "상호/주소/메일주소 입력 할 수 있도록 해줘" - 방문 확정 순간
   오른쪽 "대화 기록" 자리에 뜨는 입력폼(stlVisitScheduleFormHtml). 이미 있던 .tlc-field/.tlc-row-2
   (ensureTlcBoxStyles, app.js)를 그대로 쓰고, 여기서는 이 폼 전용 간격/이메일·날짜시간 줄 배치만 추가.*/
.stl-vs-form{display:flex; flex-direction:column; gap:var(--nz-s1);}
.stl-vs-form .tlc-save-all-btn{width:100%; margin:var(--nz-s2) 0 0; text-align:center;}
.stl-vs-datetime{display:flex; gap:var(--nz-s2);}
/* [2026-09-20 16차 수정] 날짜칸(input[type=date])이 좁아서 "2026-09-20"의 마지막 글자가 잘려보이는
   문제 - 시/분 선택 대비 날짜칸 비중을 늘리고, 시/분 select는 좌우 패딩을 줄여서 셋 다 한 줄에
   여유있게 들어가도록 함. */
.stl-vs-datetime input[type="date"]{flex:2; min-width:0; font-family:inherit; font-size:var(--nz-fs3); font-weight:500; color:var(--tlc-ink-900); background:var(--tlc-surface); border:1px solid var(--tlc-border); border-radius:var(--nz-r6); padding:var(--nz-s2) var(--nz-s1) var(--nz-s2) var(--nz-s2); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-vs-datetime select{flex:1; min-width:0; padding-left:var(--nz-s2); padding-right:var(--nz-s1);}

/* [2026-09-20 16차 신규, 사장님 요청] "상담 내용보기" - 완료된 전화상담의 질문/답변을 보여줌.
   [2026-09-20 16차 재수정, 사장님 지적] "오른쪽에 대화 기록이라고 박스들이 생기는데 그런 느낌으로 /
   가운데 화면에서 펼쳐지도록 해 - 너무 클 필요는 없어" - 팝업 모달을 없애고, 통화 중 오른쪽 패널에
   쓰던 .stl-judgment-box(옅은 배경 박스 + 작은 라벨)를 그대로 재사용해서 가운데(spotlightEl)에 자연
   스럽게 펼쳐지도록 함. 대화하는 느낌이 나도록 "나"(질문)는 기본 박스색, "상대"(답변)는 포인트색을
   살짝 섞은 박스로 구분만 둠 - 말풍선처럼 화면을 넓게 쓰지 않고, 기존 박스 목록과 같은 폭/느낌 유지. */
.stl-transcript-list{display:flex; flex-direction:column; gap:var(--nz-s4); max-width:520px;}
.stl-transcript-turn{display:flex; flex-direction:column; gap:var(--nz-s2);}
/* [2026-09-23 23차 수정] question 문구에 심어둔 줄바꿈(\n)이 다시보기 화면에서도 그대로 보이도록. */
.stl-transcript-q{white-space:pre-line;}
.stl-transcript-a{background:var(--nz-g-soft);}
.stl-transcript-note{margin-top:var(--nz-s1); font-size:var(--nz-fs2); color:var(--text-600); border-top:1px dashed var(--nz-line); padding-top:var(--nz-s1); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2);}

/* [2026-09-24 31차 신규] 방문상담 화면 - 업무흐름 진단 완료/진행 중 표시 칩 */
.stl-consult-done,.stl-consult-wip{display:inline-block; margin-left:var(--nz-s2); padding:0 var(--nz-s2); border-radius:var(--nz-rp); font-size:var(--nz-fs1); font-weight:700; vertical-align:1px; line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1);}
.stl-consult-done{background:var(--nz-g); color:#fff;}
.stl-consult-wip{background:var(--nz-line); color:var(--nz-ink2);}

/* [2026-09-24 32차 신규] 영업타임라인 점검 반영 - 상단 지금 단계/종결 배너/계약 후 할 일 미처리 표시 */
.stl-header-stage b{font-weight:700; color:var(--nz-ink);}
.stl-closed-banner{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2); flex-wrap:wrap; margin-top:var(--nz-s3); padding:var(--nz-s2) var(--nz-s3); border-radius:var(--nz-r10); background:var(--nz-r-soft); color:var(--nz-r-ink); font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
.stl-closed-banner b{font-weight:700; margin-right:var(--nz-s1);}
.stl-todo{color:var(--nz-o-ink); font-weight:500;}

/* [2026-09-24 33차 신규, 기준규칙 v1 1-3장·3장] 단계 표시 5가지(예정·진행중·완료·건너뜀·미룸)를 같은 모양의
   글자 칩으로 통일. 예전엔 진행중=진회색 채움, 완료=옅은 채움, 예정/패스=민무늬 글자로 모양이 제각각이었음.
   깜박임은 헤더의 "지금 단계" 칩 한 곳만(왼쪽 목록의 진행중 칩은 고정). */
.stl-stage-badge, .stl-stage-badge.done, .stl-stage-badge.active, .stl-stage-badge.skip, .stl-stage-badge.na, .stl-stage-badge.pending, .stl-stage-badge.deferred,
.stl-now-chip{
  display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp);
  font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:var(--nz-ls1); font-weight:500; white-space:nowrap;
  border:1px solid var(--nz-line); color:var(--nz-ink3); background:var(--nz-bg); flex:none;}
.stl-stage-badge.done{color:var(--nz-g-ink); border-color:var(--nz-g-line);}
.stl-stage-badge.active, .stl-now-chip{color:var(--nz-g-ink); border-color:var(--nz-g); background:var(--nz-g-soft); font-weight:700;}
.stl-stage-badge.skip, .stl-stage-badge.na{color:var(--nz-ink3); background:var(--nz-fill);}
.stl-stage-badge.deferred{color:var(--nz-o-ink); border-color:var(--nz-o-line); background:var(--nz-o-soft);}
.stl-stage-dot.na{background:var(--text-400); border-color:var(--text-400);}
.stl-now-chip{animation:stlNowBlink 1.6s ease-in-out infinite;}
@keyframes stlNowBlink{0%,100%{box-shadow:0 0 0 0 rgba(143,200,98,0);} 50%{box-shadow:0 0 0 3px var(--nz-g-ring);}}
@media (prefers-reduced-motion: reduce){ .stl-now-chip{animation:none;} }
.stl-header-name{font-size:var(--nz-fs5); line-height:var(--nz-lh5); letter-spacing:var(--nz-ls5);}
.stl-header-card{align-items:center; row-gap:var(--nz-s2);}
.stl-header-meta{align-items:center;}
.stl-stage-datebadge-status{color:var(--nz-ink2); font-weight:500;}
.stl-header-card .stl-header-stage{margin-right:var(--nz-s4);}
/* [2026-09-24 33차, 알려진 버그 수정] 타임라인 첫 화면에서 업체를 고르기 전에도 "다른 건 선택" 줄이 보이던 문제 -
   .stl-pick-selected에 display:flex가 있어서 hidden 속성(브라우저 기본 display:none)을 덮어쓰고 있었음. */
.stl-pick-selected[hidden], .stl-pick-inputwrap[hidden], .stl-pick-dropdown[hidden]{display:none;}
/* [2026-09-24 33차, 기준규칙 v1 3-4장] 타임라인 안에서 쓰는 공용 작은 버튼(.btn.small - 다른 건 선택·다시 진행·상담
   내용보기 등)과 체크박스/라디오 기본 여백을 규칙 값으로 맞춤. 다른 메뉴의 .btn은 건드리지 않도록 타임라인
   화면(#content.stl-content-bg) 안으로만 범위를 한정함. 16차에 절반 크기로 줄인 완료 후 버튼 2개(.stl-advisor-
   actions-mini)는 칩 높이(24px)로 그대로 작게 둠. */
#content.stl-content-bg .btn.small{display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 var(--nz-s3);
  font-size:var(--nz-fs2); line-height:var(--nz-lh2); letter-spacing:var(--nz-ls2); border-radius:var(--nz-r6);}
#content.stl-content-bg .stl-advisor-actions-mini .btn{height:24px; padding:0 var(--nz-s2); font-size:var(--nz-fs1); line-height:var(--nz-lh1); border-radius:var(--nz-r6);}
#content.stl-content-bg input[type="checkbox"], #content.stl-content-bg input[type="radio"]{margin:0;}
/* [2026-09-24 33차, 기준규칙 v1 3장] 전화상담 → 방문 확정 순간 타임라인에 뜨는 방문 일정 입력폼(stlVisitScheduleFormHtml)은
   계약서 목록 카드의 베이지/금색 입력칸 모양(.tlc-*)을 그대로 빌려 쓰고 있었음 - 흰 바탕 규칙에 맞춰 이 폼 안에서만
   색 변수를 흰 바탕·초록 강조로 바꾸고 글자·간격·모서리를 규칙 값으로 맞춤(계약서 목록 카드 자체는 그대로). */
.tlc-box-wrap.stl-vs-wrap{--tlc-surface:var(--nz-bg); --tlc-surface-2:var(--nz-fill); --tlc-tile:var(--nz-fill);
  --tlc-border:var(--nz-line); --tlc-border-strong:#C9CEC7; --tlc-ink-900:var(--nz-ink); --tlc-ink-700:var(--nz-ink);
  --tlc-ink-500:var(--nz-ink2); --tlc-ink-400:var(--nz-ink3); --tlc-accent:var(--nz-g); --tlc-accent-ink:var(--nz-g-ink);
  --tlc-accent-soft:var(--nz-g-soft); gap:var(--nz-s3);}
.stl-vs-wrap .tlc-field{gap:var(--nz-s1); margin-bottom:var(--nz-s2);}
.stl-vs-wrap .tlc-field label{font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:0; font-weight:500; color:var(--nz-ink3);}
.stl-vs-wrap .tlc-field input, .stl-vs-wrap .tlc-field select{height:36px; padding:0 var(--nz-s3); border-radius:var(--nz-r6);
  font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:400;}
.stl-vs-wrap .stl-vs-datetime input[type="date"]{padding:0 var(--nz-s1) 0 var(--nz-s2);}
.stl-vs-wrap .stl-vs-datetime select{padding:0 var(--nz-s1) 0 var(--nz-s2);}
.stl-vs-wrap .seg-input{gap:var(--nz-s2);}
.stl-vs-wrap .email-domain-pick{margin-top:var(--nz-s2); margin-bottom:0; border-radius:var(--nz-r6);}
.stl-vs-wrap .tlc-save-all-btn{height:36px; padding:0 var(--nz-s4); border-radius:var(--nz-r6); box-shadow:none; background:var(--nz-g);
  color:#1F3310; font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:700; margin:var(--nz-s2) 0 0;}
/* 방문 확정 화면 오른쪽의 오늘 방문 일정(대시보드 컴포넌트 재사용) - 이 화면 안에서만 규칙 값으로. */
.stl-sched-wrap .dash-sec-head{gap: var(--nz-s2); margin-bottom: var(--nz-s3);}
.stl-sched-wrap .dash-badge{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:700; padding: 0 var(--nz-s2);}
.stl-sched-wrap .dash-hour{font-size:var(--nz-fs2); line-height:var(--nz-lh2);}
.stl-sched-wrap .dash-hour.now span{padding: 0 var(--nz-s2); font-size:var(--nz-fs2); border-radius:var(--nz-r6);}
.stl-sched-wrap .dash-daysep{gap: var(--nz-s2); margin: var(--nz-s3) 0 var(--nz-s2); font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:700;}
.stl-sched-wrap .dash-tl{padding-left: var(--nz-s5);}
.stl-sched-wrap .dash-tl-item{margin-bottom: var(--nz-s2);}
.stl-sched-wrap .dash-tl-item::before{left:-22px;}
.stl-sched-wrap .dash-time{font-size:var(--nz-fs5); line-height:var(--nz-lh5);}
.stl-sched-wrap .dash-time small{font-size:var(--nz-fs1); line-height:var(--nz-lh1); margin-top: 0;}
.stl-sched-wrap .dash-chip{font-size:var(--nz-fs1); line-height:var(--nz-lh1); padding: 0 var(--nz-s2); font-weight:700;}
.stl-sched-wrap .dash-more-btn{height:32px; padding: 0 var(--nz-s4); border-radius:var(--nz-r6); font-size:var(--nz-fs2); line-height:var(--nz-lh2); font-weight:700;}
/* 시/분 선택칸은 timeSelectHtml()이 인라인 style(여백 10px·모서리 8px)을 박아 넣어서 이 폼 안에서만 !important로 덮음
   (다른 화면의 시/분 선택칸은 그대로). 메일 도메인 선택칸은 .seg-input.email-seg 규칙보다 한 단계 구체적으로. */
.stl-vs-wrap .stl-vs-datetime select{height:36px; padding:0 var(--nz-s1) 0 var(--nz-s2) !important; border-radius:var(--nz-r6) !important; border-width:1px !important;}
.stl-vs-wrap .seg-input.email-seg .email-domain-pick{margin-top:var(--nz-s2); height:36px; padding:0 var(--nz-s2); border-width:1px; border-radius:var(--nz-r6); font-size:var(--nz-fs3); line-height:var(--nz-lh3);}
.stl-vs-wrap .seg-input input{border-width:1px;}
.stl-sched-wrap .dash-row.empty .dash-time{font-size:var(--nz-fs3); line-height:var(--nz-lh3);}
.stl-sched-wrap .dash-row.empty{font-size:var(--nz-fs3); line-height:var(--nz-lh3); padding: var(--nz-s2) var(--nz-s3);}
/* 날짜 칸: 글자가 12px(규칙 최소 크기)로 커지면서 60px 폭에 "2026-09-25"가 두 줄로 잘려 72px(라벨 칸 폭 규칙)로 넓힘. */
.stl-stage-date-col{width:72px;}
/* 주 버튼 높이 36px(3-4장). 모양(알약/모서리 6px)은 4단계 버튼 규칙에서 정리. */
.stl-cta{height:36px; padding:0 var(--nz-s4); font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3);}
/* [2026-09-25 34차 신규, 기준규칙 v1 4-1장] 저장 버튼 대신 각 열 제목 줄 오른쪽 끝의 저장 표시(저장 중… / 저장됨 14:32 /
   저장 안 됨 · 다시 시도 / 안내). 저장됨은 1초 동안 초록으로 바뀌었다 돌아옴. */
.stl-col-head{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2); min-height:24px;}
.stl-save-mark{display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp); flex:none;
  font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:0; font-weight:500; color:var(--nz-ink3); white-space:nowrap;}
.stl-save-mark.flash{animation:stlSavedFlash 1s ease-out;}
@keyframes stlSavedFlash{0%{color:var(--nz-g-ink); background:var(--nz-g-soft);} 100%{color:var(--nz-ink3); background:transparent;}}
.stl-save-mark.hint{color:var(--nz-o-ink); background:var(--nz-o-soft);}
.stl-save-mark.error{color:var(--nz-r-ink); background:var(--nz-r-soft); cursor:pointer;}
@media (prefers-reduced-motion: reduce){ .stl-save-mark.flash{animation:none;} }
/* 이동/종결 폼도 흰 바탕(베이지 .tlc 색 변수를 이 폼 안에서만 교체). 종결은 되돌리기 어려운 동작이라 빨강. */
.tlc-box-wrap.stl-mover-formwrap{--tlc-surface:var(--nz-bg); --tlc-surface-2:var(--nz-fill); --tlc-tile:var(--nz-fill);
  --tlc-border:var(--nz-line); --tlc-border-strong:#C9CEC7; --tlc-ink-900:var(--nz-ink); --tlc-ink-700:var(--nz-ink);
  --tlc-ink-500:var(--nz-ink2); --tlc-ink-400:var(--nz-ink3); --tlc-accent:var(--nz-g); --tlc-accent-ink:var(--nz-g-ink); --tlc-accent-soft:var(--nz-g-soft);}
.stl-mover-formwrap .tlc-field{gap:var(--nz-s1); margin-bottom:var(--nz-s2);}
.stl-mover-formwrap .tlc-field label{font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:0; font-weight:500; color:var(--nz-ink3);}
.stl-mover-formwrap .tlc-field input, .stl-mover-formwrap .tlc-field select{height:36px; padding:0 var(--nz-s3); border-radius:var(--nz-r6);
  font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:400;}
.stl-mover-formwrap .tlc-save-all-btn{height:36px; padding:0 var(--nz-s4); border-radius:var(--nz-r6); box-shadow:none; background:var(--nz-g);
  color:#1F3310; font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:700; margin:0;}
.stl-mover-formwrap .tlc-save-all-btn:disabled{background:var(--nz-fill); color:var(--nz-ink3); cursor:not-allowed; filter:none;}
.stl-mover-formwrap .tlc-save-all-btn.stlCloseSaveBtn{background:var(--nz-r-ink); color:#fff;}
/* [2026-09-25 35차 신규, 기준규칙 v1 5-3장·6장] 확인 요청 박스(파랑 계열 박스 + 멘트, 아이콘 없음) - 업체명 줄 바로 아래
   전체 폭. 새로 나타날 때 8px 위에서 내려옴(0.25초). */
.stl-ask-area{flex:0 0 100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--nz-s2); margin-top:var(--nz-s3);}
.stl-ask-area:empty{display:none;}
.stl-ask{display:grid; gap:var(--nz-s1); padding:var(--nz-s3); border-radius:var(--nz-r10); background:var(--nz-b-soft); border:1px solid #CFE0F2;}
.stl-ask.appear{animation:stlAskIn .25s ease-out both;}
@keyframes stlAskIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.stl-ask-row1{display:flex; align-items:center; gap:var(--nz-s2);}
.stl-ask-tag{display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp); background:var(--nz-bg);
  color:var(--nz-b-ink); font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; flex:none;}
.stl-ask-title{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); font-weight:700; color:var(--nz-ink);}
.stl-ask-msg{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); color:var(--nz-ink2);}
.stl-ask-btns{display:flex; flex-wrap:wrap; gap:var(--nz-s2); margin-top:var(--nz-s1);}
.stl-ask-btn{height:32px; padding:0 var(--nz-s3); border-radius:var(--nz-rp); border:1px solid var(--nz-line); background:var(--nz-bg); color:var(--nz-ink);
  font-family:inherit; font-size:var(--nz-fs2); line-height:var(--nz-lh2); font-weight:500; cursor:pointer;}
.stl-ask-btn:hover{border-color:#C9CEC7;}
.stl-ask-btn[aria-pressed="true"]{background:var(--nz-g-soft); border-color:var(--nz-g); color:var(--nz-g-ink); font-weight:700;}
.stl-ask-btn:disabled{opacity:.6; cursor:not-allowed;}
.stl-ask-resched{display:flex; gap:var(--nz-s2); margin-top:var(--nz-s1);}
.stl-ask-resched[hidden]{display:none;}
.stl-ask-resched .stl-input{width:auto; flex:1; height:32px; padding:0 var(--nz-s2);}
.stl-ask-resched select{height:32px; padding:0 var(--nz-s1) 0 var(--nz-s2) !important; border-radius:var(--nz-r6) !important; border-width:1px !important;}
@media (prefers-reduced-motion: reduce){ .stl-ask.appear{animation:none;} }
/* 단계 표시 "미룸"(deferred) - 왼쪽 동그라미도 주황 테두리. */
.stl-stage-dot.deferred{background:var(--nz-o-soft); border-color:var(--nz-o-ink);}
/* [2026-09-25 36차 신규, 기준규칙 v1 3-5장 배치 고정] 가운데 박스 3개 - ① 다음 한 수(초록 테두리) ② 이 단계 기록 ③ 기록하기.
   사장님 결정(9/25 "계속 진행") 반영: 시안 4 그대로 테두리 박스 사용(3차 "나뉘는 영역 없게"보다 시안 4 승인이 나중).
   가운데 열 폭·위치(10~12차 "절대 규칙": 닫힘=가운데 1단, 열림=3단·가운데 정중앙)는 그대로 둠. */
.stl-advisor-spotlight.stl-arranged{border-left:none; padding-left:0; gap:var(--nz-s3);}
.stl-zone{border:1px solid var(--nz-line); border-radius:var(--nz-r10); padding:var(--nz-s4); display:flex; flex-direction:column; gap:var(--nz-s3); background:var(--nz-bg);}
.stl-zone-next{border-color:var(--nz-g);}
.stl-zone-head{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2); min-height:24px;}
.stl-zone-title{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; color:var(--nz-ink3);}
.stl-zone-tag{display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp); font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; white-space:nowrap;}
.stl-zone-tag.adv{background:var(--nz-g-soft); color:var(--nz-g-ink);}
.stl-zone-tag.fact{background:var(--nz-b-soft); color:var(--nz-b-ink);}
.stl-zone-tag.input{background:var(--nz-fill); color:var(--nz-ink2); border:1px solid var(--nz-line);}
/* 박스 안 어드바이스는 박스 속 박스가 되지 않게 면·띠를 없애고 글로만. */
.stl-zone .stl-advisor-tip{background:none; border-left:none; border-radius:0; padding:0; margin-top:0;}
.stl-zone .stl-advisor-tip b{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); color:var(--nz-ink); font-weight:700; margin-bottom:var(--nz-s1);}
.stl-zone .stl-box-note{color:var(--nz-ink2);}
.stl-zone .stl-field-title{margin-top:0;}
.stl-zone > .stl-field-title + *{margin-top:calc(-1 * var(--nz-s2));}
.stl-zone .stl-visit-next-actions, .stl-zone > .stl-cta{align-self:flex-start;}
.stl-zone > .link-btn{align-self:flex-start;}
/* ④ 버튼 줄 - 글 링크 왼쪽 끝, 보조 버튼, 주 버튼 오른쪽 끝(3-5장). 폼·이력은 그 아래 한 줄 전체. */
.stl-mover{display:flex; flex-wrap:wrap; align-items:center; gap:var(--nz-s2); border-top:1px solid var(--nz-line); padding-top:var(--nz-s3);}
.stl-mover-embedded{margin-top:0;}
.stl-mover > .stl-mover-note{flex:0 0 100%; order:0;}
.stl-mover > .stl-mover-links{order:1; margin:0 auto 0 0;}
.stl-mover > .stl-mover-actions{order:2; flex-direction:row-reverse; margin:0;}
.stl-mover > .stl-mover-actions:empty{display:none;}
.stl-mover > .stl-mover-form, .stl-mover > .stl-mover-history{order:3; flex:0 0 100%; margin-top:var(--nz-s2);}
.stl-mover .stl-mover-rec{height:32px;}
/* 주 버튼 모양 - 기준규칙 3-4장 모서리 6px(시안 4). 21차 요청 "누르면 다음" 깜박임(stl-pulse)은 그대로 둠. */
.stl-cta{border-radius:var(--nz-r6);}
/* 헤더 8칸 진행 막대 */
.stl-progress{flex:0 0 100%; display:flex; align-items:center; gap:var(--nz-s3); flex-wrap:wrap; margin-top:var(--nz-s2);}
.stl-progress-bar{display:grid; grid-template-columns:repeat(8, 40px); gap:var(--nz-s1);}
.stl-pseg{position:relative; height:8px; border-radius:var(--nz-rp); background:var(--nz-fill); border:1px solid var(--nz-line); overflow:hidden;}
.stl-pseg i{position:absolute; inset:0; transform-origin:left; transform:scaleX(0); transition:transform .6s ease-out;}
.stl-pseg.done i{background:var(--nz-g); transform:scaleX(1);}
.stl-pseg.active{border-color:var(--nz-g);}
.stl-pseg.active i{background:var(--nz-g-soft); transform:scaleX(1);}
.stl-pseg.deferred{border-color:var(--nz-o-line);}
.stl-pseg.deferred i{background:var(--nz-o-soft); transform:scaleX(1);}
.stl-pseg.skip i, .stl-pseg.na i{background:var(--nz-line); transform:scaleX(1);}
.stl-progress-text{font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3); font-variant-numeric:tabular-nums;}
@media (max-width: 640px){ .stl-progress-bar{grid-template-columns:repeat(8, 1fr); flex:1 1 100%;} }
/* 왼쪽 날짜 칸 - 진행중 단계의 머문 일수 */
.stl-stage-datebadge-days{font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-o-ink); font-weight:500; font-variant-numeric:tabular-nums;}
/* [36차] 가운데 열 시작선을 모든 단계에서 같게 - 전화상담 대화 화면도 왼쪽 띠를 없애 박스 단계들과 같은 선(0px 차이)에서 시작. */
.stl-advisor-spotlight{border-left:none; padding-left:0;}
/* [2026-09-25 37차 신규] 헤더 - 업체명·지금 단계·정보 한 줄 / 8칸 진행 / 오른쪽 고객 온도(추정) / 소통 줄 4칸 / 확인 요청. */
.stl-header-card{display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; column-gap:var(--nz-s4); row-gap:var(--nz-s2); align-items:center;}
.stl-header-card .stl-header-name{grid-column:1; grid-row:1; margin-right:0;}
.stl-header-card .stl-header-stage{grid-column:2; grid-row:1; margin-right:0;}
.stl-header-card .stl-header-meta{grid-column:3; grid-row:1;}
.stl-header-card .stl-progress{grid-column:1 / 4; grid-row:2; margin-top:0;}
.stl-header-card .stl-temp{grid-column:4; grid-row:1 / 3;}
.stl-header-card .stl-comm, .stl-header-card .stl-closed-banner, .stl-header-card .stl-ask-area{grid-column:1 / -1;}
@media (max-width: 980px){
  .stl-header-card{grid-template-columns:auto 1fr;}
  .stl-header-card .stl-header-meta{grid-column:1 / -1; grid-row:auto;}
  .stl-header-card .stl-progress, .stl-header-card .stl-temp{grid-column:1 / -1; grid-row:auto;}
}
.stl-temp{display:grid; gap:var(--nz-s1); min-width:280px; padding:var(--nz-s2) var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-r10);}
.stl-temp-head{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2);}
.stl-temp-row{display:grid; grid-template-columns:64px 56px 1fr; gap:var(--nz-s2); align-items:center;}
.stl-temp-name{font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink2);}
.stl-temp-cells{display:grid; grid-template-columns:repeat(3, 16px); gap:var(--nz-s1);}
.stl-temp-cells span{position:relative; height:8px; border-radius:var(--nz-rp); background:var(--nz-fill); border:1px solid var(--nz-line); overflow:hidden;}
.stl-temp-cells span i{position:absolute; inset:0; background:var(--nz-g); transform:scaleX(0); transform-origin:left; transition:transform .6s ease-out;}
.stl-temp-cells span.on i{transform:scaleX(1);}
.stl-temp-word{font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:700; color:var(--nz-ink);}
.stl-temp-why{font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink2); max-width:320px;}
.stl-zone-tag.guess{background:var(--nz-fill); color:var(--nz-ink2); border:1px solid var(--nz-line);}
.stl-comm{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; border:1px solid var(--nz-line); border-radius:var(--nz-r10);}
.stl-comm-cell{padding:var(--nz-s3) var(--nz-s4); display:flex; flex-direction:column; gap:var(--nz-s1); min-width:0;}
.stl-comm-cell + .stl-comm-cell{border-left:1px solid var(--nz-line);}
.stl-comm-lab{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; color:var(--nz-ink3);}
.stl-comm-val{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); font-weight:700; color:var(--nz-ink);}
.stl-comm-sub{font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink2);}
@media (max-width: 980px){ .stl-comm{grid-template-columns:1fr 1fr;} .stl-comm-cell:nth-child(3){border-left:none;} .stl-comm-cell:nth-child(n+3){border-top:1px solid var(--nz-line);} }
.stl-ball{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); height:24px; border-radius:var(--nz-rp); background:var(--nz-fill); border:1px solid var(--nz-line); margin-top:var(--nz-s1);}
.stl-ball span{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; color:var(--nz-ink3); transition:color .4s;}
.stl-ball span.on{color:#1F3310; font-weight:700;}
.stl-ball b{position:absolute; top:2px; bottom:2px; left:2px; width:calc((100% - 4px) / 3); border-radius:var(--nz-rp); background:var(--nz-g); transition:transform .4s ease-in-out;}
.stl-ball[data-pos="1"] b{transform:translateX(100%);}
.stl-ball[data-pos="2"] b{transform:translateX(200%);}
/* 오른쪽 - 신호 박스(박스 + 멘트, 아이콘 없음) · 계약까지 남은 확인 */
.stl-deal-side{display:flex; flex-direction:column; gap:var(--nz-s2); margin-bottom:var(--nz-s3);}
.stl-side-head{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2); min-height:24px;}
.stl-side-title{font-size:var(--nz-fs4); line-height:var(--nz-lh4); letter-spacing:var(--nz-ls4); font-weight:700; color:var(--nz-ink);}
.stl-sig{border-radius:var(--nz-r10); padding:var(--nz-s3); display:flex; flex-direction:column; gap:var(--nz-s1); border:1px solid transparent;}
.stl-sig.appear{animation:stlAskIn .25s ease-out both;}
.stl-sig-row1{display:flex; align-items:center; gap:var(--nz-s2);}
.stl-sig-tag{display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp); background:var(--nz-bg); font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; flex:none;}
.stl-sig-title{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); font-weight:700; color:var(--nz-ink);}
.stl-sig-msg{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); color:var(--nz-ink);}
.stl-sig-off{font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink3);}
.stl-sig.good{background:var(--nz-g-soft); border-color:#D5EAC3;}
.stl-sig.good .stl-sig-tag{color:var(--nz-g-ink);}
.stl-sig.warn{background:var(--nz-o-soft); border-color:#F3D6BA;}
.stl-sig.warn .stl-sig-tag{color:var(--nz-o-ink);}
.stl-sig.warn.urgent{animation:stlUrgentBlink 1.6s ease-in-out infinite;}
@keyframes stlUrgentBlink{0%,100%{box-shadow:0 0 0 0 rgba(227,154,91,0);} 50%{box-shadow:0 0 0 3px rgba(227,154,91,.45);}}
@media (prefers-reduced-motion: reduce){ .stl-sig.warn.urgent, .stl-sig.appear{animation:none;} }
.stl-checks-box{display:flex; flex-direction:column; gap:var(--nz-s1); border:1px solid var(--nz-line); border-radius:var(--nz-r10); padding:var(--nz-s3); margin-top:var(--nz-s1);}
.stl-checks-count{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:700; color:var(--nz-ink); font-variant-numeric:tabular-nums;}
.stl-meter{height:8px; border-radius:var(--nz-rp); background:var(--nz-fill); border:1px solid var(--nz-line); overflow:hidden; margin-bottom:var(--nz-s1);}
.stl-meter i{display:block; height:100%; background:var(--nz-g); transition:width .6s ease-out;}
.stl-chk{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2); min-height:32px;}
.stl-chk-name{font-size:var(--nz-fs3); line-height:var(--nz-lh3); color:var(--nz-ink);}
.stl-chk-src{font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3);}
.stl-chk-chip, .stl-chk-btn{display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp); border:1px solid var(--nz-line);
  background:var(--nz-bg); color:var(--nz-ink3); font-family:inherit; font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; flex:none;}
.stl-chk-btn{cursor:pointer;}
.stl-chk-btn:hover{border-color:#C9CEC7;}
.stl-chk-chip.ok, .stl-chk-btn.ok{color:var(--nz-g-ink); border-color:var(--nz-g-line);}
/* 가운데 ③ 기록하기 - 연락 기록(누르는 즉시 저장) */
.stl-contact-rec{display:flex; flex-direction:column; gap:var(--nz-s2); border-top:1px solid var(--nz-line); padding-top:var(--nz-s3);}
.stl-zone-input > .stl-contact-rec:first-of-type:not(:nth-child(2)){margin-top:0;}
.stl-contact-draft{font-weight:500; color:var(--nz-ink3);}
.stl-crow{display:grid; grid-template-columns:72px minmax(0, 1fr); gap:var(--nz-s2); align-items:start;}
.stl-crow-end{grid-template-columns:1fr; justify-items:start;}
.stl-clab{font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink3); padding-top:var(--nz-s1);}
.stl-cpick{display:flex; flex-wrap:wrap; gap:var(--nz-s2); align-items:center;}
.stl-copt{height:32px; padding:0 var(--nz-s3); border-radius:var(--nz-rp); border:1px solid var(--nz-line); background:var(--nz-bg); color:var(--nz-ink);
  font-family:inherit; font-size:var(--nz-fs2); line-height:var(--nz-lh2); font-weight:400; cursor:pointer;}
.stl-copt:hover{border-color:#C9CEC7;}
.stl-copt[aria-pressed="true"]{background:var(--nz-g-soft); border-color:var(--nz-g); color:var(--nz-g-ink); font-weight:700;}
.stl-cdate{width:auto; height:32px; padding:0 var(--nz-s2);}
.stl-cmemo{height:36px; padding:0 var(--nz-s3);}
.stl-chint{font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink3);}
/* 헤더 줄 간격 - 오른쪽 고객 온도가 두 줄 높이를 차지해도 업체명 줄·진행 막대는 위로 붙여 둠. */
.stl-header-card{grid-template-rows:auto 1fr; align-items:start;}
.stl-header-card .stl-header-name, .stl-header-card .stl-header-stage, .stl-header-card .stl-header-meta{align-self:center;}
.stl-header-card .stl-progress{align-self:start;}
/* [2026-09-25 38차 신규, 기준규칙 v1 8장] 다음 한 수 - 가운데 ① 박스 맨 위: 행동 한 줄(16px) · 이유 · 추천 멘트(옅은 면) · 피할 말(빨강 라벨) · 규칙ID/권장 다음 연락 + 바로가기. */
.stl-next{display:flex; flex-direction:column; gap:var(--nz-s2); padding-bottom:var(--nz-s3); border-bottom:1px solid var(--nz-line);}
.stl-next.appear{animation:stlAskIn .25s ease-out both;}
.stl-next-title{font-size:var(--nz-fs4); line-height:var(--nz-lh4); letter-spacing:var(--nz-ls4); font-weight:700; color:var(--nz-ink);}
.stl-next-why{font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); color:var(--nz-ink2);}
.stl-next-say{display:flex; flex-direction:column; gap:var(--nz-s1); background:var(--nz-fill); border-radius:var(--nz-r6); padding:var(--nz-s3);
  font-size:var(--nz-fs3); line-height:var(--nz-lh3); letter-spacing:var(--nz-ls3); color:var(--nz-ink);}
.stl-next-avoid{display:grid; grid-template-columns:72px minmax(0, 1fr); gap:var(--nz-s2); font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink2);}
.stl-next-lab{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; color:var(--nz-ink3);}
.stl-next-avoid .stl-next-lab{color:var(--nz-r-ink); padding-top:0;}
.stl-next-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2); flex-wrap:wrap;}
.stl-next-meta{font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3); font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: reduce){ .stl-next.appear{animation:none;} }

/* ------------------------------------------------------------------ *
 * [2026-09-25 40차 신규] 휴대폰 화면(#mobile, 주소 /m) - 기준규칙 v1 9장.
 * 위 메뉴·제목줄을 숨기고 한 줄 폭(최대 480px)으로. 누르는 것은 모두 높이 48px 이상(손가락 기준).
 * 색·글자·간격은 PC와 같은 --nz 토큰. 그라데이션 없음, 아이콘 없음(박스+글자).
 * ------------------------------------------------------------------ */
body.nz-mobile .topnav, body.nz-mobile .topnav-menu, body.nz-mobile .topbar{display:none !important;}
body.nz-mobile, body.nz-mobile .app-shell-top, body.nz-mobile .main-area{background:var(--nz-fill);}
body.nz-mobile .main-area{padding:0 !important; margin:0 !important;}
body.nz-mobile .content{padding:0 !important; max-width:none !important;}
.nzm{max-width:480px; margin:0 auto; min-height:100vh; background:var(--nz-fill); color:var(--nz-ink);}
.nzm-bar{position:sticky; top:0; z-index:5; display:grid; grid-template-columns:88px minmax(0, 1fr) 88px; align-items:center; gap:var(--nz-s2);
  height:52px; padding:0 var(--nz-s4); background:var(--nz-bg); border-bottom:1px solid var(--nz-line);}
.nzm-brand{font-size:var(--nz-fs1); line-height:var(--nz-lh1); letter-spacing:.08em; font-weight:800; color:var(--nz-g-ink);}
.nzm-title{font-size:var(--nz-fs4); line-height:var(--nz-lh4); font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nzm-back{height:36px; padding:0 var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-rp); background:var(--nz-bg); color:var(--nz-ink);
  font:inherit; font-size:var(--nz-fs2); font-weight:500; justify-self:start; cursor:pointer;}
.nzm-pc{justify-self:end; display:inline-flex; align-items:center; height:36px; font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3); text-decoration:none;}
.nzm-body{display:flex; flex-direction:column; gap:var(--nz-s3); padding:var(--nz-s4);}
.nzm-empty{padding:var(--nz-s6) var(--nz-s4); text-align:center; color:var(--nz-ink3); font-size:var(--nz-fs3); line-height:var(--nz-lh3);
  background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r10);}
.nzm-card{display:flex; flex-direction:column; gap:var(--nz-s2); width:100%; text-align:left; padding:var(--nz-s4); font:inherit; color:inherit;
  background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r10); cursor:pointer;}
.nzm-card:active{border-color:var(--nz-g);}
.nzm-card-top, .nzm-head{display:flex; align-items:center; justify-content:space-between; gap:var(--nz-s2);}
.nzm-name{font-size:var(--nz-fs4); line-height:var(--nz-lh4); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nzm-name.nzm-big{font-size:var(--nz-fs5); line-height:var(--nz-lh5);}
.nzm-head .stl-now-chip, .nzm-card-top .stl-stage-badge{flex:none;}
.nzm-sub{font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink2);}
.nzm-big-btn{display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 var(--nz-s4); border-radius:var(--nz-r6);
  background:var(--nz-g); border:1px solid var(--nz-g); color:#fff; font:inherit; font-size:var(--nz-fs4); line-height:var(--nz-lh4); font-weight:700;
  text-decoration:none; cursor:pointer; text-align:center;}
.nzm-big-btn.sec{background:var(--nz-bg); border-color:var(--nz-line); color:var(--nz-ink); font-weight:500;}
#nzmCall{animation:stlPulseGlow 2.4s ease-in-out infinite;}
.nzm-callbox{padding:var(--nz-s3) var(--nz-s4); background:var(--nz-g-soft); border:1px solid var(--nz-g-line); border-radius:var(--nz-r10);
  font-size:var(--nz-fs4); line-height:var(--nz-lh4); font-weight:700; color:var(--nz-g-ink); font-variant-numeric:tabular-nums;}
.nzm-callbox .nzm-sub{display:block; font-weight:400;}
.nzm-sec{display:flex; flex-direction:column; gap:var(--nz-s2); padding:var(--nz-s4); background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r10);}
.nzm-lab{font-size:var(--nz-fs2); line-height:var(--nz-lh2); font-weight:700; color:var(--nz-ink2);}
.nzm .stl-copt{height:44px; padding:0 var(--nz-s4); font-size:var(--nz-fs3);}
.nzm .stl-cmemo{height:44px; width:100%; box-sizing:border-box;}
.nzm-sms{white-space:pre-wrap; padding:var(--nz-s3); background:var(--nz-fill); border:1px solid var(--nz-line); border-radius:var(--nz-r6);
  font-size:var(--nz-fs3); line-height:var(--nz-lh3); color:var(--nz-ink);}
.nzm-link{align-self:center; min-height:44px; padding:0 var(--nz-s4); background:none; border:0; font:inherit; font-size:var(--nz-fs3); color:var(--nz-ink2); text-decoration:underline; cursor:pointer;}
.nzm-head .stl-advisor-role{min-height:0; margin:0;}
.nzm .stl-zone{background:var(--nz-bg);}
.nzm .stl-next{padding-bottom:0; border-bottom:0;} /* 휴대폰은 아래 이어지는 칸이 없어 구분선 뺌 */
.nzm .stl-next-avoid{grid-template-columns:auto minmax(0, 1fr); column-gap:var(--nz-s3);}
@media (prefers-reduced-motion: reduce){ #nzmCall{animation:none;} }

/* ------------------------------------------------------------------ *
 * [2026-09-25 40차 신규, 작업계획 9단계] 목록 카드 ↔ 영업타임라인 오가기.
 * 목록 카드(신규상담·가격제안서·계약서) 아래 줄: "지금 단계 · N일째" + "영업타임라인에서 보기".
 * 목록 화면 자체의 카드 모양(tlc-*)은 그대로 두고, 버튼은 옆 "상세정보 열기"와 같은 알약 모양.
 * 목록에서는 깜박임 없음(여러 장이 동시에 깜박이면 시끄러워서 - 깜박임은 영업타임라인 안에서만).
 * ------------------------------------------------------------------ */
.tlc-stl-slot{display:none; align-items:center; gap:10px;}
.tlc-stl-slot.on{display:inline-flex;}
.tlc-stl-now{display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px; box-sizing:border-box;
  background:var(--nz-g-soft); border:1px solid var(--nz-g-line); color:var(--nz-g-ink); font-size:.8rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;}
.tlc-stl-now.end{background:var(--nz-fill); border-color:var(--nz-line); color:var(--nz-ink2);}
.tlc-stl-go{display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:999px; box-sizing:border-box; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:700; color:var(--tlc-ink-700, #000); background:var(--tlc-surface, #fff);
  border:1px solid var(--tlc-border, #E6DFCC); box-shadow:var(--tlc-shadow-sm, none); white-space:nowrap;}
.tlc-stl-go:hover{border-color:var(--nz-g); color:var(--nz-g-ink);}
.tlc-toggle-wrap > .tlc-save-all-btn, .tlc-toggle-wrap > .tlc-toggle-btn{height:36px; box-sizing:border-box; padding-top:0; padding-bottom:0;} /* 카드 아래 줄 4개 높이 통일 */
.tlc-card.tlc-card-flash{border-color:var(--nz-g); box-shadow:0 0 0 3px var(--nz-g-ring);}
@media (max-width:640px){ .tlc-toggle-wrap{flex-wrap:wrap;} }

/* ------------------------------------------------------------------ *
 * [2026-09-25 41차 신규] 메일발송 관리 > 메일 서명 탭 - 왼쪽 미리보기(실제 메일에 들어가는 그대로), 오른쪽 회사 공통 값.
 * ------------------------------------------------------------------ */
.mcsig-grid{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--nz-s6); align-items:start;}
@media (max-width:980px){ .mcsig-grid{grid-template-columns:minmax(0, 1fr);} }
.mcsig-lab{font-size:var(--nz-fs2); line-height:var(--nz-lh2); font-weight:700; color:var(--nz-ink2); margin-bottom: var(--nz-s2);}
.mcsig-preview{background:#fff; border:1px solid var(--nz-line); border-radius:var(--nz-r10); padding: var(--nz-s4) var(--nz-s4) var(--nz-s6); overflow-x:auto;}
.mcsig-preview > div{margin-top: 0 !important;}
.mcsig-field{display:flex; flex-direction:column; gap: var(--nz-s1); margin-bottom: var(--nz-s3);}
.mcsig-field span{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:500; color:var(--nz-ink3);}
.mcsig-field input{height:40px; padding: 0 var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-r6); font:inherit; font-size:var(--nz-fs3); color:var(--nz-ink); background:#fff; box-sizing:border-box; width:100%;}
.mcsig-field input[readonly]{background:var(--nz-fill); color:var(--nz-ink2);}
.mcsig-actions{display:flex; gap: var(--nz-s2); flex-wrap:wrap; align-items:center;}
.mcsig-note{margin-top: var(--nz-s2); font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3);}
.mcsig-warn{margin-top: var(--nz-s2); padding: var(--nz-s2) var(--nz-s3); border-radius:var(--nz-r6); background:var(--nz-o-soft); border:1px solid var(--nz-o-line); color:var(--nz-o-ink); font-size:var(--nz-fs2); line-height:var(--nz-lh2);}

/* [2026-09-25 42차] 목록 상세의 시/도 · 구/시/군 한 줄 - 두 칸의 이름표·입력칸 높이를 맞춤(예전 규칙은 마지막 칸만 아래 여백이 없어 한 칸이 9px 내려가 보였음) */
.tlc-row-2.tlc-row-addr{align-items:flex-start; margin-bottom:9px;}
.tlc-row-2.tlc-row-addr .tlc-field{margin-bottom:0;}

/* ------------------------------------------------------------------ *
 * [2026-09-25 43차, 사장님 지적 "글 읽기 불편 - 공간을 더 쓰더라도 정리해서"] 다음 한 수 · 계약으로 이끄는 어드바이스 읽기 편하게.
 * - 설명은 문장마다 줄 나눔, 줄 간격 넓힘(1.7)
 * - 추천 멘트 · 피할 말을 같은 모양 상자(이름표 위, 내용 아래)로 - 피할 말만 붉은 바탕
 * - 어드바이스는 한 줄 문단 대신 항목마다 [무엇에 대한 것] 이름표 + 핵심 한 줄(굵게) + 설명(아래 줄)
 * ------------------------------------------------------------------ */
.stl-next{gap:var(--nz-s3); padding-bottom:var(--nz-s4);}
.stl-next-why{display:flex; flex-direction:column; gap:var(--nz-s1); line-height:1.7;}
.stl-next-why .stl-sent{display:block;}
.stl-next-say{line-height:1.7; gap:var(--nz-s1);}
.stl-next-avoid{display:flex; flex-direction:column; gap:var(--nz-s1); background:var(--nz-r-soft); border-radius:var(--nz-r6); padding:var(--nz-s3);
  font-size:var(--nz-fs3); line-height:1.7; letter-spacing:var(--nz-ls3); color:var(--nz-ink);}
.stl-next-meta b{font-weight:700; color:var(--nz-ink2);}
.stl-zone-next > .stl-box-note{font-size:var(--nz-fs3); line-height:1.7; color:var(--nz-ink2);}
.stl-tips{display:flex; flex-direction:column; gap:0; margin-top:var(--nz-s1);}
.stl-tips-title{font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:700; color:var(--nz-ink); padding-bottom:var(--nz-s2);}
.stl-tip{display:grid; grid-template-columns:56px minmax(0, 1fr); gap:var(--nz-s3); align-items:start; padding:var(--nz-s3) 0; border-top:1px solid var(--nz-line);}
.stl-tip-tag{display:inline-flex; align-items:center; justify-content:center; height:24px; border-radius:var(--nz-rp); background:var(--nz-g-soft); color:var(--nz-g-ink);
  font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:700; white-space:nowrap;}
.stl-tip-text{display:flex; flex-direction:column; gap:var(--nz-s1); min-width:0;}
.stl-tip-head{font-size:var(--nz-fs3); line-height:1.6; font-weight:700; color:var(--nz-ink);}
.stl-tip-body{font-size:var(--nz-fs3); line-height:1.7; color:var(--nz-ink2);}

/* [43차] 이 단계 요약(지금까지 기록한 내용 · 이 단계 연락) - 시각은 고정 폭 숫자, 한 연락 = 한 줄(메모는 아래 줄) */
.stl-stage-sum{display:flex; flex-direction:column; gap:var(--nz-s2);}
.stl-csum{display:flex; flex-direction:column;}
.stl-csum-row{display:grid; grid-template-columns:88px minmax(0, 1fr); gap:var(--nz-s3); padding:var(--nz-s2) 0; border-top:1px solid var(--nz-line); font-size:var(--nz-fs3); line-height:1.6; color:var(--nz-ink2);}
.stl-csum-row:first-child{border-top:0; padding-top:0;}
.stl-csum-when{color:var(--nz-ink3); font-variant-numeric:tabular-nums;}
.stl-csum-text b{color:var(--nz-ink); font-weight:700;}
.stl-csum-memo{display:block; color:var(--nz-ink2);}

/* ------------------------------------------------------------------ *
 * [2026-09-25 45차] 로그인 화면 PC/휴대폰 고르기 · 휴대폰 첫 화면 "오늘" · 앱 설치 안내 · 통화 내용 칸
 * ------------------------------------------------------------------ */
.login-mode{display:grid; grid-template-columns:1fr 1fr; gap:var(--nz-s2); margin:var(--nz-s1) 0 var(--nz-s2);}
.login-mode-opt{height:44px; border-radius:10px; border:1px solid var(--border, #D9DDD6); background:#fff; color:var(--text-600, #4B5563);
  font:inherit; font-size:.92rem; font-weight:700; cursor:pointer;}
.login-mode-opt[aria-checked="true"]{border-color:var(--teal-500); background:#F2F9EC; color:#23262A; box-shadow:0 0 0 2px rgba(163,217,119,.35) inset;}
.login-mode-note{font-size:.8rem; line-height:1.5; color:var(--text-400); margin-bottom:var(--nz-s4); min-height:1.2em;}

.nzm-today-head{display:flex; flex-direction:column; gap:var(--nz-s1); padding:var(--nz-s1) 0;}
.nzm-today-date{font-size:var(--nz-fs5); line-height:var(--nz-lh5); font-weight:700; color:var(--nz-ink);}
.nzm-sec-title{margin-top:var(--nz-s3); font-size:var(--nz-fs3); line-height:var(--nz-lh3); font-weight:700; color:var(--nz-ink2);}
.nzm-sched{display:grid; grid-template-columns:minmax(0, 1fr) 64px; background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r10); overflow:hidden;}
.nzm-sched.past{opacity:.72;}
.nzm-sched-main{display:grid; grid-template-columns:64px minmax(0, 1fr); gap:var(--nz-s3); align-items:start; padding:var(--nz-s4); background:none; border:0; text-align:left; font:inherit; color:inherit; cursor:pointer; min-width:0;}
.nzm-sched-time{font-size:var(--nz-fs4); line-height:var(--nz-lh4); font-weight:700; color:var(--nz-g-ink); font-variant-numeric:tabular-nums;}
.nzm-sched-body{display:flex; flex-direction:column; gap:var(--nz-s1); min-width:0;}
.nzm-sched-top{display:flex; gap:var(--nz-s1); flex-wrap:wrap;}
.nzm-kind{display:inline-flex; align-items:center; height:24px; padding:0 var(--nz-s2); border-radius:var(--nz-rp); background:var(--nz-g-soft); color:var(--nz-g-ink);
  font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:700; white-space:nowrap;}
.nzm-kind.past{background:var(--nz-fill); color:var(--nz-ink3);}
.nzm-kind.warn{background:var(--nz-o-soft); color:var(--nz-o-ink);}
.nzm-sched-call{display:flex; align-items:center; justify-content:center; border-left:1px solid var(--nz-line); background:var(--nz-g-soft); color:var(--nz-g-ink);
  font-size:var(--nz-fs3); font-weight:700; text-decoration:none;}
.nzm-install{display:flex; flex-direction:column; gap:var(--nz-s2); padding:var(--nz-s3) var(--nz-s4); background:var(--nz-bg); border:1px dashed var(--nz-g-line); border-radius:var(--nz-r10);}
.nzm-install-text{display:flex; flex-direction:column; gap:var(--nz-s1); font-size:var(--nz-fs2); line-height:var(--nz-lh2); color:var(--nz-ink2);}
.nzm-install-text b{font-size:var(--nz-fs3); color:var(--nz-ink);}
.nzm-install-actions{display:flex; align-items:center; gap:var(--nz-s2);}
.nzm-install-btn{height:44px; padding:0 var(--nz-s4); border-radius:var(--nz-r6); border:1px solid var(--nz-g); background:var(--nz-g); color:#fff; font:inherit; font-size:var(--nz-fs3); font-weight:700; cursor:pointer;}
.nzm .stl-cmemo.nzm-memo{height:auto; min-height:112px; padding:var(--nz-s3); line-height:1.6; resize:vertical; font:inherit; font-size:var(--nz-fs3);}
.nzm-sched.nophone{grid-template-columns:minmax(0, 1fr);}
.nzm .seg-input input{height:44px; font-size:16px;} /* [46차] 휴대폰 번호 칸 - 16px 미만이면 아이폰이 화면을 확대함 */

/* ===== [47차] 가격표·신규/추가·프로모션 (가격제안서) ===== */
.quote-kind-step2 { margin-top: var(--nz-s6); }
.quote-kind-sub { display: block; margin-top: var(--nz-s1); font-size: var(--nz-fs1); font-weight: 500; color: var(--text-600); line-height: 1.4; }
.quote-product-box.selected .quote-kind-sub, .quote-select-box.selected .qp-box-sub { color: #fff; }
.quote-product-table th { white-space: nowrap; }
.quote-purchase-info { margin: 0 0 var(--nz-s2); padding: var(--nz-s2) var(--nz-s3); border: 1px solid var(--quote-hair, #d9cfb6); border-radius: var(--nz-r6); background: var(--quote-tan-bg, #fbf7ee); font-size: 0.8rem; color: var(--quote-navy-2, #333); line-height: 1.5; }
.quote-sum-row td { padding-top: 7px !important; padding-bottom: 7px !important; }
.quote-sum-label { text-align: right !important; font-weight: 700 !important; font-size: 0.9rem !important; }
.quote-sum-value { font-weight: 700 !important; font-size: 0.82rem !important; }
.quote-total-sub { font-size: 0.95rem; font-weight: 700; }
.qp-box-sub { display: block; margin-top: var(--nz-s1); font-size: var(--nz-fs1); font-weight: 500; color: var(--text-600); }
.qp-sub-title { font-size: var(--nz-fs2); font-weight: 800; color: var(--navy-800); margin: 0 0 var(--nz-s2); text-align: left; }
.qp-sub-note { font-weight: 500; font-size: var(--nz-fs1); color: var(--text-600); margin-left: var(--nz-s1); }
.qp-usage-card { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3); margin-bottom: var(--nz-s3); background: #fff; text-align: left; }
.qp-usage-hint { font-size: var(--nz-fs1); color: var(--text-600); line-height: 1.5; margin-bottom: var(--nz-s2); }
.qp-usage-row { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-s2); min-height: 36px; border-top: 1px solid var(--border); }
.qp-usage-check { display: inline-flex; align-items: center; gap: var(--nz-s2); font-size: var(--nz-fs2); font-weight: 700; color: var(--navy-800); }
.qp-usage-users { display: inline-flex; align-items: center; gap: var(--nz-s1); font-size: var(--nz-fs1); color: var(--text-600); white-space: nowrap; }
.qp-usage-users input { width: 56px; height: 28px; padding: 0 var(--nz-s1); border: 1.5px solid var(--border); border-radius: var(--nz-r6); text-align: center; box-sizing: border-box; }
.qp-usage-ids { display: flex; gap: var(--nz-s2); align-items: center; }
.qp-usage-ids input { flex: 1; height: 36px; padding: 0 var(--nz-s2); border: 1.5px solid var(--border); border-radius: var(--nz-r6); box-sizing: border-box; min-width: 0; }
.qp-usage-ids .btn { height: 36px; white-space: nowrap; }
.qp-sale-note { font-size: var(--nz-fs1); line-height: 1.5; color: var(--nz-o-ink, #8a4b00); background: var(--nz-o-soft, #fff4e6); border: 1px solid var(--nz-o-line, #f3d2a6); border-radius: var(--nz-r6); padding: var(--nz-s2) var(--nz-s3); margin-bottom: var(--nz-s3); text-align: left; }
.qp-cust-grid { grid-template-columns: repeat(2, 1fr); }
.qp-cust-chip { padding: var(--nz-s2); font-size: var(--nz-fs1); }
.qp-promo-grid { grid-template-columns: 1fr; }
.qp-promo-box { text-align: left; }
.qp-promo-name { font-size: var(--nz-fs2); font-weight: 800; }
.qp-promo-meta { font-size: var(--nz-fs1); font-weight: 500; margin-top: var(--nz-s1); line-height: 1.5; color: var(--text-600); }
.qp-promo-box.selected .qp-promo-meta, .qp-promo-box.selected .qp-promo-why { color: #fff; }
.qp-promo-why { font-size: var(--nz-fs1); font-weight: 600; margin-top: var(--nz-s1); color: var(--nz-o-ink, #8a4b00); }
.qp-promo-box.qp-disabled { opacity: 0.55; cursor: not-allowed; }
.qp-promo-input { display: flex; align-items: center; justify-content: space-between; gap: var(--nz-s2); margin-top: var(--nz-s2); font-size: var(--nz-fs1); font-weight: 600; }
.qp-promo-input input { width: 120px; height: 30px; border: 1.5px solid var(--border); border-radius: var(--nz-r6); padding: 0 var(--nz-s2); color: var(--navy-800); box-sizing: border-box; }
.qp-promo-problems { margin-top: var(--nz-s2); font-size: var(--nz-fs1); color: var(--nz-o-ink, #8a4b00); line-height: 1.6; text-align: left; }
/* [47차] 설정 - 제품 판매상태 줄 / 구분 상세 줄 */
.qp-sale-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--nz-s2) var(--nz-s3); padding: var(--nz-s2) var(--nz-s3); border-top: 1px solid var(--border); font-size: var(--nz-fs1); color: var(--text-600); }
.qp-sale-row label, .qp-detail-grid label { display: flex; flex-direction: column; gap: 2px; font-size: var(--nz-fs1); font-weight: 600; color: var(--text-600); }
.qp-sale-row input, .qp-sale-row select, .qp-detail-grid input, .qp-detail-grid select { height: 30px; padding: 0 var(--nz-s2); border: 1.5px solid var(--border); border-radius: var(--nz-r6); box-sizing: border-box; font-size: var(--nz-fs1); color: var(--navy-800); min-width: 0; }
.qp-sale-wide { flex: 1 1 260px; }
.qp-sale-month { align-self: center; font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.qp-mod-detail td { background: #fafbfd; padding-top: var(--nz-s1) !important; }
.qp-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--nz-s2); }
.qp-detail-grid .qp-check { flex-direction: row; align-items: center; gap: var(--nz-s1); }
.qp-detail-grid .qp-check input { height: auto; }
.qp-wide { grid-column: span 2; }
.qp-row-hidden td { opacity: 0.5; }
.tap-spec-hint { font-size: var(--nz-fs1); color: var(--text-600); }
/* [47차] 설정 - 가격표 PDF 반영 / 프로모션 관리 */
.pp-lead { font-size: var(--nz-fs2); line-height: 1.6; color: var(--text-600); margin: 0 0 var(--nz-s3); }
.pp-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-s2); margin-bottom: var(--nz-s3); }
.pp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-s2); margin: var(--nz-s2) 0 var(--nz-s3); font-size: var(--nz-fs1); }
.pp-summary select { height: 30px; border: 1.5px solid var(--border); border-radius: var(--nz-r6); padding: 0 var(--nz-s2); }
.pp-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--nz-s2); border: 1px solid var(--border); border-radius: var(--nz-r6); background: #fff; font-weight: 600; color: var(--navy-800); white-space: nowrap; }
.pp-chip-strong { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pp-table-wrap { overflow-x: auto; margin-bottom: var(--nz-s3); }
.pp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-new { font-weight: 800; color: var(--nz-o-ink, #8a4b00); }
.pp-src { font-size: 0.72rem; color: var(--text-600); max-width: 380px; }
.pp-apply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-s3); margin-bottom: var(--nz-s3); font-size: var(--nz-fs2); font-weight: 600; }
.pp-apply input { height: 32px; margin-left: var(--nz-s1); border: 1.5px solid var(--border); border-radius: var(--nz-r6); padding: 0 var(--nz-s2); }
.pp-ok { padding: var(--nz-s3); border: 1px solid var(--border); border-radius: var(--nz-r6); background: #f7f9fc; font-size: var(--nz-fs2); color: var(--navy-800); margin-bottom: var(--nz-s3); }
.pp-list { margin: 0 0 var(--nz-s3); padding-left: 18px; font-size: var(--nz-fs1); line-height: 1.7; color: var(--text-600); }
.pp-same { margin-bottom: var(--nz-s3); font-size: var(--nz-fs1); }
.pp-same summary { cursor: pointer; font-weight: 700; color: var(--navy-800); margin-bottom: var(--nz-s2); }
.pp-status { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--nz-s2); border-radius: var(--nz-r6); font-size: 0.72rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--border); background: #fff; color: var(--text-600); }
.pp-status-applied { background: #eef6f0; border-color: #b9dcc3; color: #1f6b3a; }
.pp-status-pending { background: var(--nz-o-soft, #fff4e6); border-color: var(--nz-o-line, #f3d2a6); color: var(--nz-o-ink, #8a4b00); }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--nz-s3); margin-bottom: var(--nz-s3); }
.pr-card { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3); background: #fff; display: flex; flex-direction: column; gap: var(--nz-s2); min-width: 0; }
.pr-running { border-color: var(--navy-800); }
.pr-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--nz-s2); }
.pr-name { font-size: var(--nz-fs2); font-weight: 800; color: var(--navy-800); line-height: 1.4; }
.pr-meta { font-size: var(--nz-fs1); color: var(--text-600); }
.pr-rules { margin: 0; padding-left: 18px; font-size: var(--nz-fs1); line-height: 1.6; color: var(--navy-800); }
.pr-check { color: var(--nz-o-ink, #8a4b00); font-weight: 600; }
.pr-note { font-size: 0.72rem; line-height: 1.6; color: var(--text-600); border-top: 1px solid var(--border); padding-top: var(--nz-s2); }
.pr-issues { font-size: var(--nz-fs1); line-height: 1.6; color: var(--nz-o-ink, #8a4b00); background: var(--nz-o-soft, #fff4e6); border: 1px solid var(--nz-o-line, #f3d2a6); border-radius: var(--nz-r6); padding: var(--nz-s2); }
.pr-changed { border-color: var(--nz-o-line, #f3d2a6); }
.pr-same { opacity: 0.75; }
.pr-actions { display: flex; flex-wrap: wrap; gap: var(--nz-s2); align-items: center; }
.pr-ending { display: flex; margin: 0 0 var(--nz-s3); font-size: var(--nz-fs1); font-weight: 600; }
.pr-editor { border-top: 1px dashed var(--border); padding-top: var(--nz-s2); }
.pr-edit-grid, .pr-rule { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--nz-s2); margin-bottom: var(--nz-s2); }
.pr-rule { border: 1px solid var(--border); border-radius: var(--nz-r6); padding: var(--nz-s2); background: #fafbfd; }
.pr-edit-grid label, .pr-rule label, .pr-edit-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--nz-fs1); font-weight: 600; color: var(--text-600); }
.pr-edit-grid > div { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--nz-s2); }
.pr-edit-grid input:not([type=checkbox]), .pr-edit-grid textarea, .pr-rule input:not([type=checkbox]), .pr-rule select { min-height: 30px; padding: 0 var(--nz-s2); border: 1.5px solid var(--border); border-radius: var(--nz-r6); box-sizing: border-box; font-size: var(--nz-fs1); color: var(--navy-800); min-width: 0; font-family: inherit; }
.pr-edit-grid textarea { padding: var(--nz-s1) var(--nz-s2); }
.pr-edit-grid .qp-check, .pr-rule .qp-check { flex-direction: row; align-items: center; gap: var(--nz-s1); }
.pr-wide { grid-column: 1 / -1; }
.pr-rule .rDel { align-self: end; justify-self: start; }

/* ===== [48차] 업무흐름 진단 - 전화상담 잇기 · 보고서 · 세무사무소 진단 (아이콘·그라데이션 없음) ===== */
.cs-panel-start { max-height: calc(100vh - 258px); overflow-y: auto; }
.cs-r-cap { font-size: var(--nz-fs1); font-weight: 800; color: var(--text-400); letter-spacing: 1px; margin: var(--nz-s4) 0 var(--nz-s2); }
.cs-r-src { display: inline-block; margin-left: var(--nz-s2); font-size: var(--nz-fs1); font-weight: 700; letter-spacing: 0; color: var(--nz-g-ink); background: var(--nz-g-soft); border: 1px solid var(--nz-g-line); border-radius: 6px; padding: 0 var(--nz-s2); }
.cs-r-box { border: 1.5px solid var(--border); border-radius: 12px; padding: var(--nz-s3) var(--nz-s4); background: #fff; min-width: 0; }
.cs-r-soft { background: var(--nz-fill); }
.cs-r-note { font-size: var(--nz-fs2); color: var(--text-600); margin-top: var(--nz-s2); line-height: 1.6; }
.cs-r-note b { color: var(--navy-800); }
.cs-call-card { padding: var(--nz-s1) var(--nz-s4); }
.cs-call-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: var(--nz-s3); align-items: baseline; padding: var(--nz-s2) 0; border-top: 1px solid var(--nz-line); }
.cs-call-row:first-child { border-top: 0; }
.cs-call-k { font-size: var(--nz-fs2); font-weight: 700; color: var(--text-600); }
.cs-call-v { font-size: var(--nz-fs3); font-weight: 600; color: var(--navy-800); }
.cs-call-off .cs-call-v { color: var(--text-400); text-decoration: line-through; }
.cs-call-fix { background: none; border: 0; padding: 0; font-size: var(--nz-fs2); color: var(--text-400); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cs-link-bar { display: flex; align-items: center; justify-content: center; gap: var(--nz-s3); flex-wrap: wrap; font-size: var(--nz-fs2); color: var(--text-600); margin-bottom: var(--nz-s3); }
.cs-link-panel { max-width: 560px; margin: 0 auto var(--nz-s3); width: 100%; }
.cs-link-panel input { width: 100%; height: 38px; border: 1.5px solid var(--border); border-radius: 8px; padding: 0 var(--nz-s3); box-sizing: border-box; font-size: var(--nz-fs3); }
.cs-link-list { display: flex; flex-direction: column; gap: var(--nz-s2); margin-top: var(--nz-s2); max-height: 240px; overflow-y: auto; }
.cs-link-opt { display: flex; justify-content: space-between; gap: var(--nz-s2); text-align: left; border: 1.5px solid var(--border); border-radius: 8px; padding: var(--nz-s2) var(--nz-s3); background: #fff; cursor: pointer; font-size: var(--nz-fs3); }
.cs-link-opt:hover { border-color: var(--teal-500); }
.cs-link-opt span { color: var(--text-400); font-size: var(--nz-fs2); }
.cs-pick-grid { margin-top: 0; }
.cs-grid-5 { grid-template-columns: repeat(5, 1fr); gap: var(--nz-s2); }
.cs-card-text { padding: var(--nz-s4) var(--nz-s2); gap: var(--nz-s1); animation: none; }
.cs-card-text.cs-picked { border-color: var(--navy-800); box-shadow: 0 0 0 3px var(--nz-g-ring); }
.cs-why { font-size: var(--nz-fs3); color: var(--text-600); border-left: 3px solid var(--nz-g); padding: 2px 0 2px var(--nz-s2); margin: -4px 0 var(--nz-s3); text-align: left; line-height: 1.6; }
.cs-head .cs-why { margin: var(--nz-s2) auto 0; max-width: 720px; }
.cs-why b { color: var(--navy-800); }
.cs-area-chips { display: flex; gap: var(--nz-s2); flex-wrap: wrap; margin: var(--nz-s3) 0 var(--nz-s2); }
.cs-area-chips span { font-size: var(--nz-fs1); padding: var(--nz-s1) var(--nz-s2); border-radius: 6px; border: 1px solid var(--border); color: var(--text-400); background: #fff; }
.cs-area-chips span.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 700; }
.cs-area-chips span.done { color: var(--nz-g-ink); background: var(--nz-g-soft); border-color: var(--nz-g-line); }
.cs-option-skip { color: var(--text-600); background: var(--nz-fill); }
.cs-qfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--nz-s2); margin-top: var(--nz-s3); font-size: var(--nz-fs2); color: var(--text-400); }
.cs-qfoot .cs-back { margin-top: 0; }
.cs-num { display: flex; align-items: center; justify-content: center; gap: var(--nz-s2); margin: var(--nz-s4) 0; font-size: var(--nz-fs4); color: var(--navy-800); font-weight: 700; }
.cs-num input { width: 110px; height: 44px; text-align: center; font-size: 1.2rem; font-weight: 800; border: 1.5px solid var(--border); border-radius: 10px; color: var(--navy-800); }
.cs-num .btn { min-width: 44px; height: 44px; }
.cs-r-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nz-s3); margin-top: var(--nz-s2); }
.cs-r-goal { border-color: var(--teal-500); }
.cs-r-lvbtn { display: flex; flex-direction: column; align-items: flex-start; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.cs-r-lv { font-size: 1.9rem; font-weight: 800; color: var(--navy-800); line-height: 1.2; }
.cs-r-lv small { font-size: var(--nz-fs3); margin-left: var(--nz-s1); }
.cs-r-lvname { font-size: var(--nz-fs4); font-weight: 800; color: var(--navy-800); }
.cs-r-desc { font-size: var(--nz-fs3); color: var(--text-600); margin-top: var(--nz-s1); line-height: 1.6; }
.cs-r-goalnav { float: right; display: inline-flex; gap: var(--nz-s2); letter-spacing: 0; }
.cs-r-navbtn { font-size: var(--nz-fs1); font-weight: 700; color: var(--navy-800); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1px var(--nz-s2); cursor: pointer; }
.cs-r-navbtn:disabled { opacity: .4; cursor: default; }
.cs-r-road { margin-top: var(--nz-s2); display: flex; flex-direction: column; gap: var(--nz-s1); font-size: var(--nz-fs2); color: var(--text-600); }
.cs-r-road b { color: var(--navy-800); }
.cs-r-concl { font-size: var(--nz-fs4); font-weight: 700; color: var(--navy-800); line-height: 1.7; }
.cs-r-find { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--nz-s2); padding: var(--nz-s2) 0; border-top: 1px solid var(--nz-line); }
.cs-r-concl + .cs-r-find { margin-top: var(--nz-s2); }
.cs-r-no { width: 22px; height: 22px; border-radius: 6px; background: var(--navy-800); color: #fff; font-size: var(--nz-fs1); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cs-r-ft { font-weight: 800; color: var(--navy-800); font-size: var(--nz-fs3); }
.cs-r-fb { font-size: var(--nz-fs2); color: var(--text-600); margin-top: 2px; }
.cs-r-areas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--nz-s3); align-items: stretch; }
.cs-r-tblbox { padding: var(--nz-s1) var(--nz-s2); overflow-x: auto; }
.cs-r-tbl { width: 100%; border-collapse: collapse; font-size: var(--nz-fs3); }
.cs-r-tbl th { text-align: left; font-size: var(--nz-fs1); color: var(--text-400); font-weight: 700; padding: var(--nz-s2) var(--nz-s2) var(--nz-s2); border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.cs-r-tbl td { padding: var(--nz-s2) var(--nz-s2); border-bottom: 1px solid var(--nz-line); vertical-align: top; color: var(--nz-ink); }
.cs-r-tbl tr:last-child td { border-bottom: 0; }
.cs-r-nowrap { white-space: nowrap; }
.cs-r-bar { display: inline-grid; grid-template-columns: repeat(5, 12px); gap: var(--nz-s1); vertical-align: middle; margin-right: var(--nz-s2); }
.cs-r-bar i { height: 8px; border-radius: 2px; background: var(--nz-line); }
.cs-r-bar i.on { background: var(--nz-g); }
.cs-r-pri { font-size: var(--nz-fs1); font-weight: 800; padding: 1px var(--nz-s2); border-radius: 6px; white-space: nowrap; }
.cs-r-pri.p1 { background: var(--nz-r-soft); color: var(--nz-r-ink); }
.cs-r-pri.p2 { background: var(--nz-o-soft); color: var(--nz-o-ink); }
.cs-r-pri.p3, .cs-r-pri.p0 { background: var(--nz-fill); color: var(--text-600); }
.cs-r-mod { display: inline-block; font-size: var(--nz-fs1); font-weight: 700; color: var(--navy-800); border: 1px solid var(--border); border-radius: 6px; padding: 1px var(--nz-s2); margin: 0 var(--nz-s1) var(--nz-s1) 0; background: #fff; }
.cs-r-how { display: inline-block; font-size: var(--nz-fs1); color: var(--text-600); margin: 0 var(--nz-s1) var(--nz-s1) 0; }
.cs-r-radar { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nz-s2); }
.cs-r-radar svg { max-width: 100%; height: auto; }
.cs-r-line { display: flex; flex-direction: column; gap: 2px; padding: var(--nz-s2) 0; border-top: 1px solid var(--nz-line); font-size: var(--nz-fs3); color: var(--text-600); }
.cs-r-line:first-child { border-top: 0; }
.cs-r-line b { color: var(--navy-800); font-size: var(--nz-fs3); }
.cs-r-gains { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nz-s2); }
.cs-r-gains .cs-r-box { display: flex; flex-direction: column; gap: var(--nz-s1); font-size: var(--nz-fs2); color: var(--text-600); line-height: 1.6; }
.cs-r-gains .cs-r-box b { color: var(--navy-800); font-size: var(--nz-fs3); }
.cs-foot-note { text-align: center; font-size: var(--nz-fs1); color: var(--text-400); margin-top: var(--nz-s1); }
.cs-taxitem-text .cs-taxbody { padding-left: 2px; }
.stl-industry-pick { margin: var(--nz-s2) 0 var(--nz-s3); }
.stl-industry-cap { font-size: var(--nz-fs1); font-weight: 700; color: var(--nz-ink2); margin-bottom: var(--nz-s2); }
.stl-industry-cap span { font-weight: 500; color: var(--nz-ink3); margin-left: var(--nz-s1); }
.stl-industry-chips { display: flex; flex-wrap: wrap; gap: var(--nz-s2); }
.stl-industry-chip { height: 28px; padding: 0 var(--nz-s2); border: 1px solid var(--nz-line); border-radius: var(--nz-r6); background: #fff; font: inherit; font-size: var(--nz-fs1); color: var(--nz-ink2); cursor: pointer; }
.stl-industry-chip.on { background: var(--nz-g-soft); border-color: var(--nz-g); color: var(--nz-g-ink); font-weight: 700; }
/* [48차] 진단 화면의 그라데이션 배경을 단색으로(사장님 규칙: 그라데이션 금지) */
.cs-goal-reco, .cs-prod-base { background: #f6fbf4; }
.cs-prod-addon { background: #f6f7ff; }
.cs-facts, .cs-taxhero { background: var(--navy-900); }
.cs-divider {
  height: 1px;
  margin: var(--nz-s5) 0 var(--nz-s4);
  background: var(--border);
}
@media (max-width: 900px) {
  .cs-r-top, .cs-r-areas { grid-template-columns: 1fr; }
  .cs-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .cs-call-row { grid-template-columns: 100px minmax(0, 1fr) auto; }
}
.cs-lg-now { background: none; border-top: 2px dashed #8a94a6; height: 0 !important; }
/* [48차] 종합점검 = 고객진단 어드바이스 */
.stl-cd-box { border: 1px solid var(--nz-line); border-radius: var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); background: var(--nz-bg); margin-top: var(--nz-s3); min-width: 0; }
.stl-cd-summary { font-size: var(--nz-fs3); line-height: var(--nz-lh3); color: var(--nz-ink); }
.stl-cd-summary b { color: var(--nz-ink); }
.stl-cd-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nz-s3); }
.stl-cd-2col .stl-cd-box { margin-top: var(--nz-s3); }
.stl-cd-warn { border-color: var(--nz-o-line); background: var(--nz-o-soft); }
.stl-cd-cap { font-size: var(--nz-fs1); font-weight: 700; color: var(--nz-ink3); margin-bottom: var(--nz-s2); }
.stl-cd-li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--nz-s2); padding: var(--nz-s2) 0; border-top: 1px solid var(--nz-line); font-size: var(--nz-fs2); line-height: var(--nz-lh2); color: var(--nz-ink); }
.stl-cd-cap + .stl-cd-li { border-top: 0; }
.stl-cd-sub { font-size: var(--nz-fs1); color: var(--nz-ink2); }
.stl-cd-src { flex: 0 0 auto; font-size: var(--nz-fs1); font-weight: 700; line-height: var(--nz-lh1); padding: 0 var(--nz-s1); border-radius: var(--nz-r6); color: var(--nz-g-ink); background: var(--nz-g-soft); border: 1px solid var(--nz-g-line); white-space: nowrap; }
.stl-cd-src.b { color: var(--nz-b-ink); background: var(--nz-b-soft); border-color: #cfe0f3; }
.stl-cd-src.o { color: var(--nz-o-ink); background: #fff; border-color: var(--nz-o-line); }
.stl-cd-say { font-size: var(--nz-fs1); line-height: var(--nz-lh1); color: var(--nz-ink); background: rgba(255,255,255,.7); border-radius: var(--nz-r6); padding: var(--nz-s2); margin: var(--nz-s1) 0 var(--nz-s2); }
.stl-cd-empty { font-size: var(--nz-fs2); color: var(--nz-ink3); }
.stl-cd-foot { font-size: var(--nz-fs1); color: var(--nz-ink3); margin-top: var(--nz-s2); }
@media (max-width: 980px) { .stl-cd-2col { grid-template-columns: 1fr; } }
/* [48차] 보고서·시작 화면은 스크롤되는 세로 배치라, 안쪽 상자가 눌려 납작해지지 않도록 */
.cs-panel-report > *, .cs-panel-start > *, .cs-panel-q > * { flex-shrink: 0; }

/* ==================================================================
   [49차] 자동 실행 상태 - CRM 서버가 직접 실행(설정 · 메일유지 관리 · 가격 재제안 공용)
   ================================================================== */
.sched-when { font-size: var(--nz-fs1); color: var(--nz-ink2); }
.sched-last { flex-basis: 100%; font-size: var(--nz-fs1); color: var(--nz-ink3); }
.sched-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nz-s2); margin-top: var(--nz-s2); padding: var(--nz-s2) var(--nz-s3); border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* ==================================================================
   [49차] 메일전송 > 가격 재제안 (rq-*) - 메일유지 관리와 같은 틀(탭 + 목록 + 설정), 간격·글자는 토큰만
   ================================================================== */
.rq { text-align: left; color: var(--nz-ink); font-size: var(--nz-fs3); }
.rq-body { margin-top: var(--nz-s4); }
.rq-lead { font-size: var(--nz-fs3); color: var(--nz-ink2); line-height: var(--nz-lh4); margin: 0 0 var(--nz-s3); }
.rq-lead b { color: var(--navy-800); }
.rq-status { display: flex; flex-wrap: wrap; gap: var(--nz-s2); align-items: center; padding: var(--nz-s3) var(--nz-s3); border: 1.5px solid var(--border); border-radius: var(--nz-r10); background: var(--nz-fill); margin-bottom: var(--nz-s3); }
.rq-status .t { font-weight: 800; color: var(--navy-800); margin-right: var(--nz-s1); }
.rq-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--nz-s2); border-radius: var(--nz-r6); border: 1px solid var(--border); background: #fff; font-size: var(--nz-fs1); font-weight: 700; color: var(--navy-800); white-space: nowrap; width: fit-content; }
.rq-chip.g { background: var(--nz-g-soft); border-color: var(--nz-g-line); color: var(--nz-g-ink); }
.rq-chip.o { background: var(--nz-o-soft); border-color: var(--nz-o-line); color: var(--nz-o-ink); }
.rq-chip.b { background: var(--nz-b-soft); border-color: var(--nz-b-soft); color: var(--nz-b-ink); }
.rq-chip.n { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.rq-job { font-size: var(--nz-fs2); color: var(--nz-ink2); margin-bottom: var(--nz-s2); display: flex; gap: var(--nz-s2); align-items: center; flex-wrap: wrap; }
.rq-job:empty { display: none; }
.rq-sec { font-size: var(--nz-fs1); font-weight: 800; color: var(--nz-ink3); margin: var(--nz-s5) 0 var(--nz-s2); }
.rq-empty { padding: var(--nz-s4); border: 1px dashed var(--border); border-radius: var(--nz-r10); color: var(--nz-ink3); font-size: var(--nz-fs2); }
.rq-card { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3); background: #fff; margin-bottom: var(--nz-s2); display: grid; grid-template-columns: 24px minmax(160px, 220px) minmax(0, 1fr) minmax(0, 1.2fr) 150px; gap: var(--nz-s3); align-items: center; }
.rq-pick input { width: 18px; height: 18px; }
.rq-co b { display: block; font-size: var(--nz-fs4); color: var(--navy-800); }
.rq-co span { display: block; font-size: var(--nz-fs1); color: var(--nz-ink3); margin-top: var(--nz-s1); word-break: break-all; }
.rq-amt { display: flex; align-items: baseline; gap: var(--nz-s2); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rq-amt .old { color: var(--nz-ink3); text-decoration: line-through; font-size: var(--nz-fs2); }
.rq-amt .new { font-weight: 800; color: var(--navy-800); font-size: var(--nz-fs4); }
.rq-amt .d { font-size: var(--nz-fs1); font-weight: 800; color: var(--nz-g-ink); }
.rq-amt .d.o { color: var(--nz-o-ink); }
.rq-sub { font-size: var(--nz-fs1); color: var(--nz-ink2); margin-top: var(--nz-s1); }
.rq-why { display: flex; flex-direction: column; gap: var(--nz-s1); font-size: var(--nz-fs1); color: var(--nz-ink2); line-height: var(--nz-lh1); }
.rq-meta { display: flex; gap: var(--nz-s1); align-items: center; flex-wrap: wrap; }
.rq-err { color: var(--nz-r-ink); font-weight: 700; }
.rq-btns { display: flex; flex-direction: column; gap: var(--nz-s1); }
.rq-btns .btn { width: 100%; }
.rq-actions { display: flex; gap: var(--nz-s2); align-items: center; flex-wrap: wrap; margin-top: var(--nz-s3); }
.rq-note { font-size: var(--nz-fs1); color: var(--nz-ink3); }
.rq-ex { border: 1px solid var(--border); border-radius: var(--nz-r10); background: #fff; }
.rq-ex-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--nz-s3); padding: var(--nz-s2) var(--nz-s3); border-top: 1px solid var(--nz-line); font-size: var(--nz-fs2); align-items: start; }
.rq-ex-row:first-child { border-top: 0; }
.rq-ex-row b { color: var(--navy-800); }
.rq-ex-list { display: flex; flex-direction: column; gap: var(--nz-s1); }
.rq-ex-co { font-weight: 700; color: var(--nz-ink); }
.rq-pickrow { display: flex; gap: var(--nz-s2); align-items: center; margin-bottom: var(--nz-s3); font-size: var(--nz-fs2); font-weight: 700; color: var(--navy-800); }
.rq-pickrow select { min-width: 280px; max-width: 100%; height: 34px; border: 1.5px solid var(--border); border-radius: var(--nz-r6); padding: 0 var(--nz-s2); background: #fff; font-size: var(--nz-fs2); color: var(--navy-800); }
.rq-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nz-s3); }
.rq-box { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); background: #fff; min-width: 0; }
.rq-box.new { border-color: var(--teal-500); }
.rq-cap { font-size: var(--nz-fs1); font-weight: 800; color: var(--nz-ink3); margin-bottom: var(--nz-s2); display: flex; justify-content: space-between; gap: var(--nz-s2); flex-wrap: wrap; }
.rq-tbl { width: 100%; border-collapse: collapse; font-size: var(--nz-fs2); font-variant-numeric: tabular-nums; }
.rq-tbl th { text-align: left; font-size: var(--nz-fs1); color: var(--nz-ink3); font-weight: 700; padding: var(--nz-s1) var(--nz-s1); border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.rq-tbl td { padding: var(--nz-s1) var(--nz-s1); border-bottom: 1px solid var(--nz-line); }
.rq-tbl td.r, .rq-tbl th.r { text-align: right; white-space: nowrap; }
.rq-tbl tr.chg td { background: var(--nz-g-soft); }
.rq-tbl tr.dc td { color: var(--nz-g-ink); font-weight: 700; }
.rq-tbl tr.ex td { color: var(--nz-ink3); }
.rq-sum { display: grid; grid-template-columns: auto 1fr; gap: var(--nz-s1) var(--nz-s4); margin-top: var(--nz-s2); font-size: var(--nz-fs2); font-variant-numeric: tabular-nums; }
.rq-sum span:nth-child(odd) { color: var(--nz-ink2); }
.rq-sum span:nth-child(even) { text-align: right; font-weight: 700; color: var(--navy-800); }
.rq-sum .big { font-size: var(--nz-fs4); font-weight: 800; }
.rq-verdict { margin-top: var(--nz-s3); padding: var(--nz-s3); border-radius: var(--nz-r10); background: var(--nz-g-soft); border: 1px solid var(--nz-g-line); color: var(--nz-g-ink); font-size: var(--nz-fs2); line-height: var(--nz-lh2); }
.rq-verdict.o { background: var(--nz-o-soft); border-color: var(--nz-o-line); color: var(--nz-o-ink); }
.rq-verdict b { color: var(--navy-800); }
.rq-mail { border: 1.5px solid var(--border); border-radius: var(--nz-r10); background: #fff; padding: var(--nz-s3) var(--nz-s4); margin-top: var(--nz-s3); font-size: var(--nz-fs2); line-height: var(--nz-lh3); color: var(--nz-ink); }
.rq-mail .h { display: grid; grid-template-columns: 70px 1fr; gap: var(--nz-s1) var(--nz-s2); padding-bottom: var(--nz-s2); border-bottom: 1px solid var(--nz-line); margin-bottom: var(--nz-s2); font-size: var(--nz-fs2); }
.rq-mail .h span:nth-child(odd) { color: var(--nz-ink3); }
.rq-mail .att { display: inline-block; margin-top: var(--nz-s2); font-size: var(--nz-fs1); border: 1px solid var(--border); border-radius: var(--nz-r6); padding: 0 var(--nz-s2); color: var(--navy-800); }
.rq-filter { display: flex; gap: var(--nz-s1); margin: var(--nz-s1) 0 var(--nz-s3); flex-wrap: wrap; }
.rq-fbtn { font-size: var(--nz-fs1); padding: var(--nz-s1) var(--nz-s2); border-radius: var(--nz-r6); border: 1px solid var(--border); color: var(--nz-ink2); background: #fff; cursor: pointer; }
.rq-fbtn.on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); font-weight: 700; }
.rq-scroll { overflow-x: auto; }
.rq-hist td { vertical-align: top; }
.rq-form { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--nz-s3) var(--nz-s4); align-items: start; font-size: var(--nz-fs2); }
.rq-form > label { font-weight: 700; color: var(--navy-800); padding-top: var(--nz-s1); }
.rq-form .v { display: flex; flex-direction: column; gap: var(--nz-s1); color: var(--nz-ink2); min-width: 0; }
.rq-form .v .row { display: flex; gap: var(--nz-s2); align-items: center; flex-wrap: wrap; color: var(--nz-ink); }
.rq-form select, .rq-form input[type="time"], .rq-num, .rq-text { height: 32px; border: 1.5px solid var(--border); border-radius: var(--nz-r6); padding: 0 var(--nz-s2); background: #fff; font-size: var(--nz-fs2); color: var(--navy-800); }
.rq-num { width: 90px; }
.rq-text { width: 100%; }
.rq-ck { display: inline-flex; align-items: center; gap: var(--nz-s1); margin-right: var(--nz-s2); }
.rq-modes { max-width: 640px; }
@media (max-width: 980px) {
  .rq-card { grid-template-columns: 24px minmax(0, 1fr); }
  .rq-card > :nth-child(n+3) { grid-column: 1 / -1; }
  .rq-2, .rq-form { grid-template-columns: 1fr; }
  .rq-ex-row { grid-template-columns: 1fr; }
}
/* [49차] 가격제안서 상세 · 재제안 이력 */
.rq-qh { display: flex; flex-direction: column; gap: var(--nz-s1); font-size: var(--nz-fs1); }
.rq-qh-row { display: flex; flex-wrap: wrap; gap: var(--nz-s1) var(--nz-s2); align-items: center; padding: var(--nz-s1) 0; border-top: 1px solid var(--nz-line); }
.rq-qh-row:first-child { border-top: 0; }
.rq-qh-row b { color: var(--navy-800); font-variant-numeric: tabular-nums; }

/* [50차] 휴지통 (tr-*) - 가격 재제안(rq-)과 같은 토큰 */
.tr-n { font-size: var(--nz-fs1); color: var(--nz-ink3); }
.tr-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr) auto; gap: var(--nz-s3); align-items: center; padding: var(--nz-s3); border: 1.5px solid var(--border); border-radius: var(--nz-r10); background: #fff; margin-bottom: var(--nz-s2); }
.tr-main b { display: block; font-size: var(--nz-fs4); color: var(--navy-800); }
.tr-main span, .tr-meta span { display: block; font-size: var(--nz-fs1); color: var(--nz-ink3); margin-top: var(--nz-s1); }
.tr-btns { display: flex; gap: var(--nz-s2); flex-wrap: wrap; }
@media (max-width: 760px) { .tr-row { grid-template-columns: 1fr; } }

/* ==================================================================
   [51차] 공통 부품 기본값 - 영업타임라인·가격 재제안에서 쓰는 토큰(간격 6 · 글자 5 · 모서리)을 모든 화면의
   기본 부품에 적용. 화면마다 따로 준 더 구체적인 규칙(예: .rq-btns .btn, 타임라인 .btn.small)은 그대로 이김.
   가격제안서·계약서 종이(인쇄물·PDF)는 이 부품을 쓰지 않으므로 영향 없음.
   ================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nz-s1); min-height: 34px; padding: 0 var(--nz-s3);
  border-radius: var(--nz-r6); font-size: var(--nz-fs2); line-height: 1.25; }
.btn.btn-multi { display: inline-block; padding: var(--nz-s2) var(--nz-s3); }
.btn.small { min-height: 30px; padding: 0 var(--nz-s2); font-size: var(--nz-fs1); }
a.btn { text-decoration: none; }
.card { padding: var(--nz-s5); }
.card + .card { margin-top: var(--nz-s4); }
.card h3 { margin: 0 0 var(--nz-s4); font-size: var(--nz-fs4); }
.placeholder-box { padding: var(--nz-s6) var(--nz-s5); font-size: var(--nz-fs2); }
table.data-table { font-size: var(--nz-fs3); }
.data-table th { padding: var(--nz-s2) var(--nz-s3); font-size: var(--nz-fs2); color: var(--nz-ink2); }
.data-table td { padding: var(--nz-s2) var(--nz-s3); border-bottom-color: var(--nz-line); }
.settings-tabs { gap: var(--nz-s1); margin-bottom: var(--nz-s4); flex-wrap: wrap; }
.settings-tab { padding: var(--nz-s2) var(--nz-s4); font-size: var(--nz-fs3); color: var(--nz-ink3); }
.settings-tab.active { color: var(--navy-800); }
.modal-box { padding: var(--nz-s5); border-radius: var(--nz-r10); }
.modal-box h3 { font-size: var(--nz-fs4); margin-bottom: var(--nz-s3); }
.badge { padding: 0 var(--nz-s2); min-height: 22px; line-height: 22px; font-size: var(--nz-fs1); }
.form-row { gap: var(--nz-s3); margin-bottom: var(--nz-s4); }
.field label { font-size: var(--nz-fs2); }
.form-note, .form-subgroup-label { font-size: var(--nz-fs1); }
/* [56차 정정] 평가 선택 상자의 기호(◎◐◇★☆▦)는 뜻을 따로 알아야 하는 기호라 계속 숨김. 범용 아이콘(! ✓ 📎 📞 연필·휴지통)·업종 아이콘은 사용함 */
.icon-choice .ic, .ev-choice .ic { display: none; }
.qp-expand-btn, .tap-expand-btn { width: auto; min-width: 28px; height: 28px; padding: 0 var(--nz-s2); border: 1px solid var(--border);
  border-radius: var(--nz-r6); background: #fff; font-size: var(--nz-fs1); font-weight: 700; color: var(--navy-800); cursor: pointer; }
/* 휴대폰: 표는 옆으로 밀어서 보기(잘려서 안 보이던 문제 - 점검 E5), 카드 여백 줄이기 */
@media (max-width: 760px) {
  table.data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card { padding: var(--nz-s4); }
  .settings-tab { padding: var(--nz-s2) var(--nz-s3); }
}
/* [51차] 대시보드 할 일 영역 - 휴대폰에서는 한 줄로(오른쪽 칸이 화면 밖으로 잘리던 문제) */
@media (max-width: 760px) {
  .dash-todo-split { grid-template-columns: 1fr; }
  .dash-todo-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: var(--nz-s3); }
}

/* ==========================================================================
   [53~54차] 영업 리포트(예전 매출 리포트) - 7개 탭. 박스·막대만, 토큰 색·간격.
   ========================================================================== */
.sr2-filter { margin-bottom: var(--nz-s4); }
.sr2-toolbar { display: flex; flex-wrap: wrap; gap: var(--nz-s2); align-items: center; justify-content: space-between; }
.sr2-presets { display: flex; flex-wrap: wrap; gap: var(--nz-s1); }
.sr-preset-btn.active { background: var(--navy-800); border-color: var(--navy-800); color: var(--nz-bg); }
.sr2-range { display: flex; align-items: center; gap: var(--nz-s2); flex-wrap: wrap; }
.sr2-range span { color: var(--nz-ink3); }
.sr2-users { display: flex; flex-wrap: wrap; gap: var(--nz-s2); align-items: center; margin-top: var(--nz-s3); padding-top: var(--nz-s3); border-top: 1px solid var(--nz-line); }
.sr-user-chip { display: inline-flex; align-items: center; gap: var(--nz-s1); font-size: var(--nz-fs2); font-weight: 600; padding: var(--nz-s1) var(--nz-s2); border: 1px solid var(--border); border-radius: var(--nz-rp); cursor: pointer; user-select: none; background: var(--nz-bg); }
.sr-user-chip input { margin: 0; }
.sr2-exports { display: flex; gap: var(--nz-s2); flex-wrap: wrap; margin-top: var(--nz-s3); }
.sr2-tabs { display: flex; gap: var(--nz-s1); flex-wrap: wrap; border-bottom: 1.5px solid var(--nz-line); margin-bottom: var(--nz-s3); }
.sr2-tab { padding: var(--nz-s2) var(--nz-s3); font-size: var(--nz-fs3); font-weight: 700; color: var(--nz-ink3); background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; cursor: pointer; font-family: inherit; }
.sr2-tab:hover { color: var(--navy-800); }
.sr2-tab.on { color: var(--navy-800); border-bottom-color: var(--nz-g); }
.sr2 { text-align: left; color: var(--nz-ink); font-size: var(--nz-fs3); background: var(--nz-bg); padding: var(--nz-s1) 0; }
.sr2-head { display: flex; flex-wrap: wrap; gap: var(--nz-s1) var(--nz-s3); align-items: baseline; margin-bottom: var(--nz-s2); }
.sr2-head b { font-size: var(--nz-fs4); color: var(--navy-800); }
.sr2-head span { font-size: var(--nz-fs1); color: var(--nz-ink3); }
.sr2-bar { display: flex; flex-wrap: wrap; gap: var(--nz-s2); align-items: center; padding: var(--nz-s3); border: 1.5px solid var(--border); border-radius: var(--nz-r10); background: var(--nz-fill); margin-bottom: var(--nz-s4); }
.sr2-bar > b { color: var(--navy-800); font-size: var(--nz-fs2); }
.sr2-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--nz-s2); border-radius: var(--nz-r6); border: 1px solid var(--border); background: var(--nz-bg); font-size: var(--nz-fs1); font-weight: 700; color: var(--navy-800); white-space: nowrap; font-family: inherit; }
button.sr2-chip { cursor: pointer; }
.sr2-chip.n { background: var(--navy-800); color: var(--nz-bg); border-color: var(--navy-800); }
.sr2-chip.g { background: var(--nz-g-soft); border-color: var(--nz-g-line); color: var(--nz-g-ink); }
.sr2-chip.o { background: var(--nz-o-soft); border-color: var(--nz-o-line); color: var(--nz-o-ink); }
.sr2-sec { font-size: var(--nz-fs3); font-weight: 800; color: var(--navy-800); margin: var(--nz-s5) 0 var(--nz-s2); }
.sr2-note { font-size: var(--nz-fs1); color: var(--nz-ink3); line-height: var(--nz-lh1); }
.sr2 > .sr2-note, .sr2-sec + .sr2-note { margin-top: var(--nz-s2); }
.sr2-empty { padding: var(--nz-s3); font-size: var(--nz-fs2); color: var(--nz-ink3); }
.sr2-mt { margin-top: var(--nz-s3); }
.sr2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--nz-s3); margin-bottom: var(--nz-s2); }
.sr2-kpi { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); background: var(--nz-bg); display: flex; flex-direction: column; gap: 2px; }
.sr2-kpi .k { font-size: var(--nz-fs1); font-weight: 700; color: var(--nz-ink3); }
.sr2-kpi .v { font-size: var(--nz-fs5); font-weight: 800; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.sr2-kpi .s { font-size: var(--nz-fs1); color: var(--nz-ink2); }
.sr2-delta { font-size: var(--nz-fs1); color: var(--nz-ink3); }
.sr2-delta.up { color: var(--nz-g-ink); }
.sr2-delta.down { color: var(--nz-o-ink); }
.sr2-stack { display: flex; height: 30px; border-radius: var(--nz-r6); overflow: hidden; margin-bottom: var(--nz-s3); border: 1px solid var(--nz-line); }
.sr2-seg { display: flex; align-items: center; padding: 0 var(--nz-s2); font-size: var(--nz-fs1); font-weight: 700; white-space: nowrap; overflow: hidden; min-width: 0; }
.sr2-seg.won { background: var(--nz-g); color: var(--nz-bg); }
.sr2-seg.lost { background: var(--nz-o-line); color: var(--nz-o-ink); }
.sr2-seg.open { background: var(--nz-fill); color: var(--nz-ink2); }
.sr2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nz-s3); }
.sr2-box { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); background: var(--nz-bg); min-width: 0; }
.sr2-cap { display: flex; justify-content: space-between; gap: var(--nz-s2); flex-wrap: wrap; font-size: var(--nz-fs2); font-weight: 800; color: var(--navy-800); margin-bottom: var(--nz-s2); }
.sr2-cap span { font-weight: 400; font-size: var(--nz-fs1); color: var(--nz-ink3); }
.sr2-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 54px 56px; gap: var(--nz-s2); align-items: center; padding: var(--nz-s1) 0; font-size: var(--nz-fs2); font-variant-numeric: tabular-nums; }
.sr2-row .lb { color: var(--nz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr2-row .n { text-align: right; color: var(--nz-ink3); font-size: var(--nz-fs1); }
.sr2-row .p { text-align: right; font-weight: 800; color: var(--navy-800); }
.sr2-row.dim, .sr2-qrow.dim, .sr2-tbl tr.dim { opacity: .45; }
.sr2-track { height: 14px; background: var(--nz-fill); border-radius: var(--nz-r6); overflow: hidden; }
.sr2-fill { height: 100%; background: var(--nz-g); border-radius: var(--nz-r6); }
.sr2-fill.o { background: var(--nz-o-line); }
.sr2-fill.b { background: var(--nz-b-soft); border: 1px solid var(--nz-b-ink); box-sizing: border-box; }
.sr2-avg { font-size: var(--nz-fs1); color: var(--nz-ink3); margin-top: var(--nz-s2); line-height: var(--nz-lh1); }
.sr2-avg b { color: var(--nz-g-ink); }
.sr2-legend { display: flex; gap: var(--nz-s3); align-items: center; font-size: var(--nz-fs1); color: var(--nz-ink3); margin-bottom: var(--nz-s2); flex-wrap: wrap; }
.sr2-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: -6px; }
.sr2-legend i.nv, .sr2-mbar.nv { background: var(--navy-800); }
.sr2-legend i.bl, .sr2-mbar.bl { background: var(--nz-b-ink); }
.sr2-legend i.gr, .sr2-mbar.gr { background: var(--nz-g); }
.sr2-mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 84px 78px; gap: var(--nz-s2); align-items: center; padding: var(--nz-s1) 0; font-size: var(--nz-fs1); font-variant-numeric: tabular-nums; }
.sr2-mrow b { color: var(--navy-800); }
.sr2-mrow .r { text-align: right; color: var(--nz-ink2); white-space: nowrap; }
.sr2-mbars { display: flex; flex-direction: column; gap: 2px; }
.sr2-mbar { height: 5px; border-radius: 2px; min-width: 1px; }
.sr2-att { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--nz-s2); padding: var(--nz-s1) 0; border-bottom: 1px solid var(--nz-line); font-size: var(--nz-fs2); }
.sr2-att .link-btn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr2-att > span { color: var(--nz-ink3); font-size: var(--nz-fs1); text-align: right; }
.sr2-att .why { grid-column: 1 / -1; text-align: left; color: var(--nz-o-ink); }
.sr2-funnel { display: flex; flex-direction: column; gap: var(--nz-s1); }
.sr2-fr { display: grid; grid-template-columns: 90px minmax(0, 1fr) 64px 84px 84px; gap: var(--nz-s2); align-items: center; font-size: var(--nz-fs2); font-variant-numeric: tabular-nums; }
.sr2-fr b { color: var(--navy-800); }
.sr2-fr .r { text-align: right; }
.sr2-fhead { color: var(--nz-ink3); font-size: var(--nz-fs1); margin-bottom: var(--nz-s1); }
.sr2-fbar { height: 22px; background: var(--nz-b-soft); border-radius: var(--nz-r6); overflow: hidden; }
.sr2-fbar > div { height: 100%; background: var(--navy-800); border-radius: var(--nz-r6); opacity: .85; }
.sr2-insight { margin-top: var(--nz-s2); padding: var(--nz-s2) var(--nz-s3); background: var(--nz-g-soft); border: 1px solid var(--nz-g-line); border-radius: var(--nz-r6); font-size: var(--nz-fs2); color: var(--nz-g-ink); line-height: var(--nz-lh2); }
.sr2-insight.o { background: var(--nz-o-soft); border-color: var(--nz-o-line); color: var(--nz-o-ink); }
.sr2-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nz-s3); }
.sr2-path { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); background: var(--nz-bg); min-width: 0; }
.sr2-path.best { border-color: var(--nz-g); }
.sr2-path.thin .big { color: var(--nz-ink2); }
.sr2-path .rank { font-size: var(--nz-fs1); font-weight: 800; color: var(--nz-ink3); }
.sr2-path .route { display: flex; flex-wrap: wrap; gap: var(--nz-s1); align-items: center; margin: var(--nz-s2) 0; font-size: var(--nz-fs2); font-weight: 700; color: var(--navy-800); }
.sr2-path .route i { font-style: normal; color: var(--nz-ink3); font-weight: 400; }
.sr2-path .big { font-size: var(--nz-fs5); font-weight: 800; color: var(--nz-g-ink); font-variant-numeric: tabular-nums; }
.sr2-path .sub { font-size: var(--nz-fs1); color: var(--nz-ink2); margin-top: var(--nz-s1); line-height: var(--nz-lh1); }
.sr2-q { border: 1.5px solid var(--border); border-radius: var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); background: var(--nz-bg); margin-bottom: var(--nz-s3); }
.sr2-q .qt { font-size: var(--nz-fs3); font-weight: 800; color: var(--navy-800); line-height: var(--nz-lh3); }
.sr2-q .qs { font-size: var(--nz-fs1); color: var(--nz-ink3); margin: var(--nz-s1) 0 var(--nz-s2); }
.sr2-qrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 44px minmax(0, .8fr) 56px; gap: var(--nz-s2); align-items: center; padding: 3px 0; font-size: var(--nz-fs2); font-variant-numeric: tabular-nums; }
.sr2-qrow .lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr2-qrow .r { text-align: right; }
.sr2-qhead { font-size: var(--nz-fs1); color: var(--nz-ink3); font-weight: 700; }
.sr2-kv { display: flex; justify-content: space-between; gap: var(--nz-s2); padding: var(--nz-s1) 0; border-bottom: 1px solid var(--nz-line); font-size: var(--nz-fs2); }
.sr2-kv span { color: var(--nz-ink2); }
.sr2-kv b { color: var(--navy-800); font-variant-numeric: tabular-nums; }
.sr2-tblwrap { overflow-x: auto; }
.sr2-tbl { width: 100%; border-collapse: collapse; font-size: var(--nz-fs2); font-variant-numeric: tabular-nums; }
.sr2-tbl th { text-align: left; font-size: var(--nz-fs1); color: var(--nz-ink3); padding: var(--nz-s1) var(--nz-s2); border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.sr2-tbl td { padding: var(--nz-s1) var(--nz-s2); border-bottom: 1px solid var(--nz-line); }
.sr2-tbl .r { text-align: right; white-space: nowrap; }
.sr2-tbl tfoot td { font-weight: 800; background: var(--nz-fill); }
.sr2-cellbar { display: grid; grid-template-columns: minmax(60px, 1fr) 48px; gap: var(--nz-s2); align-items: center; min-width: 130px; }
.sr2-cellbar b { text-align: right; color: var(--navy-800); }
@media (max-width: 760px) {
  .sr2-grid, .sr2-paths { grid-template-columns: 1fr; }
  .sr2-toolbar { align-items: stretch; }
  .sr2-range input[type="date"] { flex: 1 1 130px; min-width: 0; }
  .sr2-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 44px 50px; }
  .sr2-qrow { grid-template-columns: minmax(0, 1.2fr) 36px minmax(0, .8fr) 50px; }
  .sr2-qrow .share { display: none; }
  .sr2-fr { grid-template-columns: 64px minmax(0, 1fr) 44px 50px 50px; font-size: var(--nz-fs1); }
  .sr2-mrow { grid-template-columns: 38px minmax(0, 1fr) 70px; }
  .sr2-mrow .r:last-child { display: none; }
  .sr2-kpis { grid-template-columns: 1fr 1fr; }
  .sr2-kpi { padding: var(--nz-s2) var(--nz-s3); }
  .sr2-kpi .v { font-size: var(--nz-fs4); }
}

/* ==========================================================================
   [56차] 업무흐름 진단 결과 - 예전(32차) 발표용 화면 복원. 고객에게 보여주는 화면이라 CRM 공통 토큰 규칙의 예외.
   (범용 아이콘 · 업종 아이콘 사용 가능 / 그라데이션만 단색으로 바꿈)
   ========================================================================== */
.cs-card-icon { font-size: 2.3rem; }
.cs-report { display: grid; grid-template-columns: 1fr 54px 1fr; gap: 10px; align-items: stretch; }
.cs-col { border: 1.5px solid var(--border); border-radius: 16px; padding: 16px 18px 18px; animation: csFadeUp .45s ease backwards; }
.cs-col-now { background: #fafbfc; }
.cs-col-goal { background: #f4fbfa; border-color: var(--teal-500); animation-delay: .12s; }
.cs-lv { font-size: 2.1rem; font-weight: 800; color: var(--navy-800); line-height: 1.1; }
.cs-lv span { font-size: 1rem; font-weight: 700; margin-left: 4px; color: var(--text-600); }
.cs-lv-name { font-size: 1.2rem; font-weight: 800; color: var(--navy-800); }
.cs-lv-desc { font-size: .88rem; color: var(--text-600); line-height: 1.55; margin-top: 6px; }
.cs-lv-short { font-size: .95rem; color: var(--teal-500); font-weight: 700; margin-top: 2px; }
.cs-areas { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cs-area {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  animation: csSlideIn .4s ease backwards;
}
.cs-area-name { font-size: .92rem; font-weight: 700; color: var(--navy-800); }
.cs-area-grade { font-size: .84rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.cs-low { background: #fff1f0; color: #c0392b; }
.cs-mid { background: #fff8e6; color: #b7791f; }
.cs-high { background: #eefaf5; color: #17a673; }
.cs-mod-cap { margin-top: 12px; font-size: .84rem; font-weight: 800; color: var(--text-400); }
.cs-mods { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cs-mod {
  background: #fff; border: 1.5px solid var(--teal-500); color: var(--navy-800);
  font-size: .86rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  animation: csPop .38s cubic-bezier(.2,.9,.3,1.3) backwards;
}
@media (max-width: 900px) {
  .cs-report { grid-template-columns: 1fr; }
}
.cs-lv-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.cs-caret { font-style: normal; font-size: .8rem; color: var(--teal-500); transition: transform .2s ease; display: inline-block; }
.cs-lv-btn.cs-open .cs-caret { transform: rotate(180deg); }
.cs-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: .86rem; color: var(--text-600); line-height: 1.6;
  transition: max-height .32s ease, opacity .28s ease, margin .28s ease;
}
.cs-detail.cs-open { max-height: 240px; opacity: 1; margin-top: 8px; }
.cs-road { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.cs-road-step {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--teal-500);
  border-radius: 8px; padding: 8px 11px;
  animation: csSlideIn .4s ease backwards;
}
.cs-road-when { font-size: .74rem; font-weight: 800; color: var(--teal-500); }
.cs-road-lv { font-size: .92rem; font-weight: 800; color: var(--navy-800); }
.cs-road-note { font-size: .8rem; color: var(--text-600); line-height: 1.5; }
.cs-panel-report .cs-report { gap: 8px; }
.cs-panel-report .cs-col { padding: 14px 16px 16px; }
.cs-panel-report .cs-lv { font-size: 1.9rem; }
.cs-panel-report .cs-area { padding: 6px 10px; }
.cs-panel-report .cs-area-name { font-size: .88rem; }
.cs-panel-report .cs-area-grade { font-size: .8rem; }
.cs-panel-report .cs-mods { gap: 6px; }
.cs-panel-report .cs-mod { font-size: .82rem; padding: 5px 10px; }
.cs-road-step.cs-road-tail { border-left-color: var(--text-400); background: #fafbfc; }
.cs-vlow { background: #fdecec; color: #b03030; }
.cs-vhigh { background: #e6f7f0; color: #0f8a5f; }
.cs-panel-report .cs-report { grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-nav-btn {
  flex: 0 0 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid var(--teal-500); background: #fff; color: var(--teal-500);
  font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer;
  transition: transform .14s ease, background .16s ease;
}
.cs-nav-btn:hover:not(:disabled) { background: var(--teal-500); color: #fff; }
.cs-nav-btn:active:not(:disabled) { transform: scale(.9); }
.cs-nav-btn:disabled { opacity: .3; cursor: default; border-color: var(--border); color: var(--text-400); }
.cs-probs2 { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cs-prob2 {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fff5f5; border: 1px solid #f5c6c6; border-radius: 9px;
  padding: 8px 11px; font-size: .85rem; color: #8a3a3a; line-height: 1.5;
  animation: csSlideIn .45s ease backwards;
}
.cs-prob2-mark {
  flex: 0 0 17px; height: 17px; border-radius: 50%; background: #d9534f; color: #fff;
  font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cs-gains { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.cs-gain {
  display: flex; align-items: flex-start; gap: 9px;
  background: #f2fbf7; border: 1px solid #b9e6d2; border-radius: 10px; padding: 9px 12px;
  animation: csPop .5s cubic-bezier(.2,.9,.3,1.35) backwards;
}
.cs-gain-check {
  flex: 0 0 19px; height: 19px; border-radius: 50%; background: #17a673; color: #fff;
  font-size: .74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cs-gain-body { font-size: .84rem; color: var(--text-600); line-height: 1.5; }
.cs-gain-body b { color: var(--navy-800); font-size: .89rem; }
.cs-points-cap {
  margin-top: 16px; text-align: center; font-size: .95rem; font-weight: 800; color: var(--navy-800);
  animation: csFadeUp .5s ease backwards; animation-delay: .2s;
}
.cs-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.cs-point {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 13px; background: #fff;
  animation: csPop .45s cubic-bezier(.2,.9,.3,1.3) backwards;
  transition: border-color .16s ease, transform .16s ease;
}
.cs-point:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.cs-point-icon {
  flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--blue-tint-soft);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.cs-point-body { font-size: .83rem; color: var(--text-600); line-height: 1.5; }
.cs-point-body b { display: block; color: var(--navy-800); font-size: .89rem; margin-bottom: 2px; }
.cs-prob2 {
  animation: csSlam .82s cubic-bezier(.16,.9,.3,1.02) backwards,
             csSlamGlowRed .62s ease backwards;
}
.cs-gain {
  animation: csSlam .68s cubic-bezier(.16,.9,.3,1.02) backwards,
             csSlamGlow .68s ease backwards;
}
.cs-point {
  animation: csSlam .74s cubic-bezier(.16,.9,.3,1.02) backwards,
             csSlamGlow .74s ease backwards;
}
.cs-prob2 { animation: csSlamSide .62s cubic-bezier(.2,.9,.25,1.2) backwards; }
.cs-gain { animation: csSlamIn .68s cubic-bezier(.2,.9,.25,1.2) backwards; }
.cs-point { animation: csSlamIn .66s cubic-bezier(.2,.9,.25,1.2) backwards; }
.cs-prob2 {
  animation: csSlam .82s cubic-bezier(.22,1.05,.36,1) backwards,
             csSlamShadow .82s ease backwards;
}
.cs-gain {
  animation: csSlam .86s cubic-bezier(.22,1.05,.36,1) backwards,
             csSlamShadow .86s ease backwards;
}
.cs-point {
  animation: csSlam .8s cubic-bezier(.22,1.05,.36,1) backwards,
             csSlamShadow .8s ease backwards;
}
.cs-gain-check, .cs-prob2-mark { animation: csPunch .9s cubic-bezier(.2,.9,.3,1.4) backwards; animation-delay: inherit; }
.cs-radar-wrap { margin-top: 14px; }
.cs-radar { display: block; margin: 2px auto 0; width: 100%; max-width: 290px; height: auto; }
.cs-radar-legend {
  display: flex; justify-content: center; gap: 16px; margin-top: 2px;
  font-size: .78rem; color: var(--text-600);
}
.cs-radar-legend span { display: flex; align-items: center; gap: 5px; }
.cs-radar-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.cs-lg-goal { background: #17a673; }
.cs-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; margin-top: 12px; }
.cs-note-card {
  display: flex; gap: 10px; align-items: flex-start;
  /* 팁은 전부 같은 노란색으로 통일(예전에 두 개만 노랗고 나머지가 흰색이라 들쭉날쭉했음) */
  border: 1.5px solid #e8a33d; border-radius: 12px; padding: 11px 13px; background: #fffaf2;
  animation: csSlam .88s cubic-bezier(.22,1.05,.36,1) backwards;
}
.cs-note-icon {
  flex: 0 0 32px; height: 32px; border-radius: 9px; background: #fdeccd;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.cs-note-body { font-size: .82rem; color: var(--text-600); line-height: 1.55; }
.cs-note-body b { display: block; color: var(--navy-800); font-size: .89rem; margin-bottom: 2px; }
.cs-radar-now-only .cs-radar { max-width: 240px; }
.cs-cautions { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.cs-caution {
  display: flex; align-items: flex-start; gap: 9px;
  background: #fffaf2; border: 1.5px solid #e8c07d; border-radius: 10px; padding: 9px 12px;
  animation: csSlam .84s cubic-bezier(.22,1.05,.36,1) backwards;
}
.cs-caution-mark {
  flex: 0 0 19px; height: 19px; border-radius: 50%; background: #e8a33d; color: #fff;
  font-size: .76rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px;
  animation: csPunch .9s cubic-bezier(.2,.9,.3,1.4) backwards; animation-delay: inherit;
}
.cs-caution-body { font-size: .83rem; color: #7a5518; line-height: 1.5; }
.cs-caution-body b { display: block; color: #8a5a10; font-size: .88rem; margin-bottom: 2px; }
.cs-col-delayed { animation-delay: .75s !important; }
.cs-radar { overflow: visible; }
.cs-radar text { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.cs-radar-wrap { padding: 0 4px; }
.cs-lv-row { display: flex; align-items: center; gap: 10px; }
.cs-col-goal .cs-lv-cap { color: var(--teal-500); }
.cs-goal-head { display: flex; align-items: center; gap: 6px; margin: 2px 0 2px; }
.cs-lv-btn-goal { flex: 1; min-width: 0; }
.cs-goal-head .cs-nav-btn {
  flex: 0 0 52px; height: 52px; border-radius: 14px;
  border: 2px solid var(--teal-500); background: var(--teal-500); color: #fff;
  font-size: 2rem; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 12px rgba(20,120,110,.28);
}
.cs-goal-head .cs-nav-btn:first-child { margin-left: -22px; }
.cs-goal-head .cs-nav-btn:last-child { margin-right: -22px; }
.cs-goal-head .cs-nav-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cs-goal-head .cs-nav-btn:active:not(:disabled) { transform: scale(.92); }
.cs-goal-head .cs-nav-btn:disabled {
  background: #fff; color: var(--border); border-color: var(--border); box-shadow: none; opacity: .5;
}
.cs-col-cap2 {
  text-align: center; font-size: .98rem; font-weight: 800; color: var(--navy-800);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.cs-col-goal .cs-col-cap2 { color: var(--teal-500); }
.cs-lv-row { justify-content: center; }
.cs-lv-btn { align-items: center; width: 100%; }
.cs-lv-name { text-align: center; }
.cs-goal-head .cs-nav-btn {
  display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0;
}
.cs-nav-ico { font-size: 1.3rem; line-height: 1; display: block; }
.cs-card-text .cs-card-icon { font-size: 1.7rem; line-height: 1.1; }
.cs-prob2-ev { display: block; margin-top: 2px; font-size: .74rem; color: #a86060; font-weight: 400; }
.cs-report-meta { margin-top: 4px; font-size: .8rem; color: var(--text-400); }

/* [60차] 휴대폰 화면 - 오른쪽 위 + (소개건 붙여넣기 등록) */
.nzm-bar-r{justify-self:end; display:inline-flex; align-items:center; gap:var(--nz-s2);}
.nzm-plus{width:36px; height:36px; border-radius:var(--nz-rp); border:0; background:var(--nz-g); color:#fff; font-size:22px; font-weight:700; line-height:1; cursor:pointer;}
.nzm-ref-text{width:100%; box-sizing:border-box; padding:var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-r10); font:inherit; font-size:var(--nz-fs3); line-height:var(--nz-lh3); background:var(--nz-bg); resize:vertical;}
.nzm-ref-btns{display:flex; gap:var(--nz-s2); margin-top:var(--nz-s2);}
.nzm-ref-btns .btn{flex:1; height:40px;}
.nzm-ref-card{background:var(--nz-bg); border:1px solid var(--nz-line); border-radius:var(--nz-r10); padding:var(--nz-s3);}
.nzm-ref-on{display:flex; align-items:center; gap:var(--nz-s2); font-weight:700; font-size:var(--nz-fs3); margin-bottom:var(--nz-s2);}
.nzm-ref-grid{display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--nz-s2); align-items:center; font-size:var(--nz-fs2); color:var(--nz-ink2);}
.nzm-ref-grid input, .nzm-ref-grid select{width:100%; box-sizing:border-box; height:38px; padding:0 var(--nz-s2); border:1px solid var(--nz-line); border-radius:var(--nz-r6); font:inherit; font-size:var(--nz-fs3); color:var(--nz-ink); background:var(--nz-bg);}
.nzm-ref-save{width:100%; height:44px; margin-top:var(--nz-s2);}

/* ==========================================================================
   [61차] 메일발송 관리 > 메일 문구 (항목별 제목·본문) + 각 발송 탭의 "메일 문구 열기" 상자 + 보내기 창 본문
   ========================================================================== */
.mt-grid{display:grid; grid-template-columns:200px minmax(0, 1fr) minmax(0, 1fr); gap: var(--nz-s5); align-items:start;}
@media (max-width:1280px){ .mt-grid{grid-template-columns:200px minmax(0, 1fr);} .mt-prev-wrap{grid-column:1 / -1;} }
@media (max-width:760px){ .mt-grid{grid-template-columns:minmax(0, 1fr);} }
.mt-list{display:flex; flex-direction:column; gap:2px; border:1px solid var(--nz-line); border-radius:var(--nz-r10); padding: var(--nz-s2); background:var(--nz-fill);}
.mt-group{font-size:var(--nz-fs1); line-height:var(--nz-lh1); font-weight:700; color:var(--nz-ink3); letter-spacing:.4px; padding: var(--nz-s3) var(--nz-s2) var(--nz-s1);}
.mt-group:first-child{padding-top: var(--nz-s1);}
.mt-item{display:flex; align-items:center; justify-content:space-between; gap: var(--nz-s2); width:100%; text-align:left; border:1px solid transparent; background:transparent; border-radius:var(--nz-r6); padding: var(--nz-s2) var(--nz-s2); font:inherit; font-size:var(--nz-fs3); color:var(--nz-ink); cursor:pointer;}
.mt-item:hover{background:#fff;}
.mt-item.on{background:#fff; border-color:var(--nz-g-line); color:var(--nz-g-ink); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.mt-item em{font-style:normal; font-size:var(--nz-fs1); font-weight:700; color:var(--nz-o-ink); background:var(--nz-o-soft); border:1px solid var(--nz-o-line); border-radius:var(--nz-rp); padding:0 var(--nz-s2); flex:0 0 auto;}
.mt-edit-head{display:flex; flex-direction:column; gap:2px; margin-bottom: var(--nz-s3);}
.mt-edit-head b{font-size:var(--nz-fs4); line-height:var(--nz-lh4); color:var(--nz-ink);}
.mt-edit-head span{font-size:var(--nz-fs2); color:var(--nz-ink3);}
.mt-field{display:flex; flex-direction:column; gap: var(--nz-s1); margin-bottom: var(--nz-s3);}
.mt-field > span{font-size:var(--nz-fs2); font-weight:700; color:var(--nz-ink2);}
.mt-field input, .mt-field textarea{width:100%; box-sizing:border-box; border:1px solid var(--nz-line); border-radius:var(--nz-r6); font:inherit; font-size:var(--nz-fs3); line-height:var(--nz-lh3); color:var(--nz-ink); background:#fff; padding: var(--nz-s2) var(--nz-s3);}
.mt-field input{height:40px;}
.mt-field textarea{resize:vertical; min-height:240px;}
.mt-field input:focus, .mt-field textarea:focus{outline:none; border-color:var(--nz-g); box-shadow:0 0 0 3px var(--nz-g-ring);}
.mt-field input[readonly], .mt-field textarea[readonly]{background:var(--nz-fill); color:var(--nz-ink2);}
.mt-vars{display:flex; flex-wrap:wrap; gap: var(--nz-s1); align-items:center;}
.mt-vars-lab{font-size:var(--nz-fs1); color:var(--nz-ink3); margin-right: var(--nz-s1);}
.mt-var{border:1px solid var(--nz-g-line); background:var(--nz-g-soft); color:var(--nz-g-ink); border-radius:var(--nz-rp); padding:2px var(--nz-s2); font:inherit; font-size:var(--nz-fs2); font-weight:600; cursor:pointer;}
.mt-var:hover:not([disabled]){background:#fff;}
.mt-var[disabled]{cursor:default;}
.mt-vars-desc{display:flex; flex-wrap:wrap; gap: 2px var(--nz-s3); margin-top: var(--nz-s2); font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3);}
.mt-vars-desc b{color:var(--nz-ink2); font-weight:600;}
.mt-prev{border:1px solid var(--nz-line); border-radius:var(--nz-r10); background:#fff; overflow:hidden;}
.mt-prev-head{display:flex; gap: var(--nz-s2); align-items:baseline; padding: var(--nz-s3) var(--nz-s4); border-bottom:1px solid var(--nz-line); background:var(--nz-fill);}
.mt-prev-head span{flex:0 0 auto; font-size:var(--nz-fs1); font-weight:700; color:var(--nz-ink3);}
.mt-prev-head b{font-size:var(--nz-fs3); color:var(--nz-ink); word-break:keep-all;}
.mt-prev-body{padding: var(--nz-s4) var(--nz-s4) var(--nz-s5); overflow-x:auto;}
.mt-link{display:flex; align-items:center; justify-content:space-between; gap: var(--nz-s3); flex-wrap:wrap; border:1px solid var(--nz-g-line); background:var(--nz-g-soft); border-radius:var(--nz-r10); padding: var(--nz-s3) var(--nz-s4); margin-top: var(--nz-s3);}
.mt-link > div{display:flex; flex-direction:column; gap:2px; font-size:var(--nz-fs3); color:var(--nz-ink);}
.mt-link > div span{font-size:var(--nz-fs2); color:var(--nz-ink2);}
.mt-modal-body{width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:var(--nz-r10); padding: var(--nz-s2) var(--nz-s3); font:inherit; font-size:var(--nz-fs3); line-height:var(--nz-lh3); resize:vertical; min-height:180px;}
.mt-modal-note{font-size:var(--nz-fs1); color:var(--text-400); margin-top: var(--nz-s1);}

/* [61차-2] 메일 문구 - 본문 이미지·첨부파일 상자 / 발송내역 항목 버튼 */
.mt-sub{margin-top: var(--nz-s4); border-top:1px solid var(--nz-line); padding-top: var(--nz-s3); display:flex; flex-direction:column; gap: var(--nz-s2);}
.mt-sub-head{display:flex; flex-direction:column; gap:2px;}
.mt-sub-head b{font-size:var(--nz-fs3); color:var(--nz-ink);}
.mt-sub-head span{font-size:var(--nz-fs1); line-height:var(--nz-lh1); color:var(--nz-ink3);}
.mt-sub-empty{font-size:var(--nz-fs2); color:var(--nz-ink3); padding: var(--nz-s2) var(--nz-s3); border:1px dashed var(--nz-line); border-radius:var(--nz-r6);}
.mt-file{font-size:var(--nz-fs2); color:var(--nz-ink); padding: var(--nz-s2) var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-r6); background:var(--nz-fill); word-break:break-all;}
.mt-img-row{display:flex; gap: var(--nz-s3); align-items:flex-start; padding: var(--nz-s2); border:1px solid var(--nz-line); border-radius:var(--nz-r6); background:var(--nz-fill);}
.mt-img-thumb{width:72px; max-height:120px; object-fit:cover; object-position:top; border-radius:4px; border:1px solid var(--nz-line); background:#fff; flex:0 0 auto;}
.mt-img-meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.mt-img-meta b{font-size:var(--nz-fs2); color:var(--nz-ink); word-break:break-all;}
.mt-img-meta span{font-size:var(--nz-fs1); color:var(--nz-ink3);}
.mh-chips{display:flex; flex-wrap:wrap; gap: var(--nz-s2); margin-bottom: var(--nz-s3);}
.mh-chip{display:inline-flex; align-items:center; gap: var(--nz-s2); height:34px; padding:0 var(--nz-s3); border:1px solid var(--nz-line); border-radius:var(--nz-rp); background:#fff; font:inherit; font-size:var(--nz-fs2); font-weight:600; color:var(--nz-ink2); cursor:pointer;}
.mh-chip:hover{border-color:var(--nz-g-line);}
.mh-chip.on{background:var(--nz-ink); border-color:var(--nz-ink); color:#fff;}
.mh-chip em{font-style:normal; font-size:var(--nz-fs1); font-weight:700; min-width:18px; text-align:center; padding:0 6px; border-radius:var(--nz-rp); background:var(--nz-fill); color:var(--nz-ink2); font-variant-numeric:tabular-nums;}
.mh-chip.on em{background:rgba(255,255,255,.18); color:#fff;}
.mh-chip em.bad{background:var(--nz-r-soft); color:var(--nz-r-ink);}
.mh-filter{display:flex; gap: var(--nz-s2); align-items:center; flex-wrap:wrap; margin-bottom: var(--nz-s4);}
.mh-filter input{height:38px; padding:0 var(--nz-s2); border:1.5px solid var(--border); border-radius:var(--nz-r6); font:inherit; font-size:var(--nz-fs3); box-sizing:border-box;}
.mh-filter input[type="text"]{flex:1; min-width:160px;}
.mt-prev-body img{max-width:100%; height:auto;}

/* [62차] 가격제안서·계약서 메일 발송 기록(다시 보내기 전 확인) */
.dmh-head{display:flex; align-items:center; justify-content:space-between; gap: var(--nz-s3); padding: var(--nz-s3) var(--nz-s4); border:1px solid var(--nz-line); border-radius:var(--nz-r10); background:var(--nz-fill); margin: var(--nz-s2) 0 var(--nz-s3);}
.dmh-co{display:flex; flex-direction:column; gap:2px; min-width:0;}
.dmh-co b{font-size:var(--nz-fs4); color:var(--nz-ink); word-break:keep-all;}
.dmh-co span{font-size:var(--nz-fs1); color:var(--nz-ink3);}
.dmh-count{display:flex; align-items:baseline; gap:2px; flex:0 0 auto;}
.dmh-count b{font-size:28px; line-height:1; font-weight:800; color:var(--nz-g-ink); font-variant-numeric:tabular-nums;}
.dmh-count span{font-size:var(--nz-fs2); color:var(--nz-ink2); font-weight:600;}
.dmh-fail{font-size:var(--nz-fs2); color:var(--nz-r-ink); background:var(--nz-r-soft); border-radius:var(--nz-r6); padding: var(--nz-s2) var(--nz-s3); margin-bottom: var(--nz-s3);}
.dmh-list{display:flex; flex-direction:column; border:1px solid var(--nz-line); border-radius:var(--nz-r10); max-height:240px; overflow:auto;}
.dmh-row{display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap: var(--nz-s2); align-items:center; padding: var(--nz-s2) var(--nz-s3); border-top:1px solid var(--nz-line); font-size:var(--nz-fs2);}
.dmh-row:first-child{border-top:0;}
.dmh-when{color:var(--nz-ink3); font-variant-numeric:tabular-nums;}
.dmh-to{color:var(--nz-ink); word-break:break-all;}
.dmh-to em{font-style:normal; font-size:var(--nz-fs1); color:var(--nz-ink3); margin-left:4px;}
.dmh-st{font-weight:700; color:var(--nz-g-ink); white-space:nowrap;}
.dmh-row.bad .dmh-st{color:var(--nz-r-ink);}
.dmh-row.bad{background:#fffafa;}
.dmh-empty{padding: var(--nz-s3); font-size:var(--nz-fs2); color:var(--nz-ink3);}
.dmh-note{font-size:var(--nz-fs1); color:var(--nz-ink3); margin: var(--nz-s2) 0 var(--nz-s3);}

/* ==========================================================================
   [62차, 사장님 선택 "A안 색 + 네이비 글씨"] 가격제안서·계약서 목록 카드(상세정보 박스 포함) - 흰색 바탕 + CRM 초록 포인트, 글씨는 네이비 계열.
   베이지·갈색 바탕, 전부 검정 굵은 글씨, 고정폭 글꼴(날짜·금액)을 없앰. 이 두 목록에만 적용(신규상담 목록 등은 그대로).
   ========================================================================== */
/* [71차, 사장님 요청] 신규상담 목록(#ncvListBody)도 같은 디자인 */
#quoteListBody.tlc-box-wrap, #tlcListBody.tlc-box-wrap , #ncvListBody.tlc-box-wrap { --tlc-surface:#FFFFFF;--tlc-surface-2:#F6F7F5;--tlc-tile:#FFFFFF;--tlc-border:#E3E6E2;--tlc-border-strong:#CFD5CC; --tlc-ink-900:#1D2939;--tlc-ink-700:#1D2939;--tlc-ink-500:#475467;--tlc-ink-400:#667085;--tlc-accent:#3F6F1E;--tlc-accent-ink:#3F6F1E;--tlc-accent-soft:#EEF6E6; --tlc-shadow-sm:0 1px 2px rgba(20,24,28,.05);--tlc-mono:inherit; }
#quoteListBody .tlc-card-tab, #tlcListBody .tlc-card-tab , #ncvListBody .tlc-card-tab { font-size:15px;font-weight:600;letter-spacing:-.2px;padding:7px 18px;top:-20px }
#quoteListBody .tlc-card-tab b, #tlcListBody .tlc-card-tab b , #ncvListBody .tlc-card-tab b { font-weight:700 }
#quoteListBody .tlc-id-pill, #tlcListBody .tlc-id-pill , #ncvListBody .tlc-id-pill { font-size:14px;font-weight:700;letter-spacing:-.2px;background:#F6F7F5 }
#quoteListBody .tlc-id-pill.type, #tlcListBody .tlc-id-pill.type , #ncvListBody .tlc-id-pill.type { font-size:13px;font-weight:500;color:#475467 }
#quoteListBody .tlc-abtn, #tlcListBody .tlc-abtn , #ncvListBody .tlc-abtn { font-size:12.5px;font-weight:600;background:#fff }
#quoteListBody .tlc-abtn .tlc-sub, #tlcListBody .tlc-abtn .tlc-sub , #ncvListBody .tlc-abtn .tlc-sub { font-size:11px;font-weight:500;color:#667085 }
#quoteListBody .tlc-abtn.tlc-abtn-done, #tlcListBody .tlc-abtn.tlc-abtn-done , #ncvListBody .tlc-abtn.tlc-abtn-done { background:#EEF6E6;border-color:#CFE5BC }
#quoteListBody .tlc-dbox, #tlcListBody .tlc-dbox , #ncvListBody .tlc-dbox { background:#fff;border-color:#E3E6E2;border-radius:12px;padding:18px 20px }
#quoteListBody .tlc-dbox h4, #tlcListBody .tlc-dbox h4 , #ncvListBody .tlc-dbox h4 { font-size:14px;font-weight:700;letter-spacing:-.2px;text-transform:none;color:#1D2939;margin-bottom:14px;display:flex;align-items:center;gap:8px }
#quoteListBody .tlc-dbox h4::before, #tlcListBody .tlc-dbox h4::before , #ncvListBody .tlc-dbox h4::before { content:"";width:6px;height:6px;border-radius:50%;background:#8FC862;flex:0 0 auto }
#quoteListBody .tlc-field, #tlcListBody .tlc-field , #ncvListBody .tlc-field { gap:5px;margin-bottom:12px }
#quoteListBody .tlc-field label, #tlcListBody .tlc-field label , #ncvListBody .tlc-field label { font-size:12.5px;font-weight:500;color:#475467 }
#quoteListBody .tlc-field input, #tlcListBody .tlc-field input, #ncvListBody .tlc-field input, #quoteListBody .tlc-field select, #tlcListBody .tlc-field select , #ncvListBody .tlc-field select { font-size:14.5px;font-weight:500;color:#1D2939;background:#fff;border-color:#DADFD8;border-radius:8px;padding:9px 12px;height:42px }
#quoteListBody .tlc-field input::placeholder, #tlcListBody .tlc-field input::placeholder , #ncvListBody .tlc-field input::placeholder { color:#A9AFB7;font-weight:400 }
#quoteListBody .tlc-field input:focus, #tlcListBody .tlc-field input:focus, #ncvListBody .tlc-field input:focus, #quoteListBody .tlc-field select:focus, #tlcListBody .tlc-field select:focus , #ncvListBody .tlc-field select:focus { outline:3px solid rgba(143,200,98,.35);border-color:#8FC862 }
#quoteListBody .tlc-product-row, #tlcListBody .tlc-product-row , #ncvListBody .tlc-product-row { font-size:14.5px;font-weight:500;padding:10px 0;border-bottom:1px solid #EEF0EC }
#quoteListBody .tlc-product-row .amt, #tlcListBody .tlc-product-row .amt , #ncvListBody .tlc-product-row .amt { font-family:inherit;font-weight:700;font-size:15px;color:#1D2939 }
#quoteListBody .tlc-note, #tlcListBody .tlc-note , #ncvListBody .tlc-note { font-size:12.5px;font-weight:400;color:#667085 }
#quoteListBody .tlc-save-all-btn, #tlcListBody .tlc-save-all-btn , #ncvListBody .tlc-save-all-btn { background:#2E3136;font-size:14px;font-weight:700;padding:10px 24px }
#quoteListBody .tlc-toggle-btn, #tlcListBody .tlc-toggle-btn , #ncvListBody .tlc-toggle-btn { font-size:13.5px;font-weight:600 }

/* [62차, 사장님 요청] 영업타임라인 선택 화면 목록 - 구분(진행중·계약완료·종결·전체) · 테두리 없는 박스 · 목록이 없어도 길게 */
.stl-board{min-height:62vh; margin-bottom: var(--nz-s5);}
.stl-board[hidden]{display:none;}
.stl-bd-head{display:flex; align-items:center; justify-content:space-between; gap: var(--nz-s3); flex-wrap:wrap; margin-bottom: var(--nz-s4);}
.stl-bd-chips{display:flex; gap: var(--nz-s2); flex-wrap:wrap;}
.stl-bd-chip{display:inline-flex; align-items:center; gap: var(--nz-s2); height:36px; padding:0 var(--nz-s4); border:0; border-radius:var(--nz-rp); background:var(--nz-fill); color:#475467; font:inherit; font-size:var(--nz-fs3); font-weight:600; cursor:pointer;}
.stl-bd-chip em{font-style:normal; font-size:var(--nz-fs1); font-weight:700; min-width:20px; padding:1px 7px; border-radius:var(--nz-rp); background:#fff; color:#475467; font-variant-numeric:tabular-nums;}
.stl-bd-chip:hover{background:#ECEFEA;}
.stl-bd-chip.on{background:#1D2939; color:#fff;}
.stl-bd-chip.on em{background:rgba(255,255,255,.18); color:#fff;}
.stl-bd-hint{font-size:var(--nz-fs2); color:#667085;}
.stl-bd-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap: var(--nz-s3);}
.stl-bd-empty{grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--nz-s2); min-height:40vh; border-radius:14px; background:var(--nz-fill); color:#475467; font-size:var(--nz-fs4); font-weight:600;}
.stl-bd-empty span{font-size:var(--nz-fs2); font-weight:400; color:#667085;}
.stl-bx{display:flex; flex-direction:column; align-items:stretch; gap: 6px; text-align:left; border:0; border-radius:14px; background:var(--nz-fill); padding: var(--nz-s4) var(--nz-s4) var(--nz-s3); font:inherit; color:#1D2939; cursor:pointer; transition:background .15s, box-shadow .15s, transform .15s; min-height:132px;}
.stl-bx:hover{background:#EEF1EC; box-shadow:0 4px 14px rgba(16,24,40,.08); transform:translateY(-1px);}
.stl-bx:focus-visible{outline:3px solid var(--nz-g-ring);}
.stl-bx-top{display:flex; align-items:center; justify-content:space-between; gap: var(--nz-s2);}
.stl-bx-stage{font-size:var(--nz-fs1); font-weight:700; color:var(--nz-g-ink); background:var(--nz-g-soft); border-radius:var(--nz-rp); padding:3px 10px;}
.stl-bx-closed .stl-bx-stage{color:#667085; background:#E9ECEF;}
.stl-bx-done .stl-bx-stage{color:#fff; background:var(--nz-g-ink);}
.stl-bx-when{display:inline-flex; align-items:baseline; gap:6px; font-size:var(--nz-fs2); color:#475467; font-variant-numeric:tabular-nums; white-space:nowrap;}
.stl-bx-when b{font-size:var(--nz-fs1); font-weight:800; color:var(--nz-b-ink);}
.stl-bx-when.today b{color:#fff; background:var(--nz-b-ink); border-radius:var(--nz-rp); padding:1px 8px;}
.stl-bx-when.past b{color:var(--nz-o-ink);}
.stl-bx-when.none{color:#98A2B3;}
.stl-bx-name{font-size:17px; font-weight:700; letter-spacing:-.3px; line-height:1.35; margin-top:4px; word-break:keep-all;}
.stl-bx-who{font-size:var(--nz-fs2); color:#475467;}
.stl-bx-foot{display:flex; justify-content:space-between; align-items:center; gap: var(--nz-s2); margin-top:auto; padding-top: var(--nz-s2); font-size:var(--nz-fs1); color:#667085;}
.stl-bx-docs{display:flex; gap:4px;}
.stl-bx-docs i{font-style:normal; font-weight:600; color:#1D2939; background:#fff; border-radius:6px; padding:2px 7px;}

/* [64차] 계약서 빈칸 크게 - 고객이 출력해서 손으로 쓰는 칸(값이 없으면 "-" 감추고 줄 높이 키움) */
.tlc-info-table tr.nz-row-blank > th, .tlc-info-table tr.nz-row-blank > td { height:30px; }
.tlc-info-table td.nz-cell-blank { color:transparent !important; }
.cust-table tr.nz-row-blank > td { height:30px; }

/* [64차] 세무/회계 가격제안서 + 계약서 함께 작성 */
.qc-opt{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:#F6F7F5; margin-bottom:8px; cursor:pointer; color:#1D2939;}
.qc-opt b{display:block; font-size:14px;}
.qc-opt small{display:block; font-size:12px; color:#667085; margin-top:1px;}
.qc-opt.on{background:#EEF6E6;}
.qc-opt.done{background:#F6F7F5; opacity:.6; cursor:default;}
.qc-ck{width:18px; height:18px; border-radius:5px; border:2px solid #98A2B3; flex:0 0 auto; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; line-height:1;}
.qc-opt.on .qc-ck, .qc-opt.done .qc-ck{background:#3F6F1E; border-color:#3F6F1E;}
.qc-attach-area{display:flex; flex-direction:column; gap:28px; margin-top:28px;}
.qc-attach-area:empty{display:none;}
.qc-attach-head{display:flex; align-items:center; justify-content:space-between; gap:12px; background:#1D2939; color:#fff; border-radius:12px 12px 0 0; padding:12px 18px; max-width:794px; box-sizing:border-box;}
.qc-attach-head b{font-size:15px; margin-right:8px;}
.qc-attach-head em{font-style:normal; font-size:12px; font-weight:700; background:rgba(255,255,255,.16); border-radius:999px; padding:2px 9px; margin-right:8px;}
.qc-attach-head em.qc-saved{background:#8FC862; color:#1D2939;}
.qc-attach-head span{display:block; font-size:12.5px; opacity:.78; margin-top:3px;}
.qc-attach-del{border:0; border-radius:8px; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-size:12.5px; font-weight:600; padding:6px 12px; cursor:pointer; flex:0 0 auto;}
.qc-attach-del:hover{background:rgba(255,255,255,.24);}
.qc-attach-body .tlc-stage{margin-top:0;}
.qc-savebar{position:sticky; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-top:24px; background:rgba(255,255,255,.97); border-radius:12px 12px 0 0; box-shadow:0 -6px 18px rgba(16,24,40,.08);}
.qc-savebar[hidden]{display:none;}
.qc-savebar-state{display:flex; gap:6px; flex-wrap:wrap;}
.qc-savebar-state em{font-style:normal; font-size:12px; font-weight:700; color:#475467; background:#F2F4F7; border-radius:999px; padding:3px 10px;}
.qc-savebar-state em.qc-saved{color:#3F6F1E; background:#EEF6E6;}
.qc-savebar-btns{display:flex; gap:8px; flex-wrap:wrap;}
.qc-savebar-btns button{height:42px; padding:0 18px; border-radius:10px; border:0; font:inherit; font-weight:700; font-size:14px; cursor:pointer; background:#F2F4F7; color:#1D2939;}
.qc-savebar-btns .qc-b-all{background:#1D2939; color:#fff;}
.qc-savebar-btns .qc-b-list{background:#EEF6E6; color:#3F6F1E;}
.qc-savebar-btns button:disabled{opacity:.55; cursor:default;}

/* [64차] 계약서 목록 - 가격제안서+계약서 동시 발송 창 */
.pair-sub{font-size:13px; color:#667085; margin:-4px 0 14px; line-height:1.55;}
.pair-list{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto;}
.pair-row{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; padding:12px 14px; border-radius:12px; background:#F6F7F5; cursor:pointer; color:#1D2939;}
.pair-row.on{background:#EEF6E6;}
.pair-row.on .qc-ck{background:#3F6F1E; border-color:#3F6F1E;}
.pair-row.off{opacity:.55; cursor:default;}
.pair-main{display:flex; flex-direction:column; gap:3px; min-width:0;}
.pair-main b{font-size:15px;}
.pair-main small{font-size:12.5px; color:#475467;}
.pair-main .pair-warn{color:#B53A3A;}
.pair-files{display:flex; flex-wrap:wrap; gap:4px; margin-top:2px;}
.pair-files i{font-style:normal; font-size:12px; font-weight:600; background:#fff; border-radius:6px; padding:1px 7px;}
.pair-ft{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
.pair-mail{display:flex; flex-direction:column; gap:5px; padding:12px 14px; border-radius:12px; background:#F6F7F5; margin-bottom:10px;}
.pair-mail-co{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;}
.pair-mail-co b{font-size:15px; color:#1D2939;}
.pair-mail-co span{font-size:12px; color:#667085;}
.pair-mail label{font-size:12.5px; font-weight:700; color:#475467; margin-top:4px;}
.pair-mail input{height:40px; padding:0 12px; border:1.5px solid var(--border); border-radius:10px; font:inherit; font-size:14px; background:#fff;}
.pair-md .pair-ft .btn:disabled{opacity:.55;}

/* ===== [65차] 팩스 전송 창 · 발송내역 팩스 · 설정 > 팩스(캐논) ===== */
.fx-fields{display:grid; gap:var(--nz-s2); margin:var(--nz-s3) 0;}
.fx-f{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:700; color:#475467;}
.fx-f input{height:40px; padding:0 12px; border:1.5px solid var(--border); border-radius:10px; font:inherit; font-size:15px; font-weight:600; color:#1D2939; background:#fff;}
.fx-msg{margin:var(--nz-s2) 0; padding:var(--nz-s2) var(--nz-s3); border:1px solid var(--nz-line); border-radius:8px; font-size:var(--nz-fs2); color:var(--nz-ink2); background:#fff; line-height:1.5;}
.fx-msg.bad{border-color:#f1aaa4; background:#fff6f5; color:#a61b1b;}
.fx-msg small{color:var(--nz-ink3);}
.fx-btns{display:flex; gap:var(--nz-s2); align-items:center; margin-top:var(--nz-s3); flex-wrap:wrap;}
.fx-chip{display:inline-block; padding:1px 8px; border-radius:var(--nz-rp); font-size:12px; font-weight:700; border:1px solid var(--nz-line); white-space:nowrap;}
.fx-chip.ok{color:#1a7f37; border-color:#9fd5ad; background:#f0faf3;}
.fx-chip.bad{color:#b42318; border-color:#f1aaa4; background:#fff4f3;}
.fx-chip.warn{color:#8a5a00; border-color:#ecc77a; background:#fffaf0;}
.fx-chip.wait{color:#344054; border-color:#d0d5dd; background:#f8fafc;}
.fx-err{color:#b42318; font-size:12px; margin-top:3px; line-height:1.4;}
.fx-note{color:var(--nz-ink3); font-size:12px; margin-top:3px; line-height:1.4;}
.fx-qbar{display:flex; flex-direction:column; gap:4px; margin:var(--nz-s2) 0 var(--nz-s3); padding:var(--nz-s2) var(--nz-s3); border:1px solid var(--nz-line); border-radius:8px; background:#fff; font-size:var(--nz-fs2); color:var(--nz-ink2);}
.fx-idle{color:var(--nz-ink3);}
.mh-chip-fax{margin-left:var(--nz-s2);}
.fx-set-sub{color:var(--text-600); font-size:var(--nz-fs3); margin-top:-6px;}
.fx-set-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--nz-s3); margin:var(--nz-s3) 0;}
.fx-set-grid label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:700; color:#475467;}
.fx-set-grid input{height:40px; padding:0 12px; border:1.5px solid var(--border); border-radius:10px; font:inherit; font-size:14px; background:#fff;}
.fx-set-btns{display:flex; gap:var(--nz-s2); align-items:center; flex-wrap:wrap;}
.fx-set-today{font-size:var(--nz-fs2); color:var(--nz-ink3);}
.tmcs-contact{display:flex; flex-direction:column; gap:6px; margin-top:var(--nz-s3); padding-top:var(--nz-s3); border-top:1px solid var(--nz-line);}
.tmcs-contact-t{font-size:var(--nz-fs2); font-weight:800; color:var(--nz-ink);}
.tmcs-contact label{display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:700; color:#475467;}
.tmcs-contact input{height:36px; padding:0 10px; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:14px; background:#fff;}
/* [65차] 팩스 발송내역 표 - 칸이 좁아 글자·버튼이 두 줄로 꺾이지 않게 */
.fx-hist td, .fx-hist th { white-space: nowrap; vertical-align: middle; }
.fx-hist td:nth-child(6) { white-space: normal; min-width: 220px; max-width: 360px; }
.fx-hist td .btn, .fx-hist td button { white-space: nowrap; }
/* [67차] 기타입력 - 특이사항 자동 문구 / 내 문구 / 이번 건만 직접 추가 */
#quoteEtcNoteSelectList .qen-head { font-size: 0.8rem; font-weight: 700; color: var(--text-700, #2E3136); margin: 14px 0 6px; }
#quoteEtcNoteSelectList .qen-head:first-child { margin-top: 0; }
#quoteEtcNoteSelectList .qen-head small { display: block; font-weight: 400; color: var(--text-400, #8D939C); font-size: 0.74rem; margin-top: 2px; }
#quoteEtcNoteSelectList .qen-grid { grid-template-columns: 1fr; }
#quoteEtcNoteSelectList .qen-auto { text-align: left; line-height: 1.55; }
#quoteEtcNoteSelectList .qen-auto:not(.selected) { color: var(--text-400, #8D939C); background: #fff; }
#quoteEtcNoteSelectList .qen-mine { text-align: left; line-height: 1.55; }
.qen-chip { display: inline-block; font-size: 0.7rem; line-height: 18px; padding: 0 7px; border-radius: 999px; font-weight: 500; margin-right: 6px; vertical-align: 1px; }
.qen-chip.qen-prod { background: #EAF2FB; color: #2F6FAE; }
.qen-chip.qen-item { background: #EEF6E6; color: #3F6F1E; }
.qen-chip.qen-promo { background: #FDF1E4; color: #A4521A; }
.qen-state { display: inline-block; font-size: 0.7rem; font-weight: 700; margin-right: 6px; color: #3F6F1E; }
.qen-auto:not(.selected) .qen-state { color: #B53A3A; }
#quoteEtcNoteSelectList .qen-empty { font-size: 0.8rem; color: var(--text-400, #8D939C); padding: 6px 0; line-height: 1.55; }
#quoteEtcNoteSelectList .qen-manual { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; border: 1px solid #E3E6E2; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 0.82rem; color: var(--text-700, #2E3136); line-height: 1.55; }
#quoteEtcNoteSelectList .qen-manual .btn { flex: 0 0 auto; padding: 2px 10px; font-size: 0.75rem; }
#quoteEtcNoteSelectList .qen-add { display: flex; gap: 6px; }
#quoteEtcNoteSelectList .qen-add input { flex: 1; min-width: 0; border: 1px solid #E3E6E2; border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 0.82rem; }
#quoteEtcNoteSelectList .qen-save { display: block; font-size: 0.76rem; color: var(--text-600, #5C6169); margin-top: 6px; }
/* [67차] 프로모션 카드 - 가격제안서 표기 이름 · 고객 안내 문구 */
.pr-cust { margin-top: 8px; padding: 8px 10px; background: #FDF1E4; border-radius: 6px; font-size: 0.78rem; line-height: 1.55; color: #5C6169; }
.pr-cust b { color: #A4521A; font-weight: 700; }
.pr-help { display: block; color: var(--text-400, #8D939C); font-size: 0.74rem; margin-top: 4px; line-height: 1.5; }
/* [67차] 설정 > 특이사항 문구 */
.qn-group { border: 1px solid #E3E6E2; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.qn-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qn-group-head span { color: var(--text-400, #8D939C); font-size: 0.78rem; flex: 1; }
.qn-row { border-top: 1px solid #E3E6E2; padding: 8px 0; }
.qn-row.qn-off .qn-text { color: var(--text-400, #8D939C); text-decoration: line-through; }
.qn-cond { font-size: 0.74rem; color: #2F6FAE; margin-bottom: 2px; }
.qn-text { font-size: 0.86rem; line-height: 1.55; color: var(--text-700, #2E3136); }
.qn-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.qn-empty { font-size: 0.8rem; color: var(--text-400, #8D939C); padding: 4px 0; }
.qn-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; font-size: 0.8rem; }
.qn-edit-grid label { display: flex; flex-direction: column; gap: 4px; }
.qn-edit-grid label.qp-check { flex-direction: row; align-items: center; }
.qn-edit-grid .qn-wide { grid-column: 1 / -1; }
.qn-edit-grid input, .qn-edit-grid select, .qn-edit-grid textarea { border: 1px solid #E3E6E2; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 0.82rem; }
@media (max-width: 700px) { .qn-edit-grid { grid-template-columns: 1fr; } }
#quoteEtcNoteSelectList .qen-auto.selected .qen-state { color: #B9E39A; }

/* [72차] 유지보수(뉴젠멤버십) 갱신 칸 */
#mrBody .field { margin-bottom: 10px; }
#mrBody select, #mrBody input[type="date"] { width: 100%; }
.mr-box { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; line-height: 1.7; margin: 4px 0 12px; background: #fff; }
.mr-hl { background: #FFF4C2; border-radius: 6px; padding: 2px 8px; margin-top: 4px; }
.mr-bad { color: #B42318; }
.mr-ok { color: #3F6F1E; }
.mr-sub { font-weight: 700; margin: 10px 0 6px; }
.mr-sub small { font-weight: 400; color: var(--text-400); }
.mr-mods { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.mr-mod { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mr-users input { width: 64px; text-align: right; }
.mr-disc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.mr-disc-in input { width: 56px; text-align: right; }
.mr-periods { background: #FBF7EE; border: 1px solid #E8DFC8; border-radius: 8px; padding: 8px 12px; line-height: 1.8; }
.mr-rule { margin-top: 14px; font-size: .78rem; color: var(--text-400); }
.mr-rule summary { cursor: pointer; }
.mr-rule-row { margin: 6px 0; }
.mr-rule-row input { width: 52px; text-align: right; }

/* [75차] 사업자등록증 올리기 · 발주 서류 */
.tlc-abtn.nz-biz-add { border-style:dashed; }
.tlc-abtn.nz-drop { outline:3px solid var(--nz-g, #6aa84f); outline-offset:2px; background:#f4fbef; }
.tlc-abtn.tlcBizregTile > span:not(.tlc-sub) { white-space:nowrap; letter-spacing:-0.4px; font-size:12px; }
.nz-biz-modal { max-width:560px; max-height:88vh; overflow-y:auto; }
.nz-biz-note { background:#FFF6DB; color:#8a5a00; border-radius:8px; padding:8px 12px; font-size:13px; margin-bottom:10px; }
.nz-biz-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-bottom:12px; }
.nz-biz-item { border:1px solid var(--border, #e3e6e2); border-radius:10px; padding:6px; text-align:center; }
.nz-biz-thumb { display:flex; align-items:center; justify-content:center; height:170px; background:#f6f7f5; border-radius:6px; overflow:hidden; }
.nz-biz-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.nz-biz-pdf { font-weight:700; color:#5b6476; }
.nz-biz-cap { font-size:13px; margin-top:4px; display:flex; justify-content:center; gap:8px; align-items:center; }
.nz-biz-empty { color:var(--text-400, #8a909a); padding:14px 0; }
.nz-biz-actions { display:flex; gap:8px; flex-wrap:wrap; }
.nz-biz-hint { font-size:12.5px; color:var(--text-400, #8a909a); margin-top:8px; }
.nzm-biz-row { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--nz-line, #e3e6e2); border-radius:12px; padding:12px; margin-bottom:10px; }
.nzm-biz-th { width:40px; height:52px; object-fit:cover; border:1px solid var(--nz-line, #e3e6e2); border-radius:4px; flex:none; }
.nzm-biz-th.pdf { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#5b6476; background:#f6f7f5; }
.nzm-biz-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.nzm-biz-shoot { flex:none; background:#2f3237; color:#fff; border:0; border-radius:10px; padding:10px 16px; font-weight:700; font-size:15px; font-family:inherit; }
.nzm-biz-done { flex:none; background:#EEF6E6; color:#3F6F1E; border:0; border-radius:10px; padding:8px 12px; font-weight:700; font-size:13px; font-family:inherit; }