/* 대시보드 본문(2026-09-16) — DESIGN-SPEC 의 토큰·간격 그대로.
   머리·왼쪽 메뉴·꼬리는 관리자 테마가 맡으므로 여기서는 건드리지 않는다. */
.dsh {
  --p: #1565C0; --p-dark: #0E4894; --p-sub: #E3EEFA; --p-sub2: #EDF4FE; --p-sel: #F7FAFF;
  --p-bd: #90ADEC; --bar-soft: #BBCFF4;
  --red: #F03E3E; --red-bg: #FEE8E8; --red-tx: #C62828;
  --green: #12B76A; --green-bg: #E6F7F0; --green-tx: #0F7A48;
  --amber: #F59E0B; --amber-bg: #FEF3CD; --amber-bg2: #FEF8EC; --amber-tx: #8A5B00;
  --purple: #7C3AED; --purple-bg: #F0EBFD; --purple-tx: #5B21B6;
  --bd: #DDE1E9; --bd-in: #E4E8F0; --bd-row: #F2F4F8; --track: #EDF0F5;
  --t1: #1A1D27; --t2: #4D5566; --t3: #8C95A8;
  --shadow: 0 1px 2px rgba(0,0,0,.05); --shadow-h: 0 4px 12px rgba(0,0,0,.10);
  --ease: 120ms cubic-bezier(.2,0,0,1);
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px 18px; background: #F2F4F8; color: var(--t1);
  font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-y: auto;
}
.dsh-mono, .dsh .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.dsh-spacer { flex: 1 }
.dsh-card { background: #fff; border: 1px solid var(--bd); border-radius: 8px; box-shadow: var(--shadow) }

/* 1. 페이지 머리 */
.dsh-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.dsh-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px }
.dsh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--green-bg); color: var(--green-tx); font-size: 11.5px; font-weight: 600 }
.dsh-pill i { width: 6px; height: 6px; border-radius: 999px; background: var(--green) }
.dsh-pill.is-bad { background: var(--red-bg); color: var(--red-tx) }
.dsh-pill.is-bad i { background: var(--red) }
.dsh-sync { font-size: 11.5px; color: var(--t3); cursor: default }
.dsh-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--bd); background: #fff; color: var(--t2); font: 600 12px inherit; font-family: inherit;
  cursor: pointer; text-decoration: none; transition: box-shadow var(--ease), border-color var(--ease), background var(--ease) }
.dsh-btn:hover { border-color: var(--p-bd); color: var(--p) }
.dsh-btn-primary { background: var(--p); border-color: var(--p); color: #fff }
.dsh-btn-primary:hover { background: var(--p-dark); border-color: var(--p-dark); color: #fff }

/* 2. 통계 카드 */
.dsh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.dsh-stat { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px; text-align: left;
  font: inherit; font-family: inherit; color: inherit; cursor: default }
button.dsh-stat { cursor: pointer; transition: box-shadow var(--ease), border-color var(--ease) }
button.dsh-stat:hover { box-shadow: var(--shadow-h) }
button.dsh-stat[aria-pressed="true"] { border-color: var(--p-bd); box-shadow: 0 0 0 2px rgba(21,101,192,.12) }
.dsh-stat-top { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.dsh-stat-top b { font-size: 27px; font-weight: 700; letter-spacing: -.6px; line-height: 1 }
.dsh-stat-top em { font-style: normal; font-size: 11.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap }
.tone-red { color: var(--red) } .tone-blue { color: var(--p) } .tone-gray { color: var(--t3) } .tone-amber { color: var(--amber) }
.dsh-stat-label { font-size: 12px; color: var(--t2) }
.dsh-track { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden }
.dsh-track i { display: block; height: 100%; border-radius: 999px; transition: width var(--ease) }
.dsh-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2) }
.dot-green { width: 6px; height: 6px; border-radius: 999px; background: var(--green); flex: none }
.dsh-spark { display: flex; align-items: flex-end; gap: 4px; height: 22px }
.dsh-spark i { flex: 1; background: var(--bar-soft); border-radius: 3px; min-height: 2px }
.dsh-spark i.is-last { background: var(--p) }

/* 3. 사서함 · 스팸 */
.dsh-two { display: grid; grid-template-columns: 1.65fr 1fr; gap: 12px }
.dsh-quota { padding: 13px 15px; display: flex; flex-direction: column; gap: 9px }
.dsh-card-head { display: flex; align-items: center; gap: 7px; font-size: 13px }
.dsh-card-head b { font-weight: 700 }
.dsh-card-head .dsh-mono { margin-left: auto; font-size: 12px; color: var(--t2) }
.dsh-stack { display: flex; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden }
.dsh-stack i { display: block; height: 100%; transition: width var(--ease) }
.dsh-stack i:first-child { background: var(--p) } .dsh-stack i:last-child { background: #6090E4 }
.dsh-legend { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--t2); flex-wrap: wrap }
.dsh-legend > span { display: inline-flex; align-items: center; gap: 5px }
.dsh-legend i { width: 7px; height: 7px; border-radius: 2px; flex: none }
.dsh-legend b { font-weight: 600; color: var(--t1) }
.dsh-spam { padding: 13px 15px; display: flex; align-items: center; gap: 11px }
.dsh-spam-ico { width: 38px; height: 38px; border-radius: 999px; background: var(--green-bg);
  display: flex; align-items: center; justify-content: center; flex: none }
.dsh-spam-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 }
.dsh-spam-txt b { font-size: 13px; font-weight: 700 }
.dsh-spam-txt em { font-style: normal; font-size: 11.5px; color: var(--t3) }
.dsh-spam-num { display: flex; align-items: baseline; gap: 3px; color: var(--green-tx); flex: none }
.dsh-spam-num b { font-size: 26px; font-weight: 700; color: var(--green) }
.dsh-spam-num span { font-size: 11.5px; color: var(--t2) }

/* 4. 위젯 */
.dsh-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 12px; min-height: 460px; flex: 1 }
.dsh-widget { display: flex; flex-direction: column; min-height: 0; overflow: hidden }
.dsh-widget-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; flex: none }
.dsh-widget-head b { font-size: 14px; font-weight: 700 }
.dsh-more { margin-left: auto; font-size: 11.5px; color: var(--t3); text-decoration: none }
.dsh-more:hover { color: var(--p) }
.dsh-chips { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid var(--bd-in);
  flex: none; flex-wrap: wrap }
.dsh-chips-static { border-bottom: 0; padding-bottom: 8px }
.dsh-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--bd); background: #fff; color: var(--t2); font: 600 11.5px inherit; font-family: inherit;
  cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease) }
.dsh-chip b { font-weight: 700 }
.dsh-chip:hover { border-color: var(--p-bd); color: var(--p) }
.dsh-chip.is-on { background: var(--p); border-color: var(--p); color: #fff }
.dsh-chip.is-static { background: #F2F4F8; border-color: #F2F4F8; color: var(--t2); cursor: default }
.dsh-list { flex: 1; min-height: 0; overflow-y: auto }
.dsh-loading, .dsh-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 34px 16px; color: var(--t3); font-size: 12px; text-align: center }

/* 메일 행 */
.dsh-mail { display: flex; gap: 9px; padding: 11px 12px; border-bottom: 1px solid var(--bd-row);
  cursor: pointer; text-decoration: none; color: inherit; transition: background var(--ease), box-shadow var(--ease) }
.dsh-mail:hover { background: rgba(21,101,192,.05) }
.dsh-mail.is-sel { background: var(--p-sel); box-shadow: inset 3px 0 0 var(--p) }
.dsh.is-dense .dsh-mail { padding: 8px 12px }
.dsh-udot { width: 6px; height: 6px; border-radius: 999px; background: var(--red); flex: none; margin-top: 12px }
.dsh-udot.is-read { background: transparent }
.dsh-av { width: 32px; height: 32px; border-radius: 999px; flex: none; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 13px; font-weight: 700 }
.dsh-mail-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px }
.dsh-mail-top { display: flex; align-items: center; gap: 6px; min-width: 0 }
.dsh-from { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dsh-time { margin-left: auto; font-size: 11px; color: var(--t3); flex: none }
.dsh-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 4px;
  background: var(--p-sub); color: var(--p); font-size: 11px; font-weight: 600; flex: none }
.dsh-badge.is-appr { background: var(--red-bg); color: var(--red-tx) }
.dsh-subject { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dsh-subject.is-unread { font-weight: 600 }
.dsh-preview { font-size: 11.5px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* 일정 */
.dsh-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 14px 10px; flex: none }
.dsh-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; border-radius: 6px;
  border: 0; background: none; cursor: pointer; font-family: inherit; transition: background var(--ease) }
.dsh-day:hover { background: rgba(21,101,192,.06) }
.dsh-day em { font-style: normal; font-size: 10px; color: var(--t3) }
.dsh-day b { font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace }
.dsh-day i { width: 4px; height: 4px; border-radius: 999px; background: var(--p); opacity: 0 }
.dsh-day.has-ev i { opacity: 1 }
.dsh-day.is-today b, .dsh-day.is-today em { color: var(--p); font-weight: 700 }
.dsh-day.is-sel { background: var(--p) }
.dsh-day.is-sel b, .dsh-day.is-sel em { color: #fff }
.dsh-day.is-sel i { background: #fff }
.dsh-group { padding: 9px 14px 5px; font-size: 11.5px; font-weight: 600; color: var(--t3) }
.dsh-ev { display: flex; gap: 9px; margin: 0 12px 6px; padding: 9px 10px 9px 12px; border-radius: 6px;
  position: relative; background: var(--p-sub2); text-decoration: none; color: inherit }
.dsh-ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 6px 0 0 6px; background: var(--p) }
.dsh-ev.is-timed { background: var(--amber-bg2) }
.dsh-ev.is-timed::before { background: var(--amber) }
.dsh-ev-when { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px;
  background: var(--p); color: #fff; font-size: 11px; font-weight: 600 }
.dsh-ev.is-timed .dsh-ev-when { background: transparent; color: var(--amber-tx); padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace }
.dsh-ev-main { min-width: 0; display: flex; flex-direction: column; gap: 1px }
.dsh-ev-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dsh-ev-meta { font-size: 11.5px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dsh-next { display: flex; gap: 10px; padding: 8px 14px; text-decoration: none; color: inherit;
  transition: background var(--ease) }
.dsh-next:hover { background: rgba(21,101,192,.05) }
.dsh-next-date { width: 46px; flex: none; font-size: 11.5px; color: var(--t2);
  font-family: 'JetBrains Mono', ui-monospace, monospace }
.dsh-dashed { display: flex; align-items: center; justify-content: center; gap: 5px; height: 34px; margin: 8px 12px 12px;
  border: 1px dashed #C3C9D5; border-radius: 6px; background: #FBFCFE; color: var(--t2); font-size: 11.5px;
  font-weight: 600; text-decoration: none; flex: none; transition: border-color var(--ease), color var(--ease) }
.dsh-dashed:hover { border-color: var(--p); color: var(--p) }

/* 활동 */
.dsh-act { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--bd-row);
  text-decoration: none; color: inherit; transition: background var(--ease) }
.dsh-act:hover { background: rgba(21,101,192,.05) }
.dsh-act-kind { flex: none; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600 }
.tone-b { background: var(--p-sub); color: var(--p) }
.tone-g { background: var(--green-bg); color: var(--green-tx) }
.tone-o { background: var(--amber-bg); color: var(--amber-tx) }
.tone-p { background: var(--purple-bg); color: var(--purple-tx) }
.tone-r { background: var(--red-bg); color: var(--red-tx) }
.tone-w { background: #F2F4F8; color: var(--t2) }
.tone-s { background: var(--p); color: #fff }
.dsh-act-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px }
.dsh-act-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dsh-act-who { font-size: 11.5px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* 좁은 화면 */
@media (max-width: 1279px) {
  .dsh-grid { grid-template-columns: 1fr 1fr; min-height: 0 }
  .dsh-grid > :first-child { grid-column: 1 / -1 }
}
@media (max-width: 767px) {
  .dsh { padding: 14px }
  .dsh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .dsh-two, .dsh-grid { grid-template-columns: 1fr }
  .dsh-grid > :first-child { grid-column: auto }
}