/* =========================================================
   '인적성 종합 직무능력 검사 결과표' (report-total.html) — 전용 스타일
   ---------------------------------------------------------
   · css/style.css  : NAT(인적성검사) 결과표 공통 컴포넌트
   · css/nr.css     : 직무능력 결과표 컴포넌트(nr-table · pctbar · part-title)
   · 이 파일        : 두 결과표를 합치며 새로 생긴 구성요소 전용
                     (종합점수 아래 직무능력 점수 · 직무능력 종합판정 요약 등)
   ========================================================= */

/* =========================================================
   ★ 1페이지 A. 종합 판정 — 점수 체계
   ---------------------------------------------------------
   구성 : 종합점수 → [직무 영역] 직무점수 → [인성 영역] 인성점수·신뢰도·합격여부
   · 종합점수 = 인성 점수와 직무 점수의 평균
   · 직무 영역 / 인성 영역은 상단 공통 제목(칸) + 배경색으로 구분
   ========================================================= */
.verdict { grid-template-columns: 1.15fr 0.9fr 2.7fr; }

.verdict__score { position: relative; }

/* 종합점수 계산 근거 문구 */
.verdict__formula {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: .01em;
}
.verdict__formula b {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-dark);
}

/* ---------- 영역(그룹) : 공통 제목칸 + 항목들 ---------- */
.verdict__area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.verdict__area-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
}
.verdict__area-label small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .78;
}
.verdict__area-body {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  flex: 1;
  background: var(--line);
}

/* 직무 영역 — 초록 계열 (직무능력 결과표 색상과 통일) */
.verdict__area--job .verdict__area-label {
  background: #dcefe5;
  color: #10603f;
}
.verdict__area--job .verdict__cell {
  background: linear-gradient(160deg, #f2fbf6, #fff 78%);
  border-top: 3px solid var(--ok);
}
.verdict__area--job .verdict__big { color: #10603f; }

/* 인성 영역 — 파랑 계열 (인적성검사 색상과 통일) */
.verdict__area--in .verdict__area-label {
  background: #deeaf6;
  color: var(--brand-dark);
}
.verdict__area--in .verdict__cell {
  background: linear-gradient(160deg, #f4f9fd, #fff 78%);
  border-top: 3px solid var(--brand);
}
.verdict__area--in .verdict__big { color: var(--brand-dark); }

/* 영역 안의 합격 여부 칸만 조금 더 진하게 강조 */
.verdict__area--in .verdict__cell--pass {
  background: linear-gradient(160deg, #dbeafa, #fff 80%);
  border-top-color: #17527c;
}

/* 등급 글자 색 : 영역 색상에 맞춤 */
.verdict__meta b {
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 700;
}
.verdict__area--job .verdict__meta b { color: #10603f; }
.verdict__area--in .verdict__meta b { color: var(--brand-dark); }

/* 종합판정 결과표(2페이지) — 종합 / 직무 / 인성 행 구분 */
.statlist__row--total { background: var(--brand-tint); }
.statlist__row--total dt { color: var(--brand-dark); font-weight: 700; }
.statlist__row--total dd b { color: var(--brand-dark); }

.statlist__row--in { background: #f5fafe; }
.statlist__row--in dd b { color: var(--brand-dark); }

/* 직무 점수 행 — 초록 계열 (직무 영역과 통일) */
.statlist__row--job { background: var(--ok-tint); }
.statlist__row--job dt { color: #10603f; font-weight: 600; }
.statlist__row--job dd { color: #10603f; }
.statlist__row--job dd b { color: #10603f; }

/* =========================================================
   로마숫자 라벨(Ⅳ-1) — 글자 폭에 맞춰 늘어나는 배지
   ========================================================= */
.block__letter--wide {
  min-width: 0;
  padding: 0 7px;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: .01em;
}

/* part-title 의 로마숫자도 한글 폰트로 렌더 (글리프 누락 방지) */
.part-title > span { font-family: var(--font); }

/* =========================================================
   Ⅳ-1 직무능력 종합판정 요약 (.jsum)
   ========================================================= */
.jsum {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1fr 2.1fr;
  gap: 1px;
  margin-bottom: 14px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.jsum__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 14px 14px;
  background: #fff;
  text-align: left;
}
.jsum__cell:first-child {
  border-left: 4px solid var(--ok);
  background: linear-gradient(160deg, var(--ok-tint), #fff 72%);
}
.jsum__cell--wide { background: #fbfcfd; }

.jsum__label { font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.jsum__value {
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #10603f;
}
.jsum__value small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.jsum__value--sm { font-size: 27px; color: var(--brand-dark); }

.jsum__text { font-size: 12.5px; line-height: 1.64; color: var(--ink-soft); }
.jsum__text b { color: #10603f; }

/* =========================================================
   6페이지 직무적성 결과표 — 새 점수대(66·64·61·48점 등) 순위 색상
   (css/style.css 는 NAT 4페이지 점수대만 정의하고 있습니다)
   ========================================================= */
#page-6 .rowchart__row[data-value="66"] { background: var(--brand-tint); }

#page-6 .rowchart__row[data-value="66"] .rowchart__rank { background: var(--brand); }
#page-6 .rowchart__row[data-value="64"] .rowchart__rank,
#page-6 .rowchart__row[data-value="61"] .rowchart__rank { background: #5a8fb4; }
#page-6 .rowchart__row[data-value="50"] .rowchart__rank,
#page-6 .rowchart__row[data-value="48"] .rowchart__rank { background: #9aa5b0; }

#page-6 .rowchart__row[data-value="66"] .rowchart__bar::before {
  background: linear-gradient(90deg, #1d8a5f, #15734e);
}
#page-6 .rowchart__row[data-value="50"] .rowchart__bar::before,
#page-6 .rowchart__row[data-value="48"] .rowchart__bar::before {
  background: linear-gradient(90deg, #e0a94a, #c9902c);
}

/* =========================================================
   반응형 (화면 전용 — 인쇄 시에는 적용되지 않도록 screen 한정)
   ========================================================= */
@media screen and (max-width: 960px) {
  /* 영역은 유지하되 인성 영역 비중만 조금 줄임 */
  .verdict { grid-template-columns: 1.05fr 0.95fr 2.2fr; }
}

@media screen and (max-width: 900px) {
  .jsum { grid-template-columns: 1.15fr .85fr 1fr; }
  .jsum__cell--wide { grid-column: 1 / -1; border-top: 1px solid var(--line); }
}

@media screen and (max-width: 640px) {
  /* 세로 스택 : 종합점수 → 직무 영역 → 인성 영역 */
  .verdict { grid-template-columns: 1fr; }
  .verdict__area-label { font-size: 12px; padding: 9px 10px; }
  .verdict__area-label small { font-size: 10.5px; }

  /* 인성 영역 : 인성점수 · 신뢰도 2열, 합격여부는 한 줄 전체 */
  .verdict__area-body {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
  .verdict__area--job .verdict__area-body { grid-template-columns: 1fr; }
  .verdict__area--in .verdict__cell--pass { grid-column: 1 / -1; }

  .jsum { grid-template-columns: 1fr 1fr; }
  .jsum__value { font-size: 28px; }
  .jsum__value--sm { font-size: 22px; }
  .jsum__text { font-size: 12px; }

  .verdict__formula { font-size: 10px; }
}

@media screen and (max-width: 430px) {
  /* 가장 좁은 화면 : 영역 안 항목도 모두 1열 */
  .verdict__area-body { grid-template-columns: 1fr; }

  .jsum { grid-template-columns: 1fr; }
  .jsum__cell--wide { grid-column: auto; }

  .print-guide__panel { padding: 18px 16px 16px; }
  .print-guide__foot { flex-direction: column; align-items: stretch; }
  .print-guide__actions { justify-content: stretch; }
  .print-guide__actions .btn { flex: 1; text-align: center; }
}

/* =========================================================
   인쇄 / PDF 저장 안내 (화면 전용)
   ---------------------------------------------------------
   브라우저 인쇄 대화상자의 ‘배경 그래픽’은 기본이 꺼짐이라
   점수판·막대그래프 색상이 흑백으로 출력됩니다. 인쇄 직전에
   반드시 확인해야 할 설정을 안내해 출력 품질을 보장합니다.
   ※ 인쇄 시에는 @media print 안에서 완전히 숨깁니다.
   ========================================================= */
.print-guide {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(14, 22, 31, .58);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.print-guide[hidden] { display: none !important; }

.print-guide__panel {
  width: 100%; max-width: 560px;
  margin: auto;
  padding: 22px 24px 20px;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(14, 22, 31, .7);
}

.print-guide__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.print-guide__title {
  margin: 0;
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--brand-dark);
}
.print-guide__icon { font-size: 19px; line-height: 1; }
.print-guide__close {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 13px; line-height: 1;
}
.print-guide__close:hover { background: var(--brand-tint); color: var(--brand); border-color: #b9d4e6; }

.print-guide__lead { margin: 10px 0 16px; font-size: 13px; line-height: 1.62; color: var(--ink-soft); }

.print-guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.print-guide__item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: 11px;
  background: #fbfcfd;
}
.print-guide__item--key { background: var(--brand-tint); border-color: #b9d4e6; }
.print-guide__badge {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 7px;
  background: var(--brand); color: #fff;
  font-family: var(--font-num); font-size: 13px; font-weight: 700;
}
.print-guide__item--key .print-guide__badge { background: var(--brand-dark); }
.print-guide__body { min-width: 0; }
.print-guide__body strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.print-guide__body em { font-style: normal; color: var(--brand); }
.print-guide__body p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.56; color: var(--ink-soft); }

.print-guide__note {
  margin: 14px 0 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--ok-tint);
  font-size: 12.5px; line-height: 1.55; color: #10603f;
}

.print-guide__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.print-guide__skip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.print-guide__skip input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.print-guide__actions { display: flex; align-items: center; gap: 8px; }

/* 좁은 화면에서는 안내 패널을 위에서부터 채웁니다 */
@media screen and (max-width: 560px) {
  .print-guide { align-items: flex-start; padding: 14px; }
  .print-guide__panel { padding: 18px 16px 16px; }
  .print-guide__title { font-size: 15.5px; }
}

/* 인쇄물에는 절대 포함하지 않습니다 */
@media print { .print-guide { display: none !important; } }