/* ============================================================
   Screen-specific styles
   ============================================================ */

/* ---------- SC-01 로그인 ---------- */
.login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:48px 20px;
  background:
    radial-gradient(760px 440px at 50% -10%, rgba(20,184,166,.11), transparent 64%),
    var(--bg-app);
}
.login__wrap{width:min(440px,100%);}

/* 최상단 워드마크 - 이 화면의 식별자 */
.login__brand{text-align:center;margin-bottom:22px;}
.login__brand h1{
  font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.4;
  color:var(--navy-700);
}
.login__brand p{
  margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);
}

.login__card{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:26px 26px 22px;
}
.login__card h2{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text-strong);}
.login__card .desc{font-size:12px;color:var(--text-muted);margin:4px 0 18px;}
.login__field{margin-bottom:13px;}
.login__field label{display:block;font-size:11.5px;font-weight:700;color:var(--text-muted);margin-bottom:5px;}
.login__field .inp{height:40px;font-size:13px;}
.login__err{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 13px;padding:10px 12px;
  background:var(--rose-50);border:1px solid #fca5a5;border-radius:var(--r-sm);
  font-size:12px;color:#991b1b;font-weight:600;line-height:1.55;
}

/* 저작권·보안 안내 - 설계서 SC-01 과 동일하게 로그인 카드 하단에 배치 */
.login__legal{
  margin-top:20px;padding-top:15px;border-top:1px solid var(--border);
  font-size:10.5px;line-height:1.7;color:var(--text-faint);
}
.login__legal b{display:block;color:var(--text-muted);font-weight:700;margin-bottom:3px;}


@media (max-width:520px){
  .login{padding:28px 16px;}
  .login__brand h1{font-size:18px;}
  .login__card{padding:22px 18px 18px;}
}

/* ---------- SC-02 대시보드 ---------- */
.funnel{padding:6px 4px;}
.fstage{display:grid;grid-template-columns:104px 1fr 116px;gap:12px;align-items:center;}
.fstage__label{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;}
.fstage__track{height:26px;border-radius:var(--r-sm);background:var(--bg-inset);overflow:hidden;position:relative;}
.fstage__fill{height:100%;border-radius:var(--r-sm);transition:width .5s cubic-bezier(.2,.8,.3,1);min-width:3px;}
.fstage__val{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);}
.fstage__val b{font-size:14px;font-weight:700;color:var(--text-strong);}
.fstage__val small{color:var(--text-faint);font-size:10.5px;display:block;text-align:right;white-space:nowrap;}
.fconv{
  display:grid;grid-template-columns:104px 1fr 116px;gap:12px;align-items:center;
  padding:3px 0;
}
.fconv__line{grid-column:2;display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--text-muted);}
.fconv__line::before{content:"";width:1px;height:16px;background:var(--border-strong);margin-left:11px;}
/* 색으로 등급을 매기지 않는다(screens/dashboard.js funnelBody 주석 참조) - 주변 글자보다
   진하게만 두어 숫자로 읽히게 한다. */
.fconv__rate{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);}

.funnel-legend{
  display:flex;gap:14px;flex-wrap:wrap;padding-top:14px;margin-top:12px;border-top:1px dashed var(--border);
  font-size:11px;color:var(--text-muted);
}
.funnel-legend b{color:var(--text);font-weight:700;}

.minibar{display:flex;height:7px;border-radius:var(--r-full);overflow:hidden;background:var(--bg-inset);min-width:88px;}
.minibar i{display:block;height:100%;}
.rate-cell{font-variant-numeric:tabular-nums;font-weight:600;}
.rate-cell.is-strong{color:var(--emerald-700);}
.rate-cell.is-weak{color:var(--text-faint);}

.dash-legend{
  display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--text-muted);
  padding:10px 16px;border-top:1px solid var(--border);background:var(--bg-subtle);
}
.dash-legend span{display:inline-flex;align-items:center;gap:5px;}
.dash-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}

/* ---------- SC-07 업로드 ---------- */
.dropzone{
  border:1.5px dashed var(--teal-500);border-radius:var(--r-md);background:var(--teal-50);
  padding:30px 20px;text-align:center;cursor:pointer;transition:background .14s,border-color .14s;
  max-width:640px;
}
.dropzone:hover,.dropzone.is-over{background:var(--teal-100);border-color:var(--teal-700);}
.dropzone__ico{font-size:26px;margin-bottom:8px;}
.dropzone__t{font-size:13px;font-weight:700;color:var(--teal-800);}
.dropzone__d{font-size:11.5px;color:var(--teal-700);margin-top:4px;}
.dropzone.has-file{border-style:solid;background:var(--bg-surface);border-color:var(--teal-600);}

.filechip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--r-sm);
  background:var(--bg-inset);border:1px solid var(--border);font-size:12px;max-width:640px;
}
.filechip b{font-weight:700;}
.filechip .btn{margin-left:auto;}

.valid-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin-bottom:12px;}
.vs{border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;background:var(--bg-surface);}
.vs__l{font-size:10.5px;color:var(--text-muted);font-weight:600;}
.vs__v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;}
.vs.is-ok .vs__v{color:var(--emerald-700);}
.vs.is-err .vs__v{color:var(--danger);}
.rowerr{color:var(--danger);font-weight:600;font-size:11px;}
.rowok{color:var(--emerald-700);font-weight:600;font-size:11px;}

/* ---------- 업체상세 모달 ---------- */
.biz-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:-16px -18px 14px;padding:0 18px;}
.bizgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;}
@media (max-width:640px){.bizgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.bizcell{background:var(--bg-surface);padding:10px 12px;}
.bizcell dt{font-size:10.5px;color:var(--text-faint);font-weight:600;margin-bottom:3px;}
.bizcell dd{margin:0;font-size:13px;font-weight:600;color:var(--text-strong);}
.gradebar{display:flex;gap:3px;margin-top:8px;}
.gradebar i{flex:1;height:6px;border-radius:2px;background:var(--bg-inset);}
.gradebar i.on{background:var(--teal-600);}
.ai-block{margin-bottom:14px;}
.ai-block h5{font-size:11.5px;font-weight:700;color:var(--accent);margin-bottom:5px;display:flex;align-items:center;gap:6px;}
.ai-block p{font-size:12.5px;line-height:1.7;color:var(--text);}
/* 외부 연계 응답 원문 상자(잠재고객 상세) - AI 성과분석 보고서에는 쓰지 않는다. */
.ai-src{font-size:10.5px;color:var(--text-faint);border-top:1px dashed var(--border);padding-top:9px;margin-top:12px;line-height:1.6;}

/* ---------- 마이크로 : 권한 안내 배너 ---------- */
.scope-banner{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 13px;border-radius:var(--r-sm);margin-bottom:12px;
  background:var(--bg-subtle);border:1px solid var(--border);font-size:11.5px;color:var(--text-muted);
}
.scope-banner b{color:var(--text);font-weight:700;}
.scope-banner .chip{flex:0 0 auto;}
.lead-company{min-width:0;overflow-wrap:anywhere;}
.lead-company__biz{display:block;margin-top:4px;font-size:11px;font-weight:400;color:var(--text-faint);line-height:1.5;}
.lead-company-edit .lead-company__biz{margin-top:8px;}
.lead-company-edit .lead-company__biz .inp{display:block;max-width:220px;margin-top:4px;font-size:12px;color:var(--text-muted);}
/* 상세 화면에서 아래 카드들과 같은 폭으로 선다 - 배너만 넓으면 층이 진다.
   목록·대시보드의 배너는 본문 폭을 그대로 쓰므로 이 클래스를 붙이지 않는다. */
.pane-w{max-width:var(--pane-max);}

/* ---------- SC-12 영업활동 타임라인 · 등록 모달 ---------- */
/* 활동 이력은 장식용 점·연결선 없이 동일한 테두리 상자로 표시한다. */
.tl{list-style:none;margin:0;padding:0;}
.tl__i{
  /* min-width:0 - 안쪽 내용이 길어도 항목이 컨테이너 밖으로 자라지 않게 한다. */
  position:relative;min-width:0;padding:9px 12px;margin-bottom:8px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.tl__i:last-child{margin-bottom:0;}
/* 삭제가 없으므로 폐기된 활동도 목록에 남는다 - 유효한 행과 즉시 구분되게 낮춰 표시한다. */
.tl__i.is-off{background:var(--bg-subtle);}
.tl__i.is-off .tl__detail,.tl__i.is-off .tl__date{color:var(--text-faint);}

.tl__head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px;}
.tl__sp{flex:1;}
.tl__date{font-size:12px;font-weight:700;color:var(--text-strong);font-family:var(--font-num);}
.tl__week{font-size:10.5px;color:var(--text-muted);font-weight:600;}
.tl__co{font-size:12px;font-weight:700;color:var(--accent);}
/*
 * 영업 내용 및 향후 계획 - 담당자가 적은 줄바꿈은 살리고(pre-wrap), 줄바꿈할 곳이 없는
 * 긴 토큰(이메일 주소·URL·연속 숫자)은 강제로 끊는다. 실측 비고에 `이메일 제안
 * (servicedesk@drinksinter.com)` 같은 문자열이 흔해서, 끊지 않으면 그 한 줄이 카드를
 * 통째로 밀어 넓힌다 - 위 폼 카드와 폭이 어긋나는 원인이 된다.
 */
.tl__detail{
  font-size:12.5px;line-height:1.7;color:var(--text);
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
}
.tl__meta{font-size:10.5px;color:var(--text-faint);margin-top:5px;}
.tl__meta i{font-style:normal;color:var(--border-strong);margin:0 3px;}

/* 집계 버킷 배지 - 컨택구분을 고르는 즉시 어디로 잡히는지 보여준다. */
.act-bkt{
  display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;white-space:nowrap;
}
.act-bkt--prospect{background:var(--st-02-bg);color:var(--st-02-fg);}
.act-bkt--field{background:var(--teal-100);color:var(--teal-800);}
.act-bkt--etc{background:var(--bg-inset);color:var(--text-muted);border:1px solid var(--border-strong);}

/* 영업활동 등록·수정 모달 */
.act-form .frow:last-of-type{border-bottom:none;}
/* 시트 규칙 원문 : 기타로 찍었으면 영업 과정을 글로 설명해야 한다. */
.act-etcnote{color:var(--warn);font-weight:700;}

/* ---------- SC-14 AI 성과분석 ---------- */
/*
   화면은 받은 PDF 2종의 목차와 분량을 그대로 따른다(1. 개요 → 2. 분석 결과 (1)(2)(3) → 3. 종합 의견).
   부서장이 기존 산출물과 나란히 놓고 대조하는 것이 목적이므로 카드·지표 카드·범례 없이
   공문서처럼 □ / ㅇ 항목과 표만 놓는다. 결은 사내 문서·엑셀과 같아야 한다.
*/
.rp{margin-top:6px;}
.an-report-tabs .tab{white-space:normal;text-align:left;}
.an-report-tabs .tab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;}
.rp--r2 .rp-blk{padding-left:0;}
.rp__title{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:0 0 8px;margin-bottom:6px;border-bottom:2px solid var(--text-strong);
  font-size:15px;font-weight:700;color:var(--text-strong);
}
.rp__title small{font-size:11px;font-weight:600;color:var(--text-muted);}
.rp__title b{font-weight:800;}
.rp__title span{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-left:auto;}
.rp__h1{font-size:13.5px;font-weight:800;color:var(--text-strong);margin:18px 0 6px;}
.rp__h2{font-size:12.5px;font-weight:700;color:var(--text-strong);margin:12px 0 4px;padding-left:8px;}

/* 블록 - □ 제목 + 표/항목. 카드 대신 여백으로만 나눈다. */
.rp-blk{padding:2px 0 4px 16px;}
.rp-blk + .rp-blk{margin-top:8px;}
.rp-blk__t{font-size:12.5px;font-weight:700;color:var(--text);margin:6px 0 5px;}
.rp-blk__d{font-size:11px;font-weight:500;color:var(--text-muted);margin-left:6px;}
.rp-blk .tablewrap{margin:2px 0 4px;}
.rp .tbl{font-size:11.5px;}
.rp .tbl th,.rp .tbl td{padding:5px 6px;}
.rp .tbl th{background:var(--bg-inset);color:var(--text);font-weight:700;}
.rp .tbl .sub{display:none;}
.rp .tbl td.wrap{line-height:1.55;}

/* 항목 - □(사각) 은 소제목급, ㅇ(원) 은 내용 줄 */
.rp-li{font-size:12.5px;line-height:1.7;color:var(--text);padding-left:16px;position:relative;}
.rp-li b{font-weight:700;color:var(--text-strong);}
.rp-li--sq{font-weight:700;margin-top:4px;}
.rp-li--sq::before{content:"\25A1";position:absolute;left:0;top:0;color:var(--text-muted);font-weight:400;}
.rp-li--o{padding-left:32px;}
.rp-li--o::before{content:"\3147";position:absolute;left:16px;top:0;color:var(--text-muted);font-size:11px;}
.rp-blk > .rp-li--o{padding-left:16px;}
.rp-blk > .rp-li--o::before{left:0;}

/* 순위 - 서버가 준 순서를 그대로 한 줄에 늘어놓는다(화면에서 정렬하지 않는다). */
.rank-line{font-size:12px;line-height:1.7;color:var(--text);padding-left:16px;}
.rank-line em{font-style:normal;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:2px;font-size:11px;}
.rank-line em::before{content:"(";}
.rank-line em::after{content:")";}
.rank-line--ex{font-size:11px;color:var(--text-muted);}

/* 종합 의견 - □ 소제목 + ㅇ 근거 문장 */
.rp-op{padding:5px 0 3px;}
.rp-op__t{font-size:12.5px;font-weight:700;color:var(--text-strong);margin-bottom:2px;}
.rp-op .rp-li--o{padding-left:22px;}
.rp-op .rp-li--o::before{left:8px;}

/* 담당자별 평가 - 「이름 - N건 · 활동율 · 리드등록율 (순위)」 + 서술 + 강점/한계 */
.rp-own{padding:7px 0;border-bottom:1px dashed var(--border);}
.rp-own:last-of-type{border-bottom:none;}
.rp-own__t{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--text-strong);}
.rp-own__t b{font-weight:800;}
.rp-own__t span{font-size:11.5px;font-weight:500;color:var(--text-muted);}
.rp-own__t em{font-style:normal;font-size:11px;font-weight:700;color:var(--text);padding:0 6px;border:1px solid var(--border-strong);border-radius:var(--r-xs);}
.rp-own__b{font-size:12.5px;line-height:1.65;color:var(--text);margin:3px 0 0;white-space:pre-wrap;}
.rp-own__f{font-size:11.5px;color:var(--text);margin-top:3px;line-height:1.7;}
.rp-own__f b{font-weight:700;color:var(--text-muted);margin-right:4px;}
.rp-own__f b + b,.rp-own__f b:not(:first-child){margin-left:14px;}

.rp-insight{font-size:12.5px;line-height:1.7;color:var(--text);margin:0;}
/* 영업활동 보고서 - 개인별 분석 6항목 · 나의 활동 요약 */
.rp-item{margin:4px 0 2px;}
.rp-item__t{font-size:12px;font-weight:700;color:var(--text-muted);margin:4px 0 1px;}
.rp-item .rp-li--o{padding-left:18px;}
.rp-item .rp-li--o::before{left:4px;}
.rp-kv{grid-template-columns:120px 1fr;font-size:12.5px;line-height:1.7;}
.rp-kv dt{color:var(--text-muted);font-weight:600;}
.rp--act .miss{color:var(--text-faint);}
.an-scope{margin-right:6px;}
.an-scope .preset{min-width:48px;padding:0 10px;}
.an-scope__one{font-weight:700;color:var(--text-strong);margin-right:10px;}
.fb__scope{font-size:12.5px;color:var(--text);line-height:30px;white-space:nowrap;}

.rp .rule-hint{margin:2px 0 4px;}

/* 진행 상태 - 중립적인 보고서별 현황과 실제 서버 진행 기록 */
.an-draft{font-size:11px;color:var(--text-muted);margin:0 0 8px;}
.an-progress{background:var(--bg-surface);}
.an-prog{padding-top:18px;}
.an-prog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.an-prog__title b{display:block;font-size:15px;font-weight:700;color:var(--text-strong);}
.an-prog__title span{display:block;margin-top:3px;font-size:12px;color:var(--text-muted);}
.an-prog__eta{font-size:12.5px;font-weight:600;color:var(--text);padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg-subtle);white-space:nowrap;}
.an-prog__bar{display:flex;align-items:center;gap:12px;margin:16px 0 18px;}
.an-prog__bar .an-bar{flex:1 1 auto;height:10px;}
.an-prog__pct{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:72px;text-align:right;}
.an-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.an-steps__item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-surface);min-width:0;}
.an-steps__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-muted);background:var(--bg-surface);}
.an-steps__body{flex:1 1 auto;min-width:0;}
.an-steps__body b{display:block;font-size:13px;font-weight:700;color:var(--text-strong);}
.an-steps__body span{display:block;margin-top:2px;font-size:11.5px;color:var(--text-muted);line-height:1.5;}
.an-steps__state{flex:0 0 auto;font-style:normal;font-size:11px;font-weight:600;color:var(--text-muted);padding-top:4px;}
.an-steps__item.is-done .an-steps__n{background:var(--accent);border-color:var(--accent);color:#fff;}
.an-steps__item.is-done .an-steps__state{color:var(--accent);}
.an-steps__item.is-running{border-color:var(--accent);box-shadow:0 0 0 2px var(--emerald-100,rgba(16,185,129,.15));}
.an-steps__item.is-running .an-steps__n{border-color:var(--accent);color:var(--accent);}
.an-steps__item.is-running .an-steps__state{color:var(--accent);}
.an-steps__item.is-failed{border-color:var(--warn);}
.an-steps__item.is-failed .an-steps__state{color:var(--warn);}
.an-steps__item.is-skipped,.an-steps__item.is-wait{opacity:.85;}
.an-prog__logt{font-size:12px;font-weight:700;color:var(--text-strong);margin:18px 0 4px;}
.an-log{list-style:none;padding:0;margin:0;border-top:1px solid var(--border);}
.an-log li{display:flex;gap:12px;padding:7px 0;font-size:12.5px;color:var(--text-muted);border-bottom:1px dashed var(--border);}
.an-log li:last-child{color:var(--text-strong);font-weight:600;border-bottom:none;}
.an-log time{flex-shrink:0;font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:400;color:var(--text-faint);width:64px;}
.an-prog__hint{margin:12px 0 0;font-size:11.5px;color:var(--text-faint);}
@media(max-width:900px){.an-steps{grid-template-columns:1fr;}.an-log li{flex-direction:column;gap:3px;}}
.an-bar{height:8px;border-radius:var(--r-full);background:var(--bg-inset);overflow:hidden;}
.an-bar i{display:block;height:100%;background:var(--accent);transition:width .3s ease;}
.an-bar.is-unknown i{background:var(--border-strong);}

.an-steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.an-step{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-subtle);
  font-size:11.5px;
}
.an-step__l{font-weight:700;color:var(--text);}
.an-step__n{color:var(--text-faint);font-size:10.5px;}

.an-head{margin-bottom:10px;}
.an-head b{font-weight:700;}

/* 프리뷰 모달 - 승인 대상이 한눈에 보여야 한다 */
.an-prev{gap:8px 16px;font-size:12.5px;}
.an-prev dd{font-variant-numeric:tabular-nums;font-weight:600;}

/*
   서버가 값을 내려주지 않은 자리. 0 으로 접으면 오류 없이 숫자만 틀리므로
   눈에 띄되 데이터로 오해되지 않게 표시한다(format.js num() 경고 참조).
*/
.miss{
  display:inline-block;padding:0 5px;border-radius:var(--r-xs);
  background:var(--rose-50);border:1px dashed var(--rose-700);
  font-size:10px;font-weight:700;color:var(--rose-700);letter-spacing:-.01em;
}

/*
   서술 검증 표시 (AI 성과분석 · 정성 계층)

   ★세 상태가 눈으로 구분되어야 한다.★
     미검증(bad)  facts 에 없는 수치가 섞인 문장. 문장은 지우지 않고 이 표시만 붙인다.
     검증됨(ok)   확정 집계값만 인용한 것으로 확인된 문장.
     미수행(none) 검사하지 않았다 - **통과가 아니다.** 같은 색으로 그리면 검사하지 않은
                  문장이 검사를 통과한 문장처럼 보인다.
   색은 tokens.css 변수만 쓴다(인쇄물과 화면이 갈라지지 않게 한다).
*/
.vmark{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-xs);
  font-size:10px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;vertical-align:middle;
}
.vmark--bad{background:var(--rose-50);border:1px solid var(--rose-700);color:var(--rose-700);}
.vmark--evidence{background:var(--bg-inset);border:1px solid var(--border-strong);color:var(--text-muted);cursor:help;}
.vmark--evidence:hover{background:var(--bg-subtle);color:var(--text-strong);}
.vmark--evidence:focus-visible{outline:2px solid var(--border-strong);outline-offset:2px;}
.vmark--ok{background:var(--emerald-50);border:1px solid var(--emerald-700);color:var(--emerald-700);}
.vmark--none{background:var(--bg-inset);border:1px dashed var(--border-strong);color:var(--text-faint);}

/* 나의 성과분석 - 왼쪽 본문 · 오른쪽 부서 내 비교(반씩). 비교는 지표 카드 2열, 본인만 강조색. */
.rp-me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;}
.rp-me__main{min-width:0;}
.rp-cmp{position:sticky;top:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;margin-top:14px;}
.rp-cmp__head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.rp-cmp__head b{font-size:13px;color:var(--text-strong);}
.rp-cmp__head span{flex-basis:100%;font-size:11px;color:var(--text-muted);}
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;}
.cmp-blk{border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;}
.cmp-blk__t{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;}
.cmp-blk__t b{font-size:12px;font-weight:700;color:var(--text-strong);}
.cmp-blk__t em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.cmp-row{display:grid;grid-template-columns:52px minmax(0,1fr) 56px;align-items:center;gap:8px;min-height:20px;}
.cmp-row__l{font-size:11px;color:var(--text-muted);white-space:nowrap;}
.cmp-row__track{display:block;height:8px;background:var(--bg-inset);border-radius:0 4px 4px 0;overflow:hidden;}
.cmp-row__track i{display:block;height:100%;background:var(--border-strong);border-radius:0 4px 4px 0;}
.cmp-row.is-max .cmp-row__track i{background:var(--text-muted);}
.cmp-row.is-avg .cmp-row__track i{background:var(--text-faint);}
.cmp-row.is-me .cmp-row__l{color:var(--text-strong);font-weight:700;}
.cmp-row.is-me .cmp-row__track i{background:var(--accent);}
.cmp-row__v{font-size:11px;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cmp-row.is-me .cmp-row__v{font-weight:700;color:var(--text-strong);}
@media (max-width:1100px){
  .rp-me{grid-template-columns:minmax(0,1fr);}
  .rp-cmp{position:static;}
}
@media (max-width:560px){
  .cmp-grid{grid-template-columns:minmax(0,1fr);}
}
@media print{
  .rp-me{display:block;}
  .rp-cmp{position:static;break-inside:avoid;page-break-inside:avoid;}
  .cmp-blk{break-inside:avoid;}
}