/* =========================================================
   PuppyDesk — 매출 관리 카드 안의 미니 대시보드 패널
   담당: 리뷰 관리 / 근무 달력·급여 / 월간 보고서 차트
   care.css 뒤에 로드된다. 자체 반응형 규칙을 포함한다.
   ========================================================= */

/* 카드 본문과 목업을 가르는 공용 껍데기 */
.mini {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.mini-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.mini-bar b {
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .04em;
}

/* ---------- 리뷰 관리 ---------- */
.rv-score {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.rv-score > b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* 배지는 한 줄로 나란히, 설명은 그 아래 — grid 로 두면 배지마다 행이 생긴다 */
.rv-plats { display: block; }
.rv-plats i {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-right: 5px;
  border-radius: 7px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}
/* 플랫폼 마크는 제3자 아이덴티티 — 팔레트 밖의 고유색을 유지한다 */
.rp-n { background: #03c75a; }
.rp-k { background: #fee500; color: #3c1e1e !important; }
.rp-g { background: #4285f4; }
.rp-d { background: #ff6f0f; }
.rv-plats span {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.rv-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.rv-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rv-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rv-from {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.rv-stars {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink);
}
.rv-item p {
  margin: 8px 0 9px !important;
  font-size: 12.5px !important;
  line-height: 1.65;
  color: var(--ink-2) !important;
  /* 두 줄까지만 — 카드 높이를 예측 가능하게 유지한다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-state {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
}
.rv-state.done { color: var(--ink); }

/* ---------- 근무 달력 ---------- */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--muted);
  padding-bottom: 4px;
}
.cal-dow.off { color: #b9bfbe; }
.cal .d {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  padding: 4px 0 0 5px;
}
.cal .d.rest { background: var(--paper-3); color: #b9bfbe; }
/* 오늘은 반전 — 무채색에서 가장 강한 강조 */
.cal .d.today {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* 근무자 표시 점 — 칸 하단에 나란히 */
.cal .d b {
  position: absolute;
  bottom: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cal .d b:nth-of-type(1) { left: 5px; }
.cal .d b:nth-of-type(2) { left: 13px; }
.w1 { background: var(--ink); }
.w2 { background: #8d9391; }
.w3 { background: #fff; border: 1px solid var(--ink); }
.cal .d.today .w1 { background: #fff; }
.cal .d.today .w3 { background: transparent; border-color: #fff; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend b {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- 월간 보고서 차트 ---------- */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 108px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.chart i {
  position: relative;
  flex: 1;
  border-radius: 5px 5px 0 0;
  background: var(--gray-soft);
  transition: background .25s;
}
/* 최신 달만 먹색 — 어디를 봐야 하는지 한눈에 */
.chart i.on { background: var(--ink); }
.chart i span {
  position: absolute;
  bottom: -16px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  margin-top: 18px;
}
.kpis > div { display: grid; }
.kpis small {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: -0.02em;
}
.kpis b {
  margin-top: 5px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.kpis span {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.kpis span.up { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .mini { margin-top: 18px; padding-top: 16px; }
  .rv-score > b { font-size: 30px; }
  .cal { gap: 3px; }
  .cal .d { font-size: 9px; padding: 3px 0 0 4px; }
  .cal .d b { width: 4px; height: 4px; bottom: 4px; }
  .cal .d b:nth-of-type(2) { left: 11px; }
  .chart { height: 90px; }
  .kpis { gap: 12px 14px; }
  .kpis b { font-size: 17px; }
}