/* =============================================================
   AE 성과·KPI — 맥 고밀도. 범위: #ae_stats-content 안쪽만, 값은 ui-tokens.css 에서만.
   작업공간 분할 단추 · 숫자 한 줄 · 맥 표(숫자 검정, 경고 점 + 글자, 진행 n/m + 얇은 막대) · 설정 앱 묶음.
   이니셜 원 · 그라데이션 메달 · 색 카드 없음. 마크업: ae-stats.js · ae-kpi.js. 되돌리기: index.tsx 의 이 파일 <link> 한 줄.
   ============================================================= */
html #ae_stats-content{ background:var(--ui-bg) }
html #ae_stats-content *:not(i):not(.fas):not(.far){ font-family:var(--ui-font) }
html #ae_stats-content > .container{ max-width:none; padding:0 }
html #ae_stats-content > .container > .bg-white{ padding:4px 16px 32px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important }
html #ae_stats-content .hidden{ display:none !important }
html #ae_stats-content .ae-wrap, html #ae_stats-content .kpi-mac{ max-width:1640px; color:var(--ui-text-1); font-size:var(--ui-text-body) }
html #ae_stats-content .ae-sp{ flex:1 }
html #ae_stats-content .ae-dim{ color:var(--ui-text-2) }
html #ae_stats-content b{ font-weight:var(--ui-weight-semibold) }
html #ae_stats-content .ae-empty{ padding:40px 0; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-empty.sm{ padding:14px 0 }
html #ae_stats-content .ae-empty.err{ color:var(--ui-danger) }
html #ae_stats-content .ae-foot{ margin:8px 4px 0; font-size:var(--ui-text-caption); line-height:16px; color:var(--ui-text-2) }

/* 위: 작업공간 분할 단추 · 기간 */
html #ae_stats-content .ae-top, html #ae_stats-content .ae-head{ display:flex; align-items:center; gap:8px; min-height:32px; margin:4px 0 10px; white-space:nowrap }
html #ae_stats-content .ae-head{ margin:22px 0 8px }
html #ae_stats-content .ae-head h2, html #ae_stats-content .ae-h2{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #ae_stats-content .ae-seg{ display:inline-flex; flex:none; max-width:100%; overflow-x:auto; padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill); scrollbar-width:none }
html #ae_stats-content .ae-seg::-webkit-scrollbar{ display:none }
html #ae_stats-content .ae-seg button{ flex:none; height:22px; padding:0 12px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); cursor:default }
html #ae_stats-content .ae-seg button + button:not(.on){ box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
html #ae_stats-content .ae-seg button.on + button{ box-shadow:none }
html #ae_stats-content .ae-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }
html #ae_stats-content .ae-pop{ height:24px; padding:0 22px 0 8px; border:0; border-radius:var(--ui-radius-control); background-color:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote); cursor:default }
html #ae_stats-content .ae-btn{ height:24px; padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); white-space:nowrap; cursor:default }
html #ae_stats-content .ae-btn.sm{ height:22px; padding:0 9px }
html #ae_stats-content .ae-btn.pri{ height:var(--ui-control); padding:0 16px; background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #ae_stats-content .ae-btn.pri:hover{ background:var(--ui-accent-hover) }
html #ae_stats-content .ae-link{ height:20px; padding:0 4px; border:0; background:transparent; color:var(--ui-accent-text); font-size:var(--ui-text-footnote); text-decoration:none; cursor:default }
html #ae_stats-content .ae-link.danger{ color:var(--ui-danger) }

/* 묶음 이름 · 흰 묶음 · 줄 */
html #ae_stats-content .ae-cap{ margin:16px 12px 5px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #ae_stats-content .ae-top + .ae-cap{ margin-top:4px }
html #ae_stats-content .ae-sub-hd{ margin:2px 4px 0; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #ae_stats-content .ae-grp{ padding:0 12px; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #ae_stats-content .ae-gr{ display:flex; align-items:center; gap:12px; min-height:34px; padding:5px 0; font-size:var(--ui-text-body) }
html #ae_stats-content .ae-gr + .ae-gr{ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
html #ae_stats-content .ae-gr > .k{ flex:none; display:flex; flex-direction:column; min-width:0; color:var(--ui-text-1) }
html #ae_stats-content .ae-gr > .k .ae-dim{ font-size:var(--ui-text-caption) }
html #ae_stats-content .ae-gr > .v{ flex:1; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; text-align:right }
html #ae_stats-content .ae-gr > .v.r, html #ae_stats-content .ae-gr > .v:only-child{ justify-content:flex-end }
html #ae_stats-content .ae-gr > .v.ae-dist{ justify-content:flex-start }
html #ae_stats-content .kpi-rec{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap }
html #ae_stats-content .kpi-rec .ae-warn{ min-width:44px }
html #ae_stats-content .ae-dist{ flex-wrap:wrap; gap:4px 14px }
html #ae_stats-content .ae-up{ color:var(--ui-success) } html #ae_stats-content .ae-down{ color:var(--ui-danger) }
html #ae_stats-content .ae-pend{ color:var(--ui-warning); font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-pts{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #ae_stats-content .ae-code{ font-family:var(--ui-font-mono) !important; font-size:var(--ui-text-caption); color:var(--ui-text-2); word-break:break-all; text-align:right }

/* 상태 점 */
html #ae_stats-content .ae-warn{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #ae_stats-content .ae-warn + .ae-warn{ margin-left:10px }
html #ae_stats-content .ae-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }
html #ae_stats-content .ae-dot.red{ background:var(--ui-danger) } html #ae_stats-content .ae-dot.orange{ background:var(--ui-warning) } html #ae_stats-content .ae-dot.green{ background:var(--ui-success) } html #ae_stats-content .ae-dot.blue{ background:var(--ui-accent) }

/* 숫자 한 줄(요약) */
html #ae_stats-content .ae-strip{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); margin-bottom:12px }
html #ae_stats-content .ae-strip.six{ grid-template-columns:repeat(6, minmax(0,1fr)) }
html #ae_stats-content .ae-st{ display:flex; flex-direction:column; gap:1px; min-width:0; padding:8px 14px; border:0; background:transparent; text-align:left; cursor:default }
html #ae_stats-content .ae-st + .ae-st{ box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
html #ae_stats-content .ae-st .k{ display:flex; align-items:center; gap:4px; font-size:var(--ui-text-caption); color:var(--ui-text-2); white-space:nowrap }
html #ae_stats-content .ae-st .v{ font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #ae_stats-content .ae-st .v small{ margin-left:2px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #ae_stats-content .ae-st .s{ font-size:var(--ui-text-caption); color:var(--ui-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #ae_stats-content .ae-st .s.warn{ color:var(--ui-warning) }
html #ae_stats-content .ae-st.link .s{ color:var(--ui-accent-text) }
@media (hover:hover){ html #ae_stats-content .ae-st.link:hover{ background:var(--ui-fill-subtle) } }

/* 펼침 화살표(꺾쇠) */
html #ae_stats-content .ae-chev{ display:inline-block; flex:none; width:6px; height:6px; margin:0 2px; border-right:1.5px solid var(--ui-text-3); border-bottom:1.5px solid var(--ui-text-3); transform:rotate(-45deg); transition:transform var(--ui-dur-fast) var(--ui-ease) }
html #ae_stats-content .ae-chev.open{ transform:rotate(45deg) }

/* 맥 표 */
html #ae_stats-content .ae-tbl-wrap{ overflow-x:auto; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #ae_stats-content .ae-tbl-wrap.flat{ border-radius:0; box-shadow:none }
html #ae_stats-content .ae-tbl{ width:100%; border-collapse:collapse; font-size:var(--ui-text-body); font-variant-numeric:tabular-nums }
html #ae_stats-content .ae-tbl th{ height:28px; padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:right; white-space:nowrap }
html #ae_stats-content .ae-tbl th span{ display:block; font-weight:var(--ui-weight-regular); color:var(--ui-text-3) }
html #ae_stats-content .ae-tbl td{ height:var(--ui-row); padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-1); text-align:right; white-space:nowrap; vertical-align:middle }
html #ae_stats-content .ae-tbl tbody tr:last-child > td{ border-bottom:0 }
html #ae_stats-content .ae-tbl .l{ text-align:left } html #ae_stats-content .ae-tbl .c{ text-align:center }
html #ae_stats-content .ae-tbl.sm td{ height:28px; font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-trunc{ max-width:180px; overflow:hidden; text-overflow:ellipsis }
html #ae_stats-content .ae-row{ cursor:default }
@media (hover:hover){ html #ae_stats-content .ae-row:hover > td{ background:var(--ui-fill-subtle) } }
html #ae_stats-content .ae-row[aria-expanded="true"] > td{ background:var(--ui-accent-tint) }
html #ae_stats-content .ae-row.off > td{ color:var(--ui-text-3) }
/* 인센티브 출처(실무담당 몫) — 금액 밑 회색 한 줄. 0건이어도 받을 돈이 있으면 줄은 흐리지 않는다 */
html #ae_stats-content .ae-inc-src{ display:block; margin-top:1px; font-size:var(--ui-text-caption); line-height:14px; font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #ae_stats-content .ae-row:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #ae_stats-content .ae-who{ display:inline-flex; align-items:center; gap:8px }
html #ae_stats-content .ae-who .ae-dim{ font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-sub > td{ padding:6px 10px 10px 28px; background:var(--ui-bg); height:auto }
html #ae_stats-content .ae-items{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #ae_stats-content .ae-items-hd{ display:flex; align-items:center; justify-content:space-between; height:30px; padding:0 12px; border-bottom:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-items-box{ margin-top:12px }

/* 진행 n/m + 얇은 막대 */
html #ae_stats-content .ae-prog{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; line-height:14px; font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-prog.row{ flex-direction:row; gap:8px; width:100% }
html #ae_stats-content .ae-prog .bar, html #ae_stats-content .ae-pbar{ display:block; width:44px; height:4px; border-radius:2px; background:var(--ui-fill); overflow:hidden }
html #ae_stats-content .ae-prog.row .bar{ flex:1; min-width:60px }
html #ae_stats-content .ae-prog .bar i, html #ae_stats-content .ae-pbar i{ display:block; height:100%; border-radius:2px; background:var(--ui-accent) }
html #ae_stats-content .ae-prog.full .bar i, html #ae_stats-content .ae-pbar.full i{ background:var(--ui-success) }
html #ae_stats-content .ae-gr.prog > .k{ width:240px }
html #ae_stats-content .ae-gr.prog > .k .ae-dim{ font-size:var(--ui-text-footnote) }
html #ae_stats-content .ae-gr.prog > .v{ justify-content:flex-start; text-align:left }
html #ae_stats-content .ae-gr.prog .ae-pbar{ flex:1; max-width:none; width:auto; min-width:80px; height:6px; border-radius:3px }
html #ae_stats-content .ae-gr.prog .pct{ flex:none; min-width:64px; text-align:right; font-variant-numeric:tabular-nums }

/* 내 KPI */
html #ae_stats-content .kpi-me{ display:grid; grid-template-columns:minmax(260px, 340px) minmax(0,1fr); gap:12px; align-items:start }
html #ae_stats-content .kpi-big{ display:flex; flex-direction:column; align-items:flex-start; padding:10px 0 8px }
html #ae_stats-content .kpi-big .k{ font-size:var(--ui-text-caption); color:var(--ui-text-2) }
html #ae_stats-content .kpi-big .v{ font-size:var(--ui-text-large); font-weight:var(--ui-weight-bold); line-height:1.1; color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #ae_stats-content .kpi-big .v small{ font-size:var(--ui-text-title3); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #ae_stats-content .kpi-big + .ae-gr{ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
html #ae_stats-content .kb-tier{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; padding:0 5px; border-radius:4px; background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold) }
html #ae_stats-content .kb-tier.kb-tS{ background:var(--ui-accent); color:var(--ui-on-accent) }
html #ae_stats-content .kb-tier.kb-tA{ background:var(--ui-accent-tint); color:var(--ui-accent-text) }

/* 팀 KPI 표 */
html #ae_stats-content .kb-tbl{ min-width:1080px }
html #ae_stats-content .kb-rk{ width:44px; color:var(--ui-text-2) }
html #ae_stats-content .kb-tag{ margin-left:6px; font-size:var(--ui-text-caption); color:var(--ui-accent-text) }
html #ae_stats-content .kb-me > td{ background:var(--ui-accent-tint) }
html #ae_stats-content .kb-hc{ padding:0 4px !important; width:64px }
html #ae_stats-content .kb-cell{ position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:52px; height:30px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #ae_stats-content .kb-cell i{ position:absolute; left:6px; right:6px; bottom:3px; height:3px; border-radius:2px; background:var(--ui-fill) }
html #ae_stats-content .kb-cell i::after{ content:""; display:block; width:var(--p, 0%); height:100%; border-radius:2px; background:var(--ui-accent) }
html #ae_stats-content .kb-cell.full i::after{ background:var(--ui-success) }
html #ae_stats-content .kb-cell.kb-z{ color:var(--ui-text-3); font-weight:var(--ui-weight-regular) }
html #ae_stats-content .kb-mtrc{ min-width:130px; text-align:left }

/* 활동 적립 */
html #ae_stats-content .kpi-forms{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px }
html #ae_stats-content .kpi-form{ display:flex; flex-direction:column; gap:6px; padding:10px 12px }
html #ae_stats-content .kpi-form-hd{ display:flex; flex-direction:column; gap:1px; margin-bottom:2px }
html #ae_stats-content .kpi-form-hd .ae-dim{ font-size:var(--ui-text-caption) }
html #ae_stats-content .kpi-form-ft{ display:flex; justify-content:flex-end; margin-top:2px }
html #ae_stats-content .ae-in{ width:100%; min-height:var(--ui-control); padding:4px 8px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-field); color:var(--ui-text-1); font-size:var(--ui-text-body) }
html #ae_stats-content textarea.ae-in{ resize:vertical; line-height:18px }
html #ae_stats-content .ae-in:focus{ outline:none; box-shadow:var(--ui-focus-ring) }
html #ae_stats-content .ae-in.num{ width:96px; text-align:right; font-variant-numeric:tabular-nums }
html #ae_stats-content .kpi-drop{ padding:10px; border:1px dashed var(--ui-line-dashed); border-radius:var(--ui-radius-control); text-align:center; font-size:var(--ui-text-footnote); color:var(--ui-text-2); cursor:default }
html #ae_stats-content .kpi-drop.over{ border-color:var(--ui-accent); background:var(--ui-accent-tint) }
html #ae_stats-content .kpi-fileinfo{ margin-top:2px; color:var(--ui-text-1) }

/* 승인 대기 */
html #ae_stats-content .kpi-q{ align-items:flex-start; padding:8px 0 }
html #ae_stats-content .kpi-q > .k{ flex:1; gap:2px }
html #ae_stats-content .kpi-q > .k > span{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
html #ae_stats-content .kpi-q > .v{ flex:none }
html #ae_stats-content .kpi-q-body{ margin-top:2px; font-size:var(--ui-text-footnote); line-height:18px; color:var(--ui-text-2); white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }

/* 기준 설정 */
html #ae_stats-content .kpi-set{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; align-items:start }
html #ae_stats-content .kpi-set .ae-cap, html #ae_stats-content .kpi-set + .ae-cap{ margin-top:4px }
html #ae_stats-content .kpi-set + .ae-cap{ margin-top:16px }
html #ae_stats-content .ae-gr.field > .v .ae-in:not(.num){ max-width:280px }
html #ae_stats-content .kpi-items td{ height:34px }
html #ae_stats-content .kpi-items input[type=checkbox], html #ae_stats-content input[type=checkbox]{ accent-color:var(--ui-accent) }
html #ae_stats-content .ae-save{ display:flex; justify-content:flex-end; margin-top:12px }

@media (max-width:1023px){
  html #ae_stats-content .kpi-me, html #ae_stats-content .kpi-set{ grid-template-columns:minmax(0,1fr) }
  html #ae_stats-content .ae-strip.six{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  html #ae_stats-content .ae-strip.six .ae-st:nth-child(4){ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
  html #ae_stats-content .ae-strip.six .ae-st:nth-child(n+5){ box-shadow:inset var(--ui-hairline) var(--ui-hairline) 0 var(--ui-line) }
}
@media (max-width:767px){
  html #ae_stats-content > .container > .bg-white{ padding:4px 12px 32px !important }
  html #ae_stats-content .ae-head{ flex-wrap:wrap; white-space:normal }
  html #ae_stats-content .ae-head h2{ width:100% }
  html #ae_stats-content .ae-head .ae-sp{ display:none }
  html #ae_stats-content .ae-seg button{ height:28px }
  html #ae_stats-content .ae-pop, html #ae_stats-content .ae-btn{ height:30px }
  html #ae_stats-content .ae-strip, html #ae_stats-content .ae-strip.six{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  html #ae_stats-content .ae-strip .ae-st:nth-child(n+3){ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
  html #ae_stats-content .ae-strip .ae-st:nth-child(2n){ box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
  html #ae_stats-content .ae-strip .ae-st:nth-child(2n):nth-child(n+3){ box-shadow:inset var(--ui-hairline) var(--ui-hairline) 0 var(--ui-line) }
  html #ae_stats-content .kpi-forms{ grid-template-columns:minmax(0,1fr) }
  html #ae_stats-content .ae-gr.prog{ flex-wrap:wrap; gap:4px 12px }
  html #ae_stats-content .ae-gr.prog > .k{ width:100% }
  html #ae_stats-content .ae-gr.field{ flex-wrap:wrap }
  html #ae_stats-content .ae-gr.field > .v{ width:100% } html #ae_stats-content .ae-gr.field > .v .ae-in:not(.num){ max-width:none }
  html #ae_stats-content .ae-tbl td{ height:var(--ui-row-mobile) }
  html #ae_stats-content .kpi-q{ flex-wrap:wrap } html #ae_stats-content .kpi-q > .v{ width:100% }
}