@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-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);
  padding: 32px 0 64px;
}
.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 16px;
  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탭 공용 네비 (박스 + 꼬리형) ---- */
.pcert-tabs {
  margin: 24px 0 12px;
}
.pcert-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  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-medium);
  letter-spacing: var(--ls-tight);
  background: var(--bg-default);
  border: 1px solid var(--border-global);
  border-radius: var(--radius-base);
  box-sizing: border-box;
}
.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 {
  margin: 4px 0 10px;
  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);
  line-height: 1.6;
  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: var(--lh-body);
  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: 48px 0 20px;
  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;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-description);
}
.pcert-notes li + li {
  margin-top: 4px;
}
.pcert-notes li::before {
  content: "\00B7";
  position: absolute;
  left: 3px;
}
.pcert-notes__em {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

/* ---- 발급 비용 표 ---- */
.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: 14px 16px;
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body-s);
}
.pcert-fee-table thead th {
  background: var(--bg-subtle-gray);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}
.pcert-fee-table tbody th {
  background: var(--bg-default);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}
.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 {
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.pcert-fee-table__memo {
  font-size: var(--fs-body-s);
  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 폭계산 깨는 것 방지 */
  padding: 14px 16px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-align: center;
  background: var(--bg-subtle-gray);
}
.pcert-org-table th,
.pcert-org-table td {
  border-top: 1px solid var(--border-stroke);
  padding: 12px 16px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  text-align: center;
  vertical-align: middle;
}
.pcert-org-table th {
  width: 50%;
  background: var(--bg-subtle-gray);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}
.pcert-org-table td {
  color: var(--text-body);
  /* 시안 항목별(어절) 개행 : 한글은 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: 20px 0 48px;
  }
  .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);
  }

  /* 탭 2×2 */
  .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;
  }
  .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;
  }
  /* 세로 스택 시 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 {
  margin: 32px 0;
  padding: 24px 50px;
  background: var(--bg-subtle-gray);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-base);
  box-sizing: border-box;
}
/* 시안: ⓘ 그린 아이콘 + 제목 한 줄, 본문 리스트는 아래 (아이콘 원형 채움 아님) */
.pcert-caution__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--fs-body-s);
  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: 14px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.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: 14px 12px;
  text-align: center;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  word-break: break-all;
}
.pcert-target-table thead th {
  background: var(--bg-subtle-gray);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}
.pcert-target-table tbody th {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}
.pcert-target-table td {
  color: var(--text-body);
}
.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 규칙 그대로 불변). */
  .pcert-target-table {
    min-width: 560px;
    table-layout: auto;
  }
  .pcert-target-table th,
  .pcert-target-table td {
    padding: 10px 6px;
  }
  .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;
}
.pcert-steps {
  display: flex;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.pcert-steps__item {
  position: relative;
  flex: 1 1 0;
  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: 100%;
  height: 2px;
  background: var(--brand-primary);
  z-index: 0;
}
.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: 12px;
  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: 4px;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
  letter-spacing: var(--ls-tight);
}
.pcert-steps__label {
  display: block;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--text-body);
}

/* ---- 발급 신청 안내 ---- */
.pcert-apply__lead {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  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-input);
}
.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: 14px 12px;
  text-align: center;
  vertical-align: middle; /* 시안 688:5830 : 행 내용(체크박스·과정명·자격증명·결과 배지 '합격' 등)을 세로 중앙 정렬. 미지정 시 기본 baseline 이라 '합격' 배지가 같은 줄 텍스트와 높이 어긋남(QA). 형제 표(.pcert-org-table·.pcert-order-table)와 동일 패턴 */
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  word-break: break-all;
}
.pcert-apply-table thead th {
  background: var(--bg-subtle-gray);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}
.pcert-apply-table tbody th {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}
.pcert-apply-table__col--check {
  width: 56px;
}
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: 24px 0 0;
  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: var(--radius-base);
  /* 디자인: 다크 차콜(#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: 12px;
    text-align: left;
    padding: 0 0 20px;
  }
  .pcert-steps__item:not(:last-child)::before {
    top: 18px;
    left: 17px;
    width: 2px;
    height: 100%;
  }
  .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: 10px 6px;
  }
  .pcert-apply-table__col--check {
    width: 40px;
  }

  /* CTA 풀폭 */
  .pcert-apply__submit {
    width: 100%;
    min-width: 0;
  }
}

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

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

/* ---- 신청 시 유의사항 ---- */
.pcert-order-notice {
  margin: 16px 0 28px;
  padding: 16px 20px;
  background: var(--bg-subtle-gray);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-base);
}
.pcert-order-notice__title {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  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-left: 18px;
  list-style: disc;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.pcert-order-notice__list li + li {
  margin-top: 4px;
}

/* ---- fieldset / legend ---- */
.pcert-order-fieldset {
  margin: 0 0 36px;
  padding: 0;
  border: 0;
}
.pcert-order-legend {
  position: static; /* base.css legend{left:-9999px} 상쇄 → 섹션 제목 노출 */
  left: auto;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--text-primary);
  font-size: var(--fs-section);
  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: 14px 12px;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  vertical-align: middle;
  word-break: break-word;
}
.pcert-order-table thead th {
  background: var(--bg-subtle-gray);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  text-align: center;
}
.pcert-order-table tbody td {
  text-align: center;
}
.pcert-order-row__name {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
  text-align: center;
}

/* 발급방식 표 컬럼 */
.pcert-order-col--name { width: 34%; }
.pcert-order-col--method { width: 40%; }
.pcert-order-col--fee { width: 26%; }

/* ---- 발급방식 라디오 (히트박스 유지, 색만으로 구분 금지: 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 6px 0 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.pcert-order-radio label {
  cursor: pointer;
  font-size: var(--fs-body-s);
}

/* ---- 수수료 셀 ---- */
.pcert-order-fee__amount {
  display: block;
  color: var(--text-primary);
  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;
  margin-top: 4px;
  padding: 24px 4px;
  border-top: 1px solid var(--border-stroke);
}
.pcert-order-summary__count {
  margin: 0;
  font-size: var(--fs-body-s);
  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;
  font-weight: var(--fw-semibold);
}
.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 {
  background: var(--bg-subtle-gray);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  text-align: left;
  white-space: nowrap;
}
.pcert-order-form-table td {
  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 {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  background: var(--bg-default);
  font-size: var(--fs-body-s);
  color: var(--text-body);
  box-sizing: border-box;
  vertical-align: middle;
}
.pcert-order-input[readonly] {
  background: var(--bg-subtle-gray);
  color: var(--text-description);
}
.pcert-order-textarea {
  width: 100%;
  height: auto;
  min-height: 96px;
  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: 6px;
}
.pcert-order-input--phone {
  width: 90px;
  text-align: center;
}
.pcert-order-phone__sep,
.pcert-order-email__at {
  color: var(--text-description);
}
.pcert-order-input--email-id,
.pcert-order-input--email-domain {
  width: 150px;
}
.pcert-order-select {
  min-width: 140px;
}

/* 증명사진 */
.pcert-order-file {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcert-order-input--file {
  flex: 1 1 auto;
  max-width: 320px;
}
.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);
  color: var(--text-description);
}

/* 배송지 */
.pcert-order-address {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: none;
}
.pcert-order-address__zip {
  display: flex;
  gap: 6px;
}
.pcert-order-input--zip {
  width: 140px;
}
.pcert-order-address__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-base);
  background: var(--bg-default);
  color: var(--text-primary);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  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: 14px;
}
.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: 8px 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  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: 24px;
  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: var(--radius-base);
  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;
  }

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

  /* 합계 세로 */
  .pcert-order-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 신청자 정보 표 : 라벨 위 / 필드 아래 세로 스택 (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;
  }
}

/* ============================================================================
   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: 6px;
  min-width: 60px;
  min-height: var(--touch-min);
  padding: 6px 14px;
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-pill);
  background: var(--bg-default);
  color: var(--text-secondary);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  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);
  border-color: var(--brand-primary-200);
  background: var(--brand-primary-100);
}
.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: 16px;
}
.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: 14px 12px;
  text-align: center;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  word-break: break-all;
  vertical-align: middle;
}
.pcert-hist-table thead th {
  background: var(--bg-subtle-gray);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}
.pcert-hist-cell--name {
  background: var(--bg-subtle-green);
  color: var(--text-body);
  font-weight: var(--fw-semibold);
}
.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;
  min-width: 96px;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: var(--radius-base);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  box-sizing: border-box;
}
.pcert-hist-btn:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
/* 신청취소 : 아웃라인(흰 배경 + 테두리) */
.pcert-hist-btn--cancel {
  border: 1px solid var(--border-stroke);
  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 {
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.pcert-hist-btn--reissue:hover,
.pcert-hist-btn--reissue:focus {
  background: var(--brand-primary-strong);
  border-color: var(--brand-primary-strong);
}
/* 발급하기(D8) : 그린 필드(활성) — 온라인 발급 출력 완료 전이 */
.pcert-hist-btn--issue {
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.pcert-hist-btn--issue:hover,
.pcert-hist-btn--issue:focus {
  background: var(--brand-primary-strong);
  border-color: var(--brand-primary-strong);
}
/* 발급하기(D8 자리) : 비활성(대기) */
.pcert-hist-btn--issue[disabled] {
  border: 1px solid var(--border-stroke);
  background: var(--bg-subtle-gray);
  color: var(--text-description);
  cursor: not-allowed;
}
.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;
  }
  /* 카드 = 한 신청 라인 */
  .pcert-hist-row {
    border: 1px solid var(--border-stroke);
    border-radius: var(--radius-base);
    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; }