/* =========================================================
   NR 종합검사 결과표 — 전용 추가 스타일
   (css/style.css 의 디자인 토큰/공통 컴포넌트를 그대로 사용하고,
    이 검사표에만 있는 구성요소를 정의합니다)
   ========================================================= */

/* ---------- 등급 배지 (8단계) ---------- */
.grade {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 13px; font-weight: 700; line-height: 1.5;
  padding: 1px 8px; border-radius: 5px;
  color: #fff; background: var(--brand);
  white-space: nowrap;
}
.grade--aplus { background: #12784f; }        /* A+ 최우수 */
.grade--bplus { background: #1d8a5f; }        /* B+ 준우수 */
.grade--b    { background: #2f7fb5; }        /* B  보통상 */
.grade--cplus{ background: #c9902c; }        /* C+ 약간부족+ */
.grade--c    { background: #c9552f; }        /* C  약간부족 */
.grade--d    { background: #8a5a44; }
.grade--e    { background: #6b7683; }
.grade--xl   { font-size: 26px; padding: 3px 16px; border-radius: 9px; line-height: 1.35; }

/* =========================================================
   ★ 1페이지 전면 배치 : 직무능력 종합판정
   ========================================================= */
.hero {
  position: relative;
  margin-bottom: 26px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #c9dced;
  background: linear-gradient(150deg, #f2f8fd 0%, #ffffff 62%);
  box-shadow: 0 14px 34px -26px rgba(18,58,86,.55);
}
.hero__label {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 60%, #4f93c2);
  color: #fff;
}
.hero__badge {
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.hero__note {
  font-family: var(--font-num); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .82;
}
.hero__body {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) 1px 0.72fr 0.86fr 1.5fr;
  align-items: center; gap: 0;
  padding: 20px 22px;
}
.hero__score { display: flex; align-items: baseline; gap: 7px; }
.hero__score strong {
  font-family: var(--font-num); font-size: 62px; font-weight: 700;
  line-height: .92; color: var(--brand-dark); letter-spacing: -.01em;
}
.hero__score span { font-size: 12.5px; color: var(--muted); }
.hero__divider { align-self: stretch; background: var(--line); margin: 0 18px; }
.hero__stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero__stat-label { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.hero__stat-val {
  font-family: var(--font-num); font-size: 34px; font-weight: 700;
  line-height: 1; color: var(--brand-dark);
}
.hero__stat-val small { font-size: 14px; font-weight: 600; color: var(--muted); }
.hero__stat-text { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.hero__stat-text b { color: var(--brand); }

/* =========================================================
   NR 표 (판정 능력 / 백분위 그래프 / 점수 / 등급 / 석차)
   ========================================================= */
.nr-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.nr-table thead th {
  background: #f4f7f9; color: var(--ink-soft);
  font-size: 12px; font-weight: 700; text-align: left;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
}
.nr-table tbody th {
  padding: 11px 13px; text-align: left; font-weight: 700; font-size: 13.5px;
  border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.nr-table tbody td {
  padding: 11px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
.nr-table tbody tr:last-child th,
.nr-table tbody tr:last-child td { border-bottom: 0; }
.nr-table tbody tr:nth-child(even) { background: #fbfcfd; }
.nr-table__row--hl { background: #eef6fc !important; }
.nr-table__row--hl th { color: var(--brand-dark); }
.nr-table__row--top { background: #eefaf3 !important; }
.nr-table__row--top th { color: #10603f; }

.nr-table .num {
  font-family: var(--font-num); font-size: 16px; font-weight: 700; color: var(--brand-dark);
}
.nr-table .rank {
  font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
}
.nr-table td:nth-child(2) { width: 34%; min-width: 150px; }

/* ---------- 백분위 그래프 (0~100 스케일 + 50 기준선) ---------- */
.pctbar {
  position: relative; display: block;
  width: 100%; height: 12px; border-radius: 4px;
  background: #eef1f4; overflow: hidden;
}
.pctbar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--fill, 0%);
  border-radius: 4px;
  transition: width .4s ease;
}
.pctbar::after {                      /* 백분위 50 기준선 */
  content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px;
  border-left: 1px dashed rgba(110,122,133,.55);
}
.pctbar--orange::before { background: linear-gradient(90deg, #e8a13c, #d98026); }
.pctbar--green::before  { background: linear-gradient(90deg, #56b98a, #17805a); }
.pctbar--blue::before   { background: linear-gradient(90deg, #6aa9d4, var(--brand)); }
.pctbar--sm { height: 10px; }

.pctbar-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 10px 0 0; font-size: 11.5px; color: var(--muted);
}
.pctbar-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.pctbar-legend__mark {
  display: inline-block; width: 0; height: 12px;
  border-left: 1px dashed rgba(110,122,133,.75);
}

/* =========================================================
   I-2 수검자 태도
   ========================================================= */
.attitude {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.attitude__row {
  display: grid; grid-template-columns: 108px 1fr; align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.attitude__name {
  padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--ink);
  background: #f7f9fb; align-self: stretch; display: flex; align-items: center;
}
.attitude__desc {
  margin: 0; padding: 11px 14px; font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.attitude__val {
  margin-left: auto;
  font-family: var(--font-num); font-size: 17px; font-weight: 700; color: var(--brand);
  background: var(--brand-tint); border-radius: 6px; padding: 1px 10px;
}
.attitude__opinion {
  margin: 0; padding: 11px 14px;
  background: var(--ok-tint); color: #10603f;
  font-size: 13px; line-height: 1.6;
}
.attitude__opinion strong { margin-right: 8px; }

/* =========================================================
   I-3 기대능력
   ========================================================= */
.goalrow {
  list-style: none; display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px; margin: 0 0 14px; padding: 0;
}
.goalrow li {
  position: relative;
  padding: 13px 6px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd;
}
.goalrow li::after {                   /* 화살표(>) 형태 연결 표시 */
  content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  border-left: 6px solid var(--line);
}
.goalrow li:last-child::after { display: none; }
.goalrow li.is-active {
  color: #fff; border-color: var(--brand-dark);
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 22px -14px rgba(31,93,140,.95);
}
.goalrow li.is-active::after { border-left-color: var(--brand-dark); }
.goalrow__check {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; margin-left: 5px;
  border-radius: 50%; background: #fff; color: var(--ok);
  font-size: 11px; font-weight: 900; vertical-align: -2px;
}

.goaldesc {
  padding: 14px 17px; border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--radius);
  background: #fcfdfe;
}
.goaldesc__lead { margin: 0 0 10px; font-size: 13px; line-height: 1.72; color: var(--ink-soft); }
.goaldesc__lead > span { color: var(--brand); font-weight: 700; margin-right: 4px; }
.goaldesc__list { margin: 0; padding-left: 20px; }
.goaldesc__list li { font-size: 12.5px; line-height: 1.72; color: var(--ink-soft); }

/* =========================================================
   Ⅱ / Ⅲ 장 표제
   ========================================================= */
.part-title {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 16px; padding-bottom: 9px;
  border-bottom: 2px solid var(--brand-dark);
  font-size: 18px; font-weight: 800; color: var(--brand-dark);
  letter-spacing: -.01em;
}
.part-title > span {
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 8px; background: var(--brand-dark); color: #fff;
  font-family: var(--font-num); font-size: 17px; font-weight: 700;
}

/* =========================================================
   II-2 세부 요인 그룹
   ========================================================= */
.factorgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.factorgroup {
  padding: 13px 16px; border: 1px solid var(--line);
  border-top: 3px solid var(--brand); border-radius: var(--radius); background: #fff;
}
.factorgroup__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; font-weight: 700; color: var(--brand-dark);
}
.factorgroup__title small {
  font-family: var(--font-num); font-size: 15px; font-weight: 700; color: var(--brand);
}
.factorgroup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.factorgroup__list li {
  display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 11px;
}
.factor-name { font-size: 12.5px; color: var(--ink-soft); }
.factor-val {
  font-family: var(--font-num); font-size: 13.5px; font-weight: 700;
  color: var(--brand-dark); text-align: right; white-space: nowrap;
}
.factor-val > span { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 1px; }

/* =========================================================
   II-3 개인 인적성 해설
   ========================================================= */
.commentary {
  padding: 16px 19px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fcfdfe;
}
.commentary p {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.82;
  color: var(--ink-soft); text-align: justify;
}
.commentary p:last-child { margin-bottom: 0; }
.commentary__final {
  padding-top: 10px; border-top: 1px dashed var(--line);
  color: var(--brand-dark) !important; font-weight: 600;
}

/* =========================================================
   반응형 (화면 전용 — 인쇄에는 적용되지 않도록 screen 한정)
   ========================================================= */
@media screen and (max-width: 900px) {
  .hero__body {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "score grade" "rank rank" "wide wide";
    gap: 14px 18px;
  }
  .hero__score { grid-area: score; }
  .hero__divider { display: none !important; }
  .hero__stat--grade { grid-area: grade; }
  .hero__stat--rank { grid-area: rank; }
  .hero__stat--wide { grid-area: wide; }
  .hero__score strong { font-size: 50px; }
  .hero__stat-val { font-size: 28px; }
}

@media screen and (max-width: 640px) {
  /* 단순 세로 스택 — 그리드 영역 지정을 모두 해제해 겹침을 방지 */
  .hero__body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px 16px 18px;
  }
  .hero__score,
  .hero__stat,
  .hero__stat--wide { grid-area: auto !important; width: 100%; }
  .hero__score strong { font-size: 44px; }
  .hero__score span { font-size: 12px; }
  .hero__stat { flex-direction: row; align-items: baseline; gap: 10px; }
  .hero__stat-label { flex: 0 0 auto; min-width: 66px; }
  .hero__stat-text { font-size: 12.5px; }
  .hero__stat-val { font-size: 24px; }
  .grade--xl { font-size: 20px; }

  .nr-table { font-size: 12px; }
  .nr-table thead th { padding: 8px 9px; font-size: 11px; }
  .nr-table tbody th, .nr-table tbody td { padding: 9px; }
  .nr-table td:nth-child(2) { min-width: 78px; }
  .nr-table .num { font-size: 14px; }

  .attitude__row { grid-template-columns: 1fr; }
  .attitude__name { padding: 8px 12px; background: #f7f9fb; }
  .attitude__desc { padding-top: 6px; }
  .attitude__val { margin-left: 0; }

  .goalrow { grid-template-columns: repeat(3, 1fr); }
  .goalrow li::after { display: none; }

  .factorgroups { grid-template-columns: 1fr; }
  .factorgroup__list li { grid-template-columns: 84px 1fr 52px; gap: 8px; }

  .commentary p { font-size: 13px; }
}

@media screen and (max-width: 430px) {
  .goalrow { grid-template-columns: repeat(2, 1fr); }
  .factorgroup__list li { grid-template-columns: 1fr; gap: 4px; }
  .factor-val { text-align: left; }
  .nr-table thead th:nth-child(2) { display: none; }
  .nr-table td:nth-child(2) { display: none; }
}

/* 인쇄 시에는 이 파일의 화면용 규칙이 개입하지 않도록 */
@media print {
  .pctbar::before { transition: none; }
}