@charset "utf-8";
/* =========================================================
   인증 절차 (process/procedure.html) — procedure.css
   로드 순서: style.css → sub.css → procedure.css
   ========================================================= */
.svi { display: block; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pc-head { text-align: center; }
.pc-head > p:last-child:not(.a2-label) { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--sub); }

/* ---------- 1. 인증 방법 ---------- */
.pc-intro { padding: 120px 0 110px; }
.pc-method { margin-top: 56px; display: grid; grid-template-columns: 360px 1fr; gap: 48px; padding: 52px 56px; border: 1px solid #DCE3EE; border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #F4F7FD 100%); }
.pc-method__title { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--navy); font-size: 18px; font-weight: 800; color: #fff; }
.pc-method__head p { margin-top: 20px; font-size: 16px; line-height: 1.85; color: var(--body); }
.pc-method__list { display: grid; gap: 16px; }
.pc-method__list li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; padding: 26px 28px; border-radius: 18px; background: #fff; border: 1px solid #E3E9F3; }
.pc-method__ico { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: #EEF3FC; }
.pc-method__ico .svi { width: 54px; height: 54px; stroke-width: 2.6; }
.pc-method__logo { position: absolute; right: 28px; top: 26px; width: auto; height: 20px; }
.pc-method__logo[src*="wisestone"] { top: 29px; height: 15px; }
.pc-method__org { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #EEF3FC; font-size: 12px; font-weight: 800; color: #2454C6; }
.pc-method__list strong { display: block; margin-top: 8px; font-size: 21px; font-weight: 800; color: var(--navy); }
.pc-method__list p { margin-top: 6px; font-size: 15px; line-height: 1.75; color: var(--sub); }

/* ---------- 2. 주요 절차 ---------- */
.pc-flow { padding: 110px 0 130px; background: #F4F6FA; }

/* 요약 흐름도 */
.pc-diagram { margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.pc-diagram li { --c: #3D8BFF; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 18px 12px; border-radius: 20px; background: var(--c); color: #fff; text-align: center; box-shadow: 0 14px 28px rgba(16, 38, 76, .12); }
.pc-diagram li:nth-child(2) { --c: #2F72E8; }
.pc-diagram li:nth-child(3) { --c: #2454C6; }
.pc-diagram li:nth-child(4) { --c: #1A3F9E; }
.pc-diagram li:nth-child(5) { --c: #0B2E6E; }
.pc-diagram span { font-size: 12px; font-weight: 800; letter-spacing: .1em; opacity: .7; }
.pc-diagram strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pc-diagram__pair { gap: 8px !important; padding: 14px 12px !important; }
.pc-diagram__pair strong { display: block; width: 100%; padding: 8px 0; border-radius: 12px; background: rgba(255, 255, 255, .14); font-size: 16px; }
.pc-diagram li + li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' fill='none' stroke='%232454C6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* 단계별 설명 : 세로 흐름 */
.pc-steps { margin: 48px auto 0; max-width: 960px; display: grid; gap: 24px; }
.pc-step { --c: #3D8BFF; position: relative; display: grid; grid-template-columns: 80px 1fr; column-gap: 28px; align-items: center; padding: 30px 36px; border-radius: 22px; background: #fff; border: 1px solid #DCE3EE; box-shadow: inset 4px 0 0 var(--c); }
.pc-step:nth-child(2) { --c: #2F72E8; }
.pc-step:nth-child(3) { --c: #2454C6; }
.pc-step:nth-child(4) { --c: #1A3F9E; }
.pc-step:nth-child(5) { --c: #0B2E6E; }
.pc-step + .pc-step::before { content: ""; position: absolute; left: 75px; top: -22px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; transform: rotate(90deg); background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l4 4-4 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 4px 10px rgba(16, 38, 76, .18); }
.pc-step__no { grid-column: 2; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--c); }
.pc-step__ico { grid-column: 1; grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #EEF3FC; }
.pc-step__ico .svi { width: 46px; height: 46px; stroke-width: 2.7; }
.pc-step__title { grid-column: 2; margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.pc-step__desc { grid-column: 2; margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--sub); }
/* 3단계 : 현장심사 · 제품시험 병행 */
.pc-step.pc-step--split { grid-template-columns: 1fr; }
.pc-step--split .pc-step__no, .pc-step--split .pc-step__title, .pc-split { grid-column: 1; }
.pc-split { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-split__item { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; align-items: center; padding: 20px 22px; border-radius: 16px; background: #F4F7FD; }
.pc-step__ico--sm { grid-row: span 2; width: 60px; height: 60px; background: #fff; }
.pc-step__ico--sm .svi { width: 34px; height: 34px; stroke-width: 3; }
.pc-split__item strong { font-size: 17px; font-weight: 800; color: #2454C6; }
.pc-split__item p { margin-top: 4px; font-size: 14.5px; line-height: 1.7; color: var(--sub); }
.pc-note { margin-top: 32px; text-align: center; font-size: 14px; color: var(--muted); }


/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .pc-method { grid-template-columns: 1fr; gap: 28px; }
  .pc-diagram { gap: 24px; }
  .pc-diagram li + li::before { left: -22px; }
  .pc-diagram strong { font-size: 16px; }
}

@media (max-width: 1024px) {
  .pc-intro { padding: 88px 0 80px; }
  .pc-flow { padding: 80px 0 88px; }
}

@media (max-width: 768px) {
  .pc-intro { padding: 64px 0 56px; }
  .pc-head { text-align: left; }
  .pc-head > p:last-child:not(.a2-label) { font-size: 15px; }
  .pc-method { margin-top: 32px; padding: 28px 20px; border-radius: 18px; }
  .pc-method__title { height: 38px; font-size: 16px; }
  .pc-method__head p { font-size: 14px; }
  .pc-method__list li { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .pc-method__logo { right: 20px; top: 46px; height: 14px; }
  .pc-method__logo[src*="wisestone"] { top: 48px; height: 11px; }
  .pc-method__ico { width: 64px; height: 64px; }
  .pc-method__ico .svi { width: 36px; height: 36px; stroke-width: 2.9; }
  .pc-method__list strong { font-size: 18px; }
  .pc-method__list p { font-size: 14px; }
  .pc-flow { padding: 64px 0 64px; }
  .pc-diagram { display: none; }
  .pc-steps { margin-top: 32px; gap: 22px; }
  .pc-step { grid-template-columns: 56px 1fr; column-gap: 16px; padding: 22px 20px; border-radius: 18px; }
  .pc-step + .pc-step::before { left: 38px; }
  .pc-step__desc { font-size: 14px; }
  .pc-split__item { grid-template-columns: 48px 1fr; column-gap: 12px; padding: 16px; }
  .pc-split__item p { grid-column: 1 / -1; margin-top: 10px; font-size: 14px; }
  .pc-step__ico { width: 56px; height: 56px; }
  .pc-step__ico .svi { width: 32px; height: 32px; stroke-width: 3; }
  .pc-step__title { font-size: 18px; }
  .pc-split { grid-template-columns: 1fr; }
  .pc-step__ico--sm { grid-row: auto; width: 48px; height: 48px; }
  .pc-step__ico--sm .svi { width: 28px; height: 28px; }
  .pc-note { text-align: left; font-size: 13px; }
}