/* 보도블럭시공순서 — 전용 스타일 (팔레트: #2F3E46 / #F8F9FA / #52796F, 타입스케일 1.200, 패딩 64px, 라운드 12px) */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;700;800;900&display=swap');

:root{
  --dp-proc-primary:#2F3E46;
  --dp-proc-bg:#F8F9FA;
  --dp-proc-accent:#52796F;
  --dp-proc-radius:12px;
  --dp-proc-font:"Gothic A1","Pretendard","Noto Sans KR",sans-serif;
}

.site-header{position:sticky;top:0;z-index:60;}

h1,h2,h3,.dp-proc-body,.dp-proc-lead{font-family:var(--dp-proc-font);}

/* 타입 스케일 1.200 기준 */
.dp-proc-hero h1{font-size:clamp(30px,4vw,40px);}
.section-head h2{font-size:24px;}
.guide-item h3{font-size:16px;}
.dp-proc-lead{font-size:18px;line-height:1.9;color:var(--dp-proc-primary);font-weight:600;}
.dp-proc-body{font-size:16.5px;line-height:1.85;color:#3a464d;max-width:820px;}
.dp-proc-body + .dp-proc-body{margin-top:20px;}
.dp-proc-eyebrow{background:#e4ece9;color:var(--dp-proc-accent);}

/* 섹션 패딩 64px 계열 */
.section{padding:64px 0;}
@media (max-width:768px){.section{padding:44px 0;}}

/* 히어로: 스텝 인디케이터 */
.dp-proc-hero{background:linear-gradient(180deg,var(--dp-proc-primary) 0%,#1c2529 100%);}
.dp-proc-steps{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:40px 0 0;padding:0;list-style:none;position:relative;z-index:1;
}
.dp-proc-steps li{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--white,#fff);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--dp-proc-radius);
  padding:8px 14px 8px 8px;
}
.dp-proc-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--dp-proc-accent);color:#fff;font-size:13px;font-weight:800;
}

/* SVG 도식 */
.dp-proc-svg{width:100%;height:auto;background:var(--dp-proc-bg);border-radius:var(--dp-proc-radius);padding:12px;}

/* 표 */
.dp-proc-table-wrap{overflow-x:auto;border-radius:var(--dp-proc-radius);border:1px solid #dde2e0;}
.dp-proc-table{width:100%;border-collapse:collapse;min-width:520px;background:#fff;}
.dp-proc-table caption{text-align:left;font-size:14px;font-weight:700;color:var(--dp-proc-primary);padding:14px 16px;background:#eef1ef;}
.dp-proc-table th,.dp-proc-table td{padding:14px 16px;font-size:15px;text-align:left;border-bottom:1px solid #e6eae7;}
.dp-proc-table th{background:var(--dp-proc-primary);color:#fff;font-weight:700;}
.dp-proc-table tbody tr:last-child td{border-bottom:none;}
.dp-proc-table-note{margin-top:14px;font-size:13.5px;color:#5c6a67;}

/* 사진 캡션 */
.photo-caption{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--dp-proc-primary);text-align:center;}

/* 접근성 · 모션 */
a:focus-visible,button:focus-visible{outline:3px solid var(--dp-proc-accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.process-item img{transition:none;}}

/* footer가 4열(브랜드/바로가기/관련페이지/문의)이라 전역 3열 정의에 최소 오버라이드 */
.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}
@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:768px){.footer-grid{grid-template-columns:1fr;}}