@charset "utf-8";
/**
 * ============================================================================
 * PRIVATE-CERT.CSS - 민간자격증센터 페이지 스킨 (PS-006~010 공용 + PS-006 전용)
 * ============================================================================
 * 원칙:
 *   - 모든 색/간격/타이포는 design-tokens.css 의 var(--...) 참조 (하드코딩 hex 0).
 *   - 클래스는 .pcert- 프리픽스로 격리 -> 레거시/기존 화면과 선택자 미충돌(순수 additive).
 *   - 데스크톱 우선, @media (max-width:767px) 로 모바일 하향(디자인 709:2286).
 * 로드: 각 뷰의 @section css 에서 <link> (style.css 전역 로드 아님).
 * 작성: 2026-07-09 (T-P1-06 PS-006 + 4탭 공용 네비)
 * ============================================================================
 */

/* ---- 민간자격증 전용 로컬 토큰 (시안 nKvks3wLYggdGrEZYFYXgP 실측 · design-tokens 미등록 값) ---- */
:root {
  --pcert-tab-height: 65px;      /* 시안 탭 높이(비활성 65 / 활성 65+캐럿) */
  --pcert-tab-fs: 18px;          /* 시안 탭 텍스트 18px */
  --pcert-tab-border: #d2d2d2;   /* 시안 671:4733 비활성 탭 보더(2px) — design-tokens 미등록 */
  --pcert-info-icon-w: 86px;     /* info 아이콘 박스 폭 */
  --pcert-info-icon-h: 84px;     /* info 아이콘 박스 높이 */
  --pcert-info-accent: 32px;     /* info 아이콘 우상단 연그린 원 지름 */
  --pcert-info-title-fs: 18px;   /* info 제목(시안 16~18) */
  --pcert-process-size: 200px;   /* 발급 과정 원 지름 */
  --pcert-process-c1: #ECF5F2;   /* 과정 1단계(최연, Primary/100 · 시안 686:4874) */
  --pcert-process-c3: #B4D6C5;   /* 과정 3단계(중간 그린 · 시안 686:4874) */
  --pcert-total-fs: 32px;        /* 합계 총액 강조(시안 32px) */
  --pcert-hero-title-fs: 20px;   /* 페이지 타이틀(시안 인라인 20px/28) */
  --pcert-hero-title-lh: 28px;
}

/* ---- 컨테이너 ---- */
.pcert {
  font-family: var(--font-family-base);
  color: var(--text-body);
  /* 시안 671:4450 — 본문 상단 60(4화면 횡단 규칙) / 하단 120 */
  padding: 60px 0 120px;
}
.pcert__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.pcert a:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---- 페이지 헤더 ---- */
/* 시안(878/821/982 공통): 제목 20px Bold + 우측 설명 16px #666 한 줄 인라인 */
.pcert-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 30px;
  margin-bottom: 24px;
}
.pcert-hero__title {
  margin: 0;
  font-size: var(--pcert-hero-title-fs);
  line-height: var(--pcert-hero-title-lh);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}
.pcert-hero__desc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-description);
}

/* ---- 4탭 공용 네비 (박스 + 꼬리형) ---- */
/* 수직 리듬(시안 688:4985 → 671:4657 → 688:4986): 타이틀↔탭 27 · 탭↔본문 50 */
.pcert-tabs {
  margin: 27px 0 50px;
}
/* 4등분 gap 0 — 인접 보더 겹침은 두 번째 탭부터 border-left 제거로 해소(시안 671:4733) */
.pcert-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcert-tabs__item {
  flex: 1 1 0;
  min-width: 0;
}
.pcert-tabs__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  height: var(--pcert-tab-height);
  padding: 0 8px;
  text-align: center;
  text-decoration: none;
  color: var(--text-body);
  font-size: var(--pcert-tab-fs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  background: var(--bg-default);
  border: 2px solid var(--pcert-tab-border);
  border-radius: var(--radius-base);
  box-sizing: border-box;
}
/* 인접 탭 사이 보더 1벌만 남긴다(활성 탭은 자체 그린 외곽선 유지) */
.pcert-tabs__item + .pcert-tabs__item .pcert-tabs__link:not(.is-active) {
  border-left: 0;
}
.pcert-tabs__link:hover,
.pcert-tabs__link:focus {
  color: var(--brand-primary);
  background: var(--brand-primary-100);
  border-color: var(--brand-primary-200);
}
/* 활성: 색(그린) + 굵기(bold) + 흰 배경 박스 + 하단 꼬리(색 무관 인식) */
.pcert-tabs__link.is-active {
  color: var(--brand-primary);
  font-weight: var(--fw-bold);
  background: var(--bg-default);
  border: 2px solid var(--brand-primary);
}
/* 활성 탭 하단 꼬리 : 외곽 그린 삼각형 + 내부 흰 삼각형(흰 채움) — 색 무관 인식 보강 */
.pcert-tabs__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--brand-primary);
}
.pcert-tabs__link.is-active::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--bg-default);
}

/* ---- info group ---- */
.pcert-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 40px 0;
}
.pcert-info__block {
  display: flex;
  gap: 35px;
  align-items: flex-start;
}
/* 시안: 라인 아이콘(86x84) + 우상단 연그린 원(뒤 배치). 채움 원 배경 아님 */
.pcert-info__icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pcert-info-icon-w);
  height: var(--pcert-info-icon-h);
  color: var(--brand-primary);
  font-size: 46px;
}
.pcert-info__icon::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  right: 8px;
  width: var(--pcert-info-accent);
  height: var(--pcert-info-accent);
  border-radius: 50%;
  background: var(--brand-primary-200);
}
.pcert-info__icon > * {
  position: relative;
  z-index: 1;
}
.pcert-info__body {
  flex: 1 1 auto;
  min-width: 0;
}
.pcert-info__title {
  /* [518] 시안 671:4754 — 제목↔본문 gap 15 */
  margin: 0 0 15px;
  font-size: var(--pcert-info-title-fs);
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
  letter-spacing: var(--ls-tight);
}
.pcert-info__text {
  margin: 0;
  font-size: var(--fs-body);
  /* [517] 시안 688:4945 lineHeight 22.4 */
  line-height: 22.4px;
  color: var(--text-body);
}
.pcert-info__steps {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;      /* 전역 리셋(ul,ol list-style:none)에도 1.~4. 번호 표기 복원 */
  font-size: var(--fs-body);
  line-height: 22.4px;   /* [517] */
  color: var(--text-body);
}
.pcert-info__steps a {
  color: var(--brand-secondary);
  text-decoration: underline;
}

/* ---- 섹션 래퍼 (aria-labelledby 랜드마크) ---- */
.pcert-process-sec,
.pcert-fee-sec,
.pcert-org-sec {
  scroll-margin-top: 20px;
}

/* ---- 섹션 타이틀 ---- */
.pcert-sec-title {
  margin: 50px 0 20px;   /* [519] 시안 섹션 간 50 */
  font-size: 28px; /* 시안 686:4874 섹션 타이틀 28px (MO 는 하단 미디어쿼리에서 --fs-section 24px 유지) */
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}

/* ---- 발급 과정 (원형 4단계) ---- */
.pcert-process {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 50px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.pcert-process__step {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pcert-process-size);
  height: var(--pcert-process-size);
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 50%;
  background: var(--pcert-process-c1);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}
/* 그라데이션 단계 : c1(최연) → c2(연그린) → c3(중간그린) → c4(진그린) */
.pcert-process__step:nth-child(2) {
  background: var(--brand-primary-200);
}
.pcert-process__step:nth-child(3) {
  background: var(--pcert-process-c3);
  /* 시안 686:4874 : c1~c3 원 텍스트 모두 #333(base --text-body 상속) — 기존 #111 override 제거 */
}
/* 마지막 단계(수령) 진한 그린 강조 = 완결 단계 */
.pcert-process__step--last {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.pcert-process__label {
  /* 시안 686:4874 : 원 텍스트 20px Bold, lh28, 2줄 고정(마크업 <br>) */
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-bold);
}
/* 원 사이 화살표(장식, 스크린리더 미노출) : 시안 686:4874 이미지 자산 62×40. 시안 실측 = 화살표 왼쪽 끝이 좌측 원 우변(x=200/450/700)에 접하고 우측 원 안 12px까지 진입(중심 = 우측 원 좌변 -19px). 원 위 z */
.pcert-process__step + .pcert-process__step::before {
  content: "";
  position: absolute;
  left: -19px; /* 시안 686:4874 중심=우측 원 좌변 -19px. 기존 -50px는 중심을 원 경계에 두어 화살표-우측 원 사이 19px 공백 발생(QA 재반려) */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 40px;
  background: url('../images/pcert-arrow.png') no-repeat center;
  background-size: 62px 40px;
  z-index: 1;
}

/* ---- 유의 문구 ---- */
.pcert-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcert-notes li {
  position: relative;
  padding-left: 14px;
  /* [516] 시안 686:4875 — Regular 16 / lh22.4 / #111 */
  font-size: var(--fs-body);
  line-height: 22.4px;
  color: var(--text-primary);
}
.pcert-notes li + li {
  margin-top: 5px;   /* [516] 행 간격 5 */
}
.pcert-notes li::before {
  content: "\00B7";
  position: absolute;
  left: 3px;
}
.pcert-notes__em {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);   /* [516] 시안 강조어구 SemiBold */
}

/* ---- 발급 비용 표 ---- */
.pcert-table-scroll {
  overflow-x: auto;
}
.pcert-fee-table {
  width: 100%;
  border-collapse: collapse;
}
.pcert-fee-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 8px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-fee-table__note {
  color: var(--brand-accent);
}
.pcert-fee-table th,
.pcert-fee-table td {
  border: 1px solid var(--border-stroke);
  padding: 15px 16px 14px;   /* [507] 시안 pt15 pb14 */
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body-s);
}
.pcert-fee-table thead th {
  /* [501] 표 컨테이너 상단선 : 시안 686:4888 border-top 1px #707070 (border-collapse 에선 셀 보더가 우선하므로 첫 행 셀에 부여) */
  border-top: 1px solid #707070;
  background: var(--bg-subtle-gray);
  color: var(--text-body);   /* [504] 시안 thead #333 */
  font-weight: var(--fw-bold);
}
.pcert-fee-table tbody th {
  background: var(--bg-default);
  color: var(--text-body);
  font-weight: var(--fw-medium);   /* [505] 시안 tbody 첫 열 Medium */
}
.pcert-fee-table td {
  color: var(--text-description);   /* [506] 시안 일반 td #666 */
}
.pcert-fee-table__group {
  background: var(--bg-subtle-green);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}
.pcert-fee-table__sub {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  color: var(--text-description);
}
.pcert-fee-table__amount {
  /* [522] 시안 686:4900 — 금액+주석 단일 텍스트 Regular 16 #666(강조 없음) */
  font-weight: var(--fw-regular);
  color: var(--text-description);
}
.pcert-fee-table__memo {
  font-size: var(--fs-body);   /* [522] */
  color: var(--text-description);
}
.pcert-fee-table__empty {
  padding: 32px 16px;
  color: var(--text-description);
}

/* ---- 자격 관리 기관 정보 (좌우 2박스) ---- */
.pcert-org {
  display: flex;
  gap: 16px;
}
.pcert-org-table {
  flex: 1 1 0;
  min-width: 0;
  border-collapse: collapse;
  border: 1px solid var(--border-stroke);
  table-layout: fixed;
}
/* 시안(671:4388): 표 상단 회색 헤더행(2열 병합) — 표 테두리와 통합(border-collapse) */
.pcert-org-table thead th {
  width: auto;               /* colspan 헤더가 th{width:50%} 상속으로 fixed 폭계산 깨는 것 방지 */
  /* [501] 표 컨테이너 상단선 : 시안 688:4918 border-top 1px #707070 */
  border-top: 1px solid #707070;
  padding: 15px 16px 14px;   /* [507][528] */
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-body);   /* [504] */
  text-align: center;
  background: var(--bg-subtle-gray);
}
.pcert-org-table th,
.pcert-org-table td {
  border-top: 1px solid var(--border-stroke);
  padding: 15px 16px 14px;   /* [528] 시안 행 48 (pt15 pb14) */
  font-size: var(--fs-body);   /* [527] 시안 16 */
  line-height: var(--lh-body-s);
  text-align: center;
  vertical-align: middle;
}
.pcert-org-table th {
  width: 50%;
  /* [526] 시안 688:4925 — 라벨 열 연그린 배경 + Medium 16 / #333 (시안 raw #f9fcfb → 토큰 --bg-subtle-green) */
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-medium);
}
.pcert-org-table td {
  color: var(--text-description);   /* [527] 시안 값 셀 #666 */
  /* 시안 항목별(어절) 개행 : 한글은 keep-all 로 음절 임의분절 방지, 긴 무공백 값(기관명 등)만 anywhere 로 최후 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.pcert-org-table a {
  color: var(--brand-secondary);
  text-decoration: underline;
}

/* ============================================================================
   모바일 (<=767px) : 디자인 709:2286
   ============================================================================ */
@media (max-width: 767px) {
  .pcert {
    padding: 32px 0 64px;   /* [530] 시안 709:2376 상 32 / 하 64 */
  }
  .pcert__inner {
    padding: 0 16px;
  }
  .pcert-hero__title {
    font-size: 28px;
    line-height: 34px;
  }
  /* 섹션 타이틀 : PC 28px(시안 686:4874) → MO 는 기존 24px 유지(회귀 방지) */
  .pcert-sec-title {
    font-size: var(--fs-section);
    margin: 40px 0 16px;   /* [543] 섹션 간 40 · [541] title↔본문 16 */
  }
  /* [532] 타이틀↔탭 32 · [533] 탭↔본문 40 */
  .pcert-tabs {
    margin: 32px 0 40px;
  }
  /* [537] info 블록 간 24 · [536] 아이콘 70×68 · 액센트 24 · 아이콘↔텍스트 24 (시안 709:2874) */
  .pcert-info {
    gap: 24px;
  }
  .pcert-info__block {
    gap: 24px;
  }
  .pcert-info__icon {
    width: 70px;
    height: 68px;
  }
  .pcert-info__icon::before {
    width: 24px;
    height: 24px;
  }

  /* 탭 2×2 */
  /* PC 4등분 변경(gap 0 · 2px 보더 · 2번째부터 border-left 제거)은 MO 에 적용하지 않는다.
     MO 는 2×2 별도 레이아웃이고 시안 노드(709:2286)가 미추출(U-424)이라 기존 렌더를 보존한다.
     특히 3번째 탭은 2행의 첫 칸이므로 border-left 가 없으면 좌변이 열려 보인다. */
  .pcert-tabs__list {
    gap: 8px;
  }
  .pcert-tabs__link {
    height: 48px;   /* [535] 시안 709:2522 160×48 (min-height 44 는 유지) */
    border: 1px solid var(--border-global);
  }
  .pcert-tabs__item + .pcert-tabs__item .pcert-tabs__link:not(.is-active) {
    border-left: 1px solid var(--border-global);
  }
  .pcert-tabs__item {
    flex: 1 1 calc(50% - 4px);
  }

  /* 발급 과정 : 2×2 그리드 Z흐름 (시안 709:2910) — 원 136, gap 8, 화살표 3개 오버레이 */
  .pcert-process {
    display: grid;
    grid-template-columns: repeat(2, 136px);
    gap: 8px;
    justify-content: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;   /* [542] 시안 709:2924 process↔유의문구 24 */
  }
  .pcert-process__step {
    width: 136px;
    height: 136px;
    padding: 12px;
    color: #333;
  }
  /* Z흐름 배치 : 4번째(수령) 항목을 2행1열에 두어 시각 순서 1→2→3→4 유지(DOM 순서 보존).
     z-index는 화살표(::after)가 인접 원 위에 겹쳐 보이도록 DOM 순서대로 하강 부여 */
  .pcert-process__step:nth-child(1) { grid-column: 1; grid-row: 1; background: var(--brand-primary-100); z-index: 4; }
  .pcert-process__step:nth-child(2) { grid-column: 2; grid-row: 1; background: var(--brand-primary-200); z-index: 3; }
  .pcert-process__step:nth-child(3) { grid-column: 2; grid-row: 2; background: #B4D6C5; color: #333; z-index: 2; }
  .pcert-process__step:nth-child(4) { grid-column: 1; grid-row: 2; z-index: 1; color: var(--text-inverse); } /* 상단 .pcert-process__step{color:#333}가 base --last(동률·선행)를 덮어 흰 글자 소실 → 재공급 */
  .pcert-process__label {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 22px;
  }
  /* PC 2줄 고정용 <br> 는 MO(2×2 Z흐름)에선 무시 → 기존 자연 줄바꿈 유지(회귀 방지) */
  .pcert-process__label br {
    display: none;
  }
  /* PC 삼각 화살표(::before) 미사용 */
  .pcert-process__step + .pcert-process__step::before {
    display: none;
  }
  /* 원 사이 화살표(arrow-mo 48×28, 장식·SR 미노출) : 1→2 우향 / 2→3 하향 / 3→4 좌향 */
  .pcert-process__step:nth-child(1)::after,
  .pcert-process__step:nth-child(2)::after,
  .pcert-process__step:nth-child(3)::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 28px;
    background: url('../images/arrow-mo.png') no-repeat center;
    pointer-events: none;
  }
  .pcert-process__step:nth-child(1)::after {   /* 1→2 우향 */
    top: 50%;
    left: 100%;
    margin-left: -20px;
    transform: translateY(-50%);
  }
  .pcert-process__step:nth-child(2)::after {   /* 2→3 하향(90°) */
    top: 100%;
    left: 50%;
    margin-top: -10px;
    transform: translateX(-50%) rotate(90deg);
  }
  .pcert-process__step:nth-child(3)::after {   /* 3→4 좌향(180°) */
    top: 50%;
    right: 100%;
    margin-right: -20px;
    transform: translateY(-50%) rotate(180deg);
  }

  /* 기관 정보 세로 스택 */
  .pcert-org {
    flex-direction: column;
    gap: 24px;   /* [545] 시안 718:2992 2표 gap 24 */
  }
  /* [544] 시안 718:2942 MO 행 높이 56 */
  .pcert-org-table th,
  .pcert-org-table td {
    padding: 17px 16px 16px;
  }
  /* 세로 스택 시 table-layout:fixed 가 열폭(50/50)을 강제하도록 명시 폭 부여.
     미지정 시 표가 홈페이지 URL 셀의 min-content 폭으로 늘어나 360px 가로 오버플로우 유발
     (data td 에는 이미 word-break:break-all 이 있어 확정 폭만 주면 URL 이 줄바꿈됨) */
  .pcert-org-table {
    width: 100%;
  }
  /* base.css `* { word-break:keep-all }`(115행)가 <a>에도 직접 매칭돼 td 상속 break-all을
     무력화 → URL 셀이 min-content 폭으로 늘어 360px 가로 오버플로우. a에 직접 지정(특이성 0,1,1 > *)해 URL 강제 줄바꿈 */
  .pcert-org-table a {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

/* ============================================================================
   PS-007 발급 대상 민간자격증 (목록.cshtml) — 디자인 688:4987(PC) / 737:3023(MO)
   - 신청 시 유의사항 박스 + 발급 대상 매핑 테이블(PC 6열 / MO 4열)
   - 상태 배지: 색(그린/레드) + 텍스트 병기(KWCAG 색 무관 인식)
   작성: 2026-07-09 (T-P1-07)
   ============================================================================ */

/* ---- 신청 시 유의사항 박스 ---- */
.pcert-caution {
  /* [554] 하단 30 (상단 32 는 .pcert-tabs margin-bottom 50 과 상쇄되어 실효 50 = 시안) */
  margin: 32px 0 30px;
  /* [551] 시안 688:5824 padding 25/50 · [550] 연그린 배경 · 보더 없음 · radius 8 (시안 raw #edf2f0 → 토큰 --brand-primary-100) */
  padding: 25px 50px;
  background: var(--brand-primary-100);
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
}
/* 시안: ⓘ 그린 아이콘 + 제목 한 줄, 본문 리스트는 아래 (아이콘 원형 채움 아님) */
.pcert-caution__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;   /* [551] title↔list gap 15 */
  /* [552] 시안 688:5811 — Bold 18 / lh25.2 */
  font-size: 18px;
  line-height: 25.2px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}
.pcert-caution__icon {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: 20px;
}
.pcert-caution__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcert-caution__list li {
  position: relative;
  padding-left: 12px;   /* [553] 시안 들여쓰기 12 */
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-secondary);   /* [553] 시안 본문 #555 */
}
.pcert-caution__list li + li {
  margin-top: 4px;
}
.pcert-caution__list li::before {
  content: "-";
  position: absolute;
  left: 2px;
}
.pcert-caution__list a {
  color: var(--brand-secondary);
  text-decoration: underline;
}

/* ---- 발급 대상 매핑 테이블 ---- */
.pcert-target-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pcert-target-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 8px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-target-table th,
.pcert-target-table td {
  border: 1px solid var(--border-stroke);
  padding: 15px 12px 14px;   /* [507] */
  text-align: center;
  font-size: var(--fs-body);   /* [504][506] 시안 16 */
  line-height: var(--lh-body-s);
  word-break: break-all;
}
.pcert-target-table thead th {
  border-top: 1px solid #707070;   /* [501] 시안 688:5124 */
  background: var(--bg-subtle-gray);
  color: var(--text-body);   /* [504] */
  font-weight: var(--fw-bold);
}
.pcert-target-table tbody th {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-medium);   /* [505] */
}
.pcert-target-table td {
  color: var(--text-description);   /* [506] */
}
.pcert-target-table__empty {
  padding: 32px 16px;
  color: var(--text-description);
}

/* ---- 상태 배지 (색 + 텍스트 병기) ---- */
.pcert-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-badge);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.pcert-status__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
/* 발급 가능 : 그린(채움) */
.pcert-status--available {
  color: var(--brand-primary);
  background: var(--brand-primary-100);
  border: 1px solid var(--brand-primary-200);
}
/* 일시 중지 : 레드(외곽선) — 텍스트 라벨 병기로 색 무관 인식 */
.pcert-status--suspended {
  color: var(--brand-accent);
  background: var(--bg-default);
  border: 1px solid var(--brand-accent);
}

/* 시안(688:4987): 목록 상태는 배지가 아닌 평문 색상 텍스트(발급 가능=본문색 / 일시중지=레드).
   텍스트 라벨 자체로 색 무관 인식 충족 */
.pcert-target-table .pcert-status {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: normal;
  font-weight: var(--fw-semibold);
}
.pcert-target-table .pcert-status__dot {
  display: none;
}
.pcert-target-table .pcert-status--available {
  color: var(--text-body);
}
.pcert-target-table .pcert-status--suspended {
  color: var(--brand-accent);
}

/* ============================================================================
   PS-007 모바일 (<=767px) : PC 6열 → 4열(자격종류·주무부처 접힘), 디자인 737:3023
   ============================================================================ */
@media (max-width: 767px) {
  .pcert-caution {
    padding: 16px;
    gap: 12px;
  }
  /* 자격종류·주무부처 열 접힘 → 학점은행 과정명 / 민간자격명 / 자격등록번호 / 상태 4열 */
  .pcert-target-table__col--kind,
  .pcert-target-table__col--ministry {
    display: none;
  }
  /* MO 항목 잘림 해소 : table-layout:fixed;width:100% 는 표를 컨테이너폭으로 강제해
     .pcert-table-scroll 의 overflow-x 를 무효화 → 4열이 25%씩 압착. min-width 하한 +
     table-layout:auto 로 완화해 실제 가로 스크롤이 동작하도록 함(PC 는 base 규칙 그대로 불변). */
  /* [557] 시안 737:3796 — 360px 안에 4열(각 82) 수용, 가로 스크롤 없음.
     기존 min-width:560 + table-layout:auto(가로 스크롤 유도)를 시안 기준으로 되돌린다. */
  .pcert-target-table {
    min-width: 0;
    table-layout: fixed;
  }
  .pcert-target-table th,
  .pcert-target-table td {
    padding: 16px;
  }
  .pcert-status {
    padding: 3px 8px;
    gap: 4px;
    white-space: normal;
  }
}

/* ============================================================================
   PS-008 발급 신청 (발급신청.cshtml) — 디자인 688:5830(PC) / 737:4258(MO)
   - 라인형 STEP 1~4 + 결과확인(확인하기 비동기) 선택형 테이블 + 다크 CTA
   - 상태 색(합격 그린/불합격 레드/결과대기 그레이/진행중 블루) + 텍스트 병기(색 무관 인식)
   작성: 2026-07-09 (T-P1-08)
   ============================================================================ */

/* ---- 발급 신청 절차 : 라인형 STEP (PC 가로 / MO 세로) ---- */
.pcert-steps-sec,
.pcert-apply-sec {
  scroll-margin-top: 20px;
}
/* [560] 시안 705:1449 — 발급 신청 절차 섹션만 title↔process gap 50 */
.pcert-steps-sec .pcert-sec-title {
  margin-bottom: 50px;
}
.pcert-steps {
  display: flex;
  /* [561] 시안 703:1354 — step 130 고정 ×4 · gap 106 · 전체 838 중앙정렬 */
  justify-content: center;
  gap: 106px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.pcert-steps__item {
  position: relative;
  flex: 0 0 130px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
/* 연결선(장식) : 이 배지 중심 → 다음 배지 중심(가로), 시안 그린 라인 */
.pcert-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: calc(100% + 106px);   /* [561] 배지 중심 → 다음 배지 중심(130+106) */
  height: 2px;
  background: var(--brand-primary);
  z-index: 0;
}
/* [561-fix] 768~875 밴드 가드 : 시안(1280 기준)의 gap 106 은 좁은 데스크톱에서 총폭이 컨테이너를 넘긴다.
   base 총폭 = 4 x 130 + 3 x 106 = 838. justify-content:center 라 초과분이 좌우로 갈려
   좌측은 스크롤로도 도달 불가(STEP 1 잘림). 밴드 최악값 vw 768(컨테이너 728)에서
   4 x 130 + 3 x gap <= 728 이려면 gap <= 69.3 -> 여유를 두고 40 채택(총폭 640).
   876 이상은 base 106 그대로, 767 이하는 세로 스택(MO)이라 이 밴드는 두 규칙 사이에만 낀다. */
@media (min-width: 768px) and (max-width: 875px) {
  .pcert-steps {
    gap: 40px;
  }
  .pcert-steps__item:not(:last-child)::before {
    width: calc(100% + 40px);
  }
}
.pcert-steps__badge {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 24px;   /* [565] 시안 703:1350 gap 24 */
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: 16px;
}
.pcert-steps__body {
  display: block;
}
.pcert-steps__num {
  display: block;
  margin-bottom: 8px;   /* [566] 시안 703:1325 gap 8 */
  /* [563] 시안 703:1318 — Bold 20 / lh24 */
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
  letter-spacing: var(--ls-tight);
}
.pcert-steps__label {
  display: block;
  font-size: var(--fs-body);   /* [564] 시안 703:1319 Regular 16 */
  line-height: var(--lh-body-s);
  color: var(--text-body);
}

/* ---- 발급 신청 안내 ---- */
.pcert-apply__lead {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  /* [567] 시안 703:1267 — Medium 16 / lh22 */
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--text-body);
}
/* 시안(688:5830): 박스 없는 인라인 캡션 · 앞머리 불릿 + 항목 사이 세로 구분선(12px) */
.pcert-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 8px 0 16px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-description);
}
.pcert-legend li {
  position: relative;
  padding: 0 16px 0 14px;
}
.pcert-legend li::before {
  content: "\00B7";
  position: absolute;
  left: 3px;
}
.pcert-legend li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--border-global);   /* [569] 시안 703:1275 #D1D1D1 */
}
.pcert-legend__mark {
  font-weight: var(--fw-bold);
  /* [QA PS-006-PC-005] 범례 '합격'류 뱃지를 같은 줄 병기 문구와 광학적으로 세로 중앙 정렬(뱃지 요소 자체 지정). */
  vertical-align: middle;
  line-height: 1;
}

/* ---- 발급 신청 선택형 테이블 ---- */
.pcert-apply-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pcert-apply-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 8px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-apply-table th,
.pcert-apply-table td {
  border: 1px solid var(--border-stroke);
  padding: 15px 12px 14px;   /* [507] */
  text-align: center;
  vertical-align: middle; /* 시안 688:5830 : 행 내용(체크박스·과정명·자격증명·결과 배지 '합격' 등)을 세로 중앙 정렬. 미지정 시 기본 baseline 이라 '합격' 배지가 같은 줄 텍스트와 높이 어긋남(QA). 형제 표(.pcert-org-table·.pcert-order-table)와 동일 패턴 */
  font-size: var(--fs-body);   /* [504][506] */
  line-height: var(--lh-body-s);
  word-break: break-all;
}
.pcert-apply-table thead th {
  border-top: 1px solid #707070;   /* [501] 시안 703:1293 */
  background: var(--bg-subtle-gray);
  color: var(--text-body);   /* [504] */
  font-weight: var(--fw-bold);
}
.pcert-apply-table tbody th {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-medium);   /* [505] */
}
.pcert-apply-table td {
  color: var(--text-description);   /* [506] */
}
.pcert-apply-table__col--check {
  width: 50px;   /* [570] 시안 705:1371 */
}
input[type="checkbox"].pcert-apply__check,
input[type="checkbox"].pcert-apply__check-all {
  /* table-layout:auto 로 check 열이 지정폭(56px)보다 좁게 렌더될 때 block+margin:0 auto 는
     auto 마진이 0 으로 collapse 해 우측 치우침 → td 상속 text-align:center 로 대칭 중앙정렬(좁은 셀에도 성립).
     responsive-common.css 전역 input[type="checkbox"]{margin:12px}(0,1,1)가 클래스(0,1,0)를 이겨
     좌우 마진이 잔존했으므로 (0,2,1)로 강화 */
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.pcert-apply__check:disabled {
  cursor: not-allowed;
}
.pcert-apply__course {
  display: inline-block;
  cursor: pointer;
}

/* ---- 자격검정 결과 상태 (색 + 텍스트 병기) ---- */
.pcert-result {
  font-weight: var(--fw-semibold);
  /* [QA PS-006-PC-005] 결과 셀·병기 문구에서 '합격'류 상태 뱃지를 세로 중앙 정렬(td vertical-align 만으로는 셀 밖 병기 어긋남 잔존 → 뱃지 요소 자체에 지정). 색/굵기/크기 불변. */
  vertical-align: middle;
  line-height: 1;
}
.pcert-result--pass {
  color: var(--brand-primary);
}
.pcert-result--fail {
  color: var(--brand-accent);
}
.pcert-result--waiting {
  color: var(--text-description);
}
.pcert-result--progress {
  color: var(--brand-secondary);
}
.pcert-result--suspended {
  color: var(--brand-accent);
}
/* '확인하기' 버튼(링크형, 블루) */
.pcert-result__check {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--brand-secondary);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  cursor: pointer;
}
.pcert-result__check:hover,
.pcert-result__check:focus {
  color: var(--brand-primary);
}
.pcert-result__arrow {
  text-decoration: none;
}
/* 로딩(회전) 표시 — aria-live 셀 내부 텍스트로 상태 고지 */
.pcert-result--loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-description);
}
.pcert-result__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand-primary-200);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: pcert-spin 0.7s linear infinite;
}
@keyframes pcert-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pcert-result__spinner {
    animation: none;
  }
}

/* ---- 하단 안내 + CTA(다크) ---- */
.pcert-apply__hint {
  margin: 16px 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-description);
}
.pcert-apply__cta {
  margin: 50px 0 0;   /* [575] 시안 705:1446 표↔CTA 50 */
  text-align: center;
}
.pcert-apply__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 55px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;   /* [574] 시안 705:1446 radius 0 */
  /* 디자인: 다크 차콜(#333). 전용 다크 버튼 토큰 부재 → 값이 동일한 --text-body 참조(하드코딩 hex 회피) */
  background: var(--text-body);
  color: var(--text-inverse);
  font-size: var(--fs-btn-m);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
}
.pcert-apply__submit:hover,
.pcert-apply__submit:focus {
  background: var(--text-primary);
}
/* 키보드 초점 가시성(KWCAG 초점 이동) */
.pcert-apply__submit:focus,
.pcert-result__check:focus,
.pcert-apply__check:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---- 검증 실패 회귀 안내(PS-009 → PS-008) ---- */
.pcert-apply__error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-base);
  background: var(--bg-subtle-gray);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--brand-accent);
}

/* ---- 수강 이력 없음 안내 ---- */
.pcert-apply__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-description);
  background: var(--bg-subtle-gray);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-base);
}

/* ============================================================================
   PS-008 모바일 (<=767px) : STEP 세로 스텝 + 테이블 주무부처 열 접힘(디자인 737:4258)
   ============================================================================ */
@media (max-width: 767px) {
  /* STEP : 가로 → 세로(연결선도 세로) */
  .pcert-steps {
    flex-direction: column;
    gap: 0;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .pcert-steps__item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;               /* [576] 시안 737:4890 아이콘↔텍스트 16 */
    text-align: left;
    padding: 0 0 24px;       /* [576] 항목 간 24 */
  }
  .pcert-steps__item:not(:last-child)::before {
    top: 18px;
    left: 16px;              /* [576] 시안 rail x=32 (아이콘 36 중심) */
    width: 4px;
    height: 100%;
  }
  /* [577] MO STEP n 은 16 / lh22 (PC 20 / lh24 하향) */
  .pcert-steps__num {
    font-size: var(--fs-body);
    line-height: 22px;
  }
  .pcert-steps__badge {
    margin-bottom: 0;
  }
  .pcert-steps__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
  }

  /* 범례 세로 스택(가로 구분선 숨김) */
  .pcert-legend {
    flex-direction: column;
    gap: 4px;
  }
  .pcert-legend li {
    padding: 0 0 0 14px;
  }
  .pcert-legend li:not(:last-child)::after {
    display: none;
  }

  /* 선택형 테이블 : 주무부처 열 접힘 → 체크·과정·자격증명·등록번호·결과 5열 */
  .pcert-apply-table__col--ministry {
    display: none;
  }
  .pcert-apply-table th,
  .pcert-apply-table td {
    padding: 16px;   /* [578] 시안 737:4963 셀 padding 16 */
  }
  .pcert-apply-table__col--check {
    width: 50px;     /* [578] 시안 체크 열 50 (나머지 4열 69.5 균등) */
  }

  /* CTA 풀폭 */
  .pcert-apply__submit {
    width: 100%;
    min-width: 0;
    min-height: 48px;   /* [579] 시안 737:5077 328×48 */
  }
}

/* ============================================================================
   PS-009 발급 신청 폼 : 발급방식 선택 + 신청자 정보 + 위탁동의 + 결제 CTA
   디자인 705:1450(PC) / 737:5081(MO). 클래스 .pcert-order- 프리픽스로 격리(순수 additive).
   ============================================================================ */

/* ---- 섹션 ---- */
.pcert-order-sec {
  margin-top: 40px;
}

/* ---- 신청 시 유의사항 ---- */
/* [588] 시안 705:1782 = 688:5824 — '신청 시 유의사항' 공용 컴포넌트와 동일 사양 */
.pcert-order-notice {
  margin: 20px 0 28px;   /* [589] title↔유의사항 gap 20 */
  padding: 25px 50px;
  background: var(--brand-primary-100);
  border: 0;
  border-radius: 8px;
}
.pcert-order-notice__title {
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.pcert-order-notice__title i {
  color: var(--brand-primary);
}
.pcert-order-notice__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.pcert-order-notice__list li {
  position: relative;
  padding-left: 12px;
}
.pcert-order-notice__list li::before {
  content: "-";
  position: absolute;
  left: 2px;
}
.pcert-order-notice__list li + li {
  margin-top: 4px;
}

/* ---- fieldset / legend ---- */
.pcert-order-fieldset {
  margin: 0 0 50px;   /* [587] 시안 섹션 간 50 */
  padding: 0;
  border: 0;
}
.pcert-order-legend {
  position: static; /* base.css legend{left:-9999px} 상쇄 → 섹션 제목 노출 */
  left: auto;
  display: block;
  width: 100%;
  /* [585] 시안 705:2214 — .pcert-sec-title 과 동일한 Bold 28 · 밑줄 없음 · [586] 제목↔표 gap 20 */
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 0;
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
/* 시안 737:5851 — '자격증 발급 방식' 제목행 우측 '더보기' 디스클로저 배치(발급이력 헤더 패턴) */
.pcert-order-legend--toggle {
  position: static; /* base.css의 legend{position:absolute;left:-9999px} 상쇄 → 제목+더보기 버튼 화면 노출 */
  left: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- 공통 표 ---- */
.pcert-order-table,
.pcert-order-form-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pcert-order-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 8px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-order-table th,
.pcert-order-table td,
.pcert-order-form-table th,
.pcert-order-form-table td {
  border: 1px solid var(--border-stroke);
  padding: 15px 12px 14px;   /* [507] */
  font-size: var(--fs-body);   /* [504][506] */
  line-height: var(--lh-body-s);
  vertical-align: middle;
  word-break: break-word;
}
/* [501] 표 컨테이너 상단선(시안 706:2396 / 706:2619). 폼 표는 thead 가 없어 첫 tbody 행에 부여 */
.pcert-order-table thead th,
.pcert-order-form-table > tbody > tr:first-child > th,
.pcert-order-form-table > tbody > tr:first-child > td {
  border-top: 1px solid #707070;
}
.pcert-order-table thead th {
  background: var(--bg-subtle-gray);
  color: var(--text-body);   /* [504] */
  font-weight: var(--fw-bold);
  text-align: center;
}
.pcert-order-table tbody td {
  text-align: center;
  color: var(--text-description);   /* [506] */
}
.pcert-order-row__name {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-medium);   /* [505] */
  text-align: center;
}

/* 발급방식 표 컬럼 — [590] 시안 705:2221 3열 균등 */
.pcert-order-col--name { width: 33.33%; }
.pcert-order-col--method { width: 33.33%; }
.pcert-order-col--fee { width: 33.34%; }

/* ---- 발급방식 라디오 (히트박스 유지, 색만으로 구분 금지: label 텍스트 병기) ---- */
.pcert-order-radios {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
.pcert-order-radio {
  display: inline-flex;
  align-items: center;
}
.pcert-order-radio__input {
  width: 20px;
  height: 20px;
  margin: 0 5px 0 0;   /* [592] 시안 706:2250 gap 5 */
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.pcert-order-radio label {
  cursor: pointer;
  /* [592] 시안 706:2251 Regular 16 / #333 (표 td #666 상속 차단) */
  font-size: var(--fs-body);
  color: var(--text-body);
}

/* ---- 수수료 셀 ---- */
.pcert-order-fee__amount {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-body);   /* [593] 시안 705:2243 Bold 16 */
  font-weight: var(--fw-bold);
}
.pcert-order-fee__note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}

/* ---- 합계(개수 + 총액) — 총액은 색 + 텍스트 병기 ---- */
/* 시안(705:1450): 합계행은 박스 없이 상단 구분선만 · 총액 32px 그린 강조 */
.pcert-order-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  /* [594] 합계행을 표의 마지막 행(tfoot 셀)으로 이동 — 셀 안 px50 py25 (시안 706:2363) */
  margin-top: 0;
  padding: 25px 50px;
}
.pcert-order-table td.pcert-order-summary-cell {
  padding: 0;   /* [594] 패딩은 내부 .pcert-order-summary 가 갖는다 */
}
.pcert-order-summary__count {
  margin: 0;
  font-size: var(--fs-body);   /* [594] 시안 개수 Regular 16 */
  color: var(--text-body);
}
/* 시안(705:1450): 개수 숫자는 그린 Bold 강조 */
.pcert-order-summary__count strong {
  color: var(--brand-primary);
  font-weight: var(--fw-bold);
}
.pcert-order-summary__total {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-body);
}
.pcert-order-summary__total > span {
  margin-right: 8px;
  /* [594] 시안 706:2384 — '총액' Bold 16 #666 */
  font-weight: var(--fw-bold);
  color: var(--text-description);
}
.pcert-order-summary__amount {
  color: var(--brand-primary);
  font-size: var(--pcert-total-fs);
  font-weight: var(--fw-bold);
}

/* ---- 신청자 정보 표(라벨-필드) ---- */
.pcert-order-col--label { width: 16%; }
.pcert-order-col--field { width: 34%; }
.pcert-order-form-table th {
  /* [596] 시안 706:2398 — Bold 16 / #333 · padding 10/12 · 좌정렬 */
  padding: 10px 12px;
  background: var(--bg-subtle-gray);
  color: var(--text-body);
  font-weight: var(--fw-bold);
  text-align: left;
  white-space: nowrap;
}
.pcert-order-form-table td {
  padding: 10px 12px;   /* [597] 시안 706:2401 */
  text-align: left;
}
.pcert-order-req {
  color: var(--brand-accent);
  font-weight: var(--fw-bold);
}
.pcert-order-readonly {
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.pcert-order-lock {
  margin-left: 8px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}

/* ---- 입력 필드 ---- */
.pcert-order-input,
.pcert-order-select,
.pcert-order-textarea {
  /* [598] h44 는 KWCAG 컨트롤 크기(--touch-min) 근거로 유지. 시안 706:2531 의 radius 0 · 보더 #dfdfdf · 16px 만 반영 */
  height: 44px;
  padding: 0 10px;
  border: 1px solid #dfdfdf;
  border-radius: 0;
  background: var(--bg-default);
  font-size: var(--fs-body);
  color: var(--text-body);
  box-sizing: border-box;
  vertical-align: middle;
}
.pcert-order-input::placeholder {
  color: var(--text-placeholder);   /* [598] 시안 placeholder #999 */
}
.pcert-order-input[readonly] {
  background: var(--bg-subtle-gray);   /* [598] 시안 raw #fafafa ≒ 토큰 #F9F9F9 유지 */
  color: var(--text-description);
}
.pcert-order-textarea {
  width: 100%;
  height: auto;
  min-height: 120px;   /* [599] 시안 배송메시지 1056×120 */
  padding: 12px;
  line-height: var(--lh-body);
  resize: vertical;
}

/* 휴대전화 3분할 / 이메일 */
.pcert-order-phone,
.pcert-order-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;   /* [599] 시안 gap 8 */
}
/* [599] 시안 706:2518 — 휴대전화 120 / 160 / 160 */
.pcert-order-input--phone {
  width: 160px;
  text-align: center;
}
.pcert-order-phone .pcert-order-input--phone:first-of-type {
  width: 120px;
}
.pcert-order-phone__sep,
.pcert-order-email__at {
  color: var(--text-description);
}
.pcert-order-input--email-id {
  width: 280px;   /* [599] */
}
.pcert-order-input--email-domain {
  width: 240px;   /* [599] */
}
.pcert-order-select {
  min-width: 180px;   /* [599] 시안 도메인 셀렉트 180 */
}

/* 증명사진 */
.pcert-order-file {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcert-order-input--file {
  flex: 1 1 auto;
  max-width: 520px;   /* [599] 시안 파일 박스 520 */
}
.pcert-order-file__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  background: var(--bg-subtle-gray);
  color: var(--text-body);
  cursor: pointer;
}
.pcert-order-file__btn:hover {
  background: var(--brand-primary-100);
  border-color: var(--brand-primary);
}
.pcert-order-help {
  margin: 8px 0 0;
  font-size: var(--fs-body-s);
  line-height: 20px;
  font-weight: var(--fw-bold);   /* [601] 시안 706:2572 Bold */
  color: var(--text-description);
}

/* 배송지 */
.pcert-order-address {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: none;
}
.pcert-order-address__zip {
  display: flex;
  gap: 8px;   /* [599] */
}
.pcert-order-input--zip {
  width: 200px;   /* [599] 시안 우편번호 200 */
}
.pcert-order-address__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* [600] 시안 706:2579 — 100×40 · 보더 #dfdfdf · Medium 14 #333 · radius 0 (h44 는 KWCAG 근거로 유지) */
  min-width: 100px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dfdfdf;
  border-radius: 0;
  background: var(--bg-default);
  color: var(--text-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
}
.pcert-order-address__btn:hover,
.pcert-order-address__btn:focus {
  background: var(--text-primary);
  color: var(--text-inverse);
}

/* ---- 위탁동의 ---- */
.pcert-order-consign-table thead th {
  text-align: center;
}
.pcert-order-consign-table tbody td {
  text-align: center;
}
.pcert-order-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;      /* [605] 시안 706:2659 표↔동의블록 20 */
  padding-left: 20px;    /* [603] 시안 706:2679 블록 들여쓰기 20 */
}
.pcert-order-agree__check {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.pcert-order-agree label {
  cursor: pointer;
  font-size: var(--fs-body);
}
.pcert-order-agree__note {
  margin: 10px 0 0;   /* [603] 라벨↔주석 gap 10 */
  font-size: var(--fs-body-s);
  line-height: 20px;  /* [604] 시안 706:2678 lh20 */
  color: var(--text-description);
}

/* ---- 오류 텍스트(색 + 텍스트 병기) ---- */
.pcert-order-error {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--brand-accent);
}

/* ---- 결제 CTA(Primary 그린, MO 색 사양 737:5081) ---- */
/* 시안(705:1450): 발급 수수료 결제 CTA는 다크 차콜 · 중앙 정렬(발급 목록 CTA와 동일 계열) */
.pcert-order-cta {
  margin-top: 50px;   /* [606] 시안 709:1547 상단 gap 50 */
  text-align: center;
}
.pcert-order-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 55px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;   /* [606] 시안 radius 0 */
  background: var(--text-body);
  color: var(--text-inverse);
  font-size: var(--fs-btn-m);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
}
.pcert-order-submit:hover,
.pcert-order-submit:focus {
  background: var(--text-primary);
}

/* ---- 키보드 초점 가시성(KWCAG 초점 이동) ---- */
.pcert-order-radio__input:focus,
.pcert-order-agree__check:focus,
.pcert-order-input:focus,
.pcert-order-select:focus,
.pcert-order-textarea:focus,
.pcert-order-address__btn:focus,
.pcert-order-submit:focus,
.pcert-order-file:focus-within .pcert-order-file__btn {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ============================================================================
   PS-009 모바일 (<=767px) : 폼 1열 스택(디자인 737:5081)
   ============================================================================ */
@media (max-width: 767px) {
  .pcert-order-table th,
  .pcert-order-table td,
  .pcert-order-form-table th,
  .pcert-order-form-table td {
    padding: 10px 8px;
  }
  /* [501] MO 폼 표는 아래 .pcert-order-form-table{border-top} 이 상단선을 담당 → 첫 행 셀 중복 라인 제거 */
  .pcert-order-form-table > tbody > tr:first-child > th,
  .pcert-order-form-table > tbody > tr:first-child > td {
    border-top: 0;
  }

  /* 발급방식 라디오 세로 */
  .pcert-order-radios {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* 합계 세로 */
  .pcert-order-summary {
    flex-direction: column;
    align-items: center;   /* [607] 시안 737:6066 개수·총액 2단 중앙정렬 */
    padding: 25px 16px;
  }

  /* [609] 시안 783:2699 — 위탁동의 표를 라벨(96) / 값 2열로 전치 */
  .pcert-order-consign-table {
    border-top: 1px solid #707070;
  }
  .pcert-order-consign-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pcert-order-consign-table,
  .pcert-order-consign-table tbody,
  .pcert-order-consign-table tr,
  .pcert-order-consign-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .pcert-order-consign-table tbody td {
    display: flex;
    gap: 8px;
    text-align: left;
    border-width: 0 0 1px;
  }
  .pcert-order-consign-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 96px;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
  }

  /* 신청자 정보 표 : 라벨 위 / 필드 아래 세로 스택 (table item 737:5081) */
  .pcert-order-form-table,
  .pcert-order-form-table tbody,
  .pcert-order-form-table tr,
  .pcert-order-form-table th,
  .pcert-order-form-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .pcert-order-form-table {
    border-top: 1px solid #707070;   /* 시안 컨테이너 상단 라인 */
  }
  /* 라벨(14 Bold #333) 위 · 필드와 gap 8 · 회색 칩 제거 */
  .pcert-order-form-table th {
    padding: 24px 16px 8px;
    border-bottom: 0;
    white-space: normal;
    background: transparent;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: #333;
  }
  /* 필드 아래 여백 + 항목 구분선 (min-h 80 · px16 py24 · border-b #DFDFDF) */
  .pcert-order-form-table td {
    padding: 0 16px 24px;
    border-top: 0;
    border-bottom: 1px solid #DFDFDF;
  }
  /* 휴대전화·이메일 입력 h48 · border #DFDFDF (시안 737:6088/6096) */
  .pcert-order-input--phone,
  .pcert-order-input--email-id,
  .pcert-order-input--email-domain,
  .pcert-order-select {
    height: 48px;
    border-color: #DFDFDF;
  }
  /* 휴대전화 : 인풋 3개 한 줄 균등(1:1:1, gap 10), 구분자 숨김 */
  .pcert-order-phone {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .pcert-order-phone__sep {
    display: none;
  }
  .pcert-order-input--phone {
    flex: 1 1 0;
    width: auto;
  }
  /* 이메일 : 1행 [아이디]@[도메인], 2행 도메인 셀렉트 풀폭 */
  .pcert-order-email {
    flex-wrap: wrap;
    gap: 8px;
  }
  .pcert-order-input--email-id,
  .pcert-order-input--email-domain {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .pcert-order-select {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }
  .pcert-order-input--file {
    max-width: none;
  }

  /* CTA 풀폭 */
  .pcert-order-cta {
    text-align: center;
  }
  .pcert-order-submit {
    width: 100%;
    min-width: 0;
    min-height: 48px;   /* [610] 시안 783:2775 328×48 */
  }
}

/* ============================================================================
   PS-010 발급 이력 (발급이력.cshtml) — 디자인 705:1794(PC) / 783:2780(MO)
   - 자격증 신청 현황 테이블(6열: 자격증명·발급형태·수수료·신청일자·상태·액션) + 더보기(5건 초과)
   - 상태 배지: 색(진행 step / 발급완료 red 강조 / 취소 muted) + 텍스트 병기(KWCAG 색 무관 인식)
   - 액션: 신청취소(아웃라인) / 재발급 신청(그린 필드) / 발급하기(D8 자리·비활성)
   - MO(<=767px): 표 → 카드 전환(783:2780), 신청일자 열 생략(D16)
   작성: 2026-07-09 (T-P1-10)
   ============================================================================ */

/* ---- 섹션 헤더(제목 + 더보기) ---- */
.pcert-hist-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pcert-hist-head .pcert-sec-title {
  margin-bottom: 0;
}
/* 시안(705:2204): 60x33 pill "더보기 ⌄". 히트영역은 KWCAG 컨트롤 크기 위해 min-height 44 유지 */
.pcert-hist-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 60px;
  /* [617] 시안 705:2204 — 보더·배경 없는 텍스트형 16 / #111. min-height 44 는 KWCAG 컨트롤 크기 근거로 유지 */
  min-height: var(--touch-min);
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  cursor: pointer;
}
/* 셰브론(장식) — JS .text() 갱신에 영향받지 않도록 ::after로 구현, 펼침 시 상하 반전 */
.pcert-hist-toggle::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.pcert-hist-toggle[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}
.pcert-hist-toggle:hover,
.pcert-hist-toggle:focus {
  color: var(--brand-primary);   /* [617] 배경·보더 제거에 맞춰 색 변화만 유지 */
}
.pcert-hist-toggle:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ---- 안내(취소 검증 회귀 / 준비 중) — 색 + 텍스트 ---- */
.pcert-hist-alert {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-base);
  background: var(--bg-subtle-gray);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--brand-accent);
}
/* 성공 안내(취소·환불·발급 완료) : 그린 계열(색 무관 인식 위해 텍스트 병기) */
.pcert-hist-alert--success {
  border-color: var(--brand-primary);
  background: var(--brand-primary-100);
  color: var(--brand-primary);
}

/* ---- 신청 현황 테이블 ---- */
.pcert-hist-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 20px;   /* [616] 시안 705:2099 제목↔표 20 */
}
.pcert-hist-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 8px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-hist-table th,
.pcert-hist-table td {
  border: 1px solid var(--border-stroke);
  padding: 15px 12px 14px;   /* [507][619] 시안 데이터행 60 */
  text-align: center;
  font-size: var(--fs-body);   /* [504][506] */
  line-height: var(--lh-body-s);
  word-break: break-all;
  vertical-align: middle;
}
.pcert-hist-table thead th {
  border-top: 1px solid #707070;   /* [501] 시안 705:2101 */
  background: var(--bg-subtle-gray);
  color: var(--text-body);   /* [504] */
  font-weight: var(--fw-bold);
}
.pcert-hist-table td {
  color: var(--text-description);   /* [506] */
}
.pcert-hist-cell--name {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-medium);   /* [505] */
}
.pcert-hist-invoice {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}

/* ---- 상태 배지 수식어(공용 .pcert-status 재사용) ---- */
/* 진행 단계(신청완료·접수완료·배송완료) : 중립 */
.pcert-status--step {
  color: var(--text-secondary);
  background: var(--bg-subtle-gray);
  border: 1px solid var(--border-stroke);
}
/* 발급완료 : 레드 강조(텍스트 병기로 색 무관 인식) */
.pcert-status--issued {
  color: var(--brand-accent);
  background: var(--bg-default);
  border: 1px solid var(--brand-accent);
}
/* 취소 : muted(텍스트 병기) */
.pcert-status--canceled {
  color: var(--text-description);
  background: var(--bg-default);
  border: 1px dashed var(--border-stroke);
}

/* 시안(705:1794): 이력 상태는 배지가 아닌 평문 색상 텍스트(진행=중립 / 발급완료=레드 / 취소=muted).
   텍스트 라벨 자체로 색 무관 인식 충족 */
.pcert-hist-table .pcert-status {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: normal;
  font-weight: var(--fw-semibold);
}
.pcert-hist-table .pcert-status__dot {
  display: none;
}
.pcert-hist-table .pcert-status--step {
  color: var(--text-secondary);
}
.pcert-hist-table .pcert-status--issued {
  color: var(--brand-accent);
}
.pcert-hist-table .pcert-status--canceled {
  color: var(--text-description);
}

/* ---- 액션 버튼 ---- */
.pcert-hist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* [622] 시안 705:2141 — 95×35 · radius 0 (min-height 40 은 KWCAG 근거로 유지) */
  min-width: 95px;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  box-sizing: border-box;
}
.pcert-hist-btn:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
/* [621] 시안 705:2141/2170/2185 — 신청취소·재발급 신청·발급하기가 모두 동일 아웃라인
   (흰 배경 · 보더 #dfdfdf · Medium 14 #333). 그린 채움은 시안에 없는 강조였다. */
.pcert-hist-btn--cancel {
  border: 1px solid #dfdfdf;
  background: var(--bg-default);
  color: var(--text-body);
}
.pcert-hist-btn--cancel:hover,
.pcert-hist-btn--cancel:focus {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.pcert-hist-btn--reissue,
.pcert-hist-btn--issue {
  border: 1px solid #dfdfdf;
  background: var(--bg-default);
  color: var(--text-body);
}
.pcert-hist-btn--reissue:hover,
.pcert-hist-btn--reissue:focus,
.pcert-hist-btn--issue:hover,
.pcert-hist-btn--issue:focus {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
/* 발급하기(D8 자리) : 비활성(대기) */
.pcert-hist-btn--issue[disabled] {
  border: 1px solid var(--border-stroke);
  background: var(--bg-subtle-gray);
  color: var(--text-description);
  cursor: not-allowed;
}
/* [기획 요청 2026-08-14] 한 액션 셀에 버튼이 2개 놓이는 유일한 경우('신청완료' 온라인형 = 발급하기 + 신청취소)의 세로 간격.
   액션 셀 폭(≈181px content)보다 버튼 2개(min-width 95px ×2)가 넓어 항상 줄바꿈되므로 세로 간격이 맞고,
   MO(≤767px)의 .pcert-hist-btn{width:100%} 세로 스택 경로와도 동일하게 동작한다.
   그 외 모든 행은 셀당 버튼이 1개뿐이라 이 선택자가 매칭되지 않는다(기존 렌더 무영향). */
.pcert-hist-cell--action .pcert-hist-btn + .pcert-hist-btn {
  margin-top: 6px;
}
.pcert-hist-issue-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-hist-noaction {
  color: var(--text-description);
}

/* ---- 이력 없음 안내 ---- */
.pcert-hist-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-hist-empty a {
  color: var(--brand-secondary);
  text-decoration: underline;
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   PS-010 모바일 (<=767px) : 표 → 카드 전환(783:2780), 신청일자 열 생략(D16)
   ============================================================================ */
@media (max-width: 767px) {
  .pcert-hist-table {
    table-layout: auto;
    border: 0;
    margin-top: 8px;
  }
  /* [QA row128] 표 폭 불일치 : 아래에서 table 을 display:block 으로 카드화하면 caption(table-caption)
     과 colgroup(table-column-group)만 테이블 내부 박스로 남아 브라우저가 이 둘을 묶어 **익명 테이블
     박스**를 생성한다. 익명 테이블은 shrink-to-fit 폭이라 100% 폭 카드행과 폭이 어긋난다(보이는
     캡션 한 줄만 폭이 다름 = "일부 맞지 않음"). 형제 표(.pcert-order-form-table)는 캡션이 .blind 라
     같은 현상이 안 보였던 것뿐. col 은 카드 모드에서 폭 계약이 없어 무의미하므로 숨기고
     (선례: responsive-mobile.css L4375 ShowLecPlan), caption 은 블록으로 환원해 100% 폭을 회복한다. */
  .pcert-hist-table colgroup {
    display: none;
  }
  .pcert-hist-table caption {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* 헤더행 숨김(각 셀 라벨은 data-label 로 노출) */
  .pcert-hist-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pcert-hist-table,
  .pcert-hist-table tbody,
  .pcert-hist-table tr,
  .pcert-hist-table th,
  .pcert-hist-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* 카드 = 한 신청 라인 */
  /* [623] 시안 802:3635 — 카드 보더·radius 없음 */
  .pcert-hist-row {
    border: 0;
    border-radius: 0;
    margin-bottom: 12px;
    padding: 4px 0;
    overflow: hidden;
  }
  /* 자격증명 행 = 라벨:값 (시안 783:2780 · 802:3700 — 무라벨 카드타이틀 아님, 타 행과 동일 포맷) */
  /* .pcert-hist-table th(0,1,1) 를 이기도록 th 한정 셀렉터로 override */
  .pcert-hist-table th.pcert-hist-cell--name {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border: 0;
    padding: 8px 16px;
    font-weight: var(--fw-regular);
    color: var(--text-body);
    background: transparent;
  }
  .pcert-hist-table th.pcert-hist-cell--name::before {
    content: attr(data-label);
    flex: 0 0 72px;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
  }
  /* 라벨:값 행 */
  .pcert-hist-table td {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border: 0;
    padding: 8px 16px;
  }
  .pcert-hist-table td::before {
    content: attr(data-label);
    flex: 0 0 72px;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
  }
  /* 신청일자 열 생략(D16) */
  .pcert-hist-col--date {
    display: none !important;
  }
  /* 상태 셀 내 송장번호 줄내림 정렬 */
  .pcert-hist-table td[data-label="상태"] {
    flex-wrap: wrap;
  }
  .pcert-hist-invoice {
    flex: 1 1 100%;
    margin-left: 80px;
  }
  /* 액션 셀 = 카드 하단 풀폭 버튼 */
  .pcert-hist-cell--action {
    display: block;
    padding: 8px 16px 12px;
  }
  .pcert-hist-cell--action::before {
    content: "";
    display: none;
  }
  .pcert-hist-btn {
    width: 100%;
    min-height: 48px;
  }
  .pcert-hist-issue-note {
    text-align: center;
  }
  .pcert-hist-noaction {
    display: none;
  }
}

/* ============================================================================
 * 증명사진 업로드·3:4 크롭 (T-P1-13, PS-009) — 외부 라이브러리 없음, 디자인 토큰만
 * ============================================================================ */

/* ---- 미리보기 ---- */
.pcert-order-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.pcert-order-file-preview[hidden] {
  display: none;
}
.pcert-order-file-preview__img {
  width: 90px;
  height: 120px;            /* 3:4 */
  object-fit: cover;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  background: var(--bg-subtle-gray);
}
.pcert-order-file-preview__remove {
  padding: 8px 12px;
  min-height: 40px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  background: var(--bg-default);
  color: var(--text-description);
  font-size: var(--fs-body-s);
  cursor: pointer;
}
.pcert-order-file-preview__remove:hover,
.pcert-order-file-preview__remove:focus {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* ---- 3:4 크롭 모달 ---- */
.pcert-crop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.pcert-crop[hidden] {
  display: none;
}
.pcert-crop__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--dim-overlay);
}
.pcert-crop__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--bg-default);
  border-radius: var(--radius-base);
  box-shadow: 0 12px 32px var(--dim-overlay);
  padding: 24px;
  box-sizing: border-box;
}
.pcert-crop__title {
  margin: 0 0 4px;
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--text-body);
}
.pcert-crop__desc {
  margin: 0 0 16px;
  font-size: var(--fs-body-s);
  color: var(--text-description);
}
.pcert-crop__stage {
  display: flex;
  justify-content: center;
  background: var(--bg-subtle-gray);
  border-radius: var(--radius-base);
  padding: 12px;
}
.pcert-crop__canvas {
  width: 210px;
  height: 280px;            /* 3:4 표시 크기(백킹스토어 600x800) */
  max-width: 100%;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  background: var(--bg-default);
  cursor: move;
  touch-action: none;       /* 터치 pan 시 페이지 스크롤 방지 */
}
.pcert-crop__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.pcert-crop__zoom-label {
  font-size: var(--fs-body-s);
  color: var(--text-description);
  white-space: nowrap;
}
.pcert-crop__zoom {
  flex: 1 1 auto;
}
.pcert-crop__zoom-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  background: var(--bg-default);
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
.pcert-crop__zoom-btn:hover,
.pcert-crop__zoom-btn:focus {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.pcert-crop__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.pcert-crop__btn {
  min-width: 88px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.pcert-crop__btn--ghost {
  border: 1px solid var(--border-input);
  background: var(--bg-default);
  color: var(--text-body);
}
.pcert-crop__btn--ghost:hover,
.pcert-crop__btn--ghost:focus {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.pcert-crop__btn--primary {
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.pcert-crop__btn--primary:hover,
.pcert-crop__btn--primary:focus {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

/* 배송현황 세로 나열 (QA PS-010-PC-002·MO-002) : 택배사·송장번호는 일반 텍스트(좌측, 밑줄·컬러 없음). */
.pcert-hist-invoice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pcert-hist-invoice > .pcert-hist-courier,
.pcert-hist-invoice > .pcert-hist-invoice-no { display: block; }
/* 배송조회 링크만 : 밑줄 + 브랜드 컬러 + 가로 중앙(재반려 — 배송조회만 중앙 정렬). align-self 로 이 항목만 중앙(택배사·송장은 좌측 유지). */
/* base.css a:link/a:visited(0,1,1)가 클래스 단독(0,1,0)을 이기므로 의사클래스 부착으로 (0,2,1) 확보 */
.pcert-hist-track,
.pcert-hist-track:link,
.pcert-hist-track:visited { display: inline-block; align-self: center; text-decoration: underline; color: var(--brand-primary); }
.pcert-hist-track:hover,
.pcert-hist-track:focus { text-decoration: underline; color: var(--brand-primary-hover); }

/* ------------------------------------------------------------
   [QA PS-006-PC-011] 발급 신청 폼 - 증명사진 등록 행 히든
   hidden 속성만으로는 레거시 tr 표시 규칙(display: table-row)에 밀릴 수 있어 명시 선언.
   마크업/크롭 모달/JS 핸들러는 보존 - 뷰(발급신청_발급목록.cshtml)의 hidden/class 제거만으로 재활성.
   ------------------------------------------------------------ */
.pcert-order-form-table tr.pcert-order-row--off { display: none !important; }