: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}.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:#fff;border:1px solid var(--line);color:var(--purple);cursor:pointer}.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: #fff;

  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: #fff;

  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: #fff;

  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;

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

  padding: 15px 16px;

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

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

  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: #d3c6fa;

  background: #fff;

  box-shadow:
    0 11px 26px rgba(74,48,140,.09);
}

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

  gap: 8px;

  margin-bottom: 14px;

  color: #686172;

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

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

  color: #aaa2b5;

  font-size: 14px;

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

.exec-card:hover .exec-head b {
  color: var(--purple);
  transform: translateX(2px);
}

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

  width: 26px;
  height: 26px;

  border-radius: 8px;

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

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

.exec-card strong {
  display: block;

  margin-bottom: 6px;

  overflow: hidden;

  color: #1c1824;

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

  line-height: 1.25;

  letter-spacing: -.035em;

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

.exec-card p {
  overflow: hidden;

  color: #857e90;

  font-size: 11px;

  line-height: 1.4;

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


/* =========================================================
   전체 탭의 공간 밀도 조정
   ========================================================= */

/* 카드 라운드와 패딩을 조금 줄임 */
#all .card {
  border-radius: 14px;
}

/* KPI 카드도 약간 압축 */
#all .kpi {
  min-height: 103px;
  padding: 14px;
}

#all .kpi strong {
  font-size: 31px;
}

/* 전체 탭 메인 차트도 약간 압축 */
#all .grid2 .chart {
  height: 285px;
}


/* =========================================================
   필터도 불필요한 세로 여백만 소폭 축소
   ========================================================= */

.filter-card {
  padding: 12px 14px;
}

.date-filter .date-input-row {
  margin-top: 5px;
}

.date-filter .date-presets {
  margin-top: 5px;
}

.date-presets .date-preset {
  height: 28px;
}


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

@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: #746d7f;

  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: 18px;
}

.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;
}

.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 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: #fff;

  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 #e3ddeb;
  border-radius: 9px;

  padding: 10px 11px;
}

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

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

  padding: 11px 13px;

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

  background: #fcfbfe;
}

.former-row strong {
  display: block;

  margin-bottom: 3px;

  font-size: 13px;
}

.former-row span {
  color: #89818f;

  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: #fff;
  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(--purple);
  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: #fff;
}


.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: #fff;

  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:
    radial-gradient(
      circle at 80% 0%,
      #ddd2ff,
      transparent 30%
    ),
    #f7f5fb;

  color: var(--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: #fff;
}


.admin-tabs button {
  border: 0;

  padding: 9px 16px;

  border-radius: 9px;

  background: transparent;
  color: #746d7f;

  font-weight: 700;

  cursor: pointer;
}


.admin-tabs button.active {
  background: var(--purple);
  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: #5f5869;

  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: #fff;
}


.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: #fff;

  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: #fff;

  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: #fff;

  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: #fff;

  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: grid;

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

  align-items: center;

  gap: 10px;

  min-height: 58px;

  padding: 8px 10px;

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

  background: #fcfbfe;

  cursor: grab;

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


.sortable-user-item:hover {
  border-color: #d6c9fa;

  background: #fff;
}


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

  transform: scale(.99);

  cursor: grabbing;
}


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

  width: 28px;
  height: 28px;

  border-radius: 8px;

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

  font-size: 18px;
  font-weight: 900;

  cursor: grab;
}


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


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

  overflow: hidden;

  margin-bottom: 3px;

  color: #292330;

  font-size: 13px;

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


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

  overflow: hidden;

  color: #8a8291;

  font-size: 10px;

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


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


.sortable-move-btn {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  padding: 0;

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

  background: #fff;
  color: #625b6b;

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

  cursor: pointer;
}


.sortable-move-btn:hover {
  border-color: #bba9f5;

  background: #f7f3ff;
  color: var(--purple);
}


@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: #fff;

  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: #fff;
  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: #fff;
}


.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: #fff;
  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: #fff;

  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: #fff;

  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: #fff;

  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: #fff;

  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;
}