:root{--purple:#7146ef;--purple2:#8a67f5;--purple3:#bba9fa;--purpleSoft:#f1edff;--bg:#f8f7fc;--text:#171524;--muted:#777286;--line:#ebe7f2;--red:#ef625b;--orange:#f2994a;--green:#21a67a;--shadow:0 14px 40px rgba(48,31,91,.07)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:"Pretendard","Noto Sans KR",Inter,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 77% -8%,#ddd2ff 0,transparent 28%),linear-gradient(180deg,#fbfaff,#f7f5fb 66%);min-width:1100px}.app-shell{display:grid;grid-template-columns:202px minmax(0,1fr);min-height:100vh}aside{position:sticky;top:0;height:100vh;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;z-index:4}.brand{display:flex;gap:11px;align-items:center;margin:0 8px 42px}.brand b{font-size:15px;display:block}.brand small{font-size:10px;letter-spacing:.16em;color:var(--muted)}.brand-mark{display:inline-grid;place-items:center;width:39px;height:39px;border-radius:13px;background:linear-gradient(135deg,#24222a 46%,var(--purple) 47%);color:#fff;font-weight:900;font-size:22px;box-shadow:0 8px 16px rgba(68,44,133,.18)}nav{display:grid;gap:8px}nav button,.aside-bottom button{border:0;background:transparent;color:#262332;text-align:left;padding:13px 14px;border-radius:11px;font-size:14px;cursor:pointer;transition:.2s}nav button span{display:inline-block;width:24px;color:#6d6780}nav button:hover{background:#f6f3ff}nav button.active{background:linear-gradient(135deg,#6d3ff2,#8157f5);color:#fff;box-shadow:0 10px 22px rgba(109,63,242,.22)}nav button.active span{color:#fff}.aside-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}.aside-bottom button{width:100%}main{padding:27px 28px 50px;min-width:0;max-width:1800px;width:100%;margin:0 auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--purple);margin-bottom:5px}h1{font-size:27px;line-height:1.2;margin:0 0 7px}h2{font-size:21px;margin:0 0 5px}h3{font-size:15px;margin:0}p{color:var(--muted);margin:0;font-size:12px}.header-actions{display:flex;align-items:center;gap:10px}.primary,.ghost,.tab-pdf{border:0;border-radius:10px;padding:11px 16px;text-decoration:none;cursor:pointer;font-weight:700;font-size:13px
  background: var(--theme-surface-strong);
  border-color: var(--theme-line-strong);
  color: var(--theme-accent);}.primary{background:linear-gradient(135deg,var(--purple),#8154f2);color:#fff;box-shadow:0 8px 18px rgba(109,63,242,.18)}.ghost{background:#fff;color:#4f4a5d;border:1px solid var(--line)}.segmented{display:flex;padding:3px;background:#fff;border:1px solid var(--line);border-radius:11px}.segmented button{border:0;background:transparent;border-radius:8px;padding:8px 12px;color:var(--muted);cursor:pointer}.segmented button.active{background:var(--purpleSoft);color:var(--purple);font-weight:800}.filter-card{background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow)}.filter-top{display:flex;align-items:end;gap:12px}.filter-top label{font-size:12px;font-weight:800}.date-filter>div{display:flex;align-items:center;gap:8px;margin-top:7px}.filter-card input,.filter-card select{border:1px solid #e3ddeb;background:#fff;border-radius:9px;padding:10px 11px;color:#2a2633;min-width:0}.date-filter input{width:150px}.filter-actions{margin-left:auto;display:flex;gap:8px}.filters{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px;max-height:120px;opacity:1;margin-top:13px;transition:.2s}.filters.collapsed{max-height:0;opacity:0;overflow:hidden;margin-top:0}.filters label{font-size:11px;font-weight:800}.filters select{width:100%;display:block;margin-top:6px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.chips:empty{display:none}.chip{background:var(--purpleSoft);color:#5d38ce;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700}.panel{display:none;margin-top:16px}.panel.active{display:block}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow);min-width:0}.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.kpi{min-height:118px;display:flex;align-items:center;gap:13px}.kpi small{display:block;color:var(--muted);font-weight:800;font-size:12px}.kpi strong{font-size:34px;display:inline-block;margin-top:8px;line-height:1}.kpi span{font-size:12px;margin-left:4px;color:var(--muted)}.kpi-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.kpi-icon.purple{background:var(--purpleSoft);color:var(--purple)}.kpi-icon.red{background:#fff0ef;color:var(--red)}.kpi-icon.orange{background:#fff4e9;color:var(--orange)}.rate-kpi{justify-content:space-between}.rate-kpi em{display:block;font-style:normal;color:var(--muted);font-size:10px;margin-top:8px}.mini-ring{width:68px;height:68px;flex:0 0 68px}.grid2{display:grid;grid-template-columns:1.65fr 1fr;gap:11px;margin-top:11px}.grid2.equal{grid-template-columns:1fr 1fr}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.grid4.compact{margin-top:11px}.card-title{display:flex;justify-content:space-between;align-items:start;margin-bottom:4px}.card-title h3{margin-bottom:4px}.chart{height:310px}.chart.tall{height:455px}.chart.mini{height:205px}.chart.heat{height:470px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:6px 2px 12px}.tab-pdf{background: var(--theme-surface-strong);border:1px solid var(--line);color: var(--theme-accent);cursor:pointer
  border-color: var(--theme-line-strong);}.dept-grid{display:grid;grid-template-columns:1.65fr .8fr;gap:11px}.mt{margin-top:11px}.login-bg{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 75% 5%,#cbb9ff,transparent 38%),linear-gradient(180deg,#faf9ff,#f4f0ff)}.login-card{width:390px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 30px 80px #4d2ca426}.login-card .brand-mark{margin-bottom:18px}.login-card h1{font-size:24px}.login-card p{margin:8px 0 20px}.login-card input{width:100%;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px}.login-card button{width:100%;padding:14px;border:0;border-radius:10px;background:var(--purple);color:#fff;font-weight:700}.print-body{background:#fff;min-width:auto}.print-main{padding:0}.print-main>h1,.print-main>p{padding:0 4mm}.print-page{page-break-after:always;min-height:185mm;padding:4mm}.print-page:last-child{page-break-after:auto}@media(max-width:1350px){body{min-width:1024px}.app-shell{grid-template-columns:178px 1fr}.filters{grid-template-columns:repeat(3,1fr)}.kpis{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}@media print{body{background:#fff}.card{box-shadow:none}}

/* Sync toast */
.toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;

  min-width: 280px;
  max-width: 440px;

  padding: 14px 18px;

  background: #221b33;
  color: #fff;

  border-radius: 14px;

  box-shadow:
    0 14px 40px rgba(44, 28, 86, .22);

  font-size: 14px;
  font-weight: 600;

  opacity: 0;
  transform: translateY(12px);

  pointer-events: none;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success {
  background: #5f35df;
}

.toast.nochange {
  background: #393347;
}

.toast.error {
  background: #c54242;
}

#syncBtn:disabled {
  opacity: .55;
  cursor: wait;
}


/* =========================================================
   SMARTDOCTOR PDF REPORT
   ========================================================= */

@page {
  size: A4 landscape;
  margin: 0;
}

.print-body {
  margin: 0;
  padding: 0;

  background: #f4f1fa;

  color: #18151f;

  font-family:
    "Pretendard",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    sans-serif;

  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-main {
  margin: 0;
  padding: 0;
}

.print-page {
  position: relative;

  box-sizing: border-box;

  width: 297mm;
  height: 210mm;

  padding:
    12mm
    12mm
    9mm;

  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(126, 83, 239, .14),
      rgba(126, 83, 239, 0) 35%
    ),
    linear-gradient(
      180deg,
      #faf8ff 0%,
      #f5f2fb 100%
    );

  page-break-after: always;

  break-after: page;

  overflow: hidden;
}

.print-page:last-child {
  page-break-after: auto;
  break-after: auto;
}


/* Header */

.print-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  min-height: 19mm;

  margin-bottom: 5mm;
}

.print-eyebrow {
  margin-bottom: 1.5mm;

  color: #7046eb;

  font-size: 8pt;
  font-weight: 800;

  letter-spacing: .12em;
}

.print-header h1 {
  margin: 0;

  color: #18141f;

  font-size: 20pt;
  font-weight: 800;

  letter-spacing: -.04em;
}

.print-meta {
  display: flex;
  align-items: center;

  gap: 2mm;

  margin-top: 2mm;

  color: #777083;

  font-size: 8.5pt;
}

.print-meta .dot {
  color: #b3acbd;
}

.print-page-badge {
  display: flex;
  align-items: center;

  min-height: 8mm;

  padding: 0 4mm;

  border:
    .3mm solid
    rgba(113, 70, 239, .17);

  border-radius: 10mm;

  background:
    rgba(255, 255, 255, .72);

  color: #6741dd;

  font-size: 8pt;
  font-weight: 700;
}


/* Cards */

.print-card {
  box-sizing: border-box;

  border:
    .3mm solid
    rgba(79, 61, 112, .10);

  border-radius: 4.5mm;

  background:
    var(--theme-card);

  box-shadow:
    0 3mm 10mm
    rgba(57, 37, 97, .045);

  overflow: hidden;
}

.print-card-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  box-sizing: border-box;

  min-height: 13mm;

  padding:
    4mm
    4.5mm
    1mm;
}

.print-card-title h2 {
  margin: 0 0 1mm;

  font-size: 10.5pt;
  font-weight: 800;

  letter-spacing: -.025em;
}

.print-card-title p {
  margin: 0;

  color: #81798c;

  font-size: 7.5pt;
}


/* KPI */

.print-kpis {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr
    1fr
    1.25fr;

  gap: 3mm;

  margin-bottom: 4mm;
}

.print-kpi-card {
  display: flex;
  align-items: center;

  gap: 3mm;

  box-sizing: border-box;

  height: 30mm;

  padding: 4mm;

  border:
    .3mm solid
    rgba(79, 61, 112, .10);

  border-radius: 4.5mm;

  background:
    var(--theme-card);

  box-shadow:
    0 2mm 7mm
    rgba(57, 37, 97, .04);
}

.print-kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 9mm;
  height: 9mm;

  border-radius: 3mm;

  font-size: 12pt;
  font-weight: 800;
}

.print-kpi-icon.purple {
  background: #f0ebff;
  color: #7146ef;
}

.print-kpi-icon.red {
  background: #fff0ef;
  color: #ef625b;
}

.print-kpi-icon.orange {
  background: #fff4e9;
  color: #e78638;
}

.print-kpi-card small {
  display: block;

  margin-bottom: 1mm;

  color: #756e80;

  font-size: 7.5pt;
  font-weight: 700;
}

.print-kpi-card strong {
  color: #16121d;

  font-size: 21pt;
  font-weight: 800;

  letter-spacing: -.04em;
}

.print-kpi-card span {
  margin-left: .7mm;

  color: #776f81;

  font-size: 8pt;
}

.rate-card {
  display: grid;

  grid-template-columns:
    1fr
    22mm;

  gap: 2mm;
}

.rate-card strong {
  display: block;

  font-size: 19pt;
}

.formula {
  margin-top: 1mm;

  color: #8a8295;

  font-size: 6.5pt;
}

.print-ring {
  width: 20mm;
  height: 20mm;
}


/* Page 1 charts */

.print-grid-main {
  display: grid;

  grid-template-columns:
    1.65fr
    1fr;

  gap: 4mm;

  height: 123mm;
}

.print-chart {
  width: 100%;
}

.chart-main,
.chart-side {
  height: 104mm;
}


/* Page 2 / 3 */

.print-two-column {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 4mm;

  height: 151mm;
}

.chart-large {
  height: 131mm;
}


/* Page 4 */

.print-dept-grid {
  display: grid;

  grid-template-columns:
    1.65fr
    1fr;

  gap: 4mm;

  height: 151mm;
}

.chart-dept-heat,
.chart-dept-rank {
  height: 131mm;
}


/* Page 5 */

.print-ops-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  grid-template-rows:
    73mm
    74mm;

  gap: 4mm;

  height: 151mm;
}

.chart-ops-small {
  height: 54mm;
}

.ops-rate-card {
  grid-column:
    1 / span 2;
}

.chart-ops-rate {
  height: 55mm;
}


/* Footer */

.print-footer {
  position: absolute;

  left: 12mm;
  right: 12mm;
  bottom: 4.5mm;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #a19aa9;

  font-size: 6.8pt;
}


/* Printing */

@media print {

  html,
  body {
    width: 297mm;
    margin: 0;
    padding: 0;
  }

  .print-page {
    box-shadow: none;
  }

}

/* =========================================================
   PDF PERFORMANCE OPTIMIZATION
   Chrome PDF Viewer 렌더링 부하 감소
   ========================================================= */

@media print {

  /* 복잡한 그라데이션 제거 */
  .print-page {
    background: #f7f5fb !important;
    box-shadow: none !important;
  }

  /* 카드 그림자 제거 */
  .print-card,
  .print-kpi-card {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  /* 페이지 배지 반투명 효과 제거 */
  .print-page-badge {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  /* 브라우저 합성 부하가 큰 효과 제거 */
  .print-body *,
  .print-body *::before,
  .print-body *::after {
    filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
  }

  /* PDF에서는 애니메이션/트랜지션 불필요 */
  .print-body * {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   DATE PRESETS
   ========================================================= */

.date-filter {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.date-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-presets {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-preset {
  height: 30px;
  padding: 0 11px;

  border: 1px solid #e2dced;
  border-radius: 9px;

  background:
    var(--theme-card);

  color: #6f6879;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.date-preset:hover {
  border-color: #bba9f5;
  color: #6741dc;
  background: #faf8ff;
}

.date-preset.active {
  border-color: #7146ef;

  background: #7146ef;
  color: #fff;

  box-shadow:
    0 4px 12px
    rgba(113,70,239,.18);
}

/* =========================================================
   GLOBAL TYPOGRAPHY
   Pretendard-first
   ========================================================= */

:root {
  --font-sans:
    "Pretendard",
    "Pretendard Variable",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    Arial,
    sans-serif;
}

html,
body {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.015em;
}

button,
input,
select,
textarea,
option {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 날짜 입력칸 */
input[type="date"] {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Chrome date input 내부 텍스트 */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field {
  font-family: var(--font-sans);
  font-weight: 500;
}

/* 제목 계층 */
h1,
h2,
h3,
h4,
.card-title,
.print-card-title {
  font-family: var(--font-sans);
  letter-spacing: -0.035em;
}

h1 {
  font-weight: 800;
}

h2,
h3 {
  font-weight: 700;
}

/* KPI 숫자는 숫자 폭 고정 */
.kpi strong,
.print-kpi-card strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.045em;
}

/* select 텍스트도 동일화 */
select {
  font-size: 14px;
}

/* 버튼 */
button,
.primary,
.ghost {
  font-weight: 600;
}

/* ECharts SVG/Canvas와 별개로 주변 UI 폰트 통일 */
.print-body {
  font-family: var(--font-sans);
}


/* =========================================================
   DASHBOARD FILTER STICKY
   ========================================================= */

.filter-card {
  position: sticky;
  top: 10px;
  z-index: 100;

  background: rgba(255, 255, 255, .97);

  box-shadow:
    0 8px 24px rgba(50, 34, 90, .08);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/*
 * 상세필터는 기존 collapsed 로직 그대로 사용.
 * sticky와 별도로 overflow/height를 제어하지 않음.
 */

@media print {
  .filter-card {
    position: static;
    top: auto;

    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}



/* =========================================================
   EXECUTIVE SUMMARY
   분류별 구성 현황
   ========================================================= */

.executive-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;

  margin-top: 12px;
}


.exec-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 154px;

  padding: 15px 16px 14px;

  border:
    1px solid
    var(--line);

  border-radius: 14px;

  background:
    var(--card);

  color:
    var(--text);

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 7px 20px
    rgba(48,31,91,.045);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


.exec-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--purple);

  background:
    var(--card);

  box-shadow:
    0 11px 26px
    rgba(30,22,55,.12);
}


.exec-head {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

  color:
    var(--muted);

  font-size: 12px;
  font-weight: 800;
}


.exec-head > span:nth-child(2) {
  color:
    var(--text);
}


.exec-head b {
  margin-left: auto;

  color:
    var(--muted);

  font-size: 14px;

  opacity: .72;

  transition:
    color .15s ease,
    transform .15s ease,
    opacity .15s ease;
}


.exec-card:hover .exec-head b {
  color:
    var(--purple);

  opacity: 1;

  transform:
    translateX(2px);
}


.exec-icon {
  display: inline-grid;
  place-items: center;

  flex: 0 0 auto;

  width: 26px;
  height: 26px;

  border-radius: 8px;

  background:
    var(--purpleSoft);

  color:
    var(--purple);

  font-size: 12px;
  font-weight: 800;
}


.exec-distribution-list {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 0;

  margin-top: 1px;
}


.exec-distribution-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: baseline;

  gap: 10px;

  min-width: 0;

  line-height: 1.25;
}


.exec-distribution-name {
  min-width: 0;

  overflow: hidden;

  color:
    var(--text);

  font-size: 12px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.exec-distribution-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;

  gap: 7px;

  white-space: nowrap;
}


.exec-distribution-value strong {
  display: inline;

  margin: 0;

  overflow: visible;

  color:
    var(--text);

  font-size: 13px;
  font-weight: 800;

  line-height: 1.2;

  text-overflow: clip;
  white-space: nowrap;
}


.exec-distribution-value em {
  min-width: 42px;

  color:
    var(--muted);

  font-size: 11px;
  font-style: normal;
  font-weight: 700;

  text-align: right;
}


.exec-distribution-bar {
  display: flex;

  width: 100%;
  height: 6px;

  margin-top: auto;
  padding-top: 12px;

  box-sizing:
    content-box;

  overflow: hidden;

  border-radius: 999px;
}


.exec-bar-segment {
  display: block;

  min-width: 1px;
  height: 6px;

  box-shadow:
    inset -1px 0 0
    color-mix(
      in srgb,
      var(--card) 72%,
      transparent
    );

  transition:
    opacity .16s ease;
}


.exec-card:hover
.exec-bar-segment {
  opacity: .92;
}


/*
 * 카드 분포색은 현재 테마의 accent 계열을 사용합니다.
 * 각 테마의 --purple 값이 이미 서버 저장 테마에 따라 변경됩니다.
 */

/* ------------------------------------------------------------
   Executive Summary categorical palette

   카드 UI는 현재 테마를 따르되,
   데이터 분포는 카테고리 식별성을 우선합니다.
   ------------------------------------------------------------ */

:root {

  --exec-c1: #7047eb;
  --exec-c2: #2787d8;
  --exec-c3: #20a47a;
  --exec-c4: #dc8731;
  --exec-c5: #cf5b74;
  --exec-c6: #68727f;

}


/*
 * 어두운 계열 테마에서는
 * 동일 hue를 조금 더 밝게 사용해 대비를 확보합니다.
 */

html[data-resolved-theme="dark"],
html[data-resolved-theme="midnight"] {

  --exec-c1: #a07cff;
  --exec-c2: #59adf0;
  --exec-c3: #4bc89b;
  --exec-c4: #f1aa5d;
  --exec-c5: #ed7d92;
  --exec-c6: #9ca8b6;

}


/*
 * Emerald / Slate / Warm에서도
 * accent 단색으로 몰지 않고 categorical hue는 유지합니다.
 */

html[data-resolved-theme="emerald"] {

  --exec-c1: #168a63;
  --exec-c2: #397fc1;
  --exec-c3: #75a743;
  --exec-c4: #d48b32;
  --exec-c5: #c95c68;
  --exec-c6: #7b8584;

}


html[data-resolved-theme="slate"] {

  --exec-c1: #506b8a;
  --exec-c2: #318c9d;
  --exec-c3: #478967;
  --exec-c4: #c4853c;
  --exec-c5: #bd626d;
  --exec-c6: #7e8792;

}


html[data-resolved-theme="warm"] {

  --exec-c1: #b56b42;
  --exec-c2: #4f80aa;
  --exec-c3: #628d55;
  --exec-c4: #c69135;
  --exec-c5: #b85e72;
  --exec-c6: #82756c;

}


/* 항목명 + 색상 marker */

.exec-distribution-name {

  display: flex;
  align-items: center;

  gap: 7px;

}


.exec-distribution-name > span {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

}


.exec-color-dot {

  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  border-radius: 50%;

}


/* 행 marker */

.exec-color-0 {
  background: var(--exec-c1);
}

.exec-color-1 {
  background: var(--exec-c2);
}

.exec-color-2 {
  background: var(--exec-c3);
}

.exec-color-3 {
  background: var(--exec-c4);
}

.exec-color-4 {
  background: var(--exec-c5);
}

.exec-color-5 {
  background: var(--exec-c6);
}


/* 구성비 bar */

.exec-bar-0 {
  background: var(--exec-c1);
}

.exec-bar-1 {
  background: var(--exec-c2);
}

.exec-bar-2 {
  background: var(--exec-c3);
}

.exec-bar-3 {
  background: var(--exec-c4);
}

.exec-bar-4 {
  background: var(--exec-c5);
}

.exec-bar-5 {
  background: var(--exec-c6);
}


.exec-empty {
  padding:
    14px 0;

  color:
    var(--muted);

  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   화면 폭 대응
   ========================================================= */

@media (max-width: 1350px) {

  .executive-summary {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

}



/* ============================================================
   ANALYSIS MODE
   ============================================================ */

.analysis-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  margin-bottom: 18px;
  padding: 4px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: rgba(255,255,255,.94);

  box-shadow:
    0 6px 18px rgba(48,31,91,.045);
}

.analysis-switch-btn {
  border: 0;
  border-radius: 9px;

  padding: 9px 16px;

  background:
    transparent;

  color:
    var(--theme-muted);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.analysis-switch-btn.active {
  background:
    linear-gradient(
      135deg,
      var(--purple),
      #8154f2
    );

  color: #fff;

  box-shadow:
    0 7px 15px rgba(109,63,242,.18);
}

.manager-mode aside #tabs {
  opacity: .35;
  pointer-events: none;
}


/* ============================================================
   MANAGER DASHBOARD
   ============================================================ */

.manager-analysis {
  padding-bottom: 40px;
}

.manager-analysis[hidden],
#customerAnalysis[hidden],
.manager-modal[hidden] {
  display: none !important;
}

.manager-header {
  margin-bottom: 20px;
}

.manager-filter-card {
  position: sticky;
  top: 10px;
  z-index: 100;
}

.manager-filter-grid {
  display: grid;

  grid-template-columns:
    1.5fr
    repeat(7, minmax(105px, 1fr))
    auto;

  align-items: end;
  gap: 9px;
}

.manager-filter-grid label {
  min-width: 0;

  color: #514b5c;

  font-size: 11px;
  font-weight: 800;
}

.manager-filter-grid select,
.manager-filter-grid input {
  width: 100%;
  margin-top: 6px;
}

.manager-date-row {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 6px;
}

.manager-date-row input {
  margin-top: 0;
}

.manager-date-row span {
  color: var(--muted);
}

.manager-filter-actions {
  display: flex;
  gap: 6px;
}


/* KPI */

.manager-kpis {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0,1fr));

  gap: 11px;

  margin-top: 14px;
}

.manager-kpi {
  min-height: 108px;
}

.manager-kpi small {
  display: block;

  margin-bottom: 12px;

  color: var(--muted);

  font-size: 11px;
  font-weight: 800;
}

.manager-kpi strong {
  color: #1b1722;

  font-size: 29px;
  font-weight: 800;

  letter-spacing: -.045em;

  font-variant-numeric: tabular-nums;
}

.manager-kpi span {
  display: block;

  margin-top: 7px;

  color: #8a8392;

  font-size: 10px;
}


/* Main charts */

.manager-chart-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 11px;

  margin-top: 11px;
}

.manager-chart {
  width: 100%;
  height: 390px;
}

.manager-chart.distribution {
  height: 330px;
}


/* Table */

.manager-table-card {
  margin-top: 11px;
}

.manager-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 14px;
}

.manager-table-head h3 {
  margin-bottom: 4px;
}

.manager-clear {
  padding: 8px 11px;
}

.manager-table-wrap {
  overflow-x: auto;

  border: 1px solid #eeeaf3;
  border-radius: 12px;
}

.manager-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 12px;
}


/*
 * 담당자 현황
 *
 * 9개 컬럼을 지나치게 압축하지 않고,
 * 공간이 부족할 때 manager-table-wrap 내부에서
 * 가로 스크롤이 발생하도록 최소 폭을 유지합니다.
 */
.manager-status-table {
  min-width: 1100px;
}


/*
 * 담당자 현황 타이포그래피
 * 수당 상세 테이블과 동일 기준
 */
.manager-status-table thead th {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4;

  padding-top: 12px !important;
  padding-bottom: 12px !important;

  color: #5b5366;
}


.manager-status-table tbody td {
  font-size: 13px;
}

.manager-table th {
  padding: 11px 13px;

  background: #faf8fd;

  color: #746d7f;

  text-align: right;

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;
}

.manager-table th:first-child {
  text-align: left;
}


/*
 * 정렬 가능한 테이블 헤더
 */
.manager-table th.sortable-table-header {
  position: relative;

  padding-right: 27px;

  cursor: pointer;

  user-select: none;
}


.manager-table th.sortable-table-header::after {
  content: '↕';

  position: absolute;

  top: 50%;
  right: 9px;

  transform: translateY(-50%);

  color: #aaa3b5;

  font-size: 11px;
  font-weight: 700;

  line-height: 1;

  opacity: .55;
}


.manager-table th.sortable-table-header:hover {
  background: #f4f0fa;
}


.manager-table th.sortable-table-header.sort-active {
  color: #5731ce;
}


.manager-table th.sortable-table-header.sort-active::after {
  opacity: 1;

  color: #5731ce;
}


.manager-table th.sortable-table-header.sort-desc::after {
  content: '▼';
}


.manager-table th.sortable-table-header.sort-asc::after {
  content: '▲';
}

.manager-table td {
  padding: 11px 13px;

  border-top: 1px solid #f0edf4;

  text-align: right;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}

.manager-table td:first-child {
  text-align: left;
}

.manager-table tbody tr {
  transition: background .12s ease;
}

.manager-table tbody tr:hover {
  background: #faf8ff;
}

.manager-name-btn {
  border: 0;
  padding: 0;

  background: transparent;
  color: #5731ce;

  font-weight: 800;

  cursor: pointer;
}

.manager-name-btn:hover {
  text-decoration: underline;
}

.manager-rate-badge {
  display: inline-block;

  min-width: 52px;

  padding: 5px 8px;

  border-radius: 999px;

  background: var(--purpleSoft);
  color: #623bd5;

  text-align: center;

  font-weight: 800;
}

.manager-money {
  font-weight: 700;
}

.manager-empty {
  padding: 30px !important;

  color: #8a8392;

  text-align: center !important;
}


/* Distribution */

.manager-section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;

  margin: 25px 2px 11px;
}

.manager-section-title h2 {
  margin-bottom: 5px;
}

.manager-distribution-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 11px;
}


/* ============================================================
   FORMER MANAGER MODAL
   ============================================================ */

.manager-modal {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: grid;
  place-items: center;
}

.manager-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(25,20,34,.46);

  backdrop-filter: blur(3px);
}

.manager-modal-card {
  position: relative;

  z-index: 1;

  width: min(780px, calc(100vw - 60px));
  max-height: calc(100vh - 80px);

  overflow: auto;

  padding: 22px;

  border: 1px solid var(--line);
  border-radius: 18px;

  background:
    var(--theme-card);

  box-shadow:
    0 30px 90px rgba(30,20,55,.24);
}

.manager-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 20px;
}

.manager-modal-head h2 {
  margin-bottom: 5px;
}

.manager-modal-close {
  border: 0;

  width: 34px;
  height: 34px;

  border-radius: 9px;

  background: #f6f3fa;
  color: #6e6679;

  font-size: 22px;

  cursor: pointer;
}

.former-add-row {
  display: grid;

  grid-template-columns:
    1fr
    145px
    1.2fr
    auto;

  gap: 8px;

  margin-bottom: 18px;
}

.former-add-row select,
.former-add-row input {
  min-width: 0;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    9px;

  padding:
    10px 11px;

  background:
    var(--theme-input, var(--theme-card));

  color:
    var(--theme-text);
}

.former-list {
  display: grid;
  gap: 7px;
}

.former-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    11px 13px;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    11px;

  background:
    var(--theme-card);

  color:
    var(--theme-text);

  transition:
    background .16s ease,
    border-color .16s ease;
}

.former-row:hover {
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 30%,
      var(--theme-line)
    );

  background:
    color-mix(
      in srgb,
      var(--theme-accent-soft) 28%,
      var(--theme-card)
    );
}


.former-row strong {
  display: block;

  margin-bottom:
    3px;

  color:
    var(--theme-text);

  font-size:
    13px;

  font-weight:
    800;
}

.former-row span {
  color:
    var(--theme-muted);

  font-size:
    10px;
}

.former-remove {
  padding: 7px 10px;
}

.manager-modal-open {
  overflow: hidden;
}


/* ============================================================
   MANAGER RESPONSIVE
   ============================================================ */

@media (max-width: 1550px) {

  .manager-filter-grid {
    grid-template-columns:
      1.5fr
      repeat(4, minmax(115px,1fr));
  }

  .manager-filter-actions {
    grid-column: -2 / -1;
  }

}

@media (max-width: 1350px) {

  .manager-kpis {
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }

  .manager-chart-grid,
  .manager-distribution-grid {
    grid-template-columns: 1fr;
  }

}


/* ============================================================
   MANAGER V2
   ============================================================ */

.manager-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}


.manager-date-presets {
  display: flex;
  align-items: center;
  gap: 5px;

  margin-top: 6px;
}


.manager-date-preset {
  height: 27px;

  padding: 0 9px;

  border: 1px solid #e2dced;
  border-radius: 8px;

  background:
    var(--theme-card);
  color: #6f6879;

  font-size: 10px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;
}


.manager-date-preset:hover {
  border-color: #bba9f5;

  background: #faf8ff;
  color: #6741dc;
}


.manager-date-preset.active {
  border-color: var(--purple);

  background:
    var(--theme-accent);

  color:
    #fff;

  box-shadow:
    0 4px 10px
    rgba(113,70,239,.16);
}


.manager-metric-switch {
  display: flex;
  gap: 7px;

  padding: 4px;

  border: 1px solid var(--line);
  border-radius: 11px;

  background:
    var(--theme-card);
}


.manager-metric-switch select {
  min-width: 120px;

  padding: 8px 10px;

  border: 0;
  border-radius: 8px;

  background: #f8f6fc;
  color: #50495b;

  font-size: 11px;
  font-weight: 700;

  outline: none;
}


.manager-success-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 11px;
}


#mSyncBtn:disabled {
  opacity: .55;
  cursor: wait;
}


@media(max-width:1350px) {

  .manager-success-grid {
    grid-template-columns: 1fr;
  }

}


/* ============================================================
   AUTH / ROLE
   ============================================================ */

.login-error {
  margin-top: 14px;

  padding: 10px 12px;

  border: 1px solid #f0c7c4;
  border-radius: 9px;

  background: #fff3f2;
  color: #ba403a;

  font-size: 12px;
  font-weight: 600;
}


.login-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 32px;

  margin-bottom: 5px;
  padding: 5px 12px;

  color: #716a7c;

  font-size: 10px;
}


.login-identity strong {
  overflow: hidden;

  max-width: 105px;

  color: #393341;

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.login-identity span {
  padding: 3px 6px;

  border-radius: 999px;

  background: var(--purpleSoft);
  color: var(--purple);

  font-size: 9px;
  font-weight: 800;
}


#formerManagerBtn[hidden] {
  display: none !important;
}


/* ============================================================
   LOGIN USER SELECT
   ============================================================ */

.login-field {
  display: block;

  margin-bottom: 12px;
}


.login-field > span {
  display: block;

  margin-bottom: 6px;

  color: #625b6c;

  font-size: 11px;
  font-weight: 700;
}


.login-card select {
  width: 100%;

  padding: 14px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background:
    var(--theme-card);

  color: #2b2633;

  font-family: var(--font-sans);
  font-size: 14px;
}


.admin-page-link {
  display: block;

  margin: 2px 0 6px;

  padding: 9px 12px;

  border-radius: 9px;

  color: #6440d9;

  background: #f3efff;

  font-size: 11px;
  font-weight: 700;

  text-decoration: none;
}


.admin-page-link:hover {
  background: #ebe4ff;
}


.admin-page-link[hidden] {
  display: none !important;
}


/* ============================================================
   ADMIN PAGE
   ============================================================ */

.admin-body {
  margin: 0;

  background:
    var(--theme-bg);

  color:
    var(--theme-text);

  font-family: var(--font-sans);
}


.admin-main {
  width: min(
    1500px,
    calc(100% - 60px)
  );

  margin: 0 auto;

  padding: 32px 0 60px;
}


.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}


.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}


.admin-header-actions form {
  margin: 0;
}


.admin-tabs {
  display: inline-flex;

  gap: 4px;

  margin-bottom: 16px;

  padding: 4px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background:
    var(--theme-card);
}


.admin-tabs button {
  border: 0;

  padding: 9px 16px;

  border-radius: 9px;

  background:
    transparent;

  color:
    var(--theme-muted);

  font-weight: 700;

  cursor: pointer;
}


.admin-tabs button.active {
  background:
    var(--theme-accent);

  color:
    #fff;
}


.admin-panel {
  display: none;
}


.admin-panel.active {
  display: block;
}


.admin-section-head {
  margin: 5px 2px 13px;
}


.admin-section-head h2 {
  margin-bottom: 5px;
}


.admin-create-user {
  margin-bottom: 12px;
}


.admin-create-user h3 {
  margin-bottom: 14px;
}


.admin-user-form {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    140px
    1fr
    auto;

  gap: 9px;

  align-items: end;
}


.admin-user-form label {
  color:
    var(--theme-muted);

  font-size: 11px;
  font-weight: 700;
}


.admin-user-form input,
.admin-user-form select {
  display: block;

  width: 100%;

  margin-top: 6px;

  padding: 10px 11px;

  border: 1px solid #e3ddeb;
  border-radius: 9px;

  background:
    var(--theme-card);
}


.admin-user-list-card {
  overflow-x: auto;
}


.admin-table {
  width: 100%;

  border-collapse: collapse;
}


.admin-table th {
  padding: 11px 10px;

  border-bottom: 1px solid var(--line);

  color: #756e80;

  text-align: left;

  font-size: 10px;
  font-weight: 800;
}


.admin-table td {
  padding: 10px;

  border-bottom: 1px solid #f0edf4;

  vertical-align: middle;
}


.admin-inline-input,
.admin-table select,
.admin-password-reset input {
  width: 100%;

  padding: 9px 10px;

  border: 1px solid #e3ddeb;
  border-radius: 8px;

  background:
    var(--theme-card);

  font-size: 12px;
}


.admin-password-reset {
  display: flex;

  gap: 6px;
}


.admin-password-reset input {
  min-width: 130px;
}


@media(max-width:1200px) {

  .admin-user-form {
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* ============================================================
   ADMIN USERS V2
   ============================================================ */

.admin-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 16px;
}


.admin-card-title h3 {
  margin-bottom: 5px;
}


.admin-summary {
  display: flex;
  align-items: center;
  gap: 7px;
}


.admin-summary span {
  padding: 6px 9px;

  border: 1px solid var(--line);
  border-radius: 999px;

  background:
    var(--theme-card);

  color: #756e80;

  font-size: 10px;
}


.admin-summary b {
  margin-left: 3px;

  color: #5531cb;
}


.admin-create-btn {
  min-height: 38px;

  white-space: nowrap;
}


.admin-table-wrap {
  overflow-x: auto;
}


.admin-table td {
  min-width: 120px;
}


.admin-table td:nth-child(5) {
  min-width: 135px;
}


.admin-table td:last-child {
  width: 80px;
  min-width: 80px;
}


.admin-table .primary,
.admin-table .ghost {
  padding: 8px 11px;

  white-space: nowrap;
}


.admin-disabled-user {
  opacity: .55;
}


.admin-disabled-user:hover {
  opacity: .8;
}


/* 비밀번호 변경 modal */

.admin-modal[hidden] {
  display: none !important;
}


.admin-modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: grid;
  place-items: center;
}


.admin-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(
      25,
      20,
      34,
      .48
    );

  backdrop-filter:
    blur(3px);
}


.admin-modal-card {
  position: relative;

  z-index: 1;

  width: 420px;

  padding: 23px;

  border: 1px solid var(--line);
  border-radius: 18px;

  background:
    var(--theme-card);

  box-shadow:
    0 30px 90px
    rgba(30,20,55,.25);
}


.admin-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 20px;
}


.admin-modal-head h2 {
  margin-bottom: 5px;
}


.admin-modal-close {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 0;
  border-radius: 9px;

  background: #f6f3fa;
  color: #6e6679;

  font-size: 21px;

  cursor: pointer;
}


.admin-password-field {
  display: block;

  margin-bottom: 12px;

  color: #5e5768;

  font-size: 11px;
  font-weight: 700;
}


.admin-password-field input {
  display: block;

  width: 100%;

  margin-top: 6px;
  padding: 11px 12px;

  border: 1px solid #e3ddeb;
  border-radius: 9px;

  font-family: var(--font-sans);
}


.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;

  margin-top: 20px;
}


/* ============================================================
   ADMIN SETTINGS BUTTON
   ============================================================ */

.admin-settings-btn {
  display: flex;
  align-items: center;

  gap: 9px;

  width: 100%;

  margin: 4px 0 6px;
  padding: 10px 12px;

  border: 1px solid #e8e1f5;
  border-radius: 10px;

  background: #f7f4ff;

  color: #554a68;

  font-size: 12px;
  font-weight: 700;

  text-decoration: none;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.admin-settings-btn:hover {
  border-color: #cfc0fa;

  background: #f0eaff;
  color: #623bd5;

  transform: translateY(-1px);
}


.admin-settings-btn[hidden] {
  display: none !important;
}


.admin-settings-icon {
  display: inline-grid;
  place-items: center;

  width: 25px;
  height: 25px;

  border-radius: 8px;

  background: #e9e1ff;
  color: var(--purple);

  font-size: 13px;
  font-weight: 800;
}


/* ============================================================
   MANAGER SELF ONLY
   ============================================================ */

.manager-filter-locked select {
  border-color: #e8e3ee !important;

  background: #f5f3f8 !important;

  color: #716b78 !important;

  cursor: not-allowed;
}


.manager-filter-locked {
  position: relative;
}


.manager-filter-locked::after {
  content: "로그인 계정 기준";

  display: block;

  margin-top: 4px;

  color: #99919f;

  font-size: 9px;
  font-weight: 500;
}


body:not(.manager-mode)
.manager-filter-locked::after {
  display: none;
}

.manager-admin-only[hidden] {
  display: none !important;
}



/* ============================================================
   USER DISPLAY ORDER
   ============================================================ */

.admin-order-input {
  width: 72px;

  padding: 9px 8px;

  border: 1px solid #e3ddeb;
  border-radius: 8px;

  background:
    var(--theme-card);

  color: #403948;

  text-align: center;

  font-family: var(--font-sans);

  font-size: 12px;
  font-weight: 700;

  font-variant-numeric: tabular-nums;
}


.admin-order-input:focus {
  border-color: #bba9f5;

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(113,70,239,.08);
}


/* ============================================================
   DRAG SORT USER ORDER
   ============================================================ */

.admin-order-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 12px;

  margin-top: 12px;
}


.admin-order-card {
  min-width: 0;
}


.sortable-user-list {
  display: grid;
  gap: 7px;
}


.sortable-user-item {
display: flex;
  align-items: center;
  gap: 12px;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    12px;

  background:
    var(--theme-card);

  color:
    var(--theme-text);

  box-shadow:
    0 2px 8px
    rgba(0, 0, 0, .035);

  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;

  padding:
    11px 12px;
}


.sortable-user-item:hover {
border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 34%,
      var(--theme-line)
    );

  background:
    color-mix(
      in srgb,
      var(--theme-accent-soft) 38%,
      var(--theme-card)
    );

  box-shadow:
    0 5px 16px
    rgba(0, 0, 0, .06);
}


.sortable-user-item.dragging {
opacity:
    .58;

  border-color:
    var(--theme-accent);

  background:
    var(--theme-accent-soft);

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, .10);
}


.sortable-drag-handle {
display: grid;
  place-items: center;

  flex:
    0 0 auto;

  width:
    30px;

  height:
    30px;

  border-radius:
    9px;

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

  font-size:
    20px;

  font-weight:
    800;

  cursor:
    grab;
}


.sortable-user-info {
  flex: 1 1 auto;
  min-width: 0;
}


.sortable-user-info strong {
display:
    block;

  color:
    var(--theme-text);

  font-weight:
    800;
}


.sortable-user-info span {
display:
    block;

  margin-top:
    3px;

  color:
    var(--theme-muted);

  font-size:
    11px;
}


.sortable-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}


.sortable-move-btn {
display:
    inline-grid;

  place-items:
    center;

  min-width:
    31px;

  height:
    31px;

  padding:
    0 8px;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    9px;

  background:
    var(--theme-surface, var(--theme-card));

  color:
    var(--theme-text);

  font-size:
    15px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}


.sortable-move-btn:hover {
border-color:
    var(--theme-accent);

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);
}


@media(max-width:1200px) {

  .admin-order-grid {
    grid-template-columns:
      1fr;
  }

}

.admin-order-grid.single {
  grid-template-columns: 1fr;
}

.admin-order-grid.single
.admin-order-card {
  max-width: 820px;
}



/* ============================================================
   INITIAL PASSWORD
   ============================================================ */

.initial-password-box {
  margin-top: 18px;
  padding: 15px;

  border: 1px solid #e8e1f2;
  border-radius: 12px;

  background: #faf8fd;
}


.initial-password-head strong {
  display: block;

  margin-bottom: 4px;

  color: #312a39;

  font-size: 12px;
}


.initial-password-head span {
  display: block;

  color: #837b8c;

  font-size: 10px;
  line-height: 1.5;
}


.initial-password-value {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 12px;
  padding: 9px 10px;

  border-radius: 9px;

  background:
    var(--theme-card);

  color: #746c7e;

  font-size: 10px;
}


.initial-password-value strong {
  color: #623bd5;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .02em;
}


.login-reset-btn {
  width: 100%;

  margin-top: 9px;
  padding: 10px 12px;

  border: 1px solid #ddd5e9;
  border-radius: 9px;

  background:
    var(--theme-card);
  color: #625a6d;

  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.login-reset-btn:hover {
  border-color: #bcaaf1;

  background: #f8f5ff;
  color: #643ed6;
}


.login-reset-btn:disabled {
  opacity: .55;

  cursor: wait;
}


.initial-password-warning {
  margin: 8px 0 0 !important;

  color: #928a99 !important;

  font-size: 9px !important;
  line-height: 1.5;
}


.change-password-rule {
  display: grid;

  gap: 5px;

  margin-top: 18px;
  padding: 13px;

  border-radius: 10px;

  background: #f7f4fb;

  color: #777080;

  font-size: 10px;
}


.change-password-rule strong {
  margin-bottom: 2px;

  color: #554e5d;

  font-size: 11px;
}


.change-password-logout {
  margin-top: 4px;
}


/* ============================================================
   MANAGER SORT MODE
   ============================================================ */

.manager-sort-control {
  display: flex;
  align-items: center;

  gap: 7px;

  min-height: 36px;

  padding: 4px 5px 4px 11px;

  border: 1px solid #e6e0ed;
  border-radius: 10px;

  background:
    var(--theme-card);
}


.manager-sort-control > span {
  color: #777080;

  font-size: 10px;
  font-weight: 700;

  white-space: nowrap;
}


.manager-sort-control select {
  min-width: 112px;

  padding: 7px 26px 7px 9px;

  border: 0;
  border-radius: 7px;

  background: #f6f3fb;

  color: #4f4758;

  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;

  outline: none;

  cursor: pointer;
}


.manager-sort-control select:hover {
  background: #f0ebfa;
}


.manager-sort-control[hidden] {
  display: none !important;
}

/* 비밀번호 분실 안내 */
.login-help-box {
  margin-top: 18px;
  padding: 14px 15px;

  border: 1px solid #e8e1f2;
  border-radius: 11px;

  background: #faf8fd;
}

.login-help-box strong {
  display: block;

  margin-bottom: 4px;

  color: #51495a;

  font-size: 11px;
  font-weight: 800;
}

.login-help-box span {
  display: block;

  color: #8a8292;

  font-size: 10px;
  line-height: 1.55;
}



/* ============================================================
   INITIAL PASSWORD TOOLTIP
   ============================================================ */

.login-help-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.login-help-text {
  min-width: 0;
}


.initial-password-help {
  position: relative;

  flex: 0 0 auto;
}


.initial-password-help-btn {
  padding: 7px 9px;

  border: 1px solid #ddd5e8;
  border-radius: 8px;

  background:
    var(--theme-card);
  color: #665e70;

  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;
}


.initial-password-help-btn:hover {
  border-color: #bdaaf1;

  background: #f8f5ff;
  color: #633dd4;
}


.initial-password-tooltip[hidden] {
  display: none !important;
}


.initial-password-tooltip {
  position: absolute;

  right: 0;
  bottom: calc(100% + 8px);

  z-index: 30;

  width: 220px;

  padding: 13px;

  border: 1px solid #ddd5e9;
  border-radius: 11px;

  background:
    var(--theme-card);

  box-shadow:
    0 14px 34px
    rgba(38,25,60,.16);
}


.initial-password-tooltip::after {
  content: "";

  position: absolute;

  right: 18px;
  bottom: -6px;

  width: 10px;
  height: 10px;

  border-right: 1px solid #ddd5e9;
  border-bottom: 1px solid #ddd5e9;

  background:
    var(--theme-card);

  transform: rotate(45deg);
}


.initial-password-tooltip-label {
  display: block;

  margin-bottom: 6px;

  color: #8a8292;

  font-size: 9px;
  font-weight: 700;
}


.initial-password-tooltip strong {
  display: block;

  margin-bottom: 7px;

  color: #5f38d1;

  font-size: 16px;
  font-weight: 800;

  letter-spacing: .025em;
}


.initial-password-tooltip small {
  display: block;

  color: #8d8593;

  font-size: 9px;
  line-height: 1.5;
}




/* ============================================================
   UNIFIED ANALYSIS SIDEBAR
   거래처별 / 담당자별 완전 동일 UI
   ============================================================ */


/*
 * hidden 처리만 담당자 메뉴에 별도로 필요
 */
#tabs[hidden],
#managerAnalysisTabs[hidden] {
  display: none !important;
}


/*
 * ------------------------------------------------------------
 * MENU CONTAINER
 *
 * 원본 거래처 메뉴:
 * nav {
 *   display:grid;
 *   gap:8px;
 * }
 *
 * 담당자 메뉴도 정확히 동일
 * ------------------------------------------------------------
 */

#managerAnalysisTabs {
  display: grid;

  gap: 8px;

  width: 100%;
}


/*
 * ------------------------------------------------------------
 * BUTTON
 *
 * 거래처별 원본 nav button과 정확히 동일
 * ------------------------------------------------------------
 */

#managerAnalysisTabs button {
  display: block;

  width: 100%;

  border: 0;

  background: transparent;

  color: #262332;

  text-align: left;

  padding: 13px 14px;

  border-radius: 11px;

  font-family:
    "Pretendard",
    "Noto Sans KR",
    Inter,
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: normal;
  line-height: normal;

  letter-spacing: normal;

  white-space: normal;

  cursor: pointer;

  transition: .2s;
}


/*
 * ------------------------------------------------------------
 * ICON
 *
 * 거래처별 원본:
 *
 * nav button span {
 *   display:inline-block;
 *   width:24px;
 *   color:#6d6780;
 * }
 *
 * 담당자 메뉴에서 첫 번째 span만 아이콘이므로
 * 정확히 동일한 값 적용
 * ------------------------------------------------------------
 */

#managerAnalysisTabs
button > span:first-child {
  display: inline-block;

  width: 24px;

  min-width: 0;
  height: auto;

  margin: 0;
  padding: 0;

  border-radius: 0;

  background: transparent;

  color: #6d6780;

  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  line-height: inherit;

  letter-spacing: normal;

  text-align: left;
}


/*
 * ------------------------------------------------------------
 * LABEL
 *
 * 별도 typography를 없애고
 * 버튼의 14px typography 그대로 상속
 * ------------------------------------------------------------
 */

#managerAnalysisTabs
button > span:last-child {
  display: inline;

  width: auto;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  color: inherit;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  letter-spacing: inherit;

  text-overflow: clip;

  white-space: normal;
}


/*
 * ------------------------------------------------------------
 * HOVER
 *
 * 거래처별 원본:
 * nav button:hover {
 *   background:#f6f3ff;
 * }
 * ------------------------------------------------------------
 */

#managerAnalysisTabs
button:hover {
  background: #f6f3ff;

  color: #262332;

  transform: none;

  box-shadow: none;
}


/*
 * ------------------------------------------------------------
 * ACTIVE
 *
 * 거래처별 원본과 정확히 동일
 * ------------------------------------------------------------
 */

#managerAnalysisTabs
button.active {
  background:
    linear-gradient(
      135deg,
      #6d3ff2,
      #8157f5
    );

  color: #fff;

  box-shadow:
    0 10px 22px
    rgba(109,63,242,.22);

  font-weight: normal;

  transform: none;
}


/*
 * active 아이콘
 */
#managerAnalysisTabs
button.active > span:first-child {
  background: transparent;

  color: #fff;

  font-size: inherit;
  font-weight: normal;
}


/*
 * active label
 */
#managerAnalysisTabs
button.active > span:last-child {
  color: #fff;

  font-size: inherit;
  font-weight: inherit;
}


/*
 * active hover도 거래처 메뉴와 동일
 */
#managerAnalysisTabs
button.active:hover {
  background:
    linear-gradient(
      135deg,
      #6d3ff2,
      #8157f5
    );

  color: #fff;

  box-shadow:
    0 10px 22px
    rgba(109,63,242,.22);
}


/*
 * ------------------------------------------------------------
 * SCROLL TARGET
 * 디자인과 무관한 기능이므로 유지
 * ------------------------------------------------------------
 */

.manager-scroll-target {
  scroll-margin-top: 155px;
}


/*
 * 과거 manager-mode 규칙보다 hidden이 우선
 */
body.manager-mode #tabs[hidden] {
  display: none !important;
}


/* ============================================================
   MANAGER SIDEBAR FONT WEIGHT
   ============================================================ */

#managerAnalysisTabs button,
#managerAnalysisTabs button > span:last-child {
  font-weight: 700 !important;
}


/* active도 동일한 굵기 유지 */
#managerAnalysisTabs button.active,
#managerAnalysisTabs button.active > span:last-child {
  font-weight: 700 !important;
}


/* ============================================================
   MANAGER FILTER LEVEL ALIGN
   ============================================================ */

/*
 * 첫 줄:
 * 기간 / 담당자 범위 / 담당자 / 진료과목 / 급여구분
 *
 * 둘째 줄:
 * 신규/교체 / 성공여부 / OPS / actions
 */
.manager-filter-grid {
  display: grid;

  grid-template-columns:
    1.45fr
    1fr
    1fr
    1fr
    1fr;

  gap: 10px 12px;

  align-items: start;
}


/*
 * 모든 필터 label 레벨 통일
 */
.manager-filter-grid label {
  display: flex;
  flex-direction: column;

  min-width: 0;

  color: #514b5c;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}


/*
 * select / input의 시작 위치와 높이 통일
 */
.manager-filter-grid select,
.manager-filter-grid input {
  width: 100%;
  height: 40px;

  margin-top: 6px;

  padding: 9px 11px;

  border: 1px solid #e3ddeb;
  border-radius: 9px;

  background:
    var(--theme-card);

  color: #2a2633;

  font-family: var(--font-sans);
  font-size: 12px;
}


/*
 * 기간 영역
 */
.manager-filter-grid
.manager-date-filter {
  grid-column: 1;
}


/*
 * 기간 input 두 개
 */
.manager-date-row {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  align-items: center;

  gap: 6px;

  margin-top: 6px;
}


.manager-date-row input {
  height: 40px;

  margin-top: 0;
}


.manager-date-row span {
  color: var(--muted);

  font-size: 11px;

  text-align: center;
}


/*
 * 빠른 기간 버튼은 아래쪽에 작게 유지
 * 첫 줄 필터 높이를 과하게 키우지 않음
 */
.manager-date-presets {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 6px;
}


.manager-date-preset {
  min-height: 25px;

  padding: 5px 8px;

  border: 1px solid #e2dcea;
  border-radius: 8px;

  background:
    var(--theme-card);

  color: #756e80;

  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;

  cursor: pointer;
}


/*
 * 둘째 줄 배치
 */
.manager-filter-grid
label:has(#mChangeType) {
  grid-column: 1;
}

.manager-filter-grid
label:has(#mResult) {
  grid-column: 2;
}

.manager-filter-grid
label:has(#mOps) {
  grid-column: 3;
}


/*
 * 초기화 / 조회는 오른쪽 끝
 */
.manager-filter-actions {
  grid-column: 5;

  display: flex;

  align-items: end;
  justify-content: flex-end;

  gap: 7px;

  min-height: 40px;

  padding-top: 17px;
}


/*
 * 혹시 담당자 범위/담당자 등 특정 요소가
 * 별도 width를 갖고 있으면 해제
 */
#mManagerStatus,
#mManager,
#mDepartment,
#mPayType,
#mChangeType,
#mResult,
#mOps {
  min-width: 0 !important;
  width: 100% !important;
}


/* ============================================================
   FILTER RESULT TRANSITION
   ============================================================ */

/*
 * 필터 자체는 그대로 유지하고
 * 조회 결과 영역만 부드럽게 전환합니다.
 */

#managerAnalysis {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

#managerAnalysis.filter-updating {
  opacity: .58;
  transform: translateY(3px);
}


/*
 * 사용자가 OS에서
 * 모션 감소 옵션을 사용하는 경우 대응
 */
@media (prefers-reduced-motion: reduce) {

  #managerAnalysis {
    transition: none;
  }

  #managerAnalysis.filter-updating {
    transform: none;
  }
}



/* ============================================================
   FILTER RESULT MOTION V2
   빠르고 가벼운 데이터 갱신 피드백
   ============================================================ */


/*
 * 기존 manager 전체 화면 fade 완전 무효화
 */
#managerAnalysis {
  opacity: 1 !important;
  transform: none !important;
}


/*
 * 거래처별:
 * 필터/header는 움직이지 않고
 * 결과 panel만 전환
 */
#customerAnalysis .panel {
  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out;
}


/*
 * 담당자별:
 * 필터/header 제외
 *
 * manager-filter-card 다음에 나오는
 * 실제 통계 영역들만 적용
 */
#managerAnalysis
.manager-filter-card ~ section,
#managerAnalysis
.manager-filter-card ~ div {
  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out;
}


/*
 * 조회 시작
 *
 * opacity를 크게 낮추지 않습니다.
 * 이동도 1px 정도만 줍니다.
 */
#customerAnalysis.filter-refreshing
.panel.active {
  opacity: .92;
  transform: scale(.997);
}


#managerAnalysis.filter-refreshing
.manager-filter-card ~ section,
#managerAnalysis.filter-refreshing
.manager-filter-card ~ div {
  opacity: .92;
  transform: scale(.997);
}


/*
 * 필터 자체는 항상 정상 상태
 */
#customerAnalysis .filter-card,
#managerAnalysis .manager-filter-card,
#customerAnalysis header,
#managerAnalysis header {
  opacity: 1 !important;
  transform: none !important;
}


/*
 * motion 감소 환경
 */
@media (prefers-reduced-motion: reduce) {

  #customerAnalysis .panel,
  #managerAnalysis
  .manager-filter-card ~ section,
  #managerAnalysis
  .manager-filter-card ~ div {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   CUSTOMER FILTER MOTION FINAL
   화면 fade/scale 제거 - 차트 자체 애니메이션만 사용
   ============================================================ */

#customerAnalysis,
#customerAnalysis.filter-refreshing,
#customerAnalysis .panel,
#customerAnalysis.filter-refreshing .panel,
#customerAnalysis.filter-refreshing .panel.active {
  opacity: 1 !important;
  transform: none !important;
}

#customerAnalysis .panel {
  transition: none !important;
}



/* ============================================================
   CHECKED COMBO
   ============================================================ */

.manager-check-filter {
  position: relative;
}

.checked-combo {
  position: relative;
  width: 100%;
}

.checked-combo-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.checked-combo-button {
  width: 100%;
  min-height: 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 0 12px;

  border: 1px solid var(--theme-line-strong);
  border-radius: 8px;

  background: var(--theme-surface-strong);
  color: var(--theme-text);

  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.checked-combo-button:hover {
  border-color: var(--theme-accent-3);
}

.checked-combo-button[aria-expanded="true"] {
  border-color: var(--theme-accent);
  box-shadow:
    0 0 0 3px rgba(116,100,215,.10);
}

.checked-combo-button-arrow {
  flex: 0 0 auto;
  color: var(--theme-muted);
  font-size: 11px;
}

.checked-combo-menu {
  position: absolute;
  z-index: 1000;

  top: calc(100% + 6px);
  left: 0;
  right: 0;

  max-height: 320px;
  overflow-y: auto;

  padding: 6px;

  border: 1px solid var(--theme-line-strong);
  border-radius: 10px;

  background: var(--theme-surface-strong);
  color: var(--theme-text-2);

  box-shadow:
    0 12px 30px rgba(40,30,70,.14);
}

.checked-combo-menu[hidden] {
  display: none !important;
}

.checked-combo-option {
  width: 100%;
  min-height: 36px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 7px 9px;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: #302a38;

  font-family:
    "Pretendard",
    "Pretendard Variable",
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.12px;

  text-align: left;

  cursor: pointer;
}

.checked-combo-option:hover {
  background: #f6f4fa;
}

.checked-combo-option.selected {
  background: #f0edff;
  color: #4433a5;
}

.checked-combo-checkbox {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #c8c1d7;
  border-radius: 5px;

  background:
    var(--theme-card);

  font-size: 12px;
  line-height: 1;
}

.checked-combo-option.selected
.checked-combo-checkbox {
  border-color: #6756cf;
  background: #6756cf;
  color: #fff;
}

.checked-combo-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* ============================================================
   MANAGER ALLOWANCE ANALYSIS
   ============================================================ */

.manager-allowance-section {
  margin-top: 24px;
}

.manager-allowance-kpis {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.manager-allowance-grid {
  margin-bottom: 18px;
}

.manager-allowance-distribution-card {
  margin-bottom: 18px;
}

.manager-allowance-detail-card {
  overflow: hidden;
}

.manager-allowance-table {
  min-width: 1120px;
}

.allowance-positive {
  color:
    var(--theme-success) !important;
}

.allowance-negative {
  color:
    var(--theme-danger) !important;
}

.allowance-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.allowance-status.eligible {
  background: #edf8f2;
  color: #197a4a;
}

.allowance-status.excluded {
  background: #fff0f0;
  color: #b33b3b;
}

@media (max-width: 1200px) {
  .manager-allowance-kpis {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .manager-allowance-kpis {
    grid-template-columns:
      1fr 1fr;
  }
}


/* ============================================================
   METRIC TOOLTIP
   ============================================================ */

.metric-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.metric-info,
.table-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8b8494;
  font-size: 14px;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}

.table-info {
  width: 16px;
  height: 16px;
  font-size: 12px;
}

.metric-info:hover,
.metric-info:focus-visible,
.table-info:hover,
.table-info:focus-visible {
  color: #5d5268;
  outline: none;
}


/*
 * CSS tooltip
 *
 * fixed overlay가 아니라 요소 기준으로 표시하므로
 * 별도 JS 라이브러리가 필요하지 않습니다.
 */

.metric-info::after,
.table-info::after {
  content: attr(data-tooltip);

  position: absolute;
  z-index: 9999;

  left: 50%;
  bottom: calc(100% + 10px);

  width: max-content;
  max-width: 320px;

  padding: 10px 12px;

  border-radius: 8px;

  background: #2f2935;
  color: #fff;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.16);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translate(
      -50%,
      4px
    );

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;
}


.metric-info::before,
.table-info::before {
  content: '';

  position: absolute;
  z-index: 10000;

  left: 50%;
  bottom: calc(100% + 4px);

  border-width: 6px 6px 0;
  border-style: solid;
  border-color:
    #2f2935
    transparent
    transparent;

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(-50%);

  transition:
    opacity .14s ease,
    visibility .14s ease;
}


.metric-info:hover::after,
.metric-info:hover::before,
.metric-info:focus-visible::after,
.metric-info:focus-visible::before,
.table-info:hover::after,
.table-info:hover::before,
.table-info:focus-visible::after,
.table-info:focus-visible::before {
  opacity: 1;
  visibility: visible;
}


.metric-info:hover::after,
.metric-info:focus-visible::after,
.table-info:hover::after,
.table-info:focus-visible::after {
  transform:
    translate(
      -50%,
      0
    );
}


/*
 * KPI 카드에서는 tooltip이 카드 overflow에
 * 잘리지 않도록 허용
 */

.manager-kpi {
  overflow: visible;
}


/*
 * 좁은 화면에서는 tooltip 폭 제한
 */

@media (max-width: 760px) {

  .metric-info::after,
  .table-info::after {
    width: 240px;
    max-width: 70vw;
  }
}


/* ============================================================
   TOOLTIP - FINAL METRIC WIDTH
   KPI metric tooltip only
   ============================================================ */

.metric-info::after {
  width: 320px;
  max-width: calc(100vw - 24px);

  box-sizing: border-box;

  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;

  line-height: 1.55;
}


/*
 * 화면 오른쪽에 있는 KPI는
 * tooltip 중심 정렬 대신 오른쪽 기준으로 표시
 */
.metric-info.tooltip-right::after {
  left: auto;
  right: 0;

  transform:
    translate(
      0,
      4px
    );
}


.metric-info.tooltip-right::before {
  left: auto;
  right: 4px;

  transform: none;
}


@media (max-width: 760px) {

  .metric-info::after {
    width: min(280px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

}


/* ============================================================
   ALLOWANCE DETAIL COLLAPSE / PAGINATION
   ============================================================ */

.manager-allowance-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.manager-allowance-detail-toggle {
  min-width: 130px;
}

.manager-allowance-detail-card {
  margin-top: 12px;
}

.manager-allowance-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 6px;

  padding:
    16px 12px
    4px;
}

.allowance-page-btn {
  min-width: 34px;
  height: 34px;

  padding: 0 10px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius:
    8px;

  background:
    var(--theme-surface-strong);

  color:
    var(--theme-text-2);

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;
}

.allowance-page-btn:hover:not(:disabled) {
  border-color:
    var(--theme-accent);

  color:
    var(--theme-accent);
}

.allowance-page-btn.active {
  border-color:
    var(--theme-accent);

  background:
    var(--theme-accent);

  color:
    #fff;
}

.allowance-page-btn:disabled {
  opacity: .35;
  cursor: default;
}


/* ============================================================
   ALLOWANCE PAGINATION - COMPACT
   ============================================================ */

.manager-allowance-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;

  gap: 5px;

  padding: 16px 12px 4px;
}


.allowance-page-btn {
  min-width: 34px;
  height: 34px;
  flex: 0 0 auto;
}


.allowance-page-nav {
  font-size: 17px;
}


.allowance-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 26px;
  height: 34px;

  color: var(--theme-muted);

  font-size: 14px;
  font-weight: 700;
}


/*
 * 기존 접기 버튼 스타일은 더 이상 사용하지 않음
 */
.manager-allowance-detail-actions,
.manager-allowance-detail-toggle {
  display: none !important;
}


/* ============================================================
   ALLOWANCE DETAIL STATUS FILTER
   ============================================================ */

.manager-allowance-detail-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}


.manager-allowance-status-filter {
  display: flex;
  align-items: center;
  gap: 8px;

  flex: 0 0 auto;

  margin: 0;

  color: #5b5366;

  font-size: 12px;
  font-weight: 700;
}


.manager-allowance-status-filter > span {
  white-space: nowrap;
}


.manager-allowance-status-filter select {
  height: 36px;

  min-width: 110px;

  box-sizing: border-box;

  padding: 0 32px 0 11px;

  border: 1px solid #ddd7e7;
  border-radius: 9px;

  background-color: #fff;

  color: #4c4657;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}


.manager-allowance-status-filter select:hover {
  border-color: #c7bdd9;
}


.manager-allowance-status-filter select:focus {
  outline: none;

  border-color: #8b72d9;

  box-shadow:
    0 0 0 3px
    rgba(87,49,206,.08);
}


@media (max-width: 760px) {

  .manager-allowance-detail-title {
    align-items: stretch;
    flex-direction: column;
  }


  .manager-allowance-status-filter {
    justify-content: flex-end;
  }
}


/* ============================================================
   ALLOWANCE DETAIL TABLE WIDTH
   ============================================================ */

.manager-allowance-table {
  min-width: 0;
  width: 100%;
  table-layout: auto;
}


/*
 * 각 컬럼이 실제 내용에 맞게 배치되도록 설정
 */

.manager-allowance-table th,
.manager-allowance-table td {
  white-space: nowrap;
}


/*
 * 가동월 / 지급월
 */
.manager-allowance-table th:nth-child(1),
.manager-allowance-table td:nth-child(1),
.manager-allowance-table th:nth-child(2),
.manager-allowance-table td:nth-child(2) {
  width: 13%;
}


/*
 * 투입일수
 */
.manager-allowance-table th:nth-child(3),
.manager-allowance-table td:nth-child(3) {
  width: 10%;
}


/*
 * 금액 3개
 */
.manager-allowance-table th:nth-child(4),
.manager-allowance-table td:nth-child(4),
.manager-allowance-table th:nth-child(5),
.manager-allowance-table td:nth-child(5),
.manager-allowance-table th:nth-child(6),
.manager-allowance-table td:nth-child(6) {
  width: 16%;
}


/*
 * 수당 대상
 */
.manager-allowance-table th:nth-child(7),
.manager-allowance-table td:nth-child(7) {
  width: 16%;
}


/* ============================================================
   MANAGER FILTER - STICKY
   담당자 통계 스크롤 시 필터 상단 고정
   ============================================================ */

#managerAnalysis .manager-filter-card {
  position: sticky;

  /*
   * 브라우저 최상단과 약간 간격 유지
   */
  top: 10px;

  z-index: 200;

  /*
   * 아래 컨텐츠가 비쳐 보이지 않도록
   */
  background: rgba(255, 255, 255, 0.97);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 8px 24px
    rgba(53, 37, 90, 0.08);
}


/*
 * sticky 카드가 화면에 붙었을 때도
 * checked combo 메뉴가 위로 잘리지 않도록
 */
#managerAnalysis .manager-filter-card
.checked-combo-menu {
  z-index: 500;
}



/* ============================================================
   ALLOWANCE DETAIL TABLE
   9개 컬럼 기준으로 전체 폭 재설정
   ============================================================ */

.manager-allowance-detail-card
.manager-table-wrap {
  width: 100%;

  /*
   * 정상 데스크톱 폭에서는
   * 불필요한 가로 스크롤 제거
   */
  overflow-x: auto;
}


.manager-allowance-table {
  width: 100% !important;
  min-width: 0 !important;

  table-layout: fixed;
}


.manager-allowance-table th,
.manager-allowance-table td {
  white-space: nowrap;
  box-sizing: border-box;
}


/*
 * 1. 거래처
 */
.manager-allowance-table th:nth-child(1),
.manager-allowance-table td:nth-child(1) {
  width: 22%;
  text-align: left;
}


/*
 * 2. 담당자
 */
.manager-allowance-table th:nth-child(2),
.manager-allowance-table td:nth-child(2) {
  width: 9%;
}


/*
 * 3. 가동월
 */
.manager-allowance-table th:nth-child(3),
.manager-allowance-table td:nth-child(3) {
  width: 8%;
}


/*
 * 4. 지급월
 */
.manager-allowance-table th:nth-child(4),
.manager-allowance-table td:nth-child(4) {
  width: 8%;
}


/*
 * 5. 투입일수
 */
.manager-allowance-table th:nth-child(5),
.manager-allowance-table td:nth-child(5) {
  width: 8%;
}


/*
 * 6. 미대상 포함
 */
.manager-allowance-table th:nth-child(6),
.manager-allowance-table td:nth-child(6) {
  width: 12%;
}


/*
 * 7. 실제 수령
 */
.manager-allowance-table th:nth-child(7),
.manager-allowance-table td:nth-child(7) {
  width: 12%;
}


/*
 * 8. 수령액 차이
 */
.manager-allowance-table th:nth-child(8),
.manager-allowance-table td:nth-child(8) {
  width: 12%;
}


/*
 * 9. 수당 대상
 */
.manager-allowance-table th:nth-child(9),
.manager-allowance-table td:nth-child(9) {
  width: 9%;
}


/*
 * 거래처명이 길면 셀 내부에서 말줄임
 */
.manager-allowance-table td:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
}


/*
 * 충분히 넓은 데스크톱에서는
 * scrollbar 자체가 생기지 않아야 정상
 */
@media (min-width: 1100px) {

  .manager-allowance-detail-card
  .manager-table-wrap {
    overflow-x: visible;
  }
}


/*
 * 작은 화면에서만 최소폭 확보 후
 * 가로 스크롤 허용
 */
@media (max-width: 1099px) {

  .manager-allowance-table {
    min-width: 980px !important;
  }

  .manager-allowance-detail-card
  .manager-table-wrap {
    overflow-x: auto;
  }
}


/* ============================================================
   ALLOWANCE DETAIL TABLE - HEADER READABILITY
   ============================================================ */

.manager-allowance-table thead th {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4;

  padding-top: 12px !important;
  padding-bottom: 12px !important;

  color: #5b5366;
}


/* 헤더의 안내 아이콘도 글자 크기에 맞춤 */
.manager-allowance-table thead .table-info {
  width: 17px;
  height: 17px;

  margin-left: 3px;

  font-size: 12px;
}


/* 본문과 헤더 크기 차이가 과하지 않도록 */
.manager-allowance-table tbody td {
  font-size: 13px;
}


/* ============================================================
   CHECKED COMBO NATIVE SELECT
   실제 값 보관용 select는 레이아웃에서 완전히 제거
   ============================================================ */

.checked-combo-native {
  position: absolute !important;

  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;

  height: 1px !important;
  min-height: 1px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;

  opacity: 0 !important;

  pointer-events: none !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}


/*
 * checked combo 자체는 부모 폭 안에서만 사용
 */
.checked-combo {
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: 100%;
}


.checked-combo-button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/*
 * 필터 grid child가 내용 때문에
 * 부모보다 넓어지지 않도록 방지
 */
.manager-filter-grid > * {
  min-width: 0;
}


/* ============================================================
   MANAGER FILTER - COMPACT STICKY MODE
   ============================================================ */

#managerAnalysis .manager-filter-card {
  position: sticky;
  top: 8px;

  z-index: 300;

  transition:
    padding .16s ease,
    box-shadow .16s ease,
    border-radius .16s ease;
}


/*
 * ==========================================================
 * 스크롤 전
 * 기존 원본 필터 디자인 그대로 유지
 * ==========================================================
 */


/*
 * ==========================================================
 * 스크롤 후 축약형
 * ==========================================================
 */

#managerAnalysis
.manager-filter-card.manager-filter-compact {
  padding: 9px 12px !important;

  border-radius: 12px;

  background:
    rgba(255,255,255,.97);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 8px 28px
    rgba(49,35,82,.14);
}


/*
 * 날짜 프리셋은 축약 상태에서 숨김
 */
#managerAnalysis
.manager-filter-compact
.manager-date-presets {
  display: none !important;
}


/*
 * 한 줄 grid
 *
 * 기간은 조금 넓게,
 * 나머지는 균등 분배
 */
#managerAnalysis
.manager-filter-compact
.manager-filter-grid {
  display: grid !important;

  grid-template-columns:
    minmax(250px, 1.35fr)
    minmax(120px, .8fr)
    minmax(125px, .9fr)
    minmax(125px, 1fr)
    minmax(115px, .9fr)
    minmax(115px, .9fr)
    minmax(115px, .9fr)
    minmax(105px, .8fr)
    auto;

  align-items: end;

  gap: 8px;

  width: 100%;
}


/*
 * label 높이 최소화
 */
#managerAnalysis
.manager-filter-compact
.manager-filter-grid > label {
  min-width: 0;

  margin: 0;

  font-size: 10px;
  line-height: 1.15;

  color: #6d6577;
}


/*
 * input / select / checked combo 높이 축소
 */
#managerAnalysis
.manager-filter-compact
.manager-filter-grid input,

#managerAnalysis
.manager-filter-compact
.manager-filter-grid select,

#managerAnalysis
.manager-filter-compact
.checked-combo-button {

  height: 34px !important;
  min-height: 34px !important;

  padding-top: 5px !important;
  padding-bottom: 5px !important;

  font-size: 11px !important;

  border-radius: 8px !important;
}


/*
 * 날짜 2개도 한 줄 유지
 */
#managerAnalysis
.manager-filter-compact
.manager-date-row {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  gap: 5px;

  align-items: center;
}


#managerAnalysis
.manager-filter-compact
.manager-date-row input {
  min-width: 0;
  width: 100%;
}


/*
 * 초기화 버튼 축소
 */
#managerAnalysis
.manager-filter-compact
.manager-filter-actions {
  align-self: end;

  margin: 0;
}


#managerAnalysis
.manager-filter-compact
#mReset {
  height: 34px;

  padding:
    0 14px;

  white-space: nowrap;

  font-size: 11px;
}


/*
 * checked combo 메뉴는 compact filter보다 위에 표시
 */
#managerAnalysis
.manager-filter-compact
.checked-combo-menu {
  z-index: 600;
}


/*
 * 필터 카드 내부 요소 때문에
 * 가로 폭이 다시 늘어나지 않도록
 */
#managerAnalysis
.manager-filter-compact
.manager-filter-grid > * {
  min-width: 0;
}


/*
 * 작은 화면에서는 기존 2줄 구조가 더 안전
 * compact sticky만 비활성
 */
@media (max-width: 1250px) {

  #managerAnalysis
  .manager-filter-card.manager-filter-compact
  .manager-filter-grid {

    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );
  }

  #managerAnalysis
  .manager-filter-card.manager-filter-compact {
    position: static;
  }
}


/* ============================================================
   ORIGINAL MANAGER FILTER
   원본 필터는 일반 document flow에 그대로 둠
   ============================================================ */

#managerAnalysis .manager-filter-card {
  position: relative !important;
  top: auto !important;

  z-index: auto !important;
}


/*
 * sentinel은 레이아웃을 바꾸지 않음
 */
.manager-filter-sentinel {
  width: 100%;
  height: 1px;

  margin: 0;
  padding: 0;

  pointer-events: none;
}


/* ============================================================
   MANAGER MINI FILTER
   ============================================================ */

.manager-mini-filter {
  position: fixed;

  top: 10px;
  left: 194px;
  right: 18px;

  z-index: 1000;

  pointer-events: none;
}


.manager-mini-filter[hidden] {
  display: none !important;
}


.manager-mini-filter-inner {
  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 52px;

  padding:
    7px 9px
    7px 14px;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    14px;

  background:
    var(--theme-surface-alpha);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 30px
    rgba(45,30,75,.14);

  pointer-events: auto;
}


.manager-mini-item {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;

  padding-right: 12px;

  border-right:
    1px solid
    var(--theme-line);
}


.manager-mini-period {
  flex: 1 1 auto;
}


.manager-mini-label {
  flex: 0 0 auto;

  font-size: 10px;
  font-weight: 700;

  color:
    var(--theme-muted);
}


.manager-mini-item strong {
  overflow: hidden;

  max-width: 260px;

  color:
    var(--theme-text);

  font-size: 12px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.manager-mini-filter-open {
  flex: 0 0 auto;

  height: 36px;

  padding:
    0 16px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius:
    9px;

  background:
    var(--theme-surface-strong);

  color:
    var(--theme-text-2);

  font-size:
    11px;
  font-weight:
    700;

  cursor:
    pointer;
}


.manager-mini-filter-open:hover {
  border-color:
    var(--theme-accent);

  color:
    var(--theme-accent);
}


@media (max-width: 1250px) {

  .manager-mini-filter {
    left: 12px;
    right: 12px;
  }
}


/* ============================================================
   MANAGER MINI FILTER DETAIL PANEL
   ============================================================ */

.manager-mini-filter {
  pointer-events: none;
}

.manager-mini-filter-inner,
.manager-mini-filter-detail {
  pointer-events: auto;
}


.manager-mini-filter-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 6px;

  padding: 10px 12px;

  border:
    1px solid
    var(--theme-line);

  border-radius: 12px;

  background:
    var(--theme-surface-alpha);

  box-shadow:
    0 10px 26px
    rgba(45,30,75,.12);
}


.manager-mini-filter-detail[hidden] {
  display: none !important;
}


.manager-mini-filter-chip,
.manager-mini-filter-reset {
  height: 34px;

  padding:
    0 12px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius: 8px;

  background:
    var(--theme-surface-strong);

  color:
    var(--theme-text-2);

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.manager-mini-filter-chip:hover,
.manager-mini-filter-reset:hover {
  border-color:
    var(--theme-accent);

  color:
    var(--theme-accent);
}


/* ============================================================
   MANAGER MINI CHECKED FILTER
   ============================================================ */

.manager-mini-filter-chip.has-value {
  border-color:
    var(--theme-accent-3);

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);
}


.manager-mini-filter-chip.active {
  border-color:
    var(--theme-accent);

  background:
    var(--theme-accent);

  color:
    #fff;
}


/*
 * 옵션 메뉴는 상세필터 줄 아래 전체 폭 사용
 */
.manager-mini-option-menu {
  flex:
    1 0 100%;

  max-height:
    280px;

  overflow-y:
    auto;

  margin-top:
    2px;

  padding:
    6px;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    10px;

  background:
    var(--theme-surface-strong);

  box-shadow:
    0 8px 22px
    rgba(45,30,75,.10);
}


.manager-mini-option-menu[hidden] {
  display:
    none !important;
}


.manager-mini-option {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-height:
    34px;

  padding:
    6px 9px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #51495a;

  font-size:
    12px;

  text-align:
    left;

  cursor:
    pointer;
}


.manager-mini-option:hover {
  background:
    #f7f4fb;
}


.manager-mini-option.selected {
  background:
    #f0eaff;

  color:
    #5e38d5;

  font-weight:
    700;
}


.manager-mini-option-check {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 18px;

  width:
    18px;

  height:
    18px;

  border:
    1px solid
    #d4ccdf;

  border-radius:
    5px;

  background:
    var(--theme-surface-strong);

  color:
    #7047e8;

  font-size:
    11px;

  font-weight:
    900;
}


.manager-mini-option.selected
.manager-mini-option-check {
  border-color:
    #8b68ee;

  background:
    #eee7ff;
}


/* ============================================================
   MANAGER MINI FILTER - ACTIVE FILTER CHIPS
   ============================================================ */

.manager-mini-active-filters {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;

  flex: 0 1 auto;

  overflow: hidden;
}


.manager-mini-active-filters:not(.has-filters) {
  display: none;
}


.manager-mini-active-chip {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  min-width: 0;
  max-width: 190px;

  height: 32px;

  padding:
    0 5px
    0 9px;

  border:
    1px solid
    #dfd6f2;

  border-radius:
    999px;

  background:
    #f7f3ff;

  color:
    #51445f;

  white-space:
    nowrap;
}


.manager-mini-active-chip-label {
  flex: 0 0 auto;

  color:
    #91869d;

  font-size:
    9px;

  font-weight:
    700;
}


.manager-mini-active-chip strong {
  min-width: 0;

  overflow:
    hidden;

  color:
    #5c3bc2;

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manager-mini-active-chip-remove {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 22px;

  width:
    22px;

  height:
    22px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #89799d;

  font-size:
    16px;

  line-height:
    1;

  cursor:
    pointer;
}


.manager-mini-active-chip-remove:hover {
  background:
    #e9e0fa;

  color:
    #5f3cc9;
}


/*
 * 기간이 너무 넓어서
 * 상세 필터가 밀려나지 않도록 제한
 */
.manager-mini-period {
  flex:
    0 1 290px;
}


.manager-mini-period strong {
  max-width:
    220px;
}


/*
 * 적용 필터가 많으면
 * 한 줄을 유지하면서 가로 스크롤 가능
 */
.manager-mini-active-filters.has-filters {
  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.manager-mini-active-filters.has-filters::-webkit-scrollbar {
  display:
    none;
}


/*
 * 필터보기 버튼은 절대 밀리지 않음
 */
.manager-mini-filter-open {
  flex:
    0 0 auto;

  margin-left:
    auto;
}


/* ============================================================
   CUSTOMER MINI FILTER
   ============================================================ */

.customer-mini-filter {
  /*
   * manager mini filter와 동일한 위치
   * 한 번에 하나만 표시됨
   */
}


.customer-mini-filter-detail {
  padding:
    10px 12px;
}


.customer-mini-detail-grid {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(110px, 1fr)
    )
    auto;

  align-items: end;

  gap: 8px;

  width: 100%;
}


.customer-mini-control {
  display: flex;
  flex-direction: column;

  gap: 4px;

  min-width: 0;
}


.customer-mini-control > span {
  color: #766c81;

  font-size: 9px;
  font-weight: 700;
}


.customer-mini-control select {
  width: 100%;
  min-width: 0;
  height: 34px;

  padding:
    0 9px;

  border:
    1px solid #ddd6e8;

  border-radius:
    8px;

  background:
    var(--theme-surface-strong);

  color:
    #3f3749;

  font-size:
    11px;

  font-weight:
    600;
}


.customer-mini-reset {
  height: 34px;

  white-space: nowrap;
}


.customer-mini-active-filters {
  flex: 1 1 auto;
  min-width: 0;
}


/*
 * 상세 필터가 많아도
 * 상단 미니바는 1줄 유지
 */
.customer-mini-filter
.manager-mini-filter-inner {
  min-width: 0;
}


@media (max-width: 1250px) {

  .customer-mini-detail-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

}


/* ============================================================
   ANALYSIS MODE HARD SEPARATION
   ============================================================ */

/*
 * 기본 = 거래처별 통계
 */
body:not(.manager-mode) #managerAnalysis {
  display: none !important;
}

body:not(.manager-mode) #customerAnalysis {
  display: block;
}


/*
 * 담당자별 통계
 */
body.manager-mode #customerAnalysis {
  display: none !important;
}

body.manager-mode #managerAnalysis {
  display: block;
}


/*
 * HTML hidden 속성도 항상 우선
 */
#customerAnalysis[hidden],
#managerAnalysis[hidden] {
  display: none !important;
}


/* ============================================================
   MANAGER COMPARE V2
   ============================================================ */

.manager-work-compare-section {
  margin-top: 22px;
}


.manager-work-compare-head {
  margin-bottom: 12px;
}


.manager-work-tabs {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 10px;

  padding: 4px;

  width: max-content;
  max-width: 100%;

  overflow-x: auto;

  border:
    1px solid
    var(--theme-line);

  border-radius: 10px;

  background:
    var(--theme-surface-soft);
}


.manager-work-tab {
  flex: 0 0 auto;

  min-height: 34px;

  padding: 0 14px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color:
    var(--theme-muted);

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}


.manager-work-tab:hover {
  background:
    var(--theme-surface-hover);

  color:
    var(--theme-text);
}


.manager-work-tab.active {
  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

  box-shadow:
    0 1px 4px
    rgba(51,38,73,.12);
}


.manager-work-compare-card {
  padding-bottom: 8px;
}


.manager-work-compare-chart {
  width: 100%;

  /*
   * JS 렌더 전 기본 높이.
   * 실제 렌더 후에는 담당자 수에 따라
   * manager.js에서 동적으로 변경됩니다.
   */
  height: 430px;
}


.manager-rate-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}


.manager-rate-switch {
  display: inline-flex;
  flex: 0 0 auto;

  gap: 3px;

  padding: 3px;

  border:
    1px solid
    var(--theme-line);

  border-radius: 8px;

  background:
    var(--theme-surface-soft);
}


.manager-rate-mode {
  height: 28px;

  padding: 0 9px;

  border: 0;
  border-radius: 6px;

  background: transparent;

  color: #81768d;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;
}


.manager-rate-mode.active {
  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

  box-shadow:
    0 1px 3px
    rgba(52,39,71,.12);
}


@media (max-width: 900px),
       (orientation: landscape)
       and (max-height: 600px)
       and (max-width: 1200px) {

  .manager-work-compare-head {
    align-items: flex-start;
    flex-direction: column;
  }


  .manager-work-tabs {
    width: 100%;
  }


  .manager-rate-card-title {
    flex-direction: column;
  }

}

/* ============================================================
   MANAGER FILTER UI
   담당자 범위 / 담당자 / 진료과목 / 급여구분 /
   신규·교체 / 성공여부 / OPS
   ============================================================ */


/* ------------------------------------------------------------
   담당자 범위 custom select
   ------------------------------------------------------------ */

.manager-status-filter {
  min-width: 0;
}

.manager-status-combo {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 6px;
}

.manager-status-native {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;

  opacity: 0 !important;
  pointer-events: none !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}


/* ------------------------------------------------------------
   필터 라벨
   ------------------------------------------------------------ */

.manager-filter-card
.manager-filter-grid
> label,

.manager-filter-card
.manager-status-filter,

.manager-filter-card
.manager-check-filter {
  min-width: 0;

  align-self: start;

  font-family:
    "Pretendard",
    "Noto Sans KR",
    Inter,
    Arial,
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 16px;

  letter-spacing: -0.01em;

  color: #4b4657;
}


/* ------------------------------------------------------------
   콤보 wrapper
   ------------------------------------------------------------ */

.manager-filter-card
.manager-status-combo,

.manager-filter-card
.checked-combo {
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin-top: 6px;

  top: auto;
  transform: none;
}


/* ------------------------------------------------------------
   닫힌 콤보 버튼
   ------------------------------------------------------------ */

.manager-filter-card
.manager-status-button,

.manager-filter-card
.checked-combo-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  height: 42px;
  min-height: 42px;
  max-height: 42px;

  margin: 0;

  padding: 0 34px 0 12px;

  border: 1px solid var(--theme-line-strong);
  border-radius: 9px;

  background: var(--theme-surface-strong);

  box-shadow: none;

  font-family:
    "Pretendard",
    "Noto Sans KR",
    Inter,
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.02em;

  color: var(--theme-text);

  text-align: left;

  cursor: pointer;
}


/* 표시 텍스트 */
.manager-filter-card
.manager-status-button
> span:not(.manager-status-arrow),

.manager-filter-card
.checked-combo-button
> span:not(.checked-combo-button-arrow) {
  min-width: 0;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;

  color: var(--theme-text);
}


/* hover */
.manager-filter-card
.manager-status-button:hover,

.manager-filter-card
.checked-combo-button:hover {
  border-color: #cfc6df;
}


/* 열린 상태 */
.manager-filter-card
.manager-status-combo.open
.manager-status-button,

.manager-filter-card
.checked-combo.open
.checked-combo-button {
  border-color: #7146ef;

  box-shadow:
    0 0 0 1px
    rgba(113, 70, 239, .08);
}


/* ------------------------------------------------------------
   화살표
   담당자 범위 디자인을 전체 기준으로 사용
   ------------------------------------------------------------ */

.manager-filter-card
.manager-status-arrow,

.checked-combo-button-arrow {
  position: absolute;

  top: 50%;
  right: 13px;

  display: block;

  width: 6px;
  height: 6px;

  margin: 0;
  padding: 0;

  border: 0;

  border-right: 1px solid #777286;
  border-bottom: 1px solid #777286;

  border-radius: 0;

  background: transparent;

  color: transparent;

  font-size: 0;
  line-height: 0;

  transform:
    translateY(-65%)
    rotate(45deg);

  transition:
    transform .15s ease;

  pointer-events: none;
}


/* 열린 상태 화살표 */
.manager-filter-card
.manager-status-combo.open
.manager-status-arrow,

.checked-combo.open
.checked-combo-button-arrow {
  transform:
    translateY(-35%)
    rotate(225deg);
}


/* ------------------------------------------------------------
   담당자 범위 dropdown
   ------------------------------------------------------------ */

.manager-status-menu {
  position: absolute;

  top: calc(100% + 6px);
  left: 0;

  z-index: 1000;

  width: 100%;
  min-width: 150px;

  padding: 7px;

  border: 1px solid var(--theme-line);
  border-radius: 10px;

  background: var(--theme-surface-strong);

  box-shadow:
    0 8px 20px
    rgba(48, 31, 91, .10);
}

.manager-status-menu[hidden] {
  display: none !important;
}


/* ------------------------------------------------------------
   담당자 범위 option
   ------------------------------------------------------------ */

.manager-status-option {
  display: flex;
  align-items: center;

  gap: 9px;

  width: 100%;
  min-height: 35px;

  padding: 8px 9px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  font-family:
    "Pretendard",
    "Noto Sans KR",
    Inter,
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  line-height: 18px;

  letter-spacing: -0.02em;

  color: #211d2b;

  text-align: left;

  cursor: pointer;
}

.manager-status-option:hover {
  background: #f5f2ff;
}


/* ------------------------------------------------------------
   담당자 범위 checkbox
   ------------------------------------------------------------ */

.manager-status-radio {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  border: 1px solid #d4cce6;
  border-radius: 5px;

  background:
    var(--theme-card);
}

.manager-status-option.selected
.manager-status-radio {
  border-color: #7350e8;
  background: #7350e8;
}

.manager-status-option.selected
.manager-status-radio::after {
  content: "✓";

  color: #fff;

  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}


/* ------------------------------------------------------------
   선택 상태
   선택/미선택 폰트 크기와 굵기는 동일.
   색상만 변경.
   ------------------------------------------------------------ */

.manager-status-option.selected {
  background: #eee9ff;
}

.manager-status-option
> span:not(.manager-status-radio) {
  font-size: 13px;
  font-weight: 600;

  color: #211d2b;
}

.manager-status-option.selected
> span:not(.manager-status-radio) {
  font-size: 13px;
  font-weight: 600;

  color: #633ce2;
}


/* ------------------------------------------------------------
   권한 잠금
   ------------------------------------------------------------ */

.manager-filter-locked
.manager-status-button {
  opacity: .62;

  cursor: default;

  background: #f7f5fa;
}


/* ------------------------------------------------------------
   개별 checked-combo 위치도 동일
   ------------------------------------------------------------ */

.manager-filter-card
#mManagerCombo,

.manager-filter-card
#mDepartmentCombo,

.manager-filter-card
#mPayTypeCombo,

.manager-filter-card
#mChangeTypeCombo,

.manager-filter-card
#mResultCombo,

.manager-filter-card
#mOpsCombo {
  margin-top: 6px;

  top: auto;
  transform: none;
}


/* ------------------------------------------------------------
   날짜 입력
   콤보와 높이만 통일
   ------------------------------------------------------------ */

.manager-filter-card
input[type="date"] {
  height: 42px;

  font-size: 13px;
  font-weight: 600;
}


/* 날짜 프리셋은 compact 유지 */
.manager-date-preset {
  font-size: 11px;
}


/* 초기화 버튼 */
#mReset {
  min-height: 40px;
}


/* ============================================================
   FILTER VERTICAL OFFSET FIX
   담당자 범위 / checked-combo Y축 완전 동일화
   ============================================================ */

/*
 * wrapper에서 상단 여백 제거
 */
.manager-filter-card
.manager-status-combo,

.manager-filter-card
.checked-combo,

.manager-filter-card
#mManagerCombo,

.manager-filter-card
#mDepartmentCombo,

.manager-filter-card
#mPayTypeCombo,

.manager-filter-card
#mChangeTypeCombo,

.manager-filter-card
#mResultCombo,

.manager-filter-card
#mOpsCombo {
  margin-top: 0 !important;
}


/*
 * 라벨과 실제 컨트롤 사이 간격을
 * label 내부에서 동일하게 생성
 */
.manager-filter-card
.manager-filter-grid
> label {
  display: flex !important;
  flex-direction: column !important;

  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
 * 버튼 자체 위치도 동일
 */
.manager-filter-card
.manager-status-button,

.manager-filter-card
.checked-combo-button {
  margin: 0 !important;

  top: auto !important;
  bottom: auto !important;

  transform: none !important;
}


/*
 * 담당자 범위 label 자체에 남은 개별 간격 제거
 */
.manager-filter-card
.manager-status-filter {
  margin: 0 !important;
  padding: 0 !important;
}


/*
 * checked-combo label 쪽도 별도 간격 제거
 */
.manager-filter-card
.manager-check-filter {
  margin: 0 !important;
  padding: 0 !important;
}


/*
 * 두 컨트롤 높이 재확정
 */
.manager-filter-card
.manager-status-button,

.manager-filter-card
.checked-combo-button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}



/* ============================================================
   MANAGER FILTER EXACT GRID ALIGN
   라벨 높이 / 간격 / 컨트롤 높이를 고정하여 단차 제거
   ============================================================ */


/*
 * 모든 필터를 동일한 2행 구조로 강제
 *
 * 1행: 라벨 16px
 * gap: 6px
 * 2행: 컨트롤 42px
 */
.manager-filter-card
.manager-filter-grid
> label {
  display: grid !important;

  grid-template-rows:
    16px
    42px !important;

  row-gap: 6px !important;

  align-items: stretch !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family:
    "Pretendard",
    "Noto Sans KR",
    Inter,
    Arial,
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
}


/*
 * wrapper에서 자체 margin 완전 제거
 */
.manager-filter-card
.manager-status-combo,

.manager-filter-card
.checked-combo,

.manager-filter-card
#mManagerCombo,

.manager-filter-card
#mDepartmentCombo,

.manager-filter-card
#mPayTypeCombo,

.manager-filter-card
#mChangeTypeCombo,

.manager-filter-card
#mResultCombo,

.manager-filter-card
#mOpsCombo {
  grid-row: 2 !important;

  width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  top: auto !important;

  transform: none !important;
}


/*
 * 실제 버튼
 */
.manager-filter-card
.manager-status-button,

.manager-filter-card
.checked-combo-button {
  width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  align-self: stretch !important;
}


/*
 * 담당자 범위/담당자에 붙어 있던 개별 label 규칙 무력화
 */
.manager-filter-card
.manager-status-filter,

.manager-filter-card
.manager-check-filter {
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 16px !important;
}



/* ============================================================
   MANAGER STATUS -> EXISTING CHECKED COMBO EXACT MATCH

   기준:
   mManagerComboBtn
   height     40px
   font-size  12px
   line-height 16px
   ============================================================ */


/* 담당자 범위 wrapper */
.manager-filter-card
.manager-status-combo {
  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* 담당자 범위 버튼을 기존 담당자 버튼과 동일하게 */
.manager-filter-card
.manager-status-button {
  width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 34px 0 12px !important;

  box-sizing: border-box !important;

  font-family: inherit !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;

  letter-spacing: normal !important;
}


/* 담당자 범위 표시 텍스트도 부모와 동일 */
.manager-filter-card
.manager-status-button
> span:not(.manager-status-arrow) {
  font-family: inherit !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;

  letter-spacing: normal !important;
}


/*
 * 드롭다운 내부 글자는 기존 checked-combo와 동일 크기.
 * 선택 여부로 크기/굵기가 달라지지 않음.
 */
.manager-filter-card
.manager-status-option,

.manager-filter-card
.manager-status-option
> span:not(.manager-status-radio) {
  font-family: inherit !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;

  letter-spacing: normal !important;
}


/* 선택 상태는 색상만 변경 */
.manager-filter-card
.manager-status-option.selected
> span:not(.manager-status-radio) {
  font-size: 12px !important;
  font-weight: 600 !important;

  color: #633ce2 !important;
}



/* ============================================================
   MANAGER FILTER DROPDOWN LAYER FIX

   필터 선택 후 하단 KPI/차트가 다시 렌더링되어도
   열린 dropdown이 항상 최상단에 표시되도록 처리
   ============================================================ */


/*
 * 필터 카드 자체를 하단 콘텐츠보다 높은 stacking context로 유지
 */
.manager-filter-card {
  position: relative !important;
  z-index: 100 !important;

  /*
   * dropdown이 카드 영역 밖으로 내려갈 수 있으므로
   * 절대 자르지 않음
   */
  overflow: visible !important;
}


/*
 * 필터 grid도 dropdown을 자르지 않음
 */
.manager-filter-card .manager-filter-grid,
.manager-filter-card .filters {
  position: relative !important;
  z-index: 1 !important;

  overflow: visible !important;
}


/*
 * 각 필터 label도 overflow 허용
 */
.manager-filter-card
.manager-filter-grid
> label {
  overflow: visible !important;
}


/*
 * 열린 담당자 범위
 */
.manager-filter-card
.manager-status-combo.open {
  z-index: 1002 !important;
}


/*
 * 열린 checked-combo
 */
.manager-filter-card
.checked-combo.open {
  z-index: 1002 !important;
}


/*
 * 실제 dropdown 메뉴
 */
.manager-filter-card
.manager-status-menu,

.manager-filter-card
.checked-combo-menu {
  z-index: 1003 !important;
}


/*
 * 필터 아래 KPI / 분석 영역은
 * 필터보다 낮은 stacking level 유지
 */
#managerAnalysis {
  position: relative !important;
  z-index: 1 !important;
}


/*
 * KPI 카드 자체가 별도 stacking context를 가지고 있어도
 * 필터 위로 올라오지 않도록 함
 */
#managerAnalysis .card,
#managerAnalysis .metric-card,
#managerAnalysis .manager-card {
  z-index: auto !important;
}



/* ============================================================
   MANAGER FILTER STACKING CONTEXT FIX

   manager-filter-card에는 backdrop-filter가 있어서
   자체 stacking context가 생성됨.
   따라서 dropdown이 아니라 부모 카드 자체를
   하단 KPI보다 위로 올려야 함.
   ============================================================ */


/*
 * 필터 카드 자체를 KPI/차트보다 위 stacking context로 배치
 */
#managerAnalysis
.manager-filter-card {
  position: relative !important;

  z-index: 50 !important;

  overflow: visible !important;
}


/*
 * 실제 필터 grid도 overflow 제한 제거
 */
#managerAnalysis
.manager-filter-card
.manager-filter-grid {
  position: relative !important;

  z-index: 1 !important;

  overflow: visible !important;
}


/*
 * 개별 label
 */
#managerAnalysis
.manager-filter-card
.manager-filter-grid
> label {
  position: relative !important;

  overflow: visible !important;
}


/*
 * 담당자 범위 dropdown
 */
#managerAnalysis
.manager-filter-card
.manager-status-menu {
  z-index: 100 !important;
}


/*
 * 담당자 및 기타 checked combo dropdown
 */
#managerAnalysis
.manager-filter-card
.checked-combo-menu {
  z-index: 100 !important;
}


/*
 * 실제 메뉴가 열린 checked-combo를 위로 올림.
 *
 * JS에서는 .open을 붙이지 않고
 * menu.hidden만 변경하므로 :has()로 실제 상태 판정.
 */
#managerAnalysis
.manager-filter-card
.checked-combo:has(
  .checked-combo-menu:not([hidden])
) {
  z-index: 90 !important;
}


/*
 * 담당자 범위는 기존 open 클래스 사용
 */
#managerAnalysis
.manager-filter-card
.manager-status-combo.open {
  z-index: 90 !important;
}


/*
 * KPI 이하 영역은 기본 stacking level
 */
#managerAnalysis
.manager-kpis,

#managerAnalysis
.manager-scroll-target,

#managerAnalysis
.manager-chart-grid,

#managerAnalysis
.manager-allowance-analysis {
  position: relative;

  z-index: 0;
}



/* ============================================================
   PAGE HORIZONTAL OVERFLOW FIX

   전역 min-width 때문에 app-shell 자체가 viewport보다
   넓어지는 문제 수정.

   수당 상세 table의 내부 horizontal scroll은 그대로 유지.
   ============================================================ */


/* 기존 body min-width:1100px 무력화 */
html,
body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow-x: clip !important;
}


/*
 * app-shell이 viewport 자체를 확장하지 않도록
 */
.app-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


/*
 * CSS Grid 자식은 기본적으로 콘텐츠 너비 때문에
 * 부모를 밀어낼 수 있으므로 main을 명확히 축소 허용
 */
.app-shell > main,
main {
  min-width: 0 !important;

  width: auto !important;
  max-width: 100% !important;

  overflow-x: visible !important;
}


/*
 * 담당자 화면도 부모 폭 이상 확장 금지
 */
#managerAnalysis {
  width: 100% !important;

  min-width: 0 !important;
  max-width: 100% !important;
}


/*
 * 직접 자식 section/card가 grid 최소폭을 만들지 않도록
 */
#managerAnalysis > *,
.manager-filter-card,
.manager-kpis,
.manager-allowance-section,
.manager-chart-grid {
  min-width: 0 !important;
  max-width: 100% !important;
}


/* ============================================================
   수당 상세는 페이지가 아니라 자기 영역에서만 스크롤
   ============================================================ */

#managerAllowanceDetailPanel {
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
}

#managerAllowanceDetailPanel
.manager-table-wrap {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  overscroll-behavior-x: contain;
}


/*
 * table 980px은 의도된 상세표 최소폭이므로 유지.
 * 좁은 화면에서는 위 wrapper 안에서만 좌우 스크롤.
 */
.manager-allowance-table {
  min-width: 980px;
}



/* ============================================================
   ALLOWANCE DETAIL TOOLTIP - FINAL
   pseudo tooltip 제거 + body portal tooltip 사용
   ============================================================ */


/*
 * 수당 상세 내부에서는 기존 pseudo tooltip을 완전히 제거
 */
#managerAllowanceDetailPanel
.table-info::before,

#managerAllowanceDetailPanel
.table-info::after {
  content: none !important;
  display: none !important;
}


/*
 * 실제 body 하위에 생성되는 tooltip
 */
#managerAllowancePortalTooltip {
  position: fixed;

  z-index: 10000;

  display: none;

  width: auto;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 24px));

  box-sizing: border-box;

  padding: 9px 11px;

  border-radius: 8px;

  background: #2f2938;

  box-shadow:
    0 6px 18px
    rgba(32, 24, 48, .18);

  color: #fff;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;

  letter-spacing: -0.01em;

  white-space: normal;
  word-break: keep-all;

  pointer-events: none;
}


/*
 * tooltip arrow
 */
#managerAllowancePortalTooltip::after {
  content: "";

  position: absolute;

  left: var(--tooltip-arrow-x, 50%);
  bottom: -5px;

  width: 9px;
  height: 9px;

  background: #2f2938;

  transform:
    translateX(-50%)
    rotate(45deg);
}


/*
 * 아이콘 아래쪽에 tooltip이 뜨는 경우
 */
#managerAllowancePortalTooltip[data-placement="bottom"]::after {
  top: -5px;
  bottom: auto;
}


/*
 * 표시
 */
#managerAllowancePortalTooltip.visible {
  display: block;
}



/* ============================================================
   CUSTOMER ANALYSIS FULL WIDTH

   거래처별 통계도 담당자별 통계와 동일하게
   사용 가능한 main 영역 전체 폭을 사용
   ============================================================ */


/*
 * 거래처별 최상위 영역
 */
#customerAnalysis {
  width: 100% !important;

  min-width: 0 !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/*
 * customerAnalysis 바로 아래에
 * max-width / 고정 width가 걸려 있어도 제거
 */
#customerAnalysis > * {
  min-width: 0 !important;
  max-width: 100% !important;
}


/*
 * 거래처별 화면일 때도 main을
 * 담당자 화면과 동일하게 사용
 */
body:not(.manager-mode) main {
  width: 100% !important;

  min-width: 0 !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/*
 * app-shell의 main column을 실제 남은 폭까지 사용
 */
body:not(.manager-mode)
.app-shell > main {
  width: 100% !important;

  min-width: 0 !important;
  max-width: none !important;
}


/*
 * 거래처별 주요 카드 / 패널도 부모 폭 사용
 */
#customerAnalysis
.filter-card,

#customerAnalysis
.panel,

#customerAnalysis
.exec-summary,

#customerAnalysis
.grid2,

#customerAnalysis
.grid3,

#customerAnalysis
.dept-grid {
  min-width: 0 !important;
  max-width: 100% !important;
}


/*
 * grid 자식 때문에 부모가 늘어나거나
 * 반대로 고정 폭에 묶이지 않도록
 */
#customerAnalysis
.grid2 > *,

#customerAnalysis
.grid3 > *,

#customerAnalysis
.dept-grid > * {
  min-width: 0 !important;
}



/* ============================================================
   LOGIN PAGE COMPACT LAYOUT
   ============================================================ */


/*
 * 로그인 페이지 전체
 */
body.login-page,
body.auth-page {
  min-height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 32px 20px !important;

  background:
    radial-gradient(
      circle at 70% 0%,
      rgba(112, 70, 239, .20),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #faf9ff 0%,
      #f2eeff 100%
    ) !important;
}


/*
 * 로그인 최상위 wrapper
 */
.login-page main,
.auth-page main,
.login-container,
.auth-container {
  width: 100% !important;
  max-width: 460px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/*
 * 로그인 카드
 */
.login-card,
.auth-card {
  width: 100% !important;
  max-width: 460px !important;

  margin: 0 auto !important;

  padding: 32px 30px !important;

  border: 1px solid rgba(120, 99, 170, .12) !important;
  border-radius: 20px !important;

  background: rgba(255, 255, 255, .94) !important;

  box-shadow:
    0 18px 50px rgba(57, 38, 104, .12) !important;

  backdrop-filter: blur(10px);
}


/*
 * 로고 영역
 */
.login-card .brand,
.auth-card .brand,
.login-logo {
  margin-bottom: 22px !important;
}


/*
 * 제목
 */
.login-card h1,
.auth-card h1 {
  margin: 4px 0 8px !important;

  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  letter-spacing: -0.03em !important;
}


/*
 * 설명
 */
.login-card .subtitle,
.auth-card .subtitle,
.login-description {
  margin-bottom: 24px !important;

  font-size: 13px !important;
  line-height: 1.55 !important;

  color: #70697e !important;
}


/*
 * 라벨
 */
.login-card label,
.auth-card label {
  display: block;

  margin-bottom: 7px !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  color: #4b4657 !important;
}


/*
 * input / select
 */
.login-card input,
.login-card select,
.auth-card input,
.auth-card select {
  width: 100% !important;

  height: 44px !important;

  padding: 0 13px !important;

  border: 1px solid #ded8e9 !important;
  border-radius: 10px !important;

  background: #fff !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  box-sizing: border-box !important;
}


/*
 * 입력 필드 간격
 */
.login-card .field,
.auth-card .field,
.login-form-group {
  margin-bottom: 16px !important;
}


/*
 * 로그인 버튼
 */
.login-card button[type="submit"],
.auth-card button[type="submit"],
.login-submit {
  width: 100% !important;

  height: 44px !important;

  margin-top: 4px !important;

  border: 0 !important;
  border-radius: 10px !important;

  background:
    linear-gradient(
      135deg,
      #7647f5,
      #6937ee
    ) !important;

  color: #fff !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  box-shadow:
    0 7px 16px rgba(105, 55, 238, .22) !important;
}


/*
 * 비밀번호 찾기 영역
 */
.login-help,
.auth-help,
.login-password-help {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  margin-top: 18px !important;
  padding-top: 18px !important;

  border-top: 1px solid #eeeaf4 !important;
}


/*
 * 도움말 텍스트
 */
.login-help p,
.auth-help p {
  margin: 0 !important;

  font-size: 11px !important;
  line-height: 1.45 !important;

  color: #777180 !important;
}


/*
 * 초기 비밀번호 버튼
 */
.login-help button,
.auth-help button,
.login-password-help button {
  flex: 0 0 auto;

  min-height: 34px !important;

  padding: 0 12px !important;

  border: 1px solid #ded8e9 !important;
  border-radius: 8px !important;

  background: #fff !important;

  color: #6f45ed !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}


/* 모바일 */
@media (max-width: 560px) {

  body.login-page,
  body.auth-page {
    padding: 20px 14px !important;
  }

  .login-card,
  .auth-card {
    padding: 26px 22px !important;

    border-radius: 16px !important;
  }

}



/* ============================================================
   LOGIN PAGE LAYOUT FIX
   대시보드 full-width 규칙에서 로그인 페이지 분리
   ============================================================ */

body.login-bg {
  width: 100% !important;
  min-width: 0 !important;

  min-height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  padding: 32px 20px !important;
}


/*
 * 거래처별 통계의
 * body:not(.manager-mode) main { width:100% }
 * 규칙을 로그인에서 명시적으로 무효화
 */
body.login-bg > main.login-card {
  width: min(440px, calc(100vw - 40px)) !important;

  min-width: 0 !important;
  max-width: 440px !important;

  margin: 0 auto !important;

  box-sizing: border-box !important;
}


/* 로그인 입력영역 */
body.login-bg
.login-card form,

body.login-bg
.login-field,

body.login-bg
.login-field input,

body.login-bg
.login-field select {
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}


/* 로그인 버튼 */
body.login-bg
.login-card form
button[type="submit"] {
  width: 100% !important;
}


/* 도움말 영역도 카드 안에서만 */
body.login-bg
.login-help-box {
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}


/* 작은 화면 */
@media (max-width: 520px) {

  body.login-bg {
    padding: 20px 14px !important;
  }

  body.login-bg > main.login-card {
    width: 100% !important;
    max-width: 440px !important;
  }
}


/* ============================================================
   CUSTOMER MINI FILTER V2
   담당자별 미니필터와 동일한 compact chip 구조
   ============================================================ */


/*
 * 이전 customer mini filter는 V2에서 사용하지 않음
 */
#customerMiniFilterBar {
  display: none !important;
}


/*
 * 원본 거래처 필터는 일반 문서 흐름 유지
 */
#customerAnalysis
> .customer-main-filter {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
}


/* ============================================================
   FIXED BAR
   ============================================================ */

.customer-mini-filter-v2 {
  position: fixed;

  top: 10px;
  left: 194px;
  right: 18px;

  z-index: 1000;

  pointer-events: none;
}


.customer-mini-filter-v2[hidden] {
  display: none !important;
}


.customer-mini-filter-inner {
  display: flex;
  align-items: center;

  gap: 10px;

  min-height: 52px;

  padding:
    7px 9px
    7px 14px;

  border:
    1px solid
    var(--theme-line);

  border-radius: 14px;

  background:
    var(--theme-surface-alpha);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 30px
    rgba(45,30,75,.14);

  pointer-events: auto;
}


.customer-mini-item {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;

  padding-right: 12px;

  border-right:
    1px solid
    var(--theme-line);
}


.customer-mini-period {
  flex: 1 1 auto;
}


.customer-mini-label {
  flex: 0 0 auto;

  font-size: 10px;
  font-weight: 700;

  color: #8a8195;
}


.customer-mini-item strong {
  overflow: hidden;

  max-width: 320px;

  color: #332c3d;

  font-size: 12px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.customer-mini-filter-open {
  flex: 0 0 auto;

  height: 36px;

  padding: 0 16px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius: 9px;

  background:
    var(--theme-card);

  color: #5c4e6c;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.customer-mini-filter-open:hover {
  border-color: #7950ed;
  color: #6740df;
}


/* ============================================================
   DETAIL CHIPS
   ============================================================ */

.customer-mini-filter-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 6px;

  padding: 10px 12px;

  border:
    1px solid
    var(--theme-line);

  border-radius: 12px;

  background:
    var(--theme-surface-alpha);

  box-shadow:
    0 10px 26px
    rgba(45,30,75,.12);

  pointer-events: auto;
}


.customer-mini-filter-detail[hidden] {
  display: none !important;
}


.customer-mini-filter-chip,
.customer-mini-filter-reset {
  height: 34px;

  padding: 0 12px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius: 8px;

  background:
    var(--theme-card);

  color: #50465a;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.customer-mini-filter-chip:hover,
.customer-mini-filter-reset:hover {
  border-color: #7953ed;
  color: #6540df;
}


.customer-mini-filter-chip.has-value {
  border-color: #8b68ee;

  background: #f6f2ff;

  color: #6540df;
}


.customer-mini-filter-chip.active {
  border-color: #7448ef;

  background: #7448ef;

  color: #fff;
}


/* ============================================================
   CHECKED OPTION MENU
   ============================================================ */

.customer-mini-option-menu {
  flex: 1 0 100%;

  max-height: 280px;

  overflow-y: auto;

  margin-top: 2px;

  padding: 6px;

  border:
    1px solid
    var(--theme-line);

  border-radius: 10px;

  background:
    var(--theme-card);

  box-shadow:
    0 8px 22px
    rgba(45,30,75,.10);
}


.customer-mini-option-menu[hidden] {
  display: none !important;
}


.customer-mini-option {
  display: flex;
  align-items: center;

  width: 100%;

  gap: 9px;

  min-height: 34px;

  padding: 6px 9px;

  border: 0;
  border-radius: 7px;

  background: transparent;

  color: #4d4656;

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;

  text-align: left;

  cursor: pointer;
}


.customer-mini-option:hover {
  background: #f7f4fc;
}


.customer-mini-option.selected {
  background: #f3efff;

  color: #6841df;
}


.customer-mini-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  border:
    1px solid
    #d8d1e5;

  border-radius: 4px;

  background:
    var(--theme-card);

  color: transparent;

  font-size: 11px;
  font-weight: 800;
}


.customer-mini-option.selected
.customer-mini-option-check {
  border-color: #7448ef;

  background: #7448ef;

  color: #fff;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1250px) {

  .customer-mini-filter-v2 {
    left: 12px;
    right: 12px;
  }

}


@media (max-width: 760px) {

  .customer-mini-filter-inner {
    min-height: 48px;
  }


  .customer-mini-item strong {
    max-width: 190px;

    font-size: 11px;
  }


  .customer-mini-filter-detail {
    gap: 6px;

    padding: 8px;
  }


  .customer-mini-filter-chip,
  .customer-mini-filter-reset {
    height: 32px;

    padding: 0 9px;
  }

}


@media print {

  .customer-mini-filter-v2 {
    display: none !important;
  }

}



/* ============================================================
   GENERAL FILTER FINAL
   거래처별 / 담당자별 일반 필터 디자인 통일

   - compact dashboard layout
   - 12 column grid
   - date field width protection
   - customer detail filter always visible
   - responsive reflow instead of date clipping
   ============================================================ */


/* ============================================================
   1. COMMON FILTER CARD
   ============================================================ */

#customerAnalysis > .filter-card,
#managerAnalysis > .manager-filter-card {
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  padding: 13px 14px !important;

  border: 1px solid #ebe7f2 !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.96) !important;

  box-shadow:
    0 8px 24px
    rgba(50,34,90,.06) !important;
}


/*
 * 거래처 원본 필터는 sticky 사용 안 함.
 * 아래로 내려가면 mini filter가 대신 담당.
 */
#customerAnalysis > .filter-card {
  position: relative !important;

  top: auto !important;

  z-index: auto !important;

  overflow: visible !important;
}


/*
 * manager는 dropdown stacking context 때문에
 * 기존 relative / z-index 구조 유지
 */
#managerAnalysis > .manager-filter-card {
  position: relative !important;

  overflow: visible !important;
}


/* ============================================================
   2. COMMON LABEL
   ============================================================ */

#customerAnalysis > .filter-card label,
#managerAnalysis .manager-filter-grid > label {
  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;

  margin: 0 !important;

  color: #4c4657 !important;

  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;

  line-height: 1.25 !important;
  letter-spacing: -0.11px !important;
}


/* ============================================================
   3. COMMON CONTROL SIZE
   ============================================================ */

#customerAnalysis > .filter-card input,
#customerAnalysis > .filter-card select,
#customerAnalysis > .filter-card .checked-combo > button,
#customerAnalysis > .filter-card .checked-combo-button,
#customerAnalysis > .filter-card .checked-combo-button,

#managerAnalysis .manager-filter-grid input,
#managerAnalysis .manager-filter-grid select,

#managerAnalysis .manager-status-button,

#managerAnalysis .checked-combo > button,
#managerAnalysis .checked-combo-button,
#managerAnalysis .checked-combo-button {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 40px !important;

  margin: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  border: 1px solid var(--theme-line-strong) !important;
  border-radius: 9px !important;

  background-color: var(--theme-surface-strong) !important;

  color: var(--theme-text) !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;

  line-height: 16px !important;
}



/* ============================================================
   CHECKED COMBO NATIVE SELECT
   실제 UI는 custom button을 사용하므로 native select는
   레이아웃에서도 완전히 제거
   ============================================================ */

#customerAnalysis
.checked-combo-native,

#managerAnalysis
.checked-combo-native {
  position: absolute !important;

  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;

  pointer-events: none !important;
}

/* 기간도 일반 필터와 동일한 제목 -> 컨트롤 간격 사용 */
#customerAnalysis .date-filter,
#managerAnalysis .manager-date-filter {
  gap: 0 !important;
}


/* ============================================================
   4. DATE - COMMON
   ============================================================ */

#customerAnalysis .date-input-row,
#managerAnalysis .manager-date-row {
  display: grid !important;

  grid-template-columns:
    minmax(138px, 1fr)
    auto
    minmax(138px, 1fr) !important;

  align-items: center !important;

  gap: 7px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin-top: 6px !important;
}


#customerAnalysis .date-input-row > span,
#managerAnalysis .manager-date-row > span {
  display: block !important;

  width: 12px !important;

  color: #777286 !important;

  font-size: 11px !important;
  font-weight: 500 !important;

  text-align: center !important;
}


/*
 * 날짜 문자열 + 달력 아이콘 공간 확보.
 *
 * 날짜 input 자체를 억지로 줄이지 않고
 * grid가 먼저 재배치되도록 함.
 */
#customerAnalysis .date-input-row input[type="date"],
#managerAnalysis .manager-date-row input[type="date"] {
  width: 100% !important;
  min-width: 138px !important;

  height: 40px !important;

  margin: 0 !important;

  padding:
    0 9px 0 11px !important;

  font-size: 12px !important;
  font-weight: 600 !important;

  font-variant-numeric:
    tabular-nums !important;

  white-space: nowrap !important;
}


#customerAnalysis
input[type="date"]::-webkit-calendar-picker-indicator,

#managerAnalysis
input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 5px;
}


/* ============================================================
   5. DATE PRESETS
   ============================================================ */

#customerAnalysis .date-presets,
#managerAnalysis .manager-date-presets {
  display: flex !important;
  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 5px !important;

  margin-top: 6px !important;
}


#customerAnalysis .date-preset,
#managerAnalysis .manager-date-preset {
  box-sizing: border-box !important;

  min-width: 0 !important;
  height: 27px !important;

  padding: 0 9px !important;

  border: 1px solid #ded8e9 !important;
  border-radius: 8px !important;

  background: #fff !important;

  color: #6b6476 !important;

  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;

  line-height: 25px !important;

  cursor: pointer !important;
}


#customerAnalysis .date-preset.active,
#managerAnalysis .manager-date-preset.active {
  border-color: #7950ed !important;

  background: #7950ed !important;

  color: #fff !important;
}


/* ============================================================
   6. CUSTOMER FILTER GRID
   ============================================================ */

/*
 * 기존 HTML:
 *
 * filter-card
 *   filter-top
 *     date-filter
 *     상세필터 버튼
 *     filter-actions
 *
 *   detailFilters
 *
 * HTML을 뜯지 않고 display:contents로
 * 하나의 12-column grid처럼 동작시킴.
 */
#customerAnalysis > .filter-card {
  display: grid !important;

  grid-template-columns:
    repeat(12, minmax(0, 1fr)) !important;

  gap:
    10px 12px !important;

  align-items: end !important;
}


@media (min-width: 901px)
       and (min-height: 601px),
       (min-width: 1201px) {

#customerAnalysis
> .filter-card
> .filter-top {
  display: contents !important;
}


#customerAnalysis
> .filter-card
> #detailFilters {
  display: contents !important;

  max-height: none !important;

  margin: 0 !important;

  overflow: visible !important;

  opacity: 1 !important;

  transition: none !important;
}


/*
 * collapsed 상태여도 항상 표시.
 * 이제 스크롤 이후에는 mini filter가 존재하므로
 * 일반화면의 상세필터 접기 기능은 제거.
 */
#customerAnalysis
> .filter-card
> #detailFilters.collapsed {
  display: contents !important;

  max-height: none !important;

  margin: 0 !important;

  overflow: visible !important;

  opacity: 1 !important;
}


#customerAnalysis #filterToggle {
  display: none !important;
}


/*
 * Desktop 12-column
 *
 * 기간        4
 * 진료과목    3
 * 급여구분    2
 * 신규/교체   3
 *
 * 담당자      3
 * 성공여부    3
 * OPS         3
 * 초기화      2
 */
#customerAnalysis .date-filter {
  grid-column:
    1 / 5 !important;

  grid-row:
    1 !important;

  min-width: 0 !important;
}


/*
 * 거래처 상세필터 배치
 *
 * nth-child를 사용하지 않고 실제 select ID를 기준으로 배치.
 * checked-combo 생성 여부와 관계없이 동일한 위치를 유지한다.
 */

/* 진료과목 */
#customerAnalysis
#detailFilters
> label:has(#department) {
  grid-column:
    5 / 8 !important;

  grid-row:
    1 !important;
}


/* 급여구분 */
#customerAnalysis
#detailFilters
> label:has(#payType) {
  grid-column:
    8 / 10 !important;

  grid-row:
    1 !important;
}


/* 신규/교체 */
#customerAnalysis
#detailFilters
> label:has(#changeType) {
  grid-column:
    10 / 13 !important;

  grid-row:
    1 !important;
}


/* 담당자 */
#customerAnalysis
#detailFilters
> label:has(#manager) {
  grid-column:
    1 / 4 !important;

  grid-row:
    2 !important;
}


/* 성공여부 */
#customerAnalysis
#detailFilters
> label:has(#result) {
  grid-column:
    4 / 7 !important;

  grid-row:
    2 !important;
}


/* OPS */
#customerAnalysis
#detailFilters
> label:has(#opsFilter) {
  grid-column:
    7 / 10 !important;

  grid-row:
    2 !important;
}


/*
 * 초기화
 */
#customerAnalysis
.filter-actions {
  grid-column:
    11 / 13 !important;

  grid-row:
    2 !important;

  align-self:
    end !important;

  justify-self:
    stretch !important;

  margin: 0 !important;
}


#customerAnalysis
#reset {
  width: 100% !important;

  height: 40px !important;

  padding: 0 14px !important;

  font-size: 11px !important;
}


/*
 * 적용 필터 chips
 */
#customerAnalysis
#chips {
  grid-column:
    1 / -1 !important;

  margin-top:
    0 !important;
}



}

/* ============================================================
   7. CUSTOMER CONTROL ALIGN
   ============================================================ */

#customerAnalysis
#detailFilters
> label {
  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

  gap: 6px !important;

  min-width: 0 !important;
}


#customerAnalysis
#detailFilters
select {
  display: block !important;

  width: 100% !important;

  margin-top: 0 !important;
}

#customerAnalysis
#detailFilters
.checked-combo {
  margin-top: 0 !important;
}



/* ============================================================
   8. MANAGER FILTER GRID
   ============================================================ */

#managerAnalysis
.manager-filter-grid {
  display: grid !important;

  grid-template-columns:
    repeat(12, minmax(0, 1fr)) !important;

  gap:
    10px 12px !important;

  align-items:
    end !important;

  width:
    100% !important;

  min-width:
    0 !important;
}



/* 담당자 범위 */
#managerAnalysis
.manager-filter-grid
> label:has(#mManagerStatusCombo) {
  grid-column:
    5 / 7 !important;

  grid-row:
    1 !important;
}


/* 담당자 */
#managerAnalysis
.manager-filter-grid
> label:has(#mManager) {
  grid-column:
    7 / 9 !important;

  grid-row:
    1 !important;
}


/* 진료과목 */
#managerAnalysis
.manager-filter-grid
> label:has(#mDepartment) {
  grid-column:
    9 / 11 !important;

  grid-row:
    1 !important;
}


/* 급여구분 */
#managerAnalysis
.manager-filter-grid
> label:has(#mPayType) {
  grid-column:
    11 / 13 !important;

  grid-row:
    1 !important;
}


/* 신규/교체 */
#managerAnalysis
.manager-filter-grid
> label:has(#mChangeType) {
  grid-column:
    1 / 4 !important;

  grid-row:
    2 !important;
}


/* 성공여부 */
#managerAnalysis
.manager-filter-grid
> label:has(#mResult) {
  grid-column:
    4 / 7 !important;

  grid-row:
    2 !important;
}


/* OPS */
#managerAnalysis
.manager-filter-grid
> label:has(#mOps) {
  grid-column:
    7 / 10 !important;

  grid-row:
    2 !important;
}


/*
 * 초기화 wrapper 또는 직접 버튼 양쪽 대응
 */
#managerAnalysis
.manager-filter-grid
> :has(#mReset) {
  grid-column:
    11 / 13 !important;

  grid-row:
    2 !important;

  align-self:
    end !important;
}


#managerAnalysis
.manager-filter-grid
> #mReset {
  grid-column:
    11 / 13 !important;

  grid-row:
    2 !important;

  align-self:
    end !important;
}


#managerAnalysis
#mReset {
  width: 100% !important;

  height: 40px !important;

  padding: 0 14px !important;

  font-size: 11px !important;
}


/* ============================================================
   9. MANAGER CONTROL VERTICAL ALIGN
   ============================================================ */

#managerAnalysis
.manager-filter-grid
> label {
  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;

  min-width: 0 !important;
}


#managerAnalysis
.manager-status-button {
  margin-top: 0 !important;
}


/* ============================================================
   10. RESPONSIVE
   날짜를 줄이는 대신 grid 재배치
   ============================================================ */

@media (max-width: 1180px) {


  /* ---------------- CUSTOMER ---------------- */

  /*
   * 중간 폭에서도 12열 / 2행 유지.
   * nth-child 대신 실제 select ID 기준.
   */
  #customerAnalysis
  > .filter-card {
    grid-template-columns:
      repeat(12, minmax(0,1fr)) !important;
  }


  /* 기간 */
  #customerAnalysis
  .date-filter {
    grid-column:
      1 / 5 !important;

    grid-row:
      1 !important;
  }


  /* 진료과목 */
  #customerAnalysis
  #detailFilters
  > label:has(#department) {
    grid-column:
      5 / 8 !important;

    grid-row:
      1 !important;
  }


  /* 급여구분 */
  #customerAnalysis
  #detailFilters
  > label:has(#payType) {
    grid-column:
      8 / 10 !important;

    grid-row:
      1 !important;
  }


  /* 신규/교체 */
  #customerAnalysis
  #detailFilters
  > label:has(#changeType) {
    grid-column:
      10 / 13 !important;

    grid-row:
      1 !important;
  }


  /* 담당자 */
  #customerAnalysis
  #detailFilters
  > label:has(#manager) {
    grid-column:
      1 / 4 !important;

    grid-row:
      2 !important;
  }


  /* 성공여부 */
  #customerAnalysis
  #detailFilters
  > label:has(#result) {
    grid-column:
      4 / 7 !important;

    grid-row:
      2 !important;
  }


  /* OPS */
  #customerAnalysis
  #detailFilters
  > label:has(#opsFilter) {
    grid-column:
      7 / 10 !important;

    grid-row:
      2 !important;
  }


  /* 초기화 */
  #customerAnalysis
  .filter-actions {
    grid-column:
      11 / 13 !important;

    grid-row:
      2 !important;

    align-self:
      end !important;
  }


  /* ---------------- MANAGER ---------------- */

  /*
   * 중간 폭에서도 데스크톱과 동일하게 12열 / 2행 유지
   */
  #managerAnalysis
  .manager-filter-grid {
    grid-template-columns:
      repeat(12, minmax(0,1fr)) !important;
  }



  #managerAnalysis
  .manager-filter-grid
  > label:has(#mManagerStatusCombo) {
    grid-column:
      5 / 7 !important;

    grid-row:
      1 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > label:has(#mManager) {
    grid-column:
      7 / 9 !important;

    grid-row:
      1 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > label:has(#mDepartment) {
    grid-column:
      9 / 11 !important;

    grid-row:
      1 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > label:has(#mPayType) {
    grid-column:
      11 / 13 !important;

    grid-row:
      1 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > label:has(#mChangeType) {
    grid-column:
      1 / 4 !important;

    grid-row:
      2 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > label:has(#mResult) {
    grid-column:
      4 / 7 !important;

    grid-row:
      2 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > label:has(#mOps) {
    grid-column:
      7 / 10 !important;

    grid-row:
      2 !important;
  }


  #managerAnalysis
  .manager-filter-grid
  > :has(#mReset),

  #managerAnalysis
  .manager-filter-grid
  > #mReset {
    grid-column:
      11 / 13 !important;

    grid-row:
      2 !important;
  }

}


/* ============================================================
   11. VERY NARROW
   ============================================================ */

@media (max-width: 760px) {

  #customerAnalysis
  > .filter-card,

  #managerAnalysis
  .manager-filter-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }



  #customerAnalysis
  .date-input-row,

  #managerAnalysis
  .manager-date-row {
    grid-template-columns:
      minmax(135px,1fr)
      auto
      minmax(135px,1fr) !important;
  }


  #customerAnalysis
  .date-input-row
  input[type="date"],

  #managerAnalysis
  .manager-date-row
  input[type="date"] {
    min-width:
      135px !important;
  }

}


/* ============================================================
   12. PRINT
   ============================================================ */

@media print {

  #customerAnalysis
  > .filter-card,

  #managerAnalysis
  > .manager-filter-card {
    position: static !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
  }

}



/* ============================================================
   CUSTOMER FILTER TOP ALIGN
   기간과 1행 상세필터의 라벨 / 컨트롤 상단선 통일
   ============================================================ */


/*
 * 기간의 프리셋 높이에 맞춰
 * 다른 필터가 아래로 내려가지 않도록
 */
#customerAnalysis
> .filter-card {
  align-items: start !important;
}


/*
 * 상세 필터도 상단 기준으로 정렬
 */
#customerAnalysis
#detailFilters
> label {
  justify-content: flex-start !important;

  align-self: start !important;
}


/*
 * 첫 번째 행 상세필터
 * 기간 라벨/날짜와 정확히 같은 시작점 사용
 */
#customerAnalysis
#detailFilters
> label:nth-child(1),

#customerAnalysis
#detailFilters
> label:nth-child(2),

#customerAnalysis
#detailFilters
> label:nth-child(3) {
  align-self: start !important;
}


/*
 * 2행은 기존 위치 유지.
 */
#customerAnalysis
#detailFilters
> label:nth-child(4),

#customerAnalysis
#detailFilters
> label:nth-child(5),

#customerAnalysis
#detailFilters
> label:nth-child(6) {
  align-self: end !important;
}


/*
 * 초기화도 2행 컨트롤 하단에 맞춤
 */
#customerAnalysis
.filter-actions {
  align-self: end !important;
}



/* ============================================================
   CUSTOMER MINI FILTER - ACTIVE FILTER CHIPS
   담당자별 미니필터와 동일한 상단 선택조건 표시
   ============================================================ */

.customer-mini-active-filters {
  display: flex;
  align-items: center;

  flex: 1 1 auto;
  min-width: 0;

  gap: 6px;

  overflow: hidden;
}


.customer-mini-active-filters[hidden] {
  display: none !important;
}


.customer-mini-active-chip {
  display: inline-flex;
  align-items: center;

  flex: 0 1 auto;

  min-width: 0;
  max-width: 220px;

  height: 30px;

  gap: 5px;

  padding: 0 8px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius: 999px;

  background: #f7f3ff;

  color: #5f3bd4;

  font-family: inherit;
  font-size: 10px;
  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;
}


.customer-mini-active-chip:hover {
  border-color: #9a7af0;

  background: #f1ebff;
}


.customer-mini-active-chip-label {
  flex: 0 0 auto;

  color: #8b8299;

  font-size: 9px;
  font-weight: 700;
}


.customer-mini-active-chip strong {
  overflow: hidden;

  min-width: 0;

  color: #6841df;

  font-size: 10px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.customer-mini-active-chip-remove {
  flex: 0 0 auto;

  color: #9a86cf;

  font-size: 13px;
  font-weight: 500;

  line-height: 1;
}


/*
 * 기간이 화면 전체를 차지하지 않게 제한.
 * 남은 공간은 active chip이 사용.
 */
.customer-mini-filter-v2
.customer-mini-period {
  flex:
    0 1 auto;

  min-width:
    260px;
}


.customer-mini-filter-v2
.customer-mini-filter-open {
  margin-left:
    auto;
}


/* 좁은 화면에서는 chip 영역 스크롤 */
@media (max-width: 1100px) {

  .customer-mini-active-filters {
    overflow-x: auto;

    scrollbar-width: none;
  }


  .customer-mini-active-filters::-webkit-scrollbar {
    display: none;
  }


  .customer-mini-filter-v2
  .customer-mini-period {
    min-width: 230px;
  }

}


/* ============================================================
   CUSTOMER MINI CHECKED COMBO
   Manager mini checked-combo visual parity
   ============================================================ */

.customer-mini-option-menu {
  flex: 1 0 100%;

  max-height: 280px;

  overflow-y: auto;

  margin-top: 2px;

  padding: 6px;

  border:
    1px solid
    var(--theme-line);

  border-radius: 10px;

  background:
    var(--theme-card);

  box-shadow:
    0 8px 22px
    rgba(45,30,75,.10);
}


.customer-mini-option-menu[hidden] {
  display: none !important;
}


.customer-mini-option {
  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

  min-height: 34px;

  padding: 6px 9px;

  border: 0;

  border-radius: 7px;

  background: transparent;

  color: #51495a;

  font-family: inherit;

  font-size: 12px;

  font-weight: 400;

  text-align: left;

  cursor: pointer;
}


.customer-mini-option:hover {
  background: #f7f4fb;
}


.customer-mini-option.selected {
  background: #f0eaff;

  color: #5e38d5;

  font-weight: 700;
}


.customer-mini-option-check {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 18px;

  width: 18px;

  height: 18px;

  border:
    1px solid
    #d4ccdf;

  border-radius: 5px;

  background:
    var(--theme-card);

  color: #7047e8;

  font-size: 11px;

  font-weight: 800;
}


.customer-mini-option.selected
.customer-mini-option-check {
  border-color: #8b68ee;

  background: #eee7ff;

  color: #7047e8;
}



/* ============================================================
   MANAGER KPI TOOLTIP STACKING FIX

   manager-filter-card가 z-index:50 stacking context이므로
   KPI 영역이 z-index:0인 상태에서는 metric tooltip의
   z-index:9999도 필터 위로 올라갈 수 없음.

   tooltip을 실제 사용하는 순간에만 KPI 영역을
   필터보다 위로 올립니다.
   ============================================================ */

#managerAnalysis
.manager-kpis:has(.metric-info:hover),

#managerAnalysis
.manager-kpis:has(.metric-info:focus-visible) {
  z-index: 60 !important;
}


/*
 * 해당 KPI 카드도 형제 카드보다 위에서 tooltip을 표시
 */
#managerAnalysis
.manager-kpi:has(.metric-info:hover),

#managerAnalysis
.manager-kpi:has(.metric-info:focus-visible) {
  position: relative;

  z-index: 2;
}



/* ============================================================
   MANAGER WORK SUCCESS RATE MATRIX
   ============================================================ */

.manager-work-rate-card {
  margin-top: 16px;
}


.manager-work-rate-card[hidden] {
  display: none !important;
}


.manager-work-rate-chart {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
}


.manager-rate-matrix-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}


.manager-rate-matrix {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
}


.manager-rate-matrix th,
.manager-rate-matrix td {
  border: 0;
}


.manager-rate-matrix thead th {
  height: 38px;
  padding: 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


.manager-rate-manager-head {
  width: 110px;
  text-align: left !important;
}


.manager-rate-manager {
  width: 110px;
  padding: 0 12px !important;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}


.manager-rate-cell {
  position: relative;
  height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,.14) !important;
  border-radius: 8px;
  text-align: center;
  vertical-align: middle;
  transition:
    transform .12s ease,
    box-shadow .12s ease;
}


.manager-rate-cell:hover {
  transform: translateY(-1px);
  box-shadow:
    0 3px 10px rgba(15,23,42,.12);
}


.manager-rate-value {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}


.manager-rate-count {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  opacity: .72;
  white-space: nowrap;
}


/*
 * 성공률 단계
 *
 * 기존 화면 계열을 해치지 않도록
 * 같은 계열의 농도만 단계적으로 사용합니다.
 */

.manager-rate-cell.rate-95,
.manager-rate-legend-box.rate-95 {
  background: rgba(16,185,129,.34);
}


.manager-rate-cell.rate-90,
.manager-rate-legend-box.rate-90 {
  background: rgba(34,197,94,.20);
}


.manager-rate-cell.rate-80,
.manager-rate-legend-box.rate-80 {
  background: rgba(245,158,11,.22);
}


.manager-rate-cell.rate-low,
.manager-rate-legend-box.rate-low {
  background: rgba(239,68,68,.20);
}


.manager-rate-cell.no-data {
  background: rgba(148,163,184,.12);
  opacity: .65;
}


.manager-rate-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding: 0 6px;
  font-size: 10px;
  opacity: .72;
}


.manager-rate-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}


.manager-rate-legend-box {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}


.manager-rate-empty {
  padding: 44px 20px;
  text-align: center;
  font-size: 13px;
  opacity: .65;
}


@media (max-width: 760px) {

  .manager-rate-matrix {
    min-width: 520px;
  }


  .manager-rate-manager-head,
  .manager-rate-manager {
    width: 90px;
  }


  .manager-rate-cell {
    height: 54px;
    padding:
      7px 8px;
  }


  .manager-rate-value {
    font-size: 14px;
  }
}



/* ============================================================
   MANAGER CUSTOMER DETAIL MODAL
   ============================================================ */

html.manager-detail-modal-open,
body.manager-detail-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}


/*
 * 실제 스크롤이 body가 아닌 앱 컨테이너에서 발생하는 경우까지 잠금
 */
body.manager-detail-modal-open .app-shell,
body.manager-detail-modal-open main {
  overflow: hidden !important;
}


/*
 * 모달 자체는 계속 스크롤 가능
 */
body.manager-detail-modal-open
.manager-customer-detail-card {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}


.manager-customer-detail-card {
  width:
    min(
      1180px,
      calc(100vw - 48px)
    );

  max-height:
    calc(100vh - 56px);

  padding: 22px;
}


.manager-detail-summary {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap: 10px;

  margin-bottom: 18px;
}


.manager-detail-summary-item {
  padding: 12px 14px;

  border:
    1px solid
    var(--line);

  border-radius: 12px;

  background: #faf9fc;
}


.manager-detail-summary-item span {
  display: block;

  margin-bottom: 4px;

  color: #81798d;

  font-size: 12px;
}


.manager-detail-summary-item strong {
  font-size: 19px;
  line-height: 1.15;
}


.manager-detail-summary-item.is-rate {
  background:
    rgba(
      99,
      102,
      241,
      .08
    );
}


.manager-detail-summary-item.is-success {
  background:
    rgba(
      16,
      185,
      129,
      .09
    );
}


.manager-detail-summary-item.is-churn {
  background:
    rgba(
      239,
      68,
      68,
      .08
    );
}


.manager-detail-summary-item.is-cancel {
  background:
    rgba(
      245,
      158,
      11,
      .09
    );
}


.manager-detail-table-wrap {
  overflow-x: auto;

  border:
    1px solid
    var(--line);

  border-radius: 12px;
}


.manager-detail-table {
  width: 100%;

  min-width: 980px;

  border-collapse:
    collapse;
}


.manager-detail-table th,
.manager-detail-table td {
  padding: 11px 12px;

  border-bottom:
    1px solid
    rgba(
      148,
      163,
      184,
      .15
    );

  text-align: left;

  white-space: nowrap;

  font-size: 13px;
}


.manager-detail-table th {
  position: relative;

  background: #faf9fc;

  color: #716a7d;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  user-select: none;
}


.manager-detail-table th:hover {
  background: #f4f1f8;
}


.manager-detail-table th.sort-desc::after {
  content: " ↓";

  color: #6d5bd0;
}


.manager-detail-table th.sort-asc::after {
  content: " ↑";

  color: #6d5bd0;
}


.manager-detail-table tbody tr:hover {
  background:
    rgba(
      99,
      102,
      241,
      .035
    );
}


.manager-detail-customer {
  min-width: 180px;

  font-weight: 650;

  color: #352f3e;
}


.manager-detail-result {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 42px;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 700;
}


.manager-detail-result.is-success {
  background:
    rgba(
      16,
      185,
      129,
      .12
    );

  color: #08785a;
}


.manager-detail-result.is-churn {
  background:
    rgba(
      239,
      68,
      68,
      .10
    );

  color: #b42318;
}


.manager-detail-result.is-cancel {
  background:
    rgba(
      245,
      158,
      11,
      .14
    );

  color: #9a5a00;
}


.manager-detail-result.is-neutral {
  background: #f1eff4;

  color: #6f6878;
}


.manager-detail-empty {
  height: 140px;

  text-align: center !important;

  color: #8a8294;
}


.manager-detail-empty.error {
  color: #b42318;
}


.manager-detail-pagination {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  margin-top: 16px;
}


.manager-detail-pagination button {
  min-width: 32px;
  height: 32px;

  padding: 0 8px;

  border:
    1px solid
    var(--theme-line-strong);

  border-radius: 8px;

  background:
    var(--theme-surface-strong);

  color:
    var(--theme-text-2);

  cursor: pointer;
}


.manager-detail-pagination button:hover:not(:disabled) {
  background:
    var(--theme-surface-hover);
}


.manager-detail-pagination button.active {
  border-color:
    var(--theme-accent);

  background:
    var(--theme-accent);

  color: #fff;
}


.manager-detail-pagination button:disabled {
  opacity: .35;

  cursor: default;
}


/*
 * 성공률 matrix 상세 진입
 */
.manager-rate-detail-trigger {
  cursor: pointer;
}


.manager-rate-detail-trigger:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 7px 18px
    rgba(
      50,
      42,
      70,
      .12
    );
}


/*
 * 담당자 현황 상세 진입
 */
.manager-status-detail-row {
  cursor: pointer;
}


.manager-status-detail-row:hover td {
  background:
    rgba(
      99,
      102,
      241,
      .035
    );
}


@media (
  max-width: 760px
) {

  .manager-customer-detail-card {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100vh - 20px);

    padding: 16px;
  }


  .manager-detail-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}



/* ============================================================
   CUSTOMER RAW DETAIL MODAL
   ============================================================ */

html.customer-detail-modal-open,
body.customer-detail-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}


body.customer-detail-modal-open .app-shell,
body.customer-detail-modal-open main {
  overflow: hidden !important;
}


.customer-row-detail-card {
  width:
    min(
      1220px,
      calc(100vw - 48px)
    );

  max-height:
    calc(100vh - 56px);

  padding: 22px;

  overflow-y: auto !important;

  overscroll-behavior: contain;
}


.customer-row-detail-table {
  min-width: 1060px;
}


.customer-row-detail-table th.sort-desc::after {
  content: " ↓";
  color: #6d5bd0;
}


.customer-row-detail-table th.sort-asc::after {
  content: " ↑";
  color: #6d5bd0;
}


@media (max-width: 760px) {

  .customer-row-detail-card {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100vh - 20px);

    padding: 16px;
  }
}


/* ============================================================
   SMARTDOCTOR BRAND ICON / PWA
   ============================================================ */

.brand-mark.brand-mark-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 39px;
  width: 39px;
  height: 39px;

  padding: 2px;
  overflow: hidden;

  border: 1px solid rgba(38, 35, 50, .08);
  border-radius: 13px;

  background: #fff !important;
  color: transparent !important;

  box-shadow:
    0 7px 18px rgba(31, 45, 70, .13) !important;
}

.brand-mark.brand-mark-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.login-card .brand-mark.login-brand-logo {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
  padding: 3px;
  border-radius: 17px;
  margin-bottom: 18px;
}

.login-card .brand-mark.login-brand-logo img {
  border-radius: 13px;
}


/* ============================================================
   SMARTDOCTOR THEME SYSTEM
   ============================================================ */

:root {

  --theme-page:#f8f7fc;
  --theme-page-top:#fbfaff;
  --theme-page-bottom:#f7f5fb;
  --theme-glow:#ddd2ff;

  --theme-surface:#fff;
  --theme-surface-alpha:rgba(255,255,255,.96);
  --theme-surface-strong:#fff;
  --theme-surface-soft:#faf8fd;
  --theme-surface-hover:#f6f3ff;

  --theme-text:#171524;
  --theme-text-2:#4f4a5d;
  --theme-muted:#777286;

  --theme-line:#ebe7f2;
  --theme-line-strong:#ded8e9;

  --theme-accent:#7146ef;
  --theme-accent-2:#8a67f5;
  --theme-accent-3:#bba9fa;
  --theme-accent-soft:#f1edff;

  --theme-success:#21a67a;
  --theme-success-soft:#e8f7f1;

  --theme-danger:#ef625b;
  --theme-danger-soft:#fff0ef;

  --theme-warning:#f2994a;
  --theme-warning-soft:#fff4e9;

  --theme-shadow:
    0 14px 40px rgba(48,31,91,.07);

  --theme-overlay:
    rgba(25,20,34,.46);

  --theme-chart-axis:#ded8e8;
  --theme-chart-label:#777286;
  --theme-chart-grid:#f0edf4;
  --theme-chart-tooltip:#fff;
  --theme-chart-tooltip-text:#24202d;
  --theme-chart-tooltip-border:#e6e0ef;
}


html[data-resolved-theme="dark"] {

  --theme-page:#121217;
  --theme-page-top:#15151c;
  --theme-page-bottom:#101015;
  --theme-glow:#332859;

  --theme-surface:#1c1c24;
  --theme-surface-alpha:rgba(28,28,36,.96);
  --theme-surface-strong:#22222c;
  --theme-surface-soft:#252530;
  --theme-surface-hover:#292936;

  --theme-text:#f3f1f7;
  --theme-text-2:#d0ccd9;
  --theme-muted:#9e99aa;

  --theme-line:#33323e;
  --theme-line-strong:#44424f;

  --theme-accent:#9b7bff;
  --theme-accent-2:#b29aff;
  --theme-accent-3:#cabaff;
  --theme-accent-soft:#30284c;

  --theme-success:#4cc89e;
  --theme-success-soft:#203b34;

  --theme-danger:#ff7770;
  --theme-danger-soft:#412729;

  --theme-warning:#f5a65d;
  --theme-warning-soft:#402f21;

  --theme-shadow:
    0 16px 42px rgba(0,0,0,.26);

  --theme-overlay:
    rgba(0,0,0,.66);

  --theme-chart-axis:#484652;
  --theme-chart-label:#aaa5b4;
  --theme-chart-grid:#2c2b34;
  --theme-chart-tooltip:#24232c;
  --theme-chart-tooltip-text:#f4f2f7;
  --theme-chart-tooltip-border:#45434f;
}


html[data-resolved-theme="midnight"] {

  --theme-page:#0d1624;
  --theme-page-top:#101c2d;
  --theme-page-bottom:#0b1320;
  --theme-glow:#173e67;

  --theme-surface:#142235;
  --theme-surface-alpha:rgba(20,34,53,.96);
  --theme-surface-strong:#182a40;
  --theme-surface-soft:#1b2e46;
  --theme-surface-hover:#203651;

  --theme-text:#eef5ff;
  --theme-text-2:#cfdaea;
  --theme-muted:#8fa1b7;

  --theme-line:#293d55;
  --theme-line-strong:#39516d;

  --theme-accent:#62a4ff;
  --theme-accent-2:#80b6ff;
  --theme-accent-3:#a5ccff;
  --theme-accent-soft:#1b3656;

  --theme-success:#4ed0a2;
  --theme-success-soft:#183d38;

  --theme-danger:#ff7d7d;
  --theme-danger-soft:#492a31;

  --theme-warning:#f5ab63;
  --theme-warning-soft:#453426;

  --theme-shadow:
    0 16px 42px rgba(0,8,20,.30);

  --theme-overlay:
    rgba(3,8,16,.70);

  --theme-chart-axis:#3a5068;
  --theme-chart-label:#9dafc2;
  --theme-chart-grid:#203247;
  --theme-chart-tooltip:#17263a;
  --theme-chart-tooltip-text:#eef5ff;
  --theme-chart-tooltip-border:#35506d;
}


html[data-resolved-theme="emerald"] {

  --theme-page:#f3f8f5;
  --theme-page-top:#f8fcfa;
  --theme-page-bottom:#eef6f1;
  --theme-glow:#cceadd;

  --theme-surface:#fff;
  --theme-surface-alpha:rgba(255,255,255,.96);
  --theme-surface-strong:#fff;
  --theme-surface-soft:#f2f8f4;
  --theme-surface-hover:#edf7f1;

  --theme-text:#17241e;
  --theme-text-2:#45594f;
  --theme-muted:#708178;

  --theme-line:#dce9e2;
  --theme-line-strong:#cdded5;

  --theme-accent:#168a63;
  --theme-accent-2:#29a87c;
  --theme-accent-3:#81ccb0;
  --theme-accent-soft:#e4f5ee;

  --theme-success:#269b63;
  --theme-success-soft:#e4f5ec;

  --theme-danger:#d95757;
  --theme-danger-soft:#fcebea;

  --theme-warning:#d88932;
  --theme-warning-soft:#fbf0df;

  --theme-shadow:
    0 14px 40px rgba(20,82,58,.07);

  --theme-chart-axis:#cadbd2;
  --theme-chart-label:#708178;
  --theme-chart-grid:#e6f0eb;
}


html[data-resolved-theme="slate"] {

  --theme-page:#eef1f5;
  --theme-page-top:#f6f8fa;
  --theme-page-bottom:#e9edf2;
  --theme-glow:#d7e0eb;

  --theme-surface:#fff;
  --theme-surface-alpha:rgba(255,255,255,.96);
  --theme-surface-strong:#fff;
  --theme-surface-soft:#f4f6f8;
  --theme-surface-hover:#eef2f6;

  --theme-text:#202832;
  --theme-text-2:#4b5867;
  --theme-muted:#74808e;

  --theme-line:#dce2e8;
  --theme-line-strong:#ccd4dd;

  --theme-accent:#506b8a;
  --theme-accent-2:#6682a2;
  --theme-accent-3:#a2b4c8;
  --theme-accent-soft:#e7edf4;

  --theme-success:#318765;
  --theme-success-soft:#e5f2ed;

  --theme-danger:#d85f5f;
  --theme-danger-soft:#faecec;

  --theme-warning:#cf8538;
  --theme-warning-soft:#f8efe3;

  --theme-shadow:
    0 14px 38px rgba(46,61,78,.08);

  --theme-chart-axis:#ccd4dd;
  --theme-chart-label:#74808e;
  --theme-chart-grid:#e6ebef;
}


html[data-resolved-theme="warm"] {

  --theme-page:#faf6f0;
  --theme-page-top:#fdfaf6;
  --theme-page-bottom:#f7f0e7;
  --theme-glow:#f2dcc4;

  --theme-surface:#fffdf9;
  --theme-surface-alpha:rgba(255,253,249,.96);
  --theme-surface-strong:#fffefa;
  --theme-surface-soft:#faf2e8;
  --theme-surface-hover:#f8ede0;

  --theme-text:#30261f;
  --theme-text-2:#62544a;
  --theme-muted:#88786c;

  --theme-line:#eadfd4;
  --theme-line-strong:#ddd0c4;

  --theme-accent:#b56b42;
  --theme-accent-2:#ca8055;
  --theme-accent-3:#ddb092;
  --theme-accent-soft:#f7e8dc;

  --theme-success:#368763;
  --theme-success-soft:#e9f3ed;

  --theme-danger:#c95c55;
  --theme-danger-soft:#f9eae7;

  --theme-warning:#c57b2d;
  --theme-warning-soft:#f8eddd;

  --theme-shadow:
    0 14px 38px rgba(90,57,35,.08);

  --theme-chart-axis:#ddd0c4;
  --theme-chart-label:#88786c;
  --theme-chart-grid:#eee4db;
}


/* 기존 변수와 연결 */

:root {

  --purple:
    var(--theme-accent);

  --purple2:
    var(--theme-accent-2);

  --purple3:
    var(--theme-accent-3);

  --purpleSoft:
    var(--theme-accent-soft);

  --bg:
    var(--theme-page);

  --text:
    var(--theme-text);

  --muted:
    var(--theme-muted);

  --line:
    var(--theme-line);

  --shadow:
    var(--theme-shadow);
}


body:not(.print-body) {

  color:
    var(--theme-text) !important;

  background:
    radial-gradient(
      circle at 77% -8%,
      var(--theme-glow) 0,
      transparent 28%
    ),
    linear-gradient(
      180deg,
      var(--theme-page-top),
      var(--theme-page-bottom) 66%
    ) !important;
}


body:not(.print-body) aside {

  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;
}


body:not(.print-body) .card,
body:not(.print-body) .filter-card,
body:not(.print-body) .manager-filter-card,
body:not(.print-body) .manager-modal-card,
body:not(.print-body) .admin-modal-card,
body:not(.print-body) .customer-row-detail-card,
body:not(.print-body) .manager-customer-detail-card {

  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


body:not(.print-body) input,
body:not(.print-body) select,
body:not(.print-body) textarea,
body:not(.print-body) .ghost,
body:not(.print-body) .segmented {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body) p,
body:not(.print-body) small {

  color:
    var(--theme-muted);
}


body:not(.print-body) nav button,
body:not(.print-body) .aside-bottom button,
body:not(.print-body) .admin-settings-btn,
body:not(.print-body) .admin-page-link {

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body) nav button:hover,
body:not(.print-body) .aside-bottom button:hover {

  background:
    var(--theme-surface-hover) !important;
}


body:not(.print-body) nav button.active {

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--theme-accent),
      var(--theme-accent-2)
    ) !important;
}


body:not(.print-body) .manager-table-wrap,
body:not(.print-body) .manager-table th,
body:not(.print-body) .manager-table td {

  border-color:
    var(--theme-line) !important;
}


body:not(.print-body) .manager-table th {

  background:
    var(--theme-surface-soft) !important;

  color:
    var(--theme-muted) !important;
}


body:not(.print-body) .manager-table td {

  color:
    var(--theme-text-2);
}




/* ------------------------------------------------------------
   Theme component bridge
   기존 UI 구성요소를 theme token에 연결
   ------------------------------------------------------------ */

body:not(.print-body) .manager-filter-grid label,
body:not(.print-body) .filter-card label {
  color: var(--theme-text-2) !important;
}

body:not(.print-body) .manager-date-row > span,
body:not(.print-body) .date-input-row > span {
  color: var(--theme-muted) !important;
}


/* 기간 preset */

body:not(.print-body) .date-preset,
body:not(.print-body) .manager-date-preset {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line-strong) !important;
  color: var(--theme-text-2) !important;
}

body:not(.print-body) .date-preset:hover,
body:not(.print-body) .manager-date-preset:hover {
  background: var(--theme-surface-hover) !important;
  border-color: var(--theme-accent-3) !important;
  color: var(--theme-accent) !important;
}

body:not(.print-body) .date-preset.active,
body:not(.print-body) .manager-date-preset.active {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: #fff !important;
}


/* 실제 checked-combo 버튼 */

body:not(.print-body) .checked-combo-button {
  width: 100%;

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


body:not(.print-body) .checked-combo-button-text {
  color:
    var(--theme-text) !important;
}


body:not(.print-body) .checked-combo-button:hover {
  background:
    var(--theme-surface-hover) !important;

  border-color:
    var(--theme-accent-3) !important;
}


body:not(.print-body)
.checked-combo.open
.checked-combo-button {
  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-accent) !important;

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--theme-accent) 14%,
      transparent
    ) !important;
}


body:not(.print-body) .checked-combo-button-arrow {
  color:
    var(--theme-muted) !important;
}


/* checked-combo 펼침 메뉴 */

body:not(.print-body) .checked-combo-menu {
  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


body:not(.print-body) .checked-combo-menu label {
  color:
    var(--theme-text-2) !important;
}


body:not(.print-body) .checked-combo-menu label:hover {
  background:
    var(--theme-surface-hover) !important;
}


body:not(.print-body)
.checked-combo-menu
input[type="checkbox"] {
  accent-color:
    var(--theme-accent);
}


/* 담당자 필터 custom combo */

body:not(.print-body) .checked-combo-button,
body:not(.print-body) .manager-status-button {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line-strong) !important;
  color: var(--theme-text-2) !important;
}

body:not(.print-body) .checked-combo.open .checked-combo-button,
body:not(.print-body) .manager-status-combo.open .manager-status-button {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 1px color-mix(
    in srgb,
    var(--theme-accent) 18%,
    transparent
  ) !important;
}

body:not(.print-body) .checked-combo-menu,
body:not(.print-body) .manager-status-menu {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line-strong) !important;
  color: var(--theme-text-2) !important;
  box-shadow: var(--theme-shadow) !important;
}

body:not(.print-body) .checked-combo-menu label,
body:not(.print-body) .manager-status-option {
  color: var(--theme-text-2) !important;
}

body:not(.print-body) .checked-combo-menu label:hover,
body:not(.print-body) .manager-status-option:hover {
  background: var(--theme-surface-hover) !important;
}

body:not(.print-body) .manager-status-option.selected {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent) !important;
}

body:not(.print-body) .checked-combo-button-arrow,
body:not(.print-body) .manager-status-arrow {
  border-color: var(--theme-muted) !important;
}


/* 일반 입력 */

body:not(.print-body) .filter-card input,
body:not(.print-body) .filter-card select,
body:not(.print-body) .manager-filter-card input,
body:not(.print-body) .manager-filter-card select {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line-strong) !important;
  color: var(--theme-text) !important;
}

body:not(.print-body) input:focus,
body:not(.print-body) select:focus,
body:not(.print-body) textarea:focus {
  border-color: var(--theme-accent) !important;
  outline-color: var(--theme-accent) !important;
}


/* 브라우저 date icon */

html[data-resolved-theme="dark"]
body:not(.print-body) input[type="date"]::-webkit-calendar-picker-indicator,
html[data-resolved-theme="midnight"]
body:not(.print-body) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .75;
}


/* 버튼 */

body:not(.print-body) .ghost {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line-strong) !important;
  color: var(--theme-text-2) !important;
}

body:not(.print-body) .ghost:hover {
  background: var(--theme-surface-hover) !important;
  color: var(--theme-text) !important;
}

body:not(.print-body) .primary {
  background: linear-gradient(
    135deg,
    var(--theme-accent),
    var(--theme-accent-2)
  ) !important;
  color: #fff !important;
}


/* segmented / 분석 전환 */

body:not(.print-body) .segmented,
body:not(.print-body) .analysis-switch,
body:not(.print-body) .manager-metric-switch,
body:not(.print-body) .manager-rate-switch {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-line) !important;
}

body:not(.print-body) .segmented button,
body:not(.print-body) .analysis-switch-btn {
  color: var(--theme-muted) !important;
}

body:not(.print-body) .segmented button.active,
body:not(.print-body) .analysis-switch-btn.active {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent) !important;
}


/* manager metric select */

body:not(.print-body) .manager-metric-switch select,
body:not(.print-body) .manager-rate-switch select {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text-2) !important;
}


/* KPI */

body:not(.print-body) .manager-kpi strong,
body:not(.print-body) .kpi strong {
  color: var(--theme-text) !important;
}

body:not(.print-body) .manager-kpi small,
body:not(.print-body) .manager-kpi span,
body:not(.print-body) .kpi small,
body:not(.print-body) .kpi span,
body:not(.print-body) .rate-kpi em {
  color: var(--theme-muted) !important;
}


/* info icon */

body:not(.print-body) .metric-info,
body:not(.print-body) .table-info {
  color: var(--theme-muted) !important;
  border-color: var(--theme-line-strong) !important;
}

body:not(.print-body) .metric-info:hover,
body:not(.print-body) .table-info:hover {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}


/* executive summary */

body:not(.print-body) .exec-card {
  background: var(--theme-surface-alpha) !important;
  border-color: var(--theme-line) !important;
  color: var(--theme-text) !important;
}

body:not(.print-body) .exec-card:hover {
  background: var(--theme-surface-hover) !important;
  border-color: var(--theme-accent-3) !important;
}

body:not(.print-body) .exec-icon {
  color: var(--theme-accent) !important;
}


/* sidebar icon */

body:not(.print-body) nav button span {
  color: var(--theme-muted) !important;
}

body:not(.print-body) nav button:hover span {
  color: var(--theme-accent) !important;
}

body:not(.print-body) nav button.active,
body:not(.print-body) nav button.active span {
  color: #fff !important;
}


/* dropdown option */

body:not(.print-body) select option {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}


/* chips */

body:not(.print-body) .chip {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-accent) !important;
}


body:not(.print-body) .manager-modal-backdrop,
body:not(.print-body) .admin-modal-backdrop,
body:not(.print-body) .customer-row-detail-backdrop,
body:not(.print-body) .manager-customer-detail-backdrop {

  background:
    var(--theme-overlay) !important;
}


body:not(.print-body) .manager-modal-close,
body:not(.print-body) .admin-modal-close {

  background:
    var(--theme-surface-soft) !important;

  color:
    var(--theme-muted) !important;
}


body:not(.print-body) .kpi-icon.purple {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body) .kpi-icon.red {

  background:
    var(--theme-danger-soft) !important;

  color:
    var(--theme-danger) !important;
}


body:not(.print-body) .kpi-icon.orange {

  background:
    var(--theme-warning-soft) !important;

  color:
    var(--theme-warning) !important;
}


.theme-setting {

  margin:10px 0 8px;
  padding:10px;

  border:
    1px solid
    var(--theme-line);

  border-radius:11px;

  background:
    var(--theme-surface-soft);
}


.theme-setting label {

  display:block;

  margin-bottom:7px;

  color:
    var(--theme-muted);

  font-size:10px;
  font-weight:800;
}


.theme-setting select {

  width:100%;
  height:34px;

  margin:0;
  padding:0 9px;

  border-radius:8px;

  font-size:12px;
  font-weight:700;
}


.brand-mark.brand-mark-logo {

  /*
   * 원본 로고 자체는 밝은 배경 유지
   */
  background:#fff !important;
}


.print-body {

  /*
   * PDF는 항상 Light
   */
  color-scheme:
    light !important;
}


/* ============================================================
   THEME UI POLISH
   Filter / Sidebar / Surface final alignment
   ============================================================ */


/* ------------------------------------------------------------
   담당자 / 거래처 필터 카드
   ------------------------------------------------------------ */

body:not(.print-body)
.filter-card,

body:not(.print-body)
.manager-filter-card {

  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


/*
 * Dark 계열에서는 필터 surface를 카드보다
 * 아주 살짝 밝게 해서 필터 영역임을 구분
 */

html[data-resolved-theme="dark"]
body:not(.print-body)
.filter-card,

html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-filter-card {

  background:
    #1f1f28 !important;
}


html[data-resolved-theme="midnight"]
body:not(.print-body)
.filter-card,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-filter-card {

  background:
    #17283d !important;
}


/* ------------------------------------------------------------
   필터 라벨
   ------------------------------------------------------------ */

body:not(.print-body)
.filter-card label,

body:not(.print-body)
.manager-filter-grid label {

  color:
    var(--theme-text-2) !important;
}


/* ------------------------------------------------------------
   필터 Input / Select
   ------------------------------------------------------------ */

body:not(.print-body)
.filter-card input,

body:not(.print-body)
.filter-card select,

body:not(.print-body)
.manager-filter-card input,

body:not(.print-body)
.manager-filter-card select {

  background:
    var(--theme-surface-strong) !important;

  border:
    1px solid
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


body:not(.print-body)
.filter-card input:hover,

body:not(.print-body)
.filter-card select:hover,

body:not(.print-body)
.manager-filter-card input:hover,

body:not(.print-body)
.manager-filter-card select:hover {

  border-color:
    var(--theme-accent-3) !important;
}


body:not(.print-body)
.filter-card input:focus,

body:not(.print-body)
.filter-card select:focus,

body:not(.print-body)
.manager-filter-card input:focus,

body:not(.print-body)
.manager-filter-card select:focus {

  border-color:
    var(--theme-accent) !important;

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--theme-accent) 15%,
      transparent
    ) !important;

  outline:
    none !important;
}


/* ------------------------------------------------------------
   담당자 범위 / 담당자 custom dropdown
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-status-button,

body:not(.print-body)
.checked-combo-button {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


body:not(.print-body)
.manager-status-menu,

body:not(.print-body)
.checked-combo-menu {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


body:not(.print-body)
.manager-status-option,

body:not(.print-body)
.checked-combo-menu label {

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.manager-status-option:hover,

body:not(.print-body)
.checked-combo-menu label:hover {

  background:
    var(--theme-surface-hover) !important;
}


body:not(.print-body)
.manager-status-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/* ------------------------------------------------------------
   기간 버튼
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-date-preset,

body:not(.print-body)
.date-preset {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.manager-date-preset:hover,

body:not(.print-body)
.date-preset:hover {

  background:
    var(--theme-surface-hover) !important;

  border-color:
    var(--theme-accent-3) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.manager-date-preset.active,

body:not(.print-body)
.date-preset.active {

  background:
    linear-gradient(
      135deg,
      var(--theme-accent),
      var(--theme-accent-2)
    ) !important;

  border-color:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/* ------------------------------------------------------------
   초기화 버튼
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-filter-actions .ghost,

body:not(.print-body)
.filter-actions .ghost {

  background:
    var(--theme-surface-soft) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.manager-filter-actions .ghost:hover,

body:not(.print-body)
.filter-actions .ghost:hover {

  background:
    var(--theme-surface-hover) !important;

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   Sidebar 환경설정
   ------------------------------------------------------------ */

body:not(.print-body)
.admin-settings-btn {

  background:
    var(--theme-surface-soft) !important;

  border:
    1px solid
    var(--theme-line) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.admin-settings-btn:hover {

  background:
    var(--theme-surface-hover) !important;

  border-color:
    var(--theme-accent-3) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.admin-settings-icon {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/* ------------------------------------------------------------
   테마 선택 영역
   ------------------------------------------------------------ */

body:not(.print-body)
.theme-setting {

  background:
    var(--theme-surface-soft) !important;

  border-color:
    var(--theme-line) !important;
}


body:not(.print-body)
.theme-setting select {

  background:
    var(--theme-surface-strong) !important;

  color:
    var(--theme-text) !important;

  border-color:
    var(--theme-line-strong) !important;
}


/* ------------------------------------------------------------
   담당자 정렬
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-metric-switch {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;
}


body:not(.print-body)
.manager-metric-switch select {

  background:
    var(--theme-surface-soft) !important;

  color:
    var(--theme-text-2) !important;
}


/* ------------------------------------------------------------
   스크롤바
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"] {
  scrollbar-color:
    #5a5666
    #1a1920;
}


html[data-resolved-theme="midnight"] {
  scrollbar-color:
    #49637e
    #101b2a;
}


html[data-resolved-theme="dark"]
::-webkit-scrollbar,

html[data-resolved-theme="midnight"]
::-webkit-scrollbar {

  width:
    10px;

  height:
    10px;
}


html[data-resolved-theme="dark"]
::-webkit-scrollbar-track {

  background:
    #1a1920;
}


html[data-resolved-theme="dark"]
::-webkit-scrollbar-thumb {

  background:
    #565260;

  border:
    2px solid
    #1a1920;

  border-radius:
    999px;
}


html[data-resolved-theme="midnight"]
::-webkit-scrollbar-track {

  background:
    #101b2a;
}


html[data-resolved-theme="midnight"]
::-webkit-scrollbar-thumb {

  background:
    #49637e;

  border:
    2px solid
    #101b2a;

  border-radius:
    999px;
}


/* ============================================================
   THEME FILTER HIGH-SPECIFICITY FIX
   기존 #managerAnalysis / #customerAnalysis !important 대응
   ============================================================ */


/* ------------------------------------------------------------
   FILTER CARD
   ------------------------------------------------------------ */

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
> .manager-filter-card,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
> .filter-card {

  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


/* Dark 계열은 카드보다 한 단계 밝게 */

html[data-resolved-theme="dark"]
body:not(.print-body)
#managerAnalysis
> .manager-filter-card,

html[data-resolved-theme="dark"]
body:not(.print-body)
#customerAnalysis
> .filter-card {

  background:
    #1f1f28 !important;
}


html[data-resolved-theme="midnight"]
body:not(.print-body)
#managerAnalysis
> .manager-filter-card,

html[data-resolved-theme="midnight"]
body:not(.print-body)
#customerAnalysis
> .filter-card {

  background:
    #17283d !important;
}


/* ------------------------------------------------------------
   LABEL
   ------------------------------------------------------------ */

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-filter-grid
> label,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
> .filter-card
label {

  color:
    var(--theme-text-2) !important;
}


/* ------------------------------------------------------------
   INPUT / SELECT
   ------------------------------------------------------------ */

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-filter-card
input,

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-filter-card
select,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
> .filter-card
input,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
> .filter-card
select {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   CUSTOM MANAGER COMBO
   ------------------------------------------------------------ */

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-status-button,

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.checked-combo-button {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-status-menu,

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.checked-combo-menu {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text-2) !important;
}


/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-filter-actions
.ghost,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
.filter-actions
.ghost {

  background:
    var(--theme-surface-soft) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


/* ------------------------------------------------------------
   DATE PRESET
   ------------------------------------------------------------ */

html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-date-preset,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
.date-preset {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme]
body:not(.print-body)
#managerAnalysis
.manager-date-preset.active,

html[data-resolved-theme]
body:not(.print-body)
#customerAnalysis
.date-preset.active {

  background:
    linear-gradient(
      135deg,
      var(--theme-accent),
      var(--theme-accent-2)
    ) !important;

  border-color:
    var(--theme-accent) !important;

  color:
    #fff !important;
}




/* ============================================================
   LOGIN THEME BRIDGE
   로그인 페이지도 dashboard theme token 사용
   ============================================================ */

html[data-resolved-theme]
body.login-bg {

  color:
    var(--theme-text) !important;

  background:
    radial-gradient(
      circle at 75% 5%,
      var(--theme-glow),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      var(--theme-page-top),
      var(--theme-page-bottom)
    ) !important;
}


html[data-resolved-theme]
body.login-bg
.login-card {

  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


html[data-resolved-theme]
body.login-bg
.login-card h1,

html[data-resolved-theme]
body.login-bg
.login-card strong {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme]
body.login-bg
.login-card p,

html[data-resolved-theme]
body.login-bg
.login-field > span,

html[data-resolved-theme]
body.login-bg
.login-help-text span {

  color:
    var(--theme-muted) !important;
}


html[data-resolved-theme]
body.login-bg
.login-field select,

html[data-resolved-theme]
body.login-bg
.login-field input {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme]
body.login-bg
.login-field input::placeholder {

  color:
    var(--theme-muted) !important;
}


html[data-resolved-theme]
body.login-bg
.login-field select:focus,

html[data-resolved-theme]
body.login-bg
.login-field input:focus {

  border-color:
    var(--theme-accent) !important;

  outline:
    none !important;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--theme-accent) 14%,
      transparent
    ) !important;
}


html[data-resolved-theme]
body.login-bg
.login-card
button[type="submit"] {

  background:
    linear-gradient(
      135deg,
      var(--theme-accent),
      var(--theme-accent-2)
    ) !important;

  color:
    #fff !important;
}


html[data-resolved-theme]
body.login-bg
.login-help-box {

  background:
    var(--theme-surface-soft) !important;

  border-color:
    var(--theme-line) !important;
}


html[data-resolved-theme]
body.login-bg
.initial-password-help-btn {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme]
body.login-bg
.initial-password-help-btn:hover {

  background:
    var(--theme-surface-hover) !important;

  border-color:
    var(--theme-accent-3) !important;
}


html[data-resolved-theme]
body.login-bg
.initial-password-tooltip {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;

  box-shadow:
    var(--theme-shadow) !important;
}


html[data-resolved-theme]
body.login-bg
.login-error {

  border-color:
    var(--theme-danger) !important;

  background:
    var(--theme-danger-soft) !important;

  color:
    var(--theme-danger) !important;
}


/*
 * 로그인 로고 원본 대비 유지
 */
html[data-resolved-theme]
body.login-bg
.brand-mark.brand-mark-logo {

  background:
    #fff !important;
}


/*
 * native select dropdown도 dark UI 사용
 */
html[data-resolved-theme="dark"]
body.login-bg select,

html[data-resolved-theme="midnight"]
body.login-bg select {

  color-scheme:
    dark !important;
}



/* ============================================================
   MANAGER SORT THEME
   ============================================================ */

.manager-sort-control {
  background:
    var(--theme-surface-soft) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text-2) !important;
}


.manager-sort-control > span {
  color:
    var(--theme-muted) !important;
}


#managerSortMode {
  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;

  color-scheme:
    inherit;
}


#managerSortMode option {
  background:
    var(--theme-surface-strong);

  color:
    var(--theme-text);
}




/* ============================================================
   SYNC BUTTON THEME
   ============================================================ */

body:not(.print-body)
#syncBtn,

body:not(.print-body)
#mSyncBtn {

  background:
    var(--theme-surface-soft) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
#syncBtn:hover,

body:not(.print-body)
#mSyncBtn:hover {

  background:
    var(--theme-surface-hover) !important;

  border-color:
    var(--theme-accent-3) !important;

  color:
    var(--theme-accent) !important;
}


/* ============================================================
   CUSTOMER MINI FILTER THEME
   ============================================================ */

body:not(.print-body)
.customer-mini-filter-inner {
  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;
}


body:not(.print-body)
.customer-mini-item {
  border-right-color:
    var(--theme-line) !important;
}


body:not(.print-body)
.customer-mini-label {
  color:
    var(--theme-muted) !important;
}


body:not(.print-body)
.customer-mini-item strong {
  color:
    var(--theme-text) !important;
}


body:not(.print-body)
.customer-mini-filter-open {
  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.customer-mini-filter-open:hover {
  background:
    var(--theme-surface-hover) !important;

  border-color:
    var(--theme-accent-3) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-filter-detail {
  background:
    var(--theme-surface-alpha) !important;

  border-color:
    var(--theme-line) !important;
}


body:not(.print-body)
.customer-mini-filter-chip,

body:not(.print-body)
.customer-mini-filter-reset {
  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.customer-mini-filter-chip:hover,

body:not(.print-body)
.customer-mini-filter-reset:hover {
  border-color:
    var(--theme-accent) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-filter-chip.has-value {
  background:
    var(--theme-accent-soft) !important;

  border-color:
    var(--theme-accent-3) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-filter-chip.active {
  background:
    var(--theme-accent) !important;

  border-color:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


body:not(.print-body)
.customer-mini-option-menu {
  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;
}


body:not(.print-body)
.customer-mini-option {
  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.customer-mini-option:hover {
  background:
    var(--theme-surface-hover) !important;
}


body:not(.print-body)
.customer-mini-option.selected {
  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/* ============================================================
   DARK FILTER TEXT CONTRAST FIX
   ============================================================ */

html[data-resolved-theme="dark"]
body:not(.print-body),

html[data-resolved-theme="midnight"]
body:not(.print-body) {

  /*
   * native form control 내부 UI도
   * dark scheme 기준으로 렌더
   */
  color-scheme: dark;
}


/* ------------------------------------------------------------
   일반 input / select
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.filter-card input,

html[data-resolved-theme="dark"]
body:not(.print-body)
.filter-card select,

html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-filter-card input,

html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-filter-card select,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.filter-card input,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.filter-card select,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-filter-card input,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-filter-card select {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
select option,

html[data-resolved-theme="midnight"]
body:not(.print-body)
select option {

  background:
    var(--theme-surface-strong) !important;

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   checked combo
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-button,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-button {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-button-text,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-button-text {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-menu,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-menu {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-menu label,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-menu label {

  color:
    var(--theme-text-2) !important;
}


/* ------------------------------------------------------------
   checked combo option text
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-option,

html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-option span,

html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-option strong,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-option,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-option span,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-option strong {

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-option.selected,

html[data-resolved-theme="dark"]
body:not(.print-body)
.checked-combo-option.selected span,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-option.selected,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.checked-combo-option.selected span {

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   manager mini filter
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-mini-filter,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-mini-filter {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-mini-label,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-mini-label {

  color:
    var(--theme-muted) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-mini-item strong,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-mini-item strong {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-mini-option,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-mini-option {

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-mini-option.selected,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-mini-option.selected {

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   customer mini filter
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.customer-mini-filter,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.customer-mini-filter {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.customer-mini-label,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.customer-mini-label {

  color:
    var(--theme-muted) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.customer-mini-item strong,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.customer-mini-item strong {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.customer-mini-option,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.customer-mini-option {

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.customer-mini-option.selected,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.customer-mini-option.selected {

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   placeholder
   ------------------------------------------------------------ */

html[data-resolved-theme="dark"]
body:not(.print-body)
input::placeholder,

html[data-resolved-theme="midnight"]
body:not(.print-body)
input::placeholder {

  color:
    var(--theme-muted) !important;

  opacity:
    1;
}


/* ============================================================
   MANAGER STATUS FILTER DARK CONTRAST
   담당자 범위 전용
   ============================================================ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-button,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-button {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-button *,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-button * {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-menu,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-menu {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option {

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option:hover,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option:hover {

  background:
    var(--theme-surface-hover) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option.selected,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-text) !important;
}


/*
 * 내부에 span / strong 등이 별도 색을 갖고 있어도
 * 담당자 범위에서는 부모 테마색을 따르게 함
 */
html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option *,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option * {

  color:
    inherit !important;
}


/* ============================================================
   MANAGER STATUS FILTER DARK CONTRAST
   담당자 범위 전용
   ============================================================ */

html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-button,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-button {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line-strong) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-button *,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-button * {

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-menu,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-menu {

  background:
    var(--theme-surface-strong) !important;

  border-color:
    var(--theme-line) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option {

  color:
    var(--theme-text-2) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option:hover,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option:hover {

  background:
    var(--theme-surface-hover) !important;

  color:
    var(--theme-text) !important;
}


html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option.selected,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-text) !important;
}


/*
 * 내부에 span / strong 등이 별도 색을 갖고 있어도
 * 담당자 범위에서는 부모 테마색을 따르게 함
 */
html[data-resolved-theme="dark"]
body:not(.print-body)
.manager-status-option *,

html[data-resolved-theme="midnight"]
body:not(.print-body)
.manager-status-option * {

  color:
    inherit !important;
}



/* ============================================================
   MANAGER DATA VISUAL HIERARCHY
   ============================================================ */


/* ------------------------------------------------------------
   담당자 현황 - 이름
   ------------------------------------------------------------ */

.manager-name-btn {

  color:
    var(--theme-accent) !important;

  font-weight:
    800;

  text-decoration:
    none;

  transition:
    color 120ms ease,
    opacity 120ms ease;
}


.manager-name-btn:hover {

  color:
    var(--theme-accent-2) !important;

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


/* ------------------------------------------------------------
   일반 숫자
   거래처 수 / 투입일수
   ------------------------------------------------------------ */

.manager-status-table
.manager-stat {

  font-variant-numeric:
    tabular-nums;

  font-weight:
    700;
}


.manager-status-table
.manager-stat-primary {

  color:
    var(--theme-text) !important;
}


/* ------------------------------------------------------------
   결과 의미색
   성공 / 이탈 / 파토는 테마색이 아니라
   데이터 의미색을 유지
   ------------------------------------------------------------ */

.manager-status-table
.manager-stat-success {

  color:
    var(--theme-success) !important;

  font-weight:
    800;
}


.manager-status-table
.manager-stat-churn {

  color:
    var(--theme-danger) !important;

  font-weight:
    800;
}


.manager-status-table
.manager-stat-cancel {

  color:
    var(--theme-warning) !important;

  font-weight:
    800;
}


/* ------------------------------------------------------------
   성공률
   ------------------------------------------------------------ */

.manager-status-table
.manager-rate-badge {

  background:
    var(--theme-accent-soft) !important;

  border:
    1px solid
    var(--theme-accent-3);

  color:
    var(--theme-accent) !important;

  font-variant-numeric:
    tabular-nums;

  font-weight:
    800;
}


/* ------------------------------------------------------------
   수당
   ------------------------------------------------------------ */

.manager-status-table
.manager-money {

  font-variant-numeric:
    tabular-nums;
}


.manager-status-table
.manager-money-original {

  color:
    var(--theme-muted) !important;

  font-weight:
    650;
}


.manager-status-table
.manager-money-calculated {

  color:
    var(--theme-accent) !important;

  font-weight:
    850;
}


/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.manager-status-table
thead th {

  background:
    var(--theme-surface-soft) !important;

  color:
    var(--theme-muted) !important;
}


/* ------------------------------------------------------------
   ROW Hover
   ------------------------------------------------------------ */

.manager-status-detail-row:hover
td {

  background:
    var(--theme-surface-hover) !important;
}


/*
 * hover 상태에서도 의미색 / accent는 유지
 */

.manager-status-detail-row:hover
.manager-name-btn {

  color:
    var(--theme-accent) !important;
}


.manager-status-detail-row:hover
.manager-stat-success {

  color:
    var(--theme-success) !important;
}


.manager-status-detail-row:hover
.manager-stat-churn {

  color:
    var(--theme-danger) !important;
}


.manager-status-detail-row:hover
.manager-stat-cancel {

  color:
    var(--theme-warning) !important;
}


.manager-status-detail-row:hover
.manager-money-calculated {

  color:
    var(--theme-accent) !important;
}


/* ------------------------------------------------------------
   행 클릭 가능성 표현
   너무 강하게 만들지 않고 subtle 처리
   ------------------------------------------------------------ */

.manager-status-detail-row {

  transition:
    background 120ms ease;
}



/* ============================================================
   ALLOWANCE DETAIL THEME HIERARCHY
   ============================================================ */

/*
 * 수당 상세:
 * 1 = 거래처
 * 2 = 담당자
 * 3 = 가동월
 * 4 = 지급월
 * 5 = 투입일수
 * 6 = 미대상 포함
 * 7 = 실제 수령
 * 8 = 수령액 차이
 * 9 = 수당 대상
 */


/* 담당자 이름 */
.manager-allowance-table
tbody td:nth-child(2) {

  color:
    var(--theme-accent) !important;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* 거래처명은 기본 text */
.manager-allowance-table
tbody td:nth-child(1) {

  color:
    var(--theme-text) !important;

  font-weight:
    650;
}


/* 투입일수 */
.manager-allowance-table
tbody td:nth-child(5) {

  color:
    var(--theme-text) !important;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;
}


/* 미대상 포함 = 비교 기준 */
.manager-allowance-table
tbody td:nth-child(6) {

  color:
    var(--theme-muted) !important;

  font-weight:
    650;

  font-variant-numeric:
    tabular-nums;
}


/* 실제 수령 = 핵심 */
.manager-allowance-table
tbody td:nth-child(7) {

  color:
    var(--theme-accent) !important;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


/* 수령액 차이 */
.manager-allowance-table
tbody td:nth-child(8) {

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


/* 테이블 hover */
.manager-allowance-table
tbody tr:hover td {

  background:
    var(--theme-surface-hover) !important;
}


/*
 * hover가 들어와도 담당자/실제수령의
 * 강조색은 유지
 */
.manager-allowance-table
tbody tr:hover .manager-name-btn {

  color:
    var(--theme-accent-2) !important;
}


.manager-allowance-table
tbody tr:hover td:nth-child(7) {

  color:
    var(--theme-accent) !important;
}



/* ============================================================
   MANAGER ANALYSIS SECTION HEAD
   ============================================================ */

.manager-analysis-section-head {

  margin:
    8px 0 16px;

}


.manager-analysis-section-head-full {

  grid-column:
    1 / -1;

  width:
    100%;

}


.manager-analysis-section-head h2 {

  margin:
    0;

  color:
    var(--theme-text);

  font-size:
    22px;

  font-weight:
    800;

  line-height:
    1.3;

}


.manager-analysis-section-head p {

  margin:
    6px 0 0;

  color:
    var(--theme-muted);

  font-size:
    13px;

  line-height:
    1.55;

}


/*
 * scrollIntoView 시 상단 UI에 제목이 가려지지 않도록 여유
 */
.manager-scroll-target {

  scroll-margin-top:
    24px;

}



/* ============================================================
   SMARTDOCTOR SEASON THEMES
   Valentine / Summer
   ============================================================ */


/* ============================================================
   VALENTINE
   밝은 Pink / Rose / Heart
   ============================================================ */

html[data-resolved-theme="valentine"] {

  color-scheme:
    light;

  --theme-page-bg:
    #fff6f9;

  --theme-surface:
    #fffafb;

  --theme-surface-soft:
    #fff1f5;

  --theme-surface-strong:
    #ffffff;

  --theme-surface-hover:
    #fdeaf1;

  --theme-text:
    #351a26;

  --theme-muted:
    #8b6575;

  --theme-line:
    #f1d0dc;

  --theme-line-strong:
    #e8b5c7;

  --theme-accent:
    #e63e78;

  --theme-accent-2:
    #ef6796;

  --theme-accent-3:
    #f4a3bd;

  --theme-accent-soft:
    #fde6ee;

  --theme-success:
    #29936c;

  --theme-success-soft:
    #e6f5ef;

  --theme-danger:
    #da5264;

  --theme-danger-soft:
    #fcebed;

  --theme-warning:
    #d58a32;

  --theme-warning-soft:
    #fff2df;


  /*
   * Legacy UI token compatibility
   */
  --bg:
    #fff6f9;

  --card:
    #ffffff;

  --text:
    #351a26;

  --muted:
    #8b6575;

  --line:
    #f1d0dc;

  --purple:
    #e63e78;

  --purple2:
    #ef6796;

  --purpleSoft:
    #fde6ee;

}


html[data-resolved-theme="valentine"]
body {

  background-color:
    #fff6f9;

  background-image:
    radial-gradient(
      circle at 82% 3%,
      rgba(246,134,169,.22) 0,
      rgba(246,134,169,.10) 12%,
      transparent 30%
    ),
    radial-gradient(
      circle at 14% 24%,
      rgba(255,207,222,.28) 0,
      transparent 23%
    ),
    linear-gradient(
      180deg,
      #fff9fb 0%,
      #fff3f7 100%
    );

}


/*
 * 하트 느낌은 UI 전체에 난무하지 않고
 * 포인트 영역에만 사용합니다.
 */
html[data-resolved-theme="valentine"]
.eyebrow {

  color:
    var(--theme-accent);

}


html[data-resolved-theme="valentine"]
.analysis-switch-btn.active,

html[data-resolved-theme="valentine"]
.date-preset.active,

html[data-resolved-theme="valentine"]
.manager-date-preset.active {

  background:
    linear-gradient(
      135deg,
      #e63e78,
      #f06b9c
    );

}


html[data-resolved-theme="valentine"]
aside {

  background:
    rgba(255,250,252,.94);

  border-color:
    var(--theme-line);

}


html[data-resolved-theme="valentine"]
.exec-icon,

html[data-resolved-theme="valentine"]
.kpi-icon.purple {

  background:
    #fde3ec;

  color:
    #e63e78;

}


/*
 * Valentine Executive Summary palette
 */
html[data-resolved-theme="valentine"] {

  --exec-c1:
    #e63e78;

  --exec-c2:
    #f06d91;

  --exec-c3:
    #bd67b3;

  --exec-c4:
    #e19b3d;

  --exec-c5:
    #cf5d66;

  --exec-c6:
    #9c7b88;

}


/* ============================================================
   SUMMER
   밝은 Sky Blue / Aqua / Daisy
   ============================================================ */

html[data-resolved-theme="summer"] {

  color-scheme:
    light;

  --theme-page-bg:
    #f4fbff;

  --theme-surface:
    #fbfdff;

  --theme-surface-soft:
    #edf8ff;

  --theme-surface-strong:
    #ffffff;

  --theme-surface-hover:
    #e4f4ff;

  --theme-text:
    #17324b;

  --theme-muted:
    #66849b;

  --theme-line:
    #cce8f7;

  --theme-line-strong:
    #afd9ef;

  --theme-accent:
    #238fe4;

  --theme-accent-2:
    #4cabe8;

  --theme-accent-3:
    #8dcef3;

  --theme-accent-soft:
    #e1f3ff;

  --theme-success:
    #29a47d;

  --theme-success-soft:
    #e3f6ef;

  --theme-danger:
    #de6670;

  --theme-danger-soft:
    #fbecef;

  --theme-warning:
    #dfaa31;

  --theme-warning-soft:
    #fff6d9;


  /*
   * Legacy UI token compatibility
   */
  --bg:
    #f4fbff;

  --card:
    #ffffff;

  --text:
    #17324b;

  --muted:
    #66849b;

  --line:
    #cce8f7;

  --purple:
    #238fe4;

  --purple2:
    #4cabe8;

  --purpleSoft:
    #e1f3ff;

}


html[data-resolved-theme="summer"]
body {

  background-color:
    #f4fbff;

  /*
   * 하늘빛 + 햇빛/데이지를 연상시키는
   * 아주 약한 yellow highlight
   */
  background-image:
    radial-gradient(
      circle at 90% 4%,
      rgba(255,214,84,.18) 0,
      rgba(255,214,84,.08) 5%,
      transparent 16%
    ),
    radial-gradient(
      circle at 76% 12%,
      rgba(114,200,247,.20) 0,
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #f8fdff 0%,
      #edf8ff 100%
    );

}


html[data-resolved-theme="summer"]
.eyebrow {

  color:
    #238fe4;

}


html[data-resolved-theme="summer"]
.analysis-switch-btn.active,

html[data-resolved-theme="summer"]
.date-preset.active,

html[data-resolved-theme="summer"]
.manager-date-preset.active {

  background:
    linear-gradient(
      135deg,
      #238fe4,
      #57b7eb
    );

}


html[data-resolved-theme="summer"]
aside {

  background:
    rgba(248,253,255,.95);

  border-color:
    var(--theme-line);

}


html[data-resolved-theme="summer"]
.exec-icon,

html[data-resolved-theme="summer"]
.kpi-icon.purple {

  background:
    #dff2ff;

  color:
    #238fe4;

}


/*
 * 데이지 느낌의 yellow는 브랜드 accent로 쓰지 않고
 * 작은 포인트에만 사용합니다.
 */
html[data-resolved-theme="summer"]
.exec-card:nth-child(3)
.exec-icon {

  background:
    #fff5c9;

  color:
    #c99717;

}


/*
 * Summer Executive Summary palette
 */
html[data-resolved-theme="summer"] {

  --exec-c1:
    #238fe4;

  --exec-c2:
    #2da69a;

  --exec-c3:
    #6db34e;

  --exec-c4:
    #e1ad2f;

  --exec-c5:
    #668bd1;

  --exec-c6:
    #8297a8;

}



/* ============================================================
   LOGIN SEASON THEMES
   ============================================================ */

html[data-resolved-theme="valentine"]
body.login-bg {

  background:
    radial-gradient(
      circle at 78% 12%,
      rgba(242,100,149,.24),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #fff9fb,
      #ffeaf1
    );

}


html[data-resolved-theme="summer"]
body.login-bg {

  background:
    radial-gradient(
      circle at 82% 10%,
      rgba(255,214,85,.18),
      transparent 14%
    ),
    radial-gradient(
      circle at 70% 18%,
      rgba(72,177,235,.20),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #f9fdff,
      #e9f7ff
    );

}



/* ============================================================
   SEASON THEME DECORATION
   Valentine / Summer
   ============================================================ */


/* ------------------------------------------------------------
   공통
   ------------------------------------------------------------ */

html[data-resolved-theme="valentine"] body,
html[data-resolved-theme="summer"] body {

  position: relative;
  isolation: isolate;

}


html[data-resolved-theme="valentine"] body::before,
html[data-resolved-theme="summer"] body::before,
html[data-resolved-theme="valentine"] body::after,
html[data-resolved-theme="summer"] body::after {

  content: "";

  position: fixed;

  pointer-events: none;

  z-index: -2;

}


/* ============================================================
   VALENTINE
   ============================================================ */

html[data-resolved-theme="valentine"] body {

  background:
    radial-gradient(
      circle at 82% 5%,
      rgba(255,111,153,.23),
      transparent 24%
    ),
    radial-gradient(
      circle at 12% 34%,
      rgba(255,182,204,.22),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #fff9fb 0%,
      #fff0f5 100%
    ) !important;

}


/*
 * 하트 패턴
 */
html[data-resolved-theme="valentine"] body::before {

  inset: 0;

  opacity: .36;

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M31 39C19 23 0 32 0 50c0 19 31 38 31 38s31-19 31-38C62 32 43 23 31 39z' fill='%23ef5b8f' fill-opacity='.24'/%3E%3Cpath d='M132 108c-8-11-23-5-23 8 0 14 23 28 23 28s23-14 23-28c0-13-15-19-23-8z' fill='%23f5a2bd' fill-opacity='.24'/%3E%3C/svg%3E");

  background-size:
    180px 180px;

  background-position:
    20px 30px;

}


/*
 * 우상단 큰 하트
 */
html[data-resolved-theme="valentine"] body::after {

  top: 55px;
  right: 45px;

  width: 210px;
  height: 210px;

  opacity: .12;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 174S15 123 15 68C15 21 72 8 100 48c28-40 85-27 85 20 0 55-85 106-85 106z' fill='%23e83f78'/%3E%3C/svg%3E")
    center/contain
    no-repeat;

  transform:
    rotate(8deg);

}


/*
 * 카드에는 장식이 비치지 않도록 충분히 불투명하게
 */
html[data-resolved-theme="valentine"]
.card,

html[data-resolved-theme="valentine"]
.filter-card,

html[data-resolved-theme="valentine"]
.exec-card,

html[data-resolved-theme="valentine"]
.manager-card,

html[data-resolved-theme="valentine"]
.manager-filter-card {

  background:
    rgba(255,255,255,.94);

  backdrop-filter:
    blur(10px);

}


/*
 * 사이드 메뉴에 살짝 핑크빛
 */
html[data-resolved-theme="valentine"]
aside {

  background:
    linear-gradient(
      180deg,
      rgba(255,252,253,.97),
      rgba(255,242,247,.96)
    ) !important;

}


/*
 * 선택 메뉴에 하트 느낌
 */
html[data-resolved-theme="valentine"]
#tabs button.active {

  box-shadow:
    0 8px 22px
    rgba(230,62,120,.20);

}


/* ============================================================
   SUMMER
   ============================================================ */

html[data-resolved-theme="summer"] body {

  background:
    radial-gradient(
      circle at 90% 6%,
      rgba(255,220,86,.22),
      transparent 14%
    ),
    radial-gradient(
      circle at 80% 16%,
      rgba(81,189,240,.20),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f8fdff 0%,
      #ebf8ff 58%,
      #f5fcff 100%
    ) !important;

}


/*
 * 데이지 패턴
 */
html[data-resolved-theme="summer"] body::before {

  inset: 0;

  opacity: .32;

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg transform='translate(42 42)'%3E%3Cellipse cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse cx='0' cy='19' rx='7' ry='16' fill='white'/%3E%3Cellipse cx='19' cy='0' rx='16' ry='7' fill='white'/%3E%3Cellipse cx='-19' cy='0' rx='16' ry='7' fill='white'/%3E%3Cellipse transform='rotate(45)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse transform='rotate(-45)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse transform='rotate(135)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse transform='rotate(-135)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Ccircle r='8' fill='%23f5c94c'/%3E%3C/g%3E%3Cg transform='translate(165 145) scale(.7)'%3E%3Cellipse cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse cx='0' cy='19' rx='7' ry='16' fill='white'/%3E%3Cellipse cx='19' cy='0' rx='16' ry='7' fill='white'/%3E%3Cellipse cx='-19' cy='0' rx='16' ry='7' fill='white'/%3E%3Cellipse transform='rotate(45)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse transform='rotate(-45)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse transform='rotate(135)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Cellipse transform='rotate(-135)' cx='0' cy='-19' rx='7' ry='16' fill='white'/%3E%3Ccircle r='8' fill='%23f5c94c'/%3E%3C/g%3E%3C/svg%3E");

  background-size:
    210px 210px;

}


/*
 * 우측 상단 구름 느낌
 */
html[data-resolved-theme="summer"] body::after {

  top: 45px;
  right: 30px;

  width: 300px;
  height: 140px;

  opacity: .38;

  background:
    radial-gradient(
      ellipse at 20% 70%,
      white 0 25%,
      transparent 27%
    ),
    radial-gradient(
      ellipse at 42% 50%,
      white 0 31%,
      transparent 33%
    ),
    radial-gradient(
      ellipse at 68% 67%,
      white 0 29%,
      transparent 31%
    );

}


/*
 * 카드 glass 느낌
 */
html[data-resolved-theme="summer"]
.card,

html[data-resolved-theme="summer"]
.filter-card,

html[data-resolved-theme="summer"]
.exec-card,

html[data-resolved-theme="summer"]
.manager-card,

html[data-resolved-theme="summer"]
.manager-filter-card {

  background:
    rgba(255,255,255,.92);

  backdrop-filter:
    blur(10px);

}


/*
 * Sidebar
 */
html[data-resolved-theme="summer"]
aside {

  background:
    linear-gradient(
      180deg,
      rgba(248,253,255,.98),
      rgba(232,247,255,.96)
    ) !important;

}


/*
 * Summer 선택 메뉴
 */
html[data-resolved-theme="summer"]
#tabs button.active {

  box-shadow:
    0 8px 22px
    rgba(35,143,228,.18);

}


/*
 * 데이지 느낌의 노란 포인트
 */
html[data-resolved-theme="summer"]
.exec-card:nth-child(3)
.exec-icon,

html[data-resolved-theme="summer"]
.manager-section-title::before {

  background:
    #fff2ad;

  color:
    #b88700;

}


/* ============================================================
   LOGIN DECORATION
   ============================================================ */

html[data-resolved-theme="valentine"]
body.login-bg::before {

  opacity:
    .45;

}


html[data-resolved-theme="summer"]
body.login-bg::before {

  opacity:
    .45;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px),
       (orientation: landscape)
       and (max-height: 600px)
       and (max-width: 1200px) {

  html[data-resolved-theme="valentine"] body::after,
  html[data-resolved-theme="summer"] body::after {

    opacity:
      .08;

    transform:
      scale(.72);

    transform-origin:
      top right;

  }

}



/* ============================================================
   SVG UI ICON SYSTEM
   ============================================================ */

.ui-icon {

  display: inline-block;

  width: 18px;
  height: 18px;

  flex: 0 0 auto;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vertical-align:
    middle;

}


.ui-icon-inline {

  width: 15px;
  height: 15px;

  margin-right: 4px;

}


.ui-icon-kpi {

  width: 20px;
  height: 20px;

  stroke-width:
    2;

}


.ui-icon-exec {

  width: 15px;
  height: 15px;

}


.ui-icon-arrow {

  width: 15px;
  height: 15px;

}


.ui-icon-close {

  width: 18px;
  height: 18px;

}


#tabs button > span {

  display: inline-grid;

  place-items: center;

  width: 20px;
  height: 20px;

}


#tabs button > span .ui-icon {

  width: 17px;
  height: 17px;

}


.admin-settings-icon {

  display: inline-grid;

  place-items: center;

}


.admin-settings-icon .ui-icon {

  width: 16px;
  height: 16px;

}


.kpi-icon {

  display: grid;

  place-items: center;

}


.exec-icon {

  display: inline-grid;

  place-items: center;

}


.exec-head b {

  display: inline-grid;

  place-items: center;

}


.manager-nav-icon {

  width: 17px;
  height: 17px;

}


/*
 * active / hover는 currentColor 기반이라
 * 모든 테마에서 자동으로 색을 따라갑니다.
 */

#tabs button.active .ui-icon,
.analysis-switch-btn.active .ui-icon {

  color:
    currentColor;

}


/*
 * 상태 의미색
 */

.kpi-icon.red .ui-icon {

  color:
    var(--theme-danger);

}


.kpi-icon.orange .ui-icon {

  color:
    var(--theme-warning);

}


.kpi-icon.purple .ui-icon {

  color:
    var(--theme-accent);

}



/* ============================================================
   SVG ICON POLISH
   ============================================================ */

.ui-icon {

  stroke-width:
    1.9;

}


/*
 * 사이드 메뉴
 */
#tabs button > span .ui-icon,
.manager-analysis-tabs .manager-nav-icon {

  width:
    18px;

  height:
    18px;

  stroke-width:
    1.85;

}


/*
 * KPI 상태 아이콘은 조금 더 강하게
 */
.ui-icon-kpi {

  width:
    21px;

  height:
    21px;

  stroke-width:
    2.05;

}


/*
 * Executive Summary는 작고 정갈하게
 */
.ui-icon-exec {

  width:
    16px;

  height:
    16px;

  stroke-width:
    1.9;

}


/*
 * 우측 이동은 긴 화살표 대신 chevron
 */
.ui-icon-arrow {

  width:
    16px;

  height:
    16px;

  stroke-width:
    2.1;

}


/*
 * 아이콘 컨테이너에 미세한 광택
 */
.exec-icon,
.kpi-icon {

  position:
    relative;

}


.exec-icon::after,
.kpi-icon::after {

  content:
    "";

  position:
    absolute;

  inset:
    1px;

  border-radius:
    inherit;

  pointer-events:
    none;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.34);

}



/* ============================================================
   SIDEBAR ICON / LABEL ALIGNMENT
   ============================================================ */


/*
 * 거래처별 / 담당자별 사이드 메뉴 공통
 *
 * 24px = 아이콘 전용 고정 열
 * 나머지 = 메뉴명
 */
#tabs button,
.manager-analysis-tabs button {

  display:
    grid !important;

  grid-template-columns:
    24px minmax(0, 1fr);

  align-items:
    center;

  column-gap:
    9px;

  width:
    100%;

  min-height:
    42px;

  padding:
    0 14px !important;

  text-align:
    left;

  line-height:
    1.2;

}


/* ------------------------------------------------------------
   아이콘 슬롯
   ------------------------------------------------------------ */

#tabs button > span:first-child,
.manager-analysis-tabs button > .manager-nav-icon {

  justify-self:
    center;

  align-self:
    center;

}


/*
 * 거래처 메뉴는 span 안에 svg가 있으므로
 * span 자체를 24px 슬롯으로 고정
 */
#tabs button > span:first-child {

  display:
    grid !important;

  place-items:
    center;

  width:
    24px !important;

  height:
    24px !important;

  margin:
    0 !important;

}


/*
 * 담당자 메뉴는 SVG가 button의 직접 자식
 */
.manager-analysis-tabs
.manager-nav-icon {

  width:
    18px !important;

  height:
    18px !important;

  margin:
    0 !important;

}


/* ------------------------------------------------------------
   실제 SVG
   ------------------------------------------------------------ */

#tabs button
.ui-icon {

  display:
    block;

  width:
    18px !important;

  height:
    18px !important;

  margin:
    0;

}


/* ------------------------------------------------------------
   담당자 메뉴 label
   ------------------------------------------------------------ */

.manager-analysis-tabs button > span {

  min-width:
    0;

  margin:
    0 !important;

  text-align:
    left;

}


/* ------------------------------------------------------------
   활성 메뉴에서도 위치가 바뀌지 않게
   ------------------------------------------------------------ */

#tabs button.active,
.manager-analysis-tabs button.active {

  padding-left:
    14px !important;

  padding-right:
    14px !important;

}


/* ------------------------------------------------------------
   메뉴 간 세로 간격
   ------------------------------------------------------------ */

#tabs,
.manager-analysis-tabs {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


/*
 * 아이콘별 실제 path 모양이 달라도
 * 시각적 중심은 동일한 슬롯 안에서 유지됩니다.
 */
#tabs button .ui-icon,
.manager-analysis-tabs button .ui-icon {

  transform:
    none !important;

  transform-origin:
    center;

}



/* ============================================================
   PRINT SVG ICON SYSTEM
   ============================================================ */

.print-ui-icon {

  display:
    inline-block;

  flex:
    0 0 auto;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vertical-align:
    middle;

}


/* KPI */
.print-kpi-svg {

  width:
    18px;

  height:
    18px;

  stroke-width:
    2;

}


.print-kpi-icon {

  display:
    grid;

  place-items:
    center;

}


.print-kpi-icon.purple
.print-ui-icon {

  color:
    #7146ef;

}


.print-kpi-icon.red
.print-ui-icon {

  color:
    #d65d62;

}


.print-kpi-icon.orange
.print-ui-icon {

  color:
    #dc8a35;

}


/* 페이지 제목 */
.print-title-with-icon {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.print-title-icon {

  width:
    20px;

  height:
    20px;

  color:
    #7146ef;

  stroke-width:
    1.95;

}


/*
 * PDF에서는 아이콘이 텍스트보다 튀지 않도록
 * 크기와 색상을 보수적으로 유지
 */
@media print {

  .print-ui-icon {

    print-color-adjust:
      exact;

    -webkit-print-color-adjust:
      exact;

  }

}



/* ============================================================
   OPS RATE ADAPTIVE VIEW
   ============================================================ */

.ops-rate-single-mode {

  display:
    grid !important;

  place-items:
    center;

}


.ops-rate-single {

  width:
    min(
      100%,
      430px
    );

  padding:
    22px 26px;

  text-align:
    center;

}


.ops-rate-single-month {

  margin-bottom:
    8px;

  color:
    var(--theme-muted);

  font-size:
    13px;

  font-weight:
    800;

}


.ops-rate-single-main {

  color:
    var(--theme-accent);

  font-size:
    46px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -1.5px;

}


.ops-rate-single-stats {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  margin-top:
    18px;

  color:
    var(--theme-muted);

  font-size:
    12px;

}


.ops-rate-single-stats span {

  display:
    flex;

  align-items:
    baseline;

  gap:
    4px;

}


.ops-rate-single-stats b {

  color:
    var(--theme-text);

  font-size:
    14px;

  font-weight:
    800;

}


.ops-rate-single-stats i {

  width:
    1px;

  height:
    16px;

  background:
    var(--theme-line);

}


.ops-rate-single-note {

  margin-top:
    15px;

  color:
    var(--theme-muted);

  font-size:
    11px;

  line-height:
    1.45;

}


.ops-rate-empty {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    190px;

  padding:
    20px;

  text-align:
    center;

}


.ops-rate-empty-icon {

  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  margin-bottom:
    3px;

  border-radius:
    50%;

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

  font-size:
    20px;

  font-weight:
    700;

}


.ops-rate-empty strong {

  color:
    var(--theme-text);

  font-size:
    15px;

}


.ops-rate-empty span {

  max-width:
    340px;

  color:
    var(--theme-muted);

  font-size:
    11px;

  line-height:
    1.5;

}



/* ============================================================
   PRINT OPS ADAPTIVE CARD
   ============================================================ */

.print-ops-rate-adaptive {

  display:
    grid !important;

  place-items:
    center;

}


.print-ops-single {

  width:
    100%;

  box-sizing:
    border-box;

  padding:
    3mm 8mm 1mm;

  text-align:
    center;

}


.print-ops-single-month {

  color:
    #777286;

  font-size:
    8pt;

  font-weight:
    800;

}


.print-ops-single-rate {

  margin-top:
    1mm;

  color:
    #7146ef;

  font-size:
    29pt;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -.04em;

}


.print-ops-single-detail {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5mm;

  margin-top:
    3mm;

  color:
    #777286;

  font-size:
    7.5pt;

}


.print-ops-single-detail span {

  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    1mm;

}


.print-ops-single-detail b {

  color:
    #211d2b;

  font-size:
    9pt;

  font-weight:
    800;

}


.print-ops-single-detail i {

  width:
    .25mm;

  height:
    4mm;

  background:
    #e1dce9;

}


.print-ops-single p {

  margin:
    2.5mm 0 0;

  color:
    #938b9d;

  font-size:
    6.5pt;

}


.print-ops-empty {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    1.5mm;

  text-align:
    center;

}


.print-ops-empty-mark {

  display:
    grid;

  place-items:
    center;

  width:
    8mm;

  height:
    8mm;

  margin-bottom:
    1mm;

  border-radius:
    50%;

  background:
    #f0ebff;

  color:
    #7146ef;

  font-size:
    13pt;

  font-weight:
    700;

}


.print-ops-empty strong {

  color:
    #211d2b;

  font-size:
    9pt;

}


.print-ops-empty span {

  max-width:
    85mm;

  color:
    #8b8495;

  font-size:
    7pt;

  line-height:
    1.5;

}



/* ============================================================
   OPS RATE SCREEN ADAPTIVE
   ============================================================ */

.ops-rate-wrap {

  width:
    100%;

  min-height:
    100%;

}


.ops-rate-summary-mode {

  display:
    grid;

  place-items:
    center;

}


.ops-rate-summary-mode
#opsRate {

  display:
    grid !important;

  place-items:
    center;

  width:
    100%;

  min-height:
    260px;

}


.ops-rate-state {

  width:
    100%;

  max-width:
    430px;

  padding:
    28px 24px;

  box-sizing:
    border-box;

  text-align:
    center;

}


.ops-rate-period {

  color:
    var(--theme-muted);

  font-size:
    13px;

  font-weight:
    800;

}


.ops-rate-value {

  margin-top:
    7px;

  color:
    var(--theme-accent);

  font-size:
    48px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -1.5px;

}


.ops-rate-metrics {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  margin-top:
    22px;

}


.ops-rate-metrics > div {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    3px;

  min-width:
    62px;

}


.ops-rate-metrics strong {

  color:
    var(--theme-text);

  font-size:
    16px;

  font-weight:
    850;

}


.ops-rate-metrics span {

  color:
    var(--theme-muted);

  font-size:
    11px;

  font-weight:
    700;

}


.ops-rate-metrics i {

  width:
    1px;

  height:
    27px;

  background:
    var(--theme-line);

}


.ops-rate-note {

  margin:
    18px 0 0;

  color:
    var(--theme-muted);

  font-size:
    11px;

  line-height:
    1.5;

}


.ops-rate-state-empty {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

}


.ops-rate-state-icon {

  display:
    grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  margin-bottom:
    12px;

  border-radius:
    14px;

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

}


.ops-rate-state-icon
.ui-icon {

  width:
    20px;

  height:
    20px;

}


.ops-rate-state-empty strong {

  color:
    var(--theme-text);

  font-size:
    15px;

  font-weight:
    800;

}


.ops-rate-state-empty p {

  max-width:
    320px;

  margin:
    8px 0 0;

  color:
    var(--theme-muted);

  font-size:
    11px;

  line-height:
    1.55;

}



/* ============================================================
   OPS FINAL ADAPTIVE DISPLAY
   ============================================================ */

.ops-adaptive-single,
.ops-adaptive-empty {

  width:
    100%;

  max-width:
    390px;

  box-sizing:
    border-box;

  padding:
    30px 24px;

  text-align:
    center;

}


.ops-adaptive-month {

  color:
    var(--theme-muted);

  font-size:
    13px;

  font-weight:
    800;

}


.ops-adaptive-rate {

  margin-top:
    8px;

  color:
    var(--theme-accent);

  font-size:
    52px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -2px;

}


.ops-adaptive-rate small {

  margin-left:
    2px;

  font-size:
    22px;

  font-weight:
    800;

}


.ops-adaptive-label {

  margin-top:
    7px;

  color:
    var(--theme-text);

  font-size:
    12px;

  font-weight:
    800;

}


.ops-adaptive-divider {

  width:
    46px;

  height:
    3px;

  margin:
    18px auto;

  border-radius:
    999px;

  background:
    var(--theme-accent);

  opacity:
    .55;

}


.ops-adaptive-metrics {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    6px;

}


.ops-adaptive-metrics > div {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    4px;

}


.ops-adaptive-metrics strong {

  color:
    var(--theme-text);

  font-size:
    16px;

  font-weight:
    850;

}


.ops-adaptive-metrics span {

  color:
    var(--theme-muted);

  font-size:
    11px;

  font-weight:
    700;

}


.ops-adaptive-note {

  margin:
    18px 0 0;

  color:
    var(--theme-muted);

  font-size:
    11px;

}


.ops-adaptive-empty {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

}


.ops-adaptive-icon {

  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  margin-bottom:
    14px;

  border-radius:
    15px;

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

}


.ops-adaptive-icon
.ui-icon {

  width:
    22px;

  height:
    22px;

}


.ops-adaptive-empty strong {

  color:
    var(--theme-text);

  font-size:
    15px;

  font-weight:
    850;

}


.ops-adaptive-empty p {

  max-width:
    300px;

  margin:
    8px 0 0;

  color:
    var(--theme-muted);

  font-size:
    11px;

  line-height:
    1.55;

}



/* ============================================================
   LOGIN IDENTITY THEME COLORS
   ============================================================ */

body:not(.print-body)
.login-identity {

  color:
    var(--theme-muted) !important;

}


body:not(.print-body)
.login-identity strong {

  color:
    var(--theme-text) !important;

}


/*
 * 내부에 span / small 등이 추가되어 있어도
 * 하드코딩 색상이 남지 않도록 보조 텍스트 통일
 */
body:not(.print-body)
.login-identity span,

body:not(.print-body)
.login-identity small {

  color:
    var(--theme-muted) !important;

}



/* ============================================================
   ADMIN THEME INTEGRATION
   ============================================================ */

.admin-body {

  min-height:
    100vh;

  background-color:
    var(--theme-bg);

  color:
    var(--theme-text);

  transition:
    background-color .2s ease,
    color .2s ease;

}


/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */

.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body h4,
.admin-body strong {

  color:
    var(--theme-text);

}


.admin-body p,
.admin-body small,
.admin-body .eyebrow {

  color:
    var(--theme-muted);

}


/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.admin-header {

  color:
    var(--theme-text);

}


.admin-header .eyebrow {

  color:
    var(--theme-accent);

}


/* ------------------------------------------------------------
   Tabs
   ------------------------------------------------------------ */

.admin-tabs {

  border-color:
    var(--theme-line);

  background:
    var(--theme-card);

  box-shadow:
    var(--theme-shadow);

}


.admin-tabs button {

  color:
    var(--theme-muted);

}


.admin-tabs button:hover {

  color:
    var(--theme-text);

  background:
    var(--theme-accent-soft);

}


.admin-tabs button.active {

  background:
    var(--theme-accent);

  color:
    #fff;

}


/* ------------------------------------------------------------
   Cards / panels
   ------------------------------------------------------------ */

.admin-body .card,
.admin-body .admin-card,
.admin-body .admin-create-user,
.admin-body .admin-table-wrap,
.admin-body .admin-form-card {

  border-color:
    var(--theme-line);

  background:
    var(--theme-card);

  color:
    var(--theme-text);

  box-shadow:
    var(--theme-shadow);

}


/* ------------------------------------------------------------
   Form labels
   ------------------------------------------------------------ */

.admin-body label,
.admin-user-form label {

  color:
    var(--theme-muted);

}


/* ------------------------------------------------------------
   Inputs / selects
   ------------------------------------------------------------ */

.admin-body input,
.admin-body select,
.admin-body textarea,
.admin-inline-input {

  border-color:
    var(--theme-line);

  background:
    var(--theme-input, var(--theme-card));

  color:
    var(--theme-text);

}


.admin-body input::placeholder,
.admin-body textarea::placeholder {

  color:
    var(--theme-muted);

  opacity:
    .72;

}


.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus,
.admin-inline-input:focus {

  border-color:
    var(--theme-accent);

  outline:
    none;

  box-shadow:
    0 0 0 3px
    var(--theme-accent-soft);

}


/*
 * 브라우저 기본 select 색상도 어두운 테마에서
 * 흰 배경으로 튀지 않도록 함
 */
.admin-body option {

  background:
    var(--theme-card);

  color:
    var(--theme-text);

}


/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */

.admin-body table {

  color:
    var(--theme-text);

}


.admin-body th {

  border-color:
    var(--theme-line);

  background:
    var(--theme-surface, var(--theme-card));

  color:
    var(--theme-muted);

}


.admin-body td {

  border-color:
    var(--theme-line);

  color:
    var(--theme-text);

}


.admin-body tbody tr:hover {

  background:
    var(--theme-accent-soft);

}


/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.admin-body .ghost {

  border-color:
    var(--theme-line);

  background:
    var(--theme-card);

  color:
    var(--theme-text);

}


.admin-body .ghost:hover {

  border-color:
    var(--theme-accent);

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

}


.admin-body .primary {

  border-color:
    var(--theme-accent);

  background:
    var(--theme-accent);

  color:
    #fff;

}


/* ------------------------------------------------------------
   Admin page link
   ------------------------------------------------------------ */

.admin-page-link {

  color:
    var(--theme-accent);

  background:
    var(--theme-accent-soft);

}


.admin-page-link:hover {

  color:
    var(--theme-accent);

  background:
    var(--theme-accent-soft);

  filter:
    brightness(.97);

}


/* ------------------------------------------------------------
   Disabled / secondary states
   ------------------------------------------------------------ */

.admin-disabled-user {

  opacity:
    .55;

}


.admin-body [disabled] {

  opacity:
    .55;

}


/* ------------------------------------------------------------
   Dialog / modal
   ------------------------------------------------------------ */

.admin-body dialog,
.admin-body .modal,
.admin-body .admin-modal {

  border-color:
    var(--theme-line);

  background:
    var(--theme-card);

  color:
    var(--theme-text);

}


.admin-body dialog::backdrop {

  background:
    rgba(0,0,0,.48);

}


/* ------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------ */

.admin-body {

  scrollbar-color:
    var(--theme-line)
    transparent;

}


/* ------------------------------------------------------------
   Seasonal theme background
   Valentine / Summer는 대시보드와 같은 resolved theme 사용
   ------------------------------------------------------------ */

html[data-resolved-theme="valentine"]
.admin-body,
html[data-theme="valentine"]
.admin-body {

  background-color:
    var(--theme-bg);

}


html[data-resolved-theme="summer"]
.admin-body,
html[data-theme="summer"]
.admin-body {

  background-color:
    var(--theme-bg);

}



/* ============================================================
   ALLOWANCE DELTA KPI EMPHASIS
   ============================================================ */

#mkAllowanceDelta {

  transition:
    color .18s ease;

}


#mkAllowanceDelta.allowance-positive {

  color:
    var(--theme-success) !important;

}


#mkAllowanceDelta.allowance-negative {

  color:
    var(--theme-danger) !important;

}


/*
 * 설명 문구도 상태에 따라 미세하게 맞춤
 */






/*
 * 값이 0이면 기본 본문색
 */
#mkAllowanceDelta:not(
  .allowance-positive
):not(
  .allowance-negative
) {

  color:
    var(--theme-text) !important;

}





/* ============================================================
   ADMIN LOGIN USAGE
   ============================================================ */

.admin-usage-card {

  padding:
    0;

  overflow:
    hidden;

}


.admin-usage-table-wrap {

  overflow-x:
    auto;

}


.admin-usage-table {

  width:
    100%;

  border-collapse:
    collapse;

}


.admin-usage-table th,
.admin-usage-table td {

  padding:
    13px 15px;

  border-bottom:
    1px solid
    var(--theme-line);

  text-align:
    left;

  white-space:
    nowrap;

}


.admin-usage-table th {

  color:
    var(--theme-muted);

  font-size:
    11px;

  font-weight:
    800;

}


.admin-usage-table td {

  color:
    var(--theme-text);

  font-size:
    12px;

}


.admin-usage-table tbody tr:hover {

  background:
    var(--theme-accent-soft);

}


.admin-usage-login-id {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--theme-muted);

  font-size:
    10px;

}


.admin-usage-count {

  color:
    var(--theme-accent);

}


.admin-usage-none {

  color:
    var(--theme-muted);

}


.admin-usage-detail {

  margin:
    14px;

  padding:
    16px;

  border:
    1px solid
    var(--theme-line);

  border-radius:
    12px;

  background:
    var(--theme-surface);

}


.admin-usage-detail-head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;

}


.admin-usage-detail-head strong {

  display:
    block;

  color:
    var(--theme-text);
}


.admin-usage-detail-head span {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--theme-muted);

  font-size:
    11px;

}


.admin-usage-history {

  display:
    grid;

  gap:
    6px;

  max-height:
    320px;

  overflow-y:
    auto;

}


.admin-usage-history-row {

  display:
    grid;

  grid-template-columns:
    32px 1fr;

  align-items:
    center;

  min-height:
    34px;

  padding:
    5px 10px;

  border-radius:
    8px;

  background:
    var(--theme-card);

  color:
    var(--theme-text);

}


.admin-usage-history-row > span {

  color:
    var(--theme-muted);

  font-size:
    10px;

}




/* ============================================================
   ADMIN SIDEBAR LAYOUT
   기존 dashboard aside 디자인 재사용
   ============================================================ */

.admin-app-shell {

  min-height:
    100vh;

}


.admin-sidebar {

  z-index:
    20;

}


.admin-primary-nav {

  display:
    grid;

  gap:
    8px;

}


.admin-side-link {

  display:
    grid;

  grid-template-columns:
    24px minmax(0,1fr);

  align-items:
    center;

  gap:
    0;

  padding:
    13px 14px;

  border-radius:
    11px;

  color:
    var(--theme-text);

  font-size:
    14px;

  text-decoration:
    none;

  transition:
    .2s;

}


.admin-side-link > span {

  display:
    grid;

  place-items:
    center;

  width:
    20px;

  height:
    20px;

  color:
    var(--theme-muted);

}


.admin-side-link:hover {

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-text);

}


.admin-side-divider {

  height:
    1px;

  margin:
    18px 8px 16px;

  background:
    var(--theme-line);

}


.admin-side-section {

  display:
    grid;

  gap:
    4px;

}


.admin-side-heading {

  display:
    grid;

  grid-template-columns:
    24px minmax(0,1fr);

  align-items:
    center;

  min-height:
    38px;

  padding:
    6px 14px;

  color:
    var(--theme-text);

  font-size:
    13px;

  font-weight:
    800;

}


.admin-side-heading > span {

  display:
    grid;

  place-items:
    center;

  width:
    20px;

  height:
    20px;

  color:
    var(--theme-accent);

}


.admin-side-tab {

  width:
    100%;

  border:
    0;

  border-radius:
    9px;

  padding:
    10px 12px 10px 38px;

  background:
    transparent;

  color:
    var(--theme-muted);

  text-align:
    left;

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;

}


.admin-side-tab:hover {

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-text);

}


.admin-side-tab.active {

  background:
    var(--theme-accent-soft);

  color:
    var(--theme-accent);

  font-weight:
    900;

}


.admin-tabs-source {

  display:
    none !important;

}


.admin-main {

  min-width:
    0;

  width:
    100%;

  max-width:
    1800px;

  margin:
    0 auto;

  padding:
    27px 28px 50px;

}


.admin-sidebar .theme-setting {

  margin-bottom:
    8px;

}


.admin-sidebar .theme-setting select {

  width:
    100%;

}


.admin-sidebar .aside-bottom form {

  margin:
    0;

}


.admin-sidebar .aside-bottom form button {

  width:
    100%;

}




/* ============================================================
   MOBILE DASHBOARD V1
   ============================================================ */


/* PC에서는 모바일 헤더 숨김 */
.mobile-app-header,
.mobile-aside-backdrop {
  display: none;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 900px),
       (orientation: landscape)
       and (max-height: 600px)
       and (max-width: 1200px) {

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
  }


  body {
    padding-top: 62px;
  }


  body.mobile-menu-open {
    overflow: hidden !important;
  }


  /* ----------------------------------------------------------
     MOBILE HEADER
     ---------------------------------------------------------- */

  .mobile-app-header {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;
    right: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    height: 62px;

    padding:
      0 16px;

    border-bottom:
      1px solid
      var(--theme-line);

    background:
      color-mix(
        in srgb,
        var(--theme-card) 94%,
        transparent
      );

    backdrop-filter:
      blur(14px);

    -webkit-backdrop-filter:
      blur(14px);
  }


  .mobile-brand {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
  }


  .mobile-brand-logo {
    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    flex:
      0 0 36px;

    overflow: hidden;

    border:
      1px solid
      var(--theme-line);

    border-radius:
      11px;

    background:
      #fff;
  }


  .mobile-brand-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
  }


  .mobile-brand b {
    display: block;

    color:
      var(--theme-text);

    font-size: 13px;

    line-height: 1.15;
  }


  .mobile-brand small {
    display: block;

    margin-top: 2px;

    color:
      var(--theme-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
      .08em;
  }


  .mobile-menu-btn {
    position: relative;

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex:
      0 0 42px;

    padding: 0;

    border:
      1px solid
      var(--theme-line);

    border-radius:
      12px;

    background:
      var(--theme-surface-soft);

    color:
      var(--theme-text);

    cursor: pointer;
  }


  .mobile-menu-btn .ui-icon {
    width: 20px;
    height: 20px;
  }


  /*
   * sprite에 icon-menu가 아직 없더라도
   * 햄버거가 보이도록 fallback 유지
   */
  .mobile-menu-fallback {
    position: absolute;

    font-size: 20px;

    line-height: 1;
  }


  .mobile-menu-btn .ui-icon:not(:empty)
  + .mobile-menu-fallback {
    display: none;
  }


  /* ----------------------------------------------------------
     SIDEBAR DRAWER
     ---------------------------------------------------------- */

  .app-shell {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;
  }


  .app-sidebar {
    position: fixed !important;

    z-index: 1100 !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width:
      min(82vw, 300px) !important;

    height:
      100dvh !important;

    overflow-y:
      auto !important;

    transform:
      translateX(-105%);

    transition:
      transform .22s ease;

    box-shadow:
      18px 0 45px
      rgba(0,0,0,.18);
  }


  .app-sidebar.mobile-open {
    transform:
      translateX(0);
  }


  .mobile-aside-backdrop {
    position: fixed;

    z-index: 1050;

    inset: 0;

    display: block;

    background:
      rgba(8,10,18,.48);

    backdrop-filter:
      blur(2px);
  }


  .mobile-aside-backdrop[hidden] {
    display: none !important;
  }


  /* ----------------------------------------------------------
     MAIN
     ---------------------------------------------------------- */

  .app-shell > main,
  main {
    width: 100% !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
      16px !important;

    overflow:
      visible !important;
  }


  /* ----------------------------------------------------------
     ANALYSIS SWITCH
     ---------------------------------------------------------- */

  .analysis-switch {
    width: 100%;

    margin-bottom:
      16px;
  }


  .analysis-switch-btn {
    min-height:
      42px;
  }


  /* ----------------------------------------------------------
     PAGE HEADER
     ---------------------------------------------------------- */

  #customerAnalysis > header,
  #managerAnalysis > header,
  #customerAnalysis header,
  #managerAnalysis header {
    align-items:
      flex-start;

    gap:
      14px;

    flex-wrap:
      wrap;
  }


  #customerAnalysis header h1,
  #managerAnalysis header h1 {
    font-size:
      clamp(
        22px,
        6vw,
        30px
      );

    line-height:
      1.2;
  }


  .header-actions {
    width: 100%;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
  }


  .header-actions > * {
    min-height:
      42px;
  }


  /* ----------------------------------------------------------
     FILTER
     ---------------------------------------------------------- */

  #customerAnalysis .filter-card,
  #managerAnalysis .manager-filter-card {
    width: 100% !important;

    min-width: 0 !important;

    padding:
      14px !important;
  }


  /*
   * 담당자 필터는 PC의 9열 grid를 해제하고
   * 모바일 2열 grid로 전환합니다.
   */
  


  


  /*
   * 기간
   * 첫 번째 필터이므로 전체폭 사용
   */
  #managerAnalysis
  .manager-filter-grid > label:first-child {
    grid-column:
      1 / -1 !important;
  }


  /*
   * 담당자 범위 / 담당자
   * 긴 텍스트와 커스텀 메뉴가 있으므로
   * 각각 한 줄 전체 사용
   */
  #managerAnalysis
  .manager-status-filter,
  #managerAnalysis
  .manager-check-filter {
    grid-column:
      1 / -1 !important;
  }


  .filter-top {
    display: flex;

    align-items:
      flex-end;

    gap:
      10px;

    flex-wrap:
      wrap;
  }


  .date-filter {
    flex:
      1 1 100%;

    min-width:
      0 !important;
  }


  .date-input-row {
    display: grid;

    grid-template-columns:
      minmax(0,1fr)
      auto
      minmax(0,1fr);

    align-items:
      center;

    width: 100%;

    gap: 6px;
  }


  .date-input-row input {
    width: 100% !important;

    min-width: 0 !important;

    height: 44px;
  }


  .date-presets {
    display: grid;

    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      );

    width: 100%;

    gap: 6px;

    margin-top:
      8px;
  }


  .date-preset {
    min-width: 0 !important;

    min-height:
      38px;

    padding:
      6px 4px !important;

    white-space:
      nowrap;
  }


  #detailFilters.filters:not(.collapsed) {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      10px !important;
  }


  #detailFilters label,
  .manager-filter-card label {
    min-width:
      0 !important;
  }


  #detailFilters select,
  .manager-filter-card select,
  .manager-filter-card input {
    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      44px;
  }


  #managerAnalysis .manager-date-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr) !important;

    align-items:
      center !important;

    gap:
      7px !important;

    width:
      100% !important;

    min-width:
      0 !important;

    margin-top:
      6px !important;
  }


  #managerAnalysis .manager-date-row input {
    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    margin:
      0 !important;
  }


  #managerAnalysis .manager-date-row > span {
    display:
      block !important;

    width:
      auto !important;

    min-width:
      8px !important;

    text-align:
      center !important;

    white-space:
      nowrap !important;
  }


  #managerAnalysis .manager-date-presets {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap:
      6px !important;

    width:
      100% !important;

    min-width:
      0 !important;

    margin-top:
      8px !important;
  }


  #managerAnalysis .manager-date-preset {
    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      38px !important;

    margin:
      0 !important;

    padding:
      7px 3px !important;

    white-space:
      nowrap !important;

    font-size:
      11px !important;
  }


  /*
   * 커스텀 콤보도 자신의 grid cell보다
   * 넓어지지 않도록 제한
   */
  #managerAnalysis .manager-status-combo,
  #managerAnalysis .checked-combo {
    position:
      relative;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;
  }


  #managerAnalysis .manager-status-button,
  #managerAnalysis .checked-combo-button {
    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      44px !important;

    max-width:
      100% !important;
  }


  #managerAnalysis .manager-status-menu,
  #managerAnalysis .checked-combo-menu {
    left:
      0 !important;

    right:
      auto !important;

    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;

    z-index:
      300 !important;
  }


  /* ----------------------------------------------------------
     KPI
     ---------------------------------------------------------- */

  .kpis,
  .manager-kpis {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      10px !important;
  }


  .kpi,
  .manager-kpi {
    min-width:
      0 !important;

    min-height:
      112px;

    padding:
      14px !important;
  }


  .kpi strong,
  .manager-kpi strong {
    font-size:
      clamp(
        22px,
        6vw,
        30px
      );
  }


  /* 성공률 KPI는 모바일 한 줄 전체 사용 */
  .kpis .rate-kpi {
    grid-column:
      1 / -1;
  }


  /* ----------------------------------------------------------
     CHARTS / CARDS
     ---------------------------------------------------------- */

  .grid2,
  .grid3,
  .grid4,
  .dept-grid,
  .manager-chart-grid,
  .manager-allowance-grid {
    grid-template-columns:
      1fr !important;

    width:
      100% !important;

    min-width:
      0 !important;

    gap:
      12px !important;
  }


  .card,
  .manager-card {
    min-width:
      0 !important;
  }


  .chart {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  /* Executive Summary */
  .executive-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:
      10px !important;
  }


  .exec-card {
    min-width:
      0 !important;

    padding:
      13px !important;
  }


  /* ----------------------------------------------------------
     TABLES
     표 자체를 찌그러뜨리지 않고 해당 영역만 스크롤
     ---------------------------------------------------------- */

  .manager-table-card,
  .manager-allowance-section,
  .manager-rate-matrix-wrap,
  .table-wrap,
  .table-scroll,
  .manager-table-wrap {
    max-width:
      100% !important;

    overflow-x:
      auto !important;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  table {
    max-width:
      none;
  }


  /* ----------------------------------------------------------
     MINI FILTER
     모바일에서도 기존 fixed mini filter를 사용합니다.
     원본 필터가 화면 위로 지나간 뒤 표시됩니다.
     ---------------------------------------------------------- */

}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 600px) {

  body {
    padding-top:
      58px;
  }


  .mobile-app-header {
    height:
      58px;

    padding:
      0 12px;
  }


  .mobile-brand-logo {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }


  .mobile-menu-btn {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;
  }


  .app-shell > main,
  main {
    padding:
      12px !important;
  }


  /* KPI는 작은 휴대폰에서도 2열 */
  .kpis,
  .manager-kpis {
    gap:
      8px !important;
  }


  .kpi,
  .manager-kpi {
    min-height:
      104px;

    padding:
      12px !important;
  }


  .kpi-icon {
    width:
      34px;

    height:
      34px;
  }


  /* 상세 필터는 휴대폰 1열 */
  #detailFilters.filters:not(.collapsed) {
    grid-template-columns:
      1fr !important;
  }


  .date-presets {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  /* Summary도 좁은 폰에서는 1열 */
  .executive-summary {
    grid-template-columns:
      1fr !important;
  }


  .header-actions {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;
  }


  .header-actions .segmented {
    grid-column:
      1 / -1;

    width:
      100%;
  }


  .header-actions .segmented button {
    flex:
      1;
  }


  .header-actions > .primary,
  .header-actions > .ghost {
    width:
      100%;
  }


  .card-title {
    align-items:
      flex-start;

    gap:
      8px;
  }


  .card-title h2,
  .card-title h3 {
    line-height:
      1.3;
  }


  /*
   * ECharts는 너무 낮아지면 범례와 축이 겹치므로
   * 모바일에서 기본 높이를 확보
   */
  .chart {
    min-height:
      300px;
  }


  .manager-rate-matrix {
    min-width:
      520px;
  }

}










/* ============================================================
   MOBILE MANAGER FILTER FLEX FINAL
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  body #managerAnalysis .manager-filter-card {
    position: relative !important;
    top: auto !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 12px !important;
  }


  /*
   * 모바일에서는 PC grid를 완전히 포기하고
   * 2열 flex 구조로 고정합니다.
   */
  


  body #managerAnalysis
  .manager-filter-grid > * {
    box-sizing: border-box !important;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /*
   * 기간 = 한 줄 전체
   */
  body #managerAnalysis
  


  /*
   * 2~9 = 정확히 2열
   */
  body #managerAnalysis
  


  


  /* ========================================================
     기간
     ======================================================== */

  body #managerAnalysis .manager-date-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      12px
      minmax(0, 1fr) !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;

    margin-top: 6px !important;
  }


  body #managerAnalysis
  .manager-date-row input {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 6px 7px !important;

    font-size: 11px !important;
  }


  body #managerAnalysis
  .manager-date-row > span {
    width: 12px !important;

    margin: 0 !important;

    text-align: center !important;

    white-space: nowrap !important;
  }


  body #managerAnalysis
  .manager-date-presets {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0,1fr)) !important;

    width: 100% !important;

    gap: 5px !important;

    margin-top: 6px !important;
  }


  body #managerAnalysis
  .manager-date-preset {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 4px 2px !important;

    font-size: 10px !important;

    white-space: nowrap !important;
  }


  /* ========================================================
     일반 select
     ======================================================== */

  body #managerAnalysis
  .manager-filter-grid
  select:not(.manager-status-native):not(.checked-combo-native) {

    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;

    margin-top: 6px !important;

    padding: 7px 9px !important;

    font-size: 11px !important;
  }


  /* ========================================================
     담당자 범위 / 담당자
     ======================================================== */

  body #managerAnalysis .manager-status-filter,
  body #managerAnalysis .manager-check-filter {

    flex:
      0 0 calc(50% - 4px) !important;

    width:
      calc(50% - 4px) !important;
  }


  body #managerAnalysis .manager-status-combo,
  body #managerAnalysis .checked-combo {

    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;

    margin-top: 6px !important;
  }


  body #managerAnalysis .manager-status-button,
  body #managerAnalysis .checked-combo-button {

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 7px 9px !important;

    overflow: hidden !important;

    font-size: 11px !important;
  }


  body #managerAnalysis #mManagerStatusText,
  body #managerAnalysis #mManagerComboText {

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;
  }


  body #managerAnalysis .manager-status-menu,
  body #managerAnalysis .checked-combo-menu {

    box-sizing: border-box !important;

    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    z-index: 500 !important;
  }


  /* ========================================================
     초기화
     ======================================================== */

  body #managerAnalysis .manager-filter-actions {

    display: flex !important;

    align-items: flex-end !important;

    width:
      calc(50% - 4px) !important;

    flex:
      0 0 calc(50% - 4px) !important;

    min-width: 0 !important;
  }


  body #managerAnalysis
  .manager-filter-actions #mReset {

    box-sizing: border-box !important;

    width: 100% !important;

    height: 42px !important;

    margin: 0 !important;
  }

}


/* ============================================================
   MOBILE MANAGER FILTER FLEX FINAL END
   ============================================================ */









/* ============================================================
   MOBILE CUSTOMER FILTER FINAL
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  /* ----------------------------------------------------------
     FILTER CARD
     ---------------------------------------------------------- */

  body #customerAnalysis > .filter-card {
    position: relative !important;
    top: auto !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 12px !important;

    overflow: visible !important;
  }


  /* ----------------------------------------------------------
     PC의 display:contents 완전 해제
     ---------------------------------------------------------- */

  body #customerAnalysis
  > .filter-card
  > .filter-top {

    display: block !important;

    position: static !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  body #customerAnalysis
  > .filter-card
  > #detailFilters,

  body #customerAnalysis
  > .filter-card
  > #detailFilters.collapsed,

  body #customerAnalysis
  > .filter-card
  > #detailFilters:not(.collapsed) {

    display: grid !important;

    position: static !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    gap: 10px 8px !important;

    margin: 12px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    transition: none !important;

    pointer-events: auto !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     기간
     기존 grid-column:1/5 제거
     ---------------------------------------------------------- */

  body #customerAnalysis .date-filter {

    display: block !important;

    position: static !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex: none !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     날짜
     ---------------------------------------------------------- */

  body #customerAnalysis .date-input-row {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      12px
      minmax(0, 1fr) !important;

    align-items: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 5px !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  body #customerAnalysis
  .date-input-row input[type="date"] {

    display: block !important;

    position: static !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 6px 5px !important;

    font-size: 10px !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  body #customerAnalysis
  .date-input-row > span {

    display: block !important;

    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    white-space: nowrap !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     기간 프리셋
     ---------------------------------------------------------- */

  body #customerAnalysis .date-presets {

    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 5px !important;

    margin: 7px 0 0 !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  body #customerAnalysis .date-preset {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 3px 2px !important;

    font-size: 10px !important;

    white-space: nowrap !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     모바일에서는 상세필터 항상 노출
     ---------------------------------------------------------- */

  body #customerAnalysis #filterToggle {
    display: none !important;
  }


  /*
   * PC용 초기화 영역은 모바일에서 숨김.
   * customerMobileReset 사용.
   */
  body #customerAnalysis
  .filter-top > .filter-actions {

    display: none !important;
  }


  /* ----------------------------------------------------------
     상세 필터 6개
     PC의 :has() grid-column까지 전부 초기화
     ---------------------------------------------------------- */

  body #customerAnalysis
  #detailFilters > label {

    display: block !important;

    position: static !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;

    grid-column: auto !important;
    grid-row: auto !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    line-height: 1.35 !important;

    color:
      var(
        --theme-text-2,
        var(--theme-text)
      ) !important;
  }


  /*
   * ID 기반 PC 배치 규칙을 확실히 해제
   */
  body #customerAnalysis
  #detailFilters > label:has(#department),

  body #customerAnalysis
  #detailFilters > label:has(#payType),

  body #customerAnalysis
  #detailFilters > label:has(#changeType),

  body #customerAnalysis
  #detailFilters > label:has(#manager),

  body #customerAnalysis
  #detailFilters > label:has(#result),

  body #customerAnalysis
  #detailFilters > label:has(#opsFilter) {

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  body #customerAnalysis
  #detailFilters select {

    display: block !important;

    position: static !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 6px 0 0 !important;

    padding: 6px 9px !important;

    font-size: 11px !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     모바일 초기화
     ---------------------------------------------------------- */

  body #customerAnalysis
  #customerMobileReset {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    order: initial !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 42px !important;

    margin: 10px 0 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     활성 필터 chip
     ---------------------------------------------------------- */

  body #customerAnalysis #chips {

    display: flex !important;

    flex-wrap: nowrap !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 6px !important;

    margin: 8px 0 0 !important;

    padding: 0 0 2px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none;
  }


  body #customerAnalysis #chips:empty {
    display: none !important;
  }


  body #customerAnalysis
  #chips::-webkit-scrollbar {
    display: none;
  }


  body #customerAnalysis
  #chips .chip {
    flex: 0 0 auto !important;

    white-space: nowrap !important;
  }

}


/*
 * PC에서는 모바일 초기화 숨김
 */

@media (min-width: 901px)
       and (min-height: 601px),
       (min-width: 1201px) {

  #customerMobileReset {
    display: none !important;
  }

}



/* ============================================================
   MOBILE CUSTOMER FILTER FINAL END
   ============================================================ */









/* ============================================================
   CUSTOMER MOBILE DETAIL COMPACT V2
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  /*
   * 2열 x 3행
   *
   * 제목 12px
   * gap 4px
   * select 36px
   * = 52px
   */
  html body #customerAnalysis
  > .filter-card
  > #detailFilters {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-template-rows:
      52px
      52px
      52px !important;

    grid-auto-rows:
      52px !important;

    column-gap:
      8px !important;

    row-gap:
      7px !important;

    align-items:
      start !important;

    align-content:
      start !important;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin-top:
      10px !important;

    overflow:
      visible !important;
  }


  html body #customerAnalysis
  > .filter-card
  > #detailFilters
  > label {

    display: grid !important;

    grid-template-rows:
      12px
      36px !important;

    row-gap:
      4px !important;

    align-items:
      stretch !important;

    align-self:
      start !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      52px !important;

    min-height:
      52px !important;

    max-height:
      52px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;
  }


  /*
   * 필터 제목
   */
  html body #customerAnalysis
  .customer-filter-label {

    display:
      block !important;

    width:
      100% !important;

    height:
      12px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    color:
      var(
        --theme-text-2,
        var(--theme-text)
      ) !important;

    font-size:
      10px !important;

    font-weight:
      800 !important;

    line-height:
      12px !important;

    white-space:
      nowrap !important;

    overflow:
      visible !important;
  }


  /*
   * native select
   */
  html body #customerAnalysis
  > .filter-card
  > #detailFilters
  > label
  > select {

    display:
      block !important;

    position:
      static !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      36px !important;

    min-height:
      36px !important;

    max-height:
      36px !important;

    margin:
      0 !important;

    padding:
      5px 9px !important;
  }


  /*
   * select가 checked-combo로 교체되는 경우
   */
  html body #customerAnalysis
  > .filter-card
  > #detailFilters
  > label
  > .checked-combo {

    position:
      relative !important;

    width:
      100% !important;

    height:
      36px !important;

    min-height:
      36px !important;

    max-height:
      36px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  html body #customerAnalysis
  #detailFilters
  .checked-combo-button {

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      36px !important;

    min-height:
      36px !important;

    max-height:
      36px !important;

    margin:
      0 !important;

    padding:
      5px 9px !important;
  }


  /*
   * 초기화는 상세 필터 다음에 별도 행
   */
  html body #customerAnalysis
  #customerMobileReset {

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    position:
      static !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      36px !important;

    min-height:
      36px !important;

    margin:
      8px 0 0 !important;

    transform:
      none !important;
  }

}


/* ============================================================
   CUSTOMER MOBILE DETAIL COMPACT V2 END
   ============================================================ */




/* ============================================================
   CUSTOMER MOBILE FILTER NORMALIZED FINAL
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  html body #customerAnalysis
  > .filter-card
  > #detailFilters {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      none !important;

    grid-auto-rows:
      max-content !important;

    grid-auto-flow:
      row !important;

    align-items:
      start !important;

    align-content:
      start !important;

    column-gap:
      8px !important;

    row-gap:
      8px !important;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      10px 0 0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;
  }


  /*
   * 모든 필터 아이템 동일 구조
   */
  html body #customerAnalysis
  #detailFilters
  > .customer-filter-item {

    position:
      static !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      12px 38px !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    align-self:
      start !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      54px !important;

    min-height:
      54px !important;

    max-height:
      54px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    gap:
      4px !important;

    overflow:
      visible !important;
  }


  html body #customerAnalysis
  #detailFilters
  .customer-filter-label {

    display:
      block !important;

    width:
      100% !important;

    height:
      12px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    color:
      var(
        --theme-text-2,
        var(--theme-text)
      ) !important;

    font-size:
      10px !important;

    font-weight:
      800 !important;

    line-height:
      12px !important;

    white-space:
      nowrap !important;
  }


  /*
   * native select / checked-combo 공통
   */
  html body #customerAnalysis
  #detailFilters
  .customer-filter-control {

    box-sizing:
      border-box !important;

    display:
      block !important;

    position:
      relative !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  html body #customerAnalysis
  #detailFilters
  select.customer-filter-control {

    padding:
      6px 9px !important;
  }


  html body #customerAnalysis
  #detailFilters
  .customer-filter-control
  > .checked-combo-button {

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    margin:
      0 !important;
  }


  /*
   * 초기화는 상세필터 밖에서 전체폭
   */
  html body #customerAnalysis
  #customerMobileReset {

    position:
      static !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    margin:
      8px 0 0 !important;

    transform:
      none !important;
  }

}




/* ============================================================
   CUSTOMER MOBILE FILTER ABSOLUTE FINAL
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  /*
   * 상세필터 컨테이너
   * 높이를 고정하지 않고 내용에 맡깁니다.
   */
  html body #customerAnalysis
  > .filter-card
  > #detailFilters,
  html body #customerAnalysis
  > .filter-card
  > #detailFilters.collapsed,
  html body #customerAnalysis
  > .filter-card
  > #detailFilters:not(.collapsed) {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      none !important;

    grid-auto-rows:
      max-content !important;

    grid-auto-flow:
      row !important;

    align-items:
      start !important;

    align-content:
      start !important;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      10px 0 0 !important;

    padding:
      0 !important;

    column-gap:
      8px !important;

    row-gap:
      8px !important;

    overflow:
      visible !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    transform:
      none !important;
  }


  /*
   * 여섯 필터 모두 완전히 동일한 구조
   */
  html body #customerAnalysis
  #detailFilters
  > .customer-mobile-field {

    position:
      static !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    justify-content:
      flex-start !important;

    align-self:
      start !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      0 !important;

    padding:
      0 !important;

    gap:
      4px !important;

    overflow:
      visible !important;

    color:
      var(
        --theme-text-2,
        var(--theme-text)
      ) !important;

    font-size:
      10px !important;

    font-weight:
      800 !important;

    line-height:
      12px !important;
  }


  /*
   * 제목은 DOM 텍스트에 의존하지 않고
   * data-filter-label에서 직접 표시
   */
  html body #customerAnalysis
  #detailFilters
  > .customer-mobile-field::before {

    content:
      attr(data-filter-label) !important;

    display:
      block !important;

    position:
      static !important;

    width:
      100% !important;

    height:
      12px !important;

    min-height:
      12px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    color:
      var(
        --theme-text-2,
        var(--theme-text)
      ) !important;

    font-size:
      10px !important;

    font-weight:
      800 !important;

    line-height:
      12px !important;

    white-space:
      nowrap !important;
  }


  /*
   * 기존 span이 혹시 남아 있어도 중복 제목 방지
   */
  html body #customerAnalysis
  #detailFilters
  .customer-filter-label {

    display:
      none !important;
  }


  /*
   * native select
   */
  html body #customerAnalysis
  #detailFilters
  > .customer-mobile-field
  > select {

    position:
      static !important;

    display:
      block !important;

    box-sizing:
      border-box !important;

    flex:
      none !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;

    margin:
      0 !important;

    padding:
      6px 9px !important;
  }


  /*
   * checked-combo로 변환되는 경우도 동일
   */
  html body #customerAnalysis
  #detailFilters
  > .customer-mobile-field
  > .checked-combo {

    position:
      relative !important;

    display:
      block !important;

    flex:
      none !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  html body #customerAnalysis
  #detailFilters
  .checked-combo-button {

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;

    margin:
      0 !important;
  }


  /*
   * 초기화는 detailFilters 다음에 독립 배치
   */
  html body #customerAnalysis
  #customerMobileReset {

    position:
      static !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    margin:
      8px 0 0 !important;

    transform:
      none !important;
  }

}


/* ============================================================
   CUSTOMER MOBILE FILTER ABSOLUTE FINAL END
   ============================================================ */



/* ============================================================
   CUSTOMER MOBILE REAL LABEL FINAL
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  /*
   * 상세필터:
   * 2열 × 3행
   */
  html body #customerAnalysis
  > .filter-card
  > #detailFilters,
  html body #customerAnalysis
  > .filter-card
  > #detailFilters.collapsed,
  html body #customerAnalysis
  > .filter-card
  > #detailFilters:not(.collapsed) {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      none !important;

    grid-auto-rows:
      auto !important;

    column-gap:
      8px !important;

    row-gap:
      10px !important;

    align-items:
      start !important;

    align-content:
      start !important;

    width:
      100% !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      10px 0 0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;
  }


  /*
   * 각 필터를
   *
   * 제목
   * 4px
   * 컨트롤
   *
   * 구조로 고정
   */
  html body #customerAnalysis
  #detailFilters
  > label.customer-mobile-field {

    position:
      relative !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      12px 38px !important;

    row-gap:
      4px !important;

    align-items:
      start !important;

    align-content:
      start !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      54px !important;

    min-height:
      54px !important;

    max-height:
      54px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;
  }


  /*
   * 가상 제목 제거
   */
  html body #customerAnalysis
  #detailFilters
  > label.customer-mobile-field::before {

    content:
      none !important;

    display:
      none !important;
  }


  /*
   * 실제 제목
   */
  html body #customerAnalysis
  #detailFilters
  > label.customer-mobile-field
  > .customer-filter-label {

    grid-row:
      1 !important;

    grid-column:
      1 !important;

    position:
      static !important;

    display:
      block !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    height:
      12px !important;

    min-height:
      12px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    color:
      var(--theme-text-2, var(--theme-text)) !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    font-size:
      10px !important;

    font-weight:
      800 !important;

    line-height:
      12px !important;

    white-space:
      nowrap !important;
  }


  /*
   * 실제 화면에 보이는 checked-combo
   */
  html body #customerAnalysis
  #detailFilters
  > label.customer-mobile-field
  > .checked-combo.customer-filter-control {

    grid-row:
      2 !important;

    grid-column:
      1 !important;

    position:
      relative !important;

    display:
      block !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    transform:
      none !important;
  }


  html body #customerAnalysis
  #detailFilters
  .customer-filter-control
  > .checked-combo-button {

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    height:
      38px !important;

    min-height:
      38px !important;

    max-height:
      38px !important;

    margin:
      0 !important;

    transform:
      none !important;
  }


  /*
   * 원본 select는 접근성/값 보관용.
   * 레이아웃에는 참여시키지 않음.
   */
  html body #customerAnalysis
  #detailFilters
  > label.customer-mobile-field
  > select.checked-combo-native {

    position:
      absolute !important;

    width:
      1px !important;

    height:
      1px !important;

    min-width:
      1px !important;

    min-height:
      1px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;

    overflow:
      hidden !important;

    clip:
      rect(0 0 0 0) !important;

    clip-path:
      inset(50%) !important;
  }


  /*
   * 초기화는 필터 grid 바깥에서 별도 행
   */
  html body #customerAnalysis
  #customerMobileReset {

    position:
      static !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    box-sizing:
      border-box !important;

    width:
      100% !important;

    min-width:
      0 !important;

    height:
      38px !important;

    min-height:
      38px !important;

    margin:
      8px 0 0 !important;

    padding:
      6px 10px !important;

    transform:
      none !important;
  }

}


/* ============================================================
   CUSTOMER MOBILE REAL LABEL FINAL END
   ============================================================ */



/* ============================================================
   MOBILE MINI FILTER FINAL
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  /*
   * 거래처 / 담당자 공통
   *
   * JS의 기존 hidden 처리와 scroll visibility 로직은 그대로 사용.
   * 여기서는 모바일 레이아웃만 담당합니다.
   */

  body:not(.print-body)
  .customer-mini-filter,

  body:not(.print-body)
  .manager-mini-filter {
    box-sizing: border-box !important;

    position: fixed !important;

    top: 66px !important;
    left: 10px !important;
    right: 10px !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    z-index: 1200 !important;
  }


  /*
   * HTML hidden 속성은 반드시 존중
   */
  body:not(.print-body)
  .customer-mini-filter[hidden],

  body:not(.print-body)
  .manager-mini-filter[hidden] {
    display: none !important;
  }


  /*
   * 표시 상태
   */
  body:not(.print-body)
  .customer-mini-filter:not([hidden]),

  body:not(.print-body)
  .manager-mini-filter:not([hidden]) {
    display: block !important;
  }


  /*
   * 상단 요약 바
   */
  body:not(.print-body)
  .customer-mini-filter-inner,

  body:not(.print-body)
  .manager-mini-filter-inner {
    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 48px !important;

    padding: 6px !important;

    gap: 6px !important;

    border: 1px solid var(--theme-line) !important;
    border-radius: 12px !important;

    box-shadow:
      0 5px 18px rgba(0,0,0,.12) !important;

    backdrop-filter:
      blur(12px);
  }


  /*
   * 기간
   *
   * 모바일에서는 핵심 요약 하나만 남깁니다.
   */
  body:not(.print-body)
  .customer-mini-item,

  body:not(.print-body)
  .manager-mini-item {
    box-sizing: border-box !important;

    min-width: 0 !important;

    padding: 0 8px !important;

    border-right: 0 !important;
  }


  body:not(.print-body)
  .customer-mini-item:not(:first-child),

  body:not(.print-body)
  .manager-mini-item:not(:first-child) {
    display: none !important;
  }


  body:not(.print-body)
  .customer-mini-item:first-child,

  body:not(.print-body)
  .manager-mini-item:first-child {
    display: flex !important;

    flex: 1 1 auto !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    overflow: hidden !important;
  }


  body:not(.print-body)
  .customer-mini-label,

  body:not(.print-body)
  .manager-mini-label {
    display: block !important;

    margin: 0 0 2px !important;

    font-size: 9px !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
  }


  body:not(.print-body)
  .customer-mini-item strong,

  body:not(.print-body)
  .manager-mini-item strong {
    display: block !important;

    width: 100% !important;

    overflow: hidden !important;

    font-size: 11px !important;
    line-height: 1.25 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * 현재 적용된 필터 chip
   *
   * 공간이 남을 때만 보여주며
   * 한 줄을 넘기지 않습니다.
   */
  body:not(.print-body)
  .customer-mini-active-filters,

  body:not(.print-body)
  .manager-mini-active-filters {
    display: flex !important;

    flex: 0 1 auto !important;

    align-items: center !important;

    min-width: 0 !important;
    max-width: 42% !important;

    gap: 4px !important;

    overflow: hidden !important;

    white-space: nowrap !important;
  }


  body:not(.print-body)
  .customer-mini-active-chip,

  body:not(.print-body)
  .manager-mini-active-chip {
    flex: 0 1 auto !important;

    min-width: 0 !important;
    max-width: 120px !important;

    padding: 5px 7px !important;

    overflow: hidden !important;

    font-size: 9px !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * 필터 보기
   */
  body:not(.print-body)
  .customer-mini-filter-open,

  body:not(.print-body)
  .manager-mini-filter-open {
    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    min-width: 72px !important;
    height: 34px !important;

    margin-left: auto !important;

    padding: 0 9px !important;

    border-radius: 8px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
  }


  /*
   * 상세 필터
   */
  body:not(.print-body)
  .customer-mini-filter-detail,

  body:not(.print-body)
  .manager-mini-filter-detail {
    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    width: 100% !important;

    margin-top: 5px !important;
    padding: 7px !important;

    gap: 5px !important;

    border: 1px solid var(--theme-line) !important;
    border-radius: 11px !important;

    box-shadow:
      0 5px 18px rgba(0,0,0,.12) !important;

    backdrop-filter:
      blur(12px);
  }


  /*
   * hidden 상세영역은 표시하지 않음
   */
  body:not(.print-body)
  .customer-mini-filter-detail[hidden],

  body:not(.print-body)
  .manager-mini-filter-detail[hidden] {
    display: none !important;
  }


  body:not(.print-body)
  .customer-mini-filter-chip,

  body:not(.print-body)
  .customer-mini-filter-reset,

  body:not(.print-body)
  .manager-mini-filter-chip,

  body:not(.print-body)
  .manager-mini-filter-reset {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 34px !important;

    padding: 5px 6px !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    font-size: 9px !important;
    font-weight: 650 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * 옵션 메뉴는 휴대폰 화면 밖으로 나가지 않도록 제한
   */
  body:not(.print-body)
  .customer-mini-option-menu,

  body:not(.print-body)
  .manager-mini-option-menu {
    position: fixed !important;

    left: 10px !important;
    right: 10px !important;

    width: auto !important;
    max-width: none !important;

    max-height: 45vh !important;

    overflow-y: auto !important;

    z-index: 1300 !important;
  }

}


/*
 * 좁은 휴대폰
 */
@media (max-width: 600px) {

  body:not(.print-body)
  .customer-mini-filter,

  body:not(.print-body)
  .manager-mini-filter {
    top: 64px !important;

    left: 8px !important;
    right: 8px !important;
  }


  body:not(.print-body)
  .customer-mini-active-filters,

  body:not(.print-body)
  .manager-mini-active-filters {
    display: none !important;
  }


  body:not(.print-body)
  .customer-mini-filter-detail,

  body:not(.print-body)
  .manager-mini-filter-detail {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

}

/* ============================================================
   MOBILE MINI FILTER FINAL END
   ============================================================ */


/* ============================================================
   MOBILE MINI OPTION MENU FIX
   ============================================================ */

@media (orientation: portrait) and (max-width: 900px) {

  /*
   * 모바일 미니필터 상세영역
   *
   * 칩 영역 + 옵션 메뉴를 명확히 분리하기 위해
   * flex-wrap 컨테이너로 고정합니다.
   */
  body .customer-mini-filter-detail,
  body .manager-mini-filter-detail {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * 개별 필터 칩은 기존 크기를 유지합니다.
   * 옵션 메뉴가 열려도 칩 자체 위치는 변하지 않습니다.
   */
  body .customer-mini-filter-chip,
  body .manager-mini-filter-chip {
    flex: 0 0 auto !important;
  }


  /*
   * 핵심:
   * 옵션 메뉴는 항상 새로운 행 전체를 차지합니다.
   *
   * 어떤 칩을 눌러도
   * 클릭한 칩 바로 옆이 아니라
   * 미니필터 상세영역 아래 전체폭에서 열립니다.
   */
  body #customerMiniOptionMenu,
  body #managerMiniOptionMenu {
    flex: 0 0 100% !important;

    order: 999 !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin:
      8px 0 0 !important;

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
  }


  body #customerMiniOptionMenu[hidden],
  body #managerMiniOptionMenu[hidden] {
    display: none !important;
  }

}

/* ============================================================
   MOBILE MINI OPTION MENU FIX END
   ============================================================ */


/* ============================================================
   THEME FILTER CHECKBOX
   ============================================================ */

/*
 * 필터 영역의 native checkbox
 *
 * 브라우저 기본 파란색/보라색 대신
 * 현재 테마 accent를 사용합니다.
 */
body:not(.print-body)
.customer-mini-option input[type="checkbox"],

body:not(.print-body)
.manager-mini-option input[type="checkbox"],

body:not(.print-body)
.checked-combo input[type="checkbox"],

body:not(.print-body)
.checked-combo-menu input[type="checkbox"] {

  width: 16px !important;
  height: 16px !important;

  min-width: 16px !important;

  margin: 0 !important;

  accent-color:
    var(--theme-accent) !important;

  color-scheme:
    light dark;

  cursor:
    pointer;
}


/*
 * 체크박스를 appearance:none으로 구현한 기존 스타일이
 * 있을 경우에도 테마가 적용되도록 보강합니다.
 */
body:not(.print-body)
.customer-mini-option input[type="checkbox"][style*="appearance"],

body:not(.print-body)
.manager-mini-option input[type="checkbox"][style*="appearance"] {

  border-color:
    var(--theme-line-strong) !important;

  background:
    var(--theme-surface-strong) !important;
}


/*
 * 체크된 항목 행 자체도 accent와 맞춤
 */
body:not(.print-body)
.customer-mini-option:has(input[type="checkbox"]:checked),

body:not(.print-body)
.manager-mini-option:has(input[type="checkbox"]:checked) {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/*
 * 체크된 항목 텍스트
 */
body:not(.print-body)
.customer-mini-option:has(input[type="checkbox"]:checked)
span,

body:not(.print-body)
.manager-mini-option:has(input[type="checkbox"]:checked)
span {

  color:
    var(--theme-accent) !important;
}


/*
 * hover도 테마 기반
 */
body:not(.print-body)
.customer-mini-option:hover,

body:not(.print-body)
.manager-mini-option:hover {

  background:
    var(--theme-surface-hover) !important;
}


/*
 * 키보드 포커스
 */
body:not(.print-body)
.customer-mini-option input[type="checkbox"]:focus-visible,

body:not(.print-body)
.manager-mini-option input[type="checkbox"]:focus-visible,

body:not(.print-body)
.checked-combo input[type="checkbox"]:focus-visible {

  outline:
    2px solid
    var(--theme-accent) !important;

  outline-offset:
    2px;
}


/* ============================================================
   THEME FILTER CHECKBOX END
   ============================================================ */


/* ============================================================
   THEME CHECKED COMBO FINAL
   ============================================================ */

/*
 * checked-combo 기본 체크박스
 */
body:not(.print-body)
.checked-combo-checkbox {

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  box-sizing:
    border-box !important;

  width:
    16px !important;

  height:
    16px !important;

  min-width:
    16px !important;

  border:
    1px solid
    var(--theme-line-strong) !important;

  border-radius:
    5px !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease !important;
}


/*
 * 선택된 옵션 행
 */
body:not(.print-body)
.checked-combo-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/*
 * 선택된 체크박스
 */
body:not(.print-body)
.checked-combo-option.selected
.checked-combo-checkbox {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/*
 * 선택된 텍스트
 */
body:not(.print-body)
.checked-combo-option.selected
.checked-combo-label {

  color:
    var(--theme-accent) !important;
}


/*
 * hover
 */
body:not(.print-body)
.checked-combo-option:hover {

  background:
    var(--theme-surface-hover) !important;
}


/*
 * 선택 + hover
 */
body:not(.print-body)
.checked-combo-option.selected:hover {

  background:
    var(--theme-accent-soft) !important;
}


/*
 * 미니필터 옵션도 동일한 테마 사용
 */
body:not(.print-body)
.customer-mini-option.selected,

body:not(.print-body)
.manager-mini-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/* ============================================================
   THEME CHECKED COMBO FINAL END
   ============================================================ */


/* ============================================================
   THEME ALL FILTER CHECKS FINAL
   ============================================================ */


/* ------------------------------------------------------------
   1. 공통 checked-combo
   ------------------------------------------------------------ */

body:not(.print-body)
.checked-combo-checkbox {

  border-color:
    var(--theme-line-strong) !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;
}


body:not(.print-body)
.checked-combo-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.checked-combo-option.selected
.checked-combo-checkbox {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


body:not(.print-body)
.checked-combo-option.selected
.checked-combo-label {

  color:
    var(--theme-accent) !important;
}


/* ------------------------------------------------------------
   2. 담당자 범위
   manager-status 계열
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-status-option {

  color:
    var(--theme-text-2) !important;

  background:
    transparent !important;
}


body:not(.print-body)
.manager-status-option.selected,
body:not(.print-body)
.manager-status-option.active,
body:not(.print-body)
.manager-status-option[aria-selected="true"] {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.manager-status-option
.manager-status-checkbox,
body:not(.print-body)
.manager-status-option
[class*="checkbox"],
body:not(.print-body)
.manager-status-option
[class*="check"] {

  border-color:
    var(--theme-line-strong) !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;
}


body:not(.print-body)
.manager-status-option.selected
.manager-status-checkbox,
body:not(.print-body)
.manager-status-option.selected
[class*="checkbox"],
body:not(.print-body)
.manager-status-option.selected
[class*="check"],
body:not(.print-body)
.manager-status-option.active
.manager-status-checkbox,
body:not(.print-body)
.manager-status-option.active
[class*="checkbox"],
body:not(.print-body)
.manager-status-option.active
[class*="check"],
body:not(.print-body)
.manager-status-option[aria-selected="true"]
.manager-status-checkbox,
body:not(.print-body)
.manager-status-option[aria-selected="true"]
[class*="checkbox"],
body:not(.print-body)
.manager-status-option[aria-selected="true"]
[class*="check"] {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/* ------------------------------------------------------------
   3. 거래처 미니필터
   ------------------------------------------------------------ */

body:not(.print-body)
.customer-mini-option {

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.customer-mini-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-option
[class*="checkbox"],
body:not(.print-body)
.customer-mini-option
[class*="check"] {

  border-color:
    var(--theme-line-strong) !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;
}


body:not(.print-body)
.customer-mini-option.selected
[class*="checkbox"],
body:not(.print-body)
.customer-mini-option.selected
[class*="check"] {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/* ------------------------------------------------------------
   4. 담당자 미니필터
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-mini-option {

  color:
    var(--theme-text-2) !important;
}


body:not(.print-body)
.manager-mini-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.manager-mini-option
[class*="checkbox"],
body:not(.print-body)
.manager-mini-option
[class*="check"] {

  border-color:
    var(--theme-line-strong) !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;
}


body:not(.print-body)
.manager-mini-option.selected
[class*="checkbox"],
body:not(.print-body)
.manager-mini-option.selected
[class*="check"] {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/* ------------------------------------------------------------
   5. 선택 텍스트 공통
   ------------------------------------------------------------ */

body:not(.print-body)
.customer-mini-option.selected *,
body:not(.print-body)
.manager-mini-option.selected * {

  color:
    var(--theme-accent) !important;
}


/*
 * 단, 실제 체크 표시 ✓는 흰색 유지
 */
body:not(.print-body)
.customer-mini-option.selected
[class*="checkbox"],
body:not(.print-body)
.customer-mini-option.selected
[class*="check"],
body:not(.print-body)
.manager-mini-option.selected
[class*="checkbox"],
body:not(.print-body)
.manager-mini-option.selected
[class*="check"],
body:not(.print-body)
.manager-status-option.selected
[class*="checkbox"],
body:not(.print-body)
.manager-status-option.selected
[class*="check"],
body:not(.print-body)
.manager-status-option.active
[class*="checkbox"],
body:not(.print-body)
.manager-status-option.active
[class*="check"],
body:not(.print-body)
.manager-status-option[aria-selected="true"]
[class*="checkbox"],
body:not(.print-body)
.manager-status-option[aria-selected="true"]
[class*="check"] {

  color:
    #fff !important;
}


/* ============================================================
   THEME ALL FILTER CHECKS FINAL END
   ============================================================ */


/* ============================================================
   FILTER THEME CONTROL FINAL
   ============================================================ */


/* ------------------------------------------------------------
   담당자 범위 RADIO
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-status-radio {

  box-sizing:
    border-box !important;

  width:
    16px !important;

  height:
    16px !important;

  min-width:
    16px !important;

  border:
    1px solid
    var(--theme-line-strong) !important;

  border-radius:
    50% !important;

  background:
    var(--theme-surface-strong) !important;

  box-shadow:
    none !important;
}


body:not(.print-body)
.manager-status-option.selected
.manager-status-radio,

body:not(.print-body)
.manager-status-option[aria-selected="true"]
.manager-status-radio {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  box-shadow:
    inset 0 0 0 4px
    var(--theme-surface-strong) !important;
}


/*
 * 담당자 범위 선택 행
 */
body:not(.print-body)
.manager-status-option.selected,

body:not(.print-body)
.manager-status-option[aria-selected="true"] {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


/* ------------------------------------------------------------
   거래처 미니필터 native select 숨김
   ------------------------------------------------------------ */

body:not(.print-body)
.customer-mini-native-select {

  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  min-width:
    1px !important;

  min-height:
    1px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;

  clip:
    rect(0 0 0 0) !important;

  clip-path:
    inset(50%) !important;
}


/*
 * 거래처 미니필터 grid
 */
body:not(.print-body)
.customer-mini-detail-grid {

  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  width:
    100% !important;

  gap:
    6px !important;
}


body:not(.print-body)
.customer-mini-control {

  display:
    block !important;

  min-width:
    0 !important;
}


body:not(.print-body)
.customer-mini-control > span {

  display:
    block !important;

  margin-bottom:
    3px !important;

  color:
    var(--theme-muted) !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;
}


/*
 * custom 필터 버튼
 */
body:not(.print-body)
.customer-mini-control
.customer-mini-filter-chip {

  box-sizing:
    border-box !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    34px !important;

  margin:
    0 !important;

  padding:
    5px 8px !important;

  border:
    1px solid
    var(--theme-line-strong) !important;

  border-radius:
    8px !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    var(--theme-text-2) !important;

  text-align:
    left !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}


body:not(.print-body)
.customer-mini-control
.customer-mini-filter-chip.has-value {

  border-color:
    var(--theme-accent-3) !important;

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-control
.customer-mini-filter-chip.active {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/* ------------------------------------------------------------
   미니필터 체크 UI
   거래처 / 담당자 공통
   ------------------------------------------------------------ */

body:not(.print-body)
.customer-mini-option
.customer-mini-checkbox,

body:not(.print-body)
.customer-mini-option
.checked-combo-checkbox,

body:not(.print-body)
.manager-mini-option
.manager-mini-checkbox,

body:not(.print-body)
.manager-mini-option
.checked-combo-checkbox {

  box-sizing:
    border-box !important;

  border-color:
    var(--theme-line-strong) !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;
}


body:not(.print-body)
.customer-mini-option.selected,

body:not(.print-body)
.manager-mini-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-option.selected
[class*="check"],

body:not(.print-body)
.manager-mini-option.selected
[class*="check"] {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/*
 * 실제 체크 UI가 별도 class 없이
 * span으로 생성되는 구현도 대응
 */
body:not(.print-body)
.customer-mini-option.selected
> span:first-child,

body:not(.print-body)
.manager-mini-option.selected
> span:first-child {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/*
 * 선택 텍스트
 */
body:not(.print-body)
.customer-mini-option.selected
> span:not(:first-child),

body:not(.print-body)
.manager-mini-option.selected
> span:not(:first-child) {

  color:
    var(--theme-accent) !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  body:not(.print-body)
  .customer-mini-detail-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

}


/* ============================================================
   FILTER THEME CONTROL FINAL END
   ============================================================ */



/* CUSTOMER MINI V2 STRUCTURE GUARD */

body:not(.print-body)
#customerMiniFilter.customer-mini-filter-v2
.customer-mini-filter-detail {
  box-sizing: border-box;
}


body:not(.print-body)
#customerMiniFilter.customer-mini-filter-v2
.customer-mini-filter-chip {
  font-family: inherit;
}


body:not(.print-body)
#customerMiniFilter.customer-mini-filter-v2
select {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  min-width: 1px !important;
  min-height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  opacity: 0 !important;

  pointer-events: none !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ============================================================
   EXACT FILTER THEME FINAL
   ============================================================ */


/* ------------------------------------------------------------
   담당자 범위
   ------------------------------------------------------------ */

body:not(.print-body)
.manager-status-option {

  color:
    var(--theme-text-2) !important;

  background:
    transparent !important;
}


body:not(.print-body)
.manager-status-option.selected,

body:not(.print-body)
.manager-status-option[aria-selected="true"] {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.manager-status-option.selected
> span:not(.manager-status-radio),

body:not(.print-body)
.manager-status-option[aria-selected="true"]
> span:not(.manager-status-radio) {

  color:
    var(--theme-accent) !important;
}


/*
 * 라디오 기본
 */
body:not(.print-body)
.manager-status-radio {

  box-sizing:
    border-box !important;

  position:
    relative !important;

  display:
    inline-block !important;

  width:
    16px !important;

  height:
    16px !important;

  min-width:
    16px !important;

  min-height:
    16px !important;

  flex:
    0 0 16px !important;

  border:
    1.5px solid
    var(--theme-line-strong) !important;

  border-radius:
    50% !important;

  background:
    var(--theme-surface-strong) !important;

  box-shadow:
    none !important;

  color:
    transparent !important;

  font-size:
    0 !important;

  line-height:
    0 !important;
}


/*
 * 과거 체크 아이콘 완전 제거
 */
body:not(.print-body)
.manager-status-radio::before {

  content:
    none !important;

  display:
    none !important;
}


/*
 * 선택 상태:
 * 바깥 원 + 안쪽 dot
 */
body:not(.print-body)
.manager-status-option.selected
.manager-status-radio,

body:not(.print-body)
.manager-status-option[aria-selected="true"]
.manager-status-radio {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-surface-strong) !important;

  box-shadow:
    none !important;
}


body:not(.print-body)
.manager-status-option.selected
.manager-status-radio::after,

body:not(.print-body)
.manager-status-option[aria-selected="true"]
.manager-status-radio::after {

  content:
    "" !important;

  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  width:
    8px !important;

  height:
    8px !important;

  border-radius:
    50% !important;

  background:
    var(--theme-accent) !important;

  transform:
    translate(-50%, -50%) !important;
}


/* ------------------------------------------------------------
   거래처 미니필터
   ------------------------------------------------------------ */

body:not(.print-body)
.customer-mini-option {

  color:
    var(--theme-text-2) !important;

  background:
    transparent !important;
}


body:not(.print-body)
.customer-mini-option:hover {

  background:
    var(--theme-surface-hover) !important;
}


body:not(.print-body)
.customer-mini-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.customer-mini-option.selected
> span:not(.customer-mini-option-check) {

  color:
    var(--theme-accent) !important;
}


/*
 * 실제 거래처 미니필터 체크박스
 */
body:not(.print-body)
.customer-mini-option-check {

  box-sizing:
    border-box !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    16px !important;

  height:
    16px !important;

  min-width:
    16px !important;

  min-height:
    16px !important;

  border:
    1px solid
    var(--theme-line-strong) !important;

  border-radius:
    5px !important;

  background:
    var(--theme-surface-strong) !important;

  color:
    transparent !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  box-shadow:
    none !important;
}


body:not(.print-body)
.customer-mini-option.selected
.customer-mini-option-check {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


/* ------------------------------------------------------------
   공통 checked-combo
   ------------------------------------------------------------ */

body:not(.print-body)
.checked-combo-option.selected {

  background:
    var(--theme-accent-soft) !important;

  color:
    var(--theme-accent) !important;
}


body:not(.print-body)
.checked-combo-option.selected
.checked-combo-checkbox {

  border-color:
    var(--theme-accent) !important;

  background:
    var(--theme-accent) !important;

  color:
    #fff !important;
}


body:not(.print-body)
.checked-combo-option.selected
.checked-combo-label {

  color:
    var(--theme-accent) !important;
}


/* ============================================================
   EXACT FILTER THEME FINAL END
   ============================================================ */



/* ============================================================
   CUSTOMER DESKTOP FILTER SOURCE OF TRUTH
   ============================================================ */

@media (min-width: 901px)
       and (min-height: 601px),
       (min-width: 1201px) {

  /*
   * 거래처 필터 카드 전체가 하나의 12-column grid
   */
  body:not(.print-body)
  #customerAnalysis > .filter-card {

    display: grid !important;

    grid-template-columns:
      repeat(12, minmax(0, 1fr)) !important;

    column-gap: 10px !important;
    row-gap: 10px !important;

    align-items: end !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * 중간 wrapper는 layout box를 만들지 않음.
   * 자식들이 filter-card grid에 직접 참여.
   */
  body:not(.print-body)
  #customerAnalysis
  > .filter-card
  > .filter-top,

  body:not(.print-body)
  #customerAnalysis
  > .filter-card
  > #detailFilters {

    display: contents !important;
  }


  body:not(.print-body)
  #customerAnalysis
  > .filter-card
  > #detailFilters.collapsed {

    display: contents !important;

    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }


  /*
   * 기간
   * 1~4
   */
  body:not(.print-body)
  #customerAnalysis
  .date-filter {

    grid-column: 1 / 5 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * 1행
   *
   * 기간       1~4
   * 진료과목   5~7
   * 급여구분   8~9
   * 신규/교체  10~12
   */

  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  > label:has(#department) {

    grid-column: 5 / 8 !important;
    grid-row: 1 !important;
  }


  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  > label:has(#payType) {

    grid-column: 8 / 10 !important;
    grid-row: 1 !important;
  }


  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  > label:has(#changeType) {

    grid-column: 10 / 13 !important;
    grid-row: 1 !important;
  }


  /*
   * 2행
   *
   * 담당자     1~3
   * 성공여부   4~6
   * OPS        7~9
   * 초기화     10~12
   */

  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  > label:has(#manager) {

    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
  }


  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  > label:has(#result) {

    grid-column: 4 / 7 !important;
    grid-row: 2 !important;
  }


  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  > label:has(#opsFilter) {

    grid-column: 7 / 10 !important;
    grid-row: 2 !important;
  }


  /*
   * 기존 PC 초기화 영역
   */
  body:not(.print-body)
  #customerAnalysis
  .filter-top > .filter-actions {

    display: flex !important;

    grid-column: 10 / 13 !important;
    grid-row: 2 !important;

    align-items: end !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  body:not(.print-body)
  #customerAnalysis
  .filter-top > .filter-actions > button {

    width: 100% !important;
  }


  /*
   * 모바일 전용 초기화는 PC에서 숨김
   */
  body:not(.print-body)
  #customerMobileReset {

    display: none !important;
  }


  /*
   * 필터 label/control 안전장치
   */
  body:not(.print-body)
  #customerAnalysis
  #detailFilters > label {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }


  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  .checked-combo,

  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  .customer-filter-control {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  body:not(.print-body)
  #customerAnalysis
  #detailFilters
  .checked-combo-button {

    width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * PC에서는 모바일용 field 클래스가
   * 별도 grid/flex 배치를 만들지 못하게 함
   */
  body:not(.print-body)
  #customerAnalysis
  .customer-mobile-field {

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    gap: 6px !important;
  }

}

/* ============================================================
   CUSTOMER DESKTOP FILTER SOURCE OF TRUTH END
   ============================================================ */

/* ============================================================
   ============================================================ */

/* ===== PORTRAIT MOBILE FILTERS START ===== */

@media
  (orientation: portrait)
  and (max-width: 1200px) {

  /* ==========================================================
     SHARED FILTER CARD
     ========================================================== */

  html body:not(.print-body)
  #customerAnalysis > .filter-card,

  html body:not(.print-body)
  #managerAnalysis > .manager-filter-card {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 12px !important;
    padding: 12px !important;

    overflow: visible !important;
  }


  /* ==========================================================
     PORTRAIT DATE
     ========================================================== */

  html body:not(.print-body)
  #customerAnalysis .date-input-row,

  html body:not(.print-body)
  #managerAnalysis .manager-date-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      16px
      minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 5px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 6px 0 0 !important;
  }


  html body:not(.print-body)
  #customerAnalysis .date-input-row input,

  html body:not(.print-body)
  #managerAnalysis .manager-date-row input {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    font-size: 12px !important;
  }


  html body:not(.print-body)
  #customerAnalysis .date-input-row > span,

  html body:not(.print-body)
  #managerAnalysis .manager-date-row > span {
    width: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
  }


  html body:not(.print-body)
  #customerAnalysis .date-presets,

  html body:not(.print-body)
  #managerAnalysis .manager-date-presets {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 5px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;
  }


  html body:not(.print-body)
  #customerAnalysis .date-presets button,

  html body:not(.print-body)
  #managerAnalysis .manager-date-preset {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 3px !important;

    font-size: 11px !important;
  }


  /* ==========================================================
     CUSTOMER PORTRAIT
     ========================================================== */

  html body:not(.print-body)
  #customerAnalysis > .filter-card {
    display: block !important;
  }


  html body:not(.print-body)
  #customerAnalysis > .filter-card > .filter-top {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }


  html body:not(.print-body)
  #customerAnalysis > .filter-card > #detailFilters,

  html body:not(.print-body)
  #customerAnalysis > .filter-card > #detailFilters.collapsed {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows: none !important;
    grid-template-areas: none !important;

    grid-auto-flow: row !important;

    gap: 7px 8px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;
  }


  html body:not(.print-body)
  #customerAnalysis
  #detailFilters > .customer-mobile-field {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }


  html body:not(.print-body)
  #customerAnalysis
  #detailFilters > .customer-mobile-field::before {
    display: block !important;

    margin: 0 0 5px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }


  html body:not(.print-body)
  #customerAnalysis
  #detailFilters select,

  html body:not(.print-body)
  #customerAnalysis
  #detailFilters .checked-combo-button {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    font-size: 12px !important;
  }


  html body:not(.print-body)
  #customerAnalysis #customerMobileReset {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 10px 0 0 !important;
    padding: 0 9px !important;

    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;

    font-size: 11px !important;
  }


  /* ==========================================================
     MANAGER PORTRAIT
     2-COLUMN FINAL
     ========================================================== */

@media (orientation: portrait) and (max-width: 900px) {

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid {
    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
      "period period"
      "range person"
      "dept pay"
      "change result"
      "ops ops"
      "reset reset" !important;

    grid-template-rows:
      auto auto auto auto auto auto !important;

    gap: 10px 8px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 12px !important;

    align-items: end !important;

    overflow: visible !important;
  }


  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid > * {
    box-sizing: border-box !important;

    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* 기간 전체폭 */
  html body:not(.print-body)
  #managerAnalysis .manager-period-filter {
    grid-area: period !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  /* 날짜 */
  html body:not(.print-body)
  #managerAnalysis .manager-date-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      16px
      minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 5px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 6px 0 0 !important;
  }


  html body:not(.print-body)
  #managerAnalysis .manager-date-row input[type="date"] {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
  }


  html body:not(.print-body)
  #managerAnalysis .manager-date-row > span {
    width: 16px !important;

    text-align: center !important;

    font-size: 11px !important;
  }


  /* 기간 preset */
  html body:not(.print-body)
  #managerAnalysis .manager-date-presets {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 5px !important;

    width: 100% !important;

    margin: 6px 0 0 !important;
  }


  html body:not(.print-body)
  #managerAnalysis .manager-date-preset {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 3px !important;

    font-size: 11px !important;
    font-weight: 800 !important;
  }


  /* 필터 위치
   * legacy :has(#ID) 12-column 규칙보다 높은 specificity로
   * portrait named-area를 강제한다.
   */

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-period-filter:has(#mFrom) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: period !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-range-filter:has(#mManagerStatusCombo) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: range !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-person-filter:has(#mManager) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: person !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-dept-filter:has(#mDepartment) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: dept !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-pay-filter:has(#mPayType) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: pay !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-change-filter:has(#mChangeType) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: change !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-result-filter:has(#mResult) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: result !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-ops-filter:has(#mOps) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: ops !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > .manager-filter-actions:has(#mReset) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: reset !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: none !important;
  }


  /* label */
  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid > label {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
  }


  /* controls */
  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid select,

  html body:not(.print-body)
  #managerAnalysis .manager-status-button,

  html body:not(.print-body)
  #managerAnalysis .checked-combo-button {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    font-size: 12px !important;
  }


  html body:not(.print-body)
  #managerAnalysis .manager-status-combo,

  html body:not(.print-body)
  #managerAnalysis .checked-combo {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    margin-top: 0 !important;

    overflow: visible !important;
  }


  /* 초기화 전체폭 */
  html body:not(.print-body)
  #managerAnalysis #mReset {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    font-size: 11px !important;
    font-weight: 800 !important;
  }

}


}




/* ===== PORTRAIT MOBILE FILTERS END ===== */


/* ============================================================
   LANDSCAPE DENSE FINAL
   canonical customer / manager landscape layout v5
   ============================================================ */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  html body:not(.print-body) #customerAnalysis > .filter-card,
  html body:not(.print-body) #managerAnalysis > .manager-filter-card { box-sizing:border-box!important; width:100%!important; min-width:0!important; margin:0 0 8px!important; padding:8px 10px!important; overflow:visible!important; }
  html body:not(.print-body) #customerAnalysis .date-input-row,
  html body:not(.print-body) #managerAnalysis .manager-date-row { display:grid!important; grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)!important; gap:5px!important; align-items:center!important; width:100%!important; min-width:0!important; margin:5px 0 0!important; }
  html body:not(.print-body) #customerAnalysis .date-input-row input,
  html body:not(.print-body) #managerAnalysis .manager-date-row input { box-sizing:border-box!important; width:100%!important; min-width:0!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0 10px!important; }
  html body:not(.print-body) #customerAnalysis .date-presets,
  html body:not(.print-body) #managerAnalysis .manager-date-presets { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:5px!important; width:100%!important; margin:6px 0 0!important; }
  html body:not(.print-body) #customerAnalysis .date-presets button,
  html body:not(.print-body) #managerAnalysis .manager-date-preset { box-sizing:border-box!important; width:100%!important; min-width:0!important; height:38px!important; min-height:38px!important; margin:0!important; }

  /* Customer: real DOM = filter-top / detailFilters / reset. */
  html body:not(.print-body) #customerAnalysis > .filter-card { display:flex!important; flex-direction:column!important; gap:8px!important; }
  html body:not(.print-body) #customerAnalysis > .filter-card > .filter-top { display:block!important; position:static!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; }
  html body:not(.print-body) #customerAnalysis .date-filter { display:block!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; }
  html body:not(.print-body) #customerAnalysis #filterToggle,
  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions,
  html body:not(.print-body) #customerAnalysis #chips { display:none!important; }
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters.collapsed,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters:not(.collapsed) { display:grid!important; position:static!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:repeat(2,auto)!important; gap:7px 8px!important; width:100%!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; overflow:visible!important; opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field { display:flex!important; flex-direction:column!important; position:relative!important; box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important; gap:2px!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field::before { display:block!important; margin:0!important; line-height:1.15!important; white-space:nowrap!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field select,
  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field .checked-combo-button { box-sizing:border-box!important; width:100%!important; min-width:0!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0 10px!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#department) { grid-column:1!important; grid-row:1!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#payType) { grid-column:2!important; grid-row:1!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#changeType) { grid-column:3!important; grid-row:1!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#manager) { grid-column:4!important; grid-row:1!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#result) { grid-column:1/3!important; grid-row:2!important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#opsFilter) { grid-column:3/5!important; grid-row:2!important; }
  html body:not(.print-body) #customerAnalysis > .filter-card > #customerMobileReset { display:flex!important; align-items:center!important; justify-content:center!important; position:static!important; box-sizing:border-box!important; width:100%!important; min-width:0!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0 10px!important; }

  /* Manager: real DOM direct children, no wrapper. */
  html body:not(.print-body) #managerAnalysis .manager-filter-grid { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-areas:"period period period period" "range person dept pay" "change result ops ops" "reset reset reset reset"!important; grid-template-rows:auto auto auto auto!important; gap:7px 8px!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; overflow:visible!important; align-items:end!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > * { box-sizing:border-box!important; position:relative!important; width:100%!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-period-filter:has(#mFrom) { display:block!important; grid-column:auto!important; grid-row:auto!important; grid-area:period!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-range-filter:has(#mManagerStatusCombo) { grid-column:auto!important; grid-row:auto!important; grid-area:range!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-person-filter:has(#mManager) { grid-column:auto!important; grid-row:auto!important; grid-area:person!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-dept-filter:has(#mDepartment) { grid-column:auto!important; grid-row:auto!important; grid-area:dept!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-pay-filter:has(#mPayType) { grid-column:auto!important; grid-row:auto!important; grid-area:pay!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-change-filter:has(#mChangeType) { grid-column:auto!important; grid-row:auto!important; grid-area:change!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-result-filter:has(#mResult) { grid-column:auto!important; grid-row:auto!important; grid-area:result!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-ops-filter:has(#mOps) { grid-column:auto!important; grid-row:auto!important; grid-area:ops!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label,
  html body:not(.print-body) #managerAnalysis .manager-status-filter,
  html body:not(.print-body) #managerAnalysis .manager-check-filter { display:flex!important; flex-direction:column!important; gap:2px!important; }
  html body:not(.print-body) #managerAnalysis .manager-status-combo,
  html body:not(.print-body) #managerAnalysis .checked-combo { position:relative!important; width:100%!important; min-width:0!important; margin:0!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid select,
  html body:not(.print-body) #managerAnalysis .manager-status-button,
  html body:not(.print-body) #managerAnalysis .checked-combo-button { box-sizing:border-box!important; width:100%!important; min-width:0!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0 10px!important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > .manager-filter-actions:has(#mReset) { grid-column:auto!important; grid-row:auto!important; grid-area:reset!important; display:flex!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; }
  html body:not(.print-body) #managerAnalysis #mReset { box-sizing:border-box!important; width:100%!important; min-width:0!important; height:42px!important; min-height:42px!important; margin:0!important; }

  html body:not(.print-body) #customerAnalysis .checked-combo-menu,
  html body:not(.print-body) #managerAnalysis .checked-combo-menu,
  html body:not(.print-body) #managerAnalysis .manager-status-menu { z-index:340!important; }
  html body:not(.print-body) #customerAnalysis #all .kpis,
  html body:not(.print-body) #managerAnalysis > .manager-kpis { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:6px!important; width:100%!important; margin:0 0 7px!important; }
}



/* ============================================================
   LANDSCAPE DENSE FINAL END
   ============================================================ */

/* ===== MOBILE UX UNIFY V8 ===== */
@media (max-width: 900px),
       (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {

  /* 분석 화면 전환은 필요한 만큼만 차지 */
  html body:not(.print-body) .analysis-switch {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 3px !important;
    gap: 3px !important;
  }

  html body:not(.print-body) .analysis-switch-btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  /* 모바일에서는 거래처 통계도 항상 전체보기 */
  html body:not(.print-body) #customerAnalysis .header-actions .segmented,
  html body:not(.print-body) #customerAnalysis #pdfBtn,
  html body:not(.print-body) #customerAnalysis .tab-pdf {
    display: none !important;
  
  background: var(--theme-surface-strong);
  border: 1px solid var(--theme-line-strong);
  color: var(--theme-accent);}

  /* 고객/담당자 헤더 액션의 크기와 위치 기준 통일 */
  html body:not(.print-body) #customerAnalysis .header-actions,
  html body:not(.print-body) #managerAnalysis .manager-header-actions {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body:not(.print-body) #customerAnalysis #syncBtn,
  html body:not(.print-body) #managerAnalysis #mSyncBtn {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  html body:not(.print-body) #customerAnalysis > header,
  html body:not(.print-body) #managerAnalysis > header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  html body:not(.print-body) #customerAnalysis .header-actions,
  html body:not(.print-body) #managerAnalysis .manager-header-actions {
    align-self: flex-end !important;
    justify-content: flex-end !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  html body:not(.print-body) #customerAnalysis > header,
  html body:not(.print-body) #managerAnalysis > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
  }

  html body:not(.print-body) #customerAnalysis .header-actions,
  html body:not(.print-body) #managerAnalysis .manager-header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
  }
}

/* LANDSCAPE CUSTOMER KPI COMPACT V9 */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  html body:not(.print-body) #customerAnalysis #all .kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body:not(.print-body) #customerAnalysis #all .kpis .rate-kpi {
    grid-column: auto !important;
    min-width: 0 !important;
    padding: 10px !important;
    gap: 6px !important;
  }

  html body:not(.print-body) #customerAnalysis #all .kpis .rate-kpi strong {
    font-size: 26px !important;
  }

  html body:not(.print-body) #customerAnalysis #all .kpis .rate-kpi .mini-ring {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
  }
}

/* ===== MOBILE UX UNIFY V8 END ===== */

/* ===== RESPONSIVE UX POLISH V10 START ===== */

/* ------------------------------------------------------------
   MOBILE DRAWER
   환경설정 영역은 항상 보이고 메뉴 목록만 내부 스크롤합니다.
   ------------------------------------------------------------ */
@media (max-width: 900px),
       (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  html body:not(.print-body) .app-sidebar {
    overflow: hidden !important;
  }

  html body:not(.print-body) .app-sidebar > .brand {
    flex: 0 0 auto !important;
  }

  html body:not(.print-body) .app-sidebar > #tabs,
  html body:not(.print-body) .app-sidebar > #managerAnalysisTabs {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html body:not(.print-body) .app-sidebar > .aside-bottom {
    flex: 0 0 auto !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    background: var(--theme-surface-strong) !important;
  }
}

/* ------------------------------------------------------------
   MOBILE PORTRAIT FILTER RHYTHM
   두 통계의 날짜/라벨/컨트롤 간격을 같은 토큰으로 맞춥니다.
   ------------------------------------------------------------ */
@media (orientation: portrait) and (max-width: 900px) {
  html body:not(.print-body) #customerAnalysis > .filter-card,
  html body:not(.print-body) #managerAnalysis > .manager-filter-card {
    padding: 12px !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card > .filter-top {
    margin: 0 0 8px !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters.collapsed,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid {
    gap: 7px 8px !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters > .customer-mobile-field {
    gap: 2px !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters > .customer-mobile-field::before {
    margin: 0 !important;
    line-height: 1.15 !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters select,
  html body:not(.print-body) #customerAnalysis #detailFilters .checked-combo-button,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid select,
  html body:not(.print-body) #managerAnalysis .manager-status-button,
  html body:not(.print-body) #managerAnalysis .checked-combo-button {
    margin-top: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card > #customerMobileReset,
  html body:not(.print-body) #managerAnalysis #mReset {
    margin-top: 0 !important;
  }
}

/* ------------------------------------------------------------
   DESKTOP FILTER UNIFY
   동일한 12-column geometry / 42px control / 동일 row gap.
   ------------------------------------------------------------ */
@media (min-width: 901px) and (min-height: 601px),
       (min-width: 1201px) {
  html body:not(.print-body) #customerAnalysis > .filter-card,
  html body:not(.print-body) #managerAnalysis > .manager-filter-card .manager-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: end !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Customer wrappers participate directly in the 12-col grid. */
  html body:not(.print-body) #customerAnalysis > .filter-card > .filter-top,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters.collapsed {
    display: contents !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* Shared period geometry. */
  html body:not(.print-body) #customerAnalysis .date-filter,
  html body:not(.print-body) #managerAnalysis .manager-period-filter {
    grid-column: 1 / 5 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Customer row 1: dept / pay / change / manager. */
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#department) { grid-column: 5 / 7 !important; grid-row: 1 !important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#payType)    { grid-column: 7 / 9 !important; grid-row: 1 !important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#changeType) { grid-column: 9 / 11 !important; grid-row: 1 !important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#manager)   { grid-column: 11 / 13 !important; grid-row: 1 !important; }

  /* Customer row 2: result / wide OPS / reset. */
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#result)    { grid-column: 1 / 4 !important; grid-row: 2 !important; }
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#opsFilter) { grid-column: 4 / 10 !important; grid-row: 2 !important; }
  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions {
    display: flex !important;
    grid-column: 10 / 13 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Manager row 1: range / person / dept / pay. */
  html body:not(.print-body) #managerAnalysis .manager-period-filter { grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-range-filter  { grid-column: 5 / 7 !important; grid-row: 1 !important; grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-person-filter { grid-column: 7 / 9 !important; grid-row: 1 !important; grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-dept-filter   { grid-column: 9 / 11 !important; grid-row: 1 !important; grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-pay-filter    { grid-column: 11 / 13 !important; grid-row: 1 !important; grid-area: auto !important; }

  /* Manager row 2: change / result / OPS / reset. */
  html body:not(.print-body) #managerAnalysis .manager-change-filter { grid-column: 1 / 4 !important; grid-row: 2 !important; grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-result-filter { grid-column: 4 / 7 !important; grid-row: 2 !important; grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-ops-filter    { grid-column: 7 / 10 !important; grid-row: 2 !important; grid-area: auto !important; }
  html body:not(.print-body) #managerAnalysis .manager-filter-actions {
    grid-column: 10 / 13 !important;
    grid-row: 2 !important;
    grid-area: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Shared control rhythm. */
  html body:not(.print-body) #customerAnalysis #detailFilters > label,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters select,
  html body:not(.print-body) #customerAnalysis #detailFilters .checked-combo-button,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid select,
  html body:not(.print-body) #managerAnalysis .manager-status-button,
  html body:not(.print-body) #managerAnalysis .checked-combo-button,
  html body:not(.print-body) #customerAnalysis .filter-actions button,
  html body:not(.print-body) #managerAnalysis #mReset {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis .date-input-row,
  html body:not(.print-body) #managerAnalysis .manager-date-row {
    margin-top: 4px !important;
  }

  html body:not(.print-body) #customerAnalysis .date-presets,
  html body:not(.print-body) #managerAnalysis .manager-date-presets {
    margin-top: 4px !important;
  }

  /* V18: keep the customer manager field aligned with the other first-row filters. */
  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field:has(#manager) {
    grid-column: 11 / 13 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin: 0 !important;
  }

  /* V18: manager period presets are always one 4-column row on desktop. */
  html body:not(.print-body) #managerAnalysis .manager-period-filter .manager-date-presets {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 4px !important;
  }

  html body:not(.print-body) #managerAnalysis .manager-period-filter .manager-date-presets > .manager-date-preset {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body:not(.print-body) #customerMobileReset {
    display: none !important;
  }
}

/* Mobile executive-summary cards are informational only. */
@media (max-width: 900px),
       (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  html body:not(.print-body) #customerAnalysis [data-summary-tab] {
    cursor: default !important;
  }
}

/* ===== RESPONSIVE UX POLISH V10 END ===== */


/* ===== MOBILE UX CORRECTION V12 START ===== */

/*
 * Mobile executive summary cards are display-only in full-view mode.
 * Remove pointer interaction itself so touch :active/focus feedback cannot imply navigation.
 */
@media (max-width: 900px),
       (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  html body:not(.print-body) #customerAnalysis [data-summary-tab] {
    pointer-events: none !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body:not(.print-body) #customerAnalysis [data-summary-tab]:hover,
  html body:not(.print-body) #customerAnalysis [data-summary-tab]:active,
  html body:not(.print-body) #customerAnalysis [data-summary-tab]:focus,
  html body:not(.print-body) #customerAnalysis [data-summary-tab]:focus-visible {
    transform: none !important;
    box-shadow: var(--theme-shadow) !important;
    outline: none !important;
  }

  /*
   * Admin on mobile: the desktop sidebar must not occupy the first screen.
   * The existing source tabs become the mobile settings navigator.
   */
  html body.admin-body {
    padding-top: 0 !important;
  }

  html body.admin-body .admin-app-shell {
    display: block !important;
    min-height: 100dvh !important;
  }

  html body.admin-body .admin-sidebar {
    display: none !important;
  }

  html body.admin-body .admin-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 14px 32px !important;
  }

  html body.admin-body .admin-header {
    margin-bottom: 10px !important;
  }

  html body.admin-body .admin-tabs-source {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 4px !important;
    overflow: visible !important;
    border-radius: 12px !important;
  }

  html body.admin-body .admin-tabs-source button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
}

/*
 * Portrait filter rhythm: customer and manager use the same vertical tokens.
 * Manager has one extra field (manager range), so only content count may change height.
 */
@media (orientation: portrait) and (max-width: 900px) {
  html body:not(.print-body) #customerAnalysis > .filter-card,
  html body:not(.print-body) #managerAnalysis > .manager-filter-card {
    padding: 8px !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card {
    gap: 4px !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card > .filter-top {
    margin: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters.collapsed,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid {
    row-gap: 4px !important;
    column-gap: 6px !important;
    padding: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label {
    gap: 1px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field::before {
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  html body:not(.print-body) #customerAnalysis .date-input-row,
  html body:not(.print-body) #managerAnalysis .manager-date-row,
  html body:not(.print-body) #customerAnalysis .date-presets,
  html body:not(.print-body) #managerAnalysis .manager-date-presets {
    margin-top: 2px !important;
  }
}

/* ===== MOBILE UX CORRECTION V12 END ===== */

/* ===== MOBILE FILTER LABEL + RESET POLISH V14 START ===== */
@media (orientation: portrait) and (max-width: 900px) {
  /* Customer/manager filter titles share one typography token. */
  html body:not(.print-body) #customerAnalysis .date-filter,
  html body:not(.print-body) #customerAnalysis #detailFilters > label.customer-mobile-field::before,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  /* Keep the customer reset on its own visual row. */
  html body:not(.print-body) #customerAnalysis > .filter-card > #customerMobileReset {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    clear: both !important;
    flex: 0 0 auto !important;
    z-index: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters.collapsed,
  html body:not(.print-body) #customerAnalysis > .filter-card > #detailFilters:not(.collapsed) {
    margin-bottom: 0 !important;
  }
}
/* ===== MOBILE FILTER LABEL + RESET POLISH V14 END ===== */

/* ===== DESKTOP FILTER VISUAL PARITY V17 START ===== */
@media (min-width: 1201px) {
  /* Preserve v14 layout geometry. Only normalize visual rhythm. */
  html body:not(.print-body) #customerAnalysis .date-filter,
  html body:not(.print-body) #customerAnalysis #detailFilters > .customer-mobile-field::before,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters > .customer-mobile-field,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label:not(.manager-period-filter) {
    gap: 4px !important;
  }

  html body:not(.print-body) #customerAnalysis #detailFilters select,
  html body:not(.print-body) #customerAnalysis #detailFilters .checked-combo-button,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid select,
  html body:not(.print-body) #managerAnalysis .manager-status-button,
  html body:not(.print-body) #managerAnalysis .checked-combo-button,
  html body:not(.print-body) #customerAnalysis .filter-actions button,
  html body:not(.print-body) #managerAnalysis #mReset {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-top: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  html body:not(.print-body) #customerAnalysis .date-input-row input[type="date"],
  html body:not(.print-body) #managerAnalysis .manager-date-row input[type="date"] {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  html body:not(.print-body) #customerAnalysis .date-presets button,
  html body:not(.print-body) #managerAnalysis .manager-date-preset {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
}
/* ===== DESKTOP FILTER VISUAL PARITY V17 END ===== */

/* ===== DESKTOP FILTER FINISH V19 START ===== */
@media (min-width: 1201px) {
  /* Manager period presets: force four equal buttons without legacy width/flex constraints. */
  html body:not(.print-body) #managerAnalysis .manager-period-filter .manager-date-presets {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  html body:not(.print-body) #managerAnalysis .manager-period-filter .manager-date-presets > .manager-date-preset {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 3px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Customer OPS: reduce the oversized six-column span to four columns. */
  html body:not(.print-body) #customerAnalysis #detailFilters > label:has(#opsFilter) {
    grid-column: 4 / 8 !important;
    grid-row: 2 !important;
  }

  /* Reset controls use one shared desktop size and right alignment. */
  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions,
  html body:not(.print-body) #managerAnalysis .manager-filter-actions {
    box-sizing: border-box !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    justify-self: end !important;
    align-self: end !important;
  }

  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions > button,
  html body:not(.print-body) #managerAnalysis .manager-filter-actions > #mReset {
    box-sizing: border-box !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}
/* ===== DESKTOP FILTER FINISH V19 END ===== */

/* ===== DESKTOP PERIOD + OPS PARITY V20 START ===== */
@media (min-width: 1201px) {
  /* Manager period must occupy the exact same 4/12 desktop span as customer period. */
  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid
  > label.manager-period-filter:has(#mFrom) {
    grid-column: 1 / 5 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Match manager quick-period buttons to customer buttons: content-width buttons, not stretched cells. */
  html body:not(.print-body)
  #managerAnalysis .manager-period-filter .manager-date-presets {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 4px !important;
    overflow: visible !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-period-filter .manager-date-presets
  > .manager-date-preset {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* Customer OPS should match the normal 3-column second-row control width. */
  html body:not(.print-body)
  #customerAnalysis #detailFilters > label:has(#opsFilter) {
    grid-column: 4 / 7 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ===== DESKTOP PERIOD + OPS PARITY V20 END ===== */

/* ===== DESKTOP SECOND-ROW PARITY V21 START ===== */
@media (min-width: 1201px) {
  /* Keep customer second-row controls on the same 3-column rhythm as manager. */
  html body:not(.print-body)
  #customerAnalysis #detailFilters > label:has(#result) {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body:not(.print-body)
  #customerAnalysis #detailFilters > label:has(#opsFilter) {
    grid-column: 4 / 7 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Reset occupies the same three-column end slot on both reports. */
  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions,
  html body:not(.print-body) #managerAnalysis .manager-filter-actions {
    grid-column: 10 / 13 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: end !important;
  }

  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions > button,
  html body:not(.print-body) #managerAnalysis .manager-filter-actions > #mReset {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}
/* ===== DESKTOP SECOND-ROW PARITY V21 END ===== */

/* ===== DESKTOP PERIOD WIDTH PARITY V22 START ===== */
@media (min-width: 1201px) {
  html body:not(.print-body) #customerAnalysis > .filter-card > .filter-top > .date-filter,
  html body:not(.print-body) #managerAnalysis .manager-filter-grid > label.manager-period-filter:has(#mFrom) {
    grid-column: 1 / 5 !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body:not(.print-body) #customerAnalysis .date-filter .date-input-row,
  html body:not(.print-body) #managerAnalysis .manager-period-filter .manager-date-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* ===== DESKTOP PERIOD WIDTH PARITY V22 END ===== */

/* ===== DESKTOP RESET WIDTH PARITY V23 START ===== */
@media (min-width: 1201px) {
  /* Keep both report reset buttons at one physical desktop width regardless of each grid's column width. */
  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions,
  html body:not(.print-body) #managerAnalysis .manager-filter-actions {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    justify-self: end !important;
  }

  html body:not(.print-body) #customerAnalysis .filter-top > .filter-actions > button,
  html body:not(.print-body) #managerAnalysis .manager-filter-actions > #mReset {
    box-sizing: border-box !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
}
/* ===== DESKTOP RESET WIDTH PARITY V23 END ===== */



/* ===== DESKTOP MANAGER PERIOD VERTICAL ALIGN V24 START ===== */
@media (min-width: 1201px) {
  /* Only align the manager period field vertically with the other first-row filters. */
  html body:not(.print-body)
  #managerAnalysis .manager-filter-grid > label.manager-period-filter:has(#mFrom) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  html body:not(.print-body)
  #managerAnalysis .manager-period-filter .manager-date-row,
  html body:not(.print-body)
  #managerAnalysis .manager-period-filter .manager-date-presets {
    margin-top: 0 !important;
  }
}
/* ===== DESKTOP MANAGER PERIOD VERTICAL ALIGN V24 END ===== */



/* ============================================================
   ALLOWANCE PAYMENT REQUEST
   ============================================================ */
.allowance-request-modal[hidden] { display: none !important; }
.allowance-request-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 202px; z-index: 12000; padding: 24px; background: rgba(0,0,0,.48); overflow: auto; }
.allowance-request-dialog { width: min(1500px, 100%); margin: 0 auto; padding: 22px; border: 1px solid var(--theme-line); border-radius: 18px; background: var(--theme-surface); color: var(--theme-text); box-shadow: var(--theme-shadow); }
.allowance-request-head, .allowance-request-footer, .allowance-request-controls { display: flex; align-items: center; gap: 12px; }
.allowance-request-head { justify-content: space-between; margin-bottom: 16px; }
.allowance-request-head h2 { margin: 0 0 4px; }
.allowance-request-head p { margin: 0; color: var(--theme-muted); }
.allowance-request-controls { flex-wrap: wrap; padding: 14px; border-radius: 12px; background: var(--theme-surface-soft); }
.allowance-request-controls label { display: grid; gap: 5px; min-width: 180px; font-size: 12px; font-weight: 700; }
.allowance-request-controls input { min-height: 38px; padding: 7px 10px; border: 1px solid var(--theme-line); border-radius: 9px; background: var(--theme-surface); color: var(--theme-text); }
.allowance-request-warnings { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--theme-warning); border-radius: 10px; background: var(--theme-surface-soft); }
.allowance-request-preview { overflow-x:auto; margin-top: 14px; overflow: auto; }
.allowance-request-document { width: 920px; max-width: 920px; min-width: 920px; margin: 0 auto; padding: 22px; background: var(--theme-surface); }
.allowance-request-document h1 { margin: 0 0 18px; text-align: center; font-size: 24px; }
.allowance-request-document h3 { margin: 22px 0 8px; }
.allowance-request-meta, .allowance-request-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.allowance-request-meta th, .allowance-request-meta td, .allowance-request-table th, .allowance-request-table td { padding: 7px 8px; border: 1px solid var(--theme-line-strong); vertical-align: middle; }
.allowance-request-meta th, .allowance-request-table th { background: var(--theme-surface-strong); white-space: nowrap; }
.allowance-request-table td.num { text-align: right; white-space: nowrap; }
.allowance-request-table td.reason { min-width: 180px; white-space: normal; }
.allowance-request-summary { display: grid; grid-template-columns: repeat(5,minmax(150px,1fr)); gap: 8px; margin: 14px 0; }
.allowance-request-summary > div { padding: 10px; border: 1px solid var(--theme-line); border-radius: 9px; background: var(--theme-surface-soft); }
.allowance-request-summary small { display:block; color:var(--theme-muted); }
.allowance-request-summary strong { display:block; margin-top:4px; }
.allowance-request-footer { justify-content: flex-end; margin-top: 16px; }
body.allowance-request-open { overflow: hidden; }
@media (max-width:1350px) and (min-width:901px) { .allowance-request-modal { left: 178px; } }
@media (max-width: 900px), (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) { .allowance-request-modal { left: 0; } }
@media (max-width:760px) { .allowance-request-modal { left: 0; padding: 8px; } .allowance-request-dialog { padding: 12px; } .allowance-request-summary { grid-template-columns: repeat(2,minmax(130px,1fr)); } }