/* 공정성 페이지 바탕·머리줄 자리·첫 화면(설명 + 3단계)·자세히·꼬리. 값은 tokens.css 이름만. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s5)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 var(--fs-15)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 480px at 78% -8%,var(--neon-soft),transparent 70%),radial-gradient(700px 420px at -10% 30%,rgba(61,169,255,.06),transparent 70%)}
[hidden]{display:none!important}
.sr-svg{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3,p,ol,dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:var(--r-s)}
.ic16{width:16px;height:16px;flex:none}

/* 공용 헤더 자리(다른 작업자 헤더가 들어오면 이 작은 줄을 갈아 끼운다) */
.site-h{position:sticky;top:0;z-index:40;background:rgba(6,7,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-h-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:60px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.brand{font:700 var(--fs-14)/1 var(--f-disp);letter-spacing:.06em;text-decoration:none;color:var(--ink);padding:var(--s3) 0}
.site-h-r{display:flex;align-items:center;min-height:44px}

main{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* 첫 화면: 설명 + 우리 방식 3단계 */
.intro{padding:var(--s7) 0 var(--s6);min-height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:center}
.eyebrow{font:600 var(--fs-12)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--neon)}
.intro-h{margin-top:var(--s4);font:700 clamp(40px,7.2vw,76px)/1.04 var(--f-disp);letter-spacing:-.02em}
.intro-lead{margin-top:var(--s4);max-width:640px;font-size:var(--fs-16);line-height:1.7;color:var(--sub)}
@media (min-width:768px){.intro-lead{font-size:var(--fs-18)}}

.flow{list-style:none;padding:0;margin-top:var(--s6);display:grid;grid-template-columns:1fr;gap:var(--s3);counter-reset:f}
.flow-step{position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:var(--s4);row-gap:var(--s2);padding:var(--s5) var(--s5) var(--s4);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.flow-step:first-child{border-color:var(--neon-edge)}
.flow-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.flow-no{font:600 var(--fs-13)/1 var(--f-mono);color:var(--neon);letter-spacing:.08em}
.flow-when{font:600 var(--fs-12)/1.2 var(--f-body);color:var(--mut);letter-spacing:.04em;text-align:right}
.flow-ic{grid-row:2/4;width:40px;height:40px;padding:6px;color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--glass-2)}
.flow-t{font:700 var(--fs-18)/1.35 var(--f-body);letter-spacing:-.01em}
.flow-d{font-size:var(--fs-14);line-height:1.65;color:var(--sub)}
.flow-val{grid-column:1/-1;margin-top:var(--s2);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);
  border-radius:var(--r);background:rgba(0,0,0,.35);border:1px solid var(--line);min-height:36px}
.flow-val-k{font-size:var(--fs-12);color:var(--mut);white-space:nowrap}
.flow-val code{font:500 var(--fs-13)/1.3 var(--f-mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.flow-val code[data-none]{font-family:var(--f-body);color:var(--mut)}
.flow-val code:empty::before{content:"";display:inline-block;width:120px;height:10px;border-radius:2px;background:var(--glass-hi);vertical-align:middle}
/* 이음선: 폰 = 세로, PC = 가로 화살 */
.flow-step+.flow-step::before{content:"";position:absolute;left:calc(var(--s5) + 19px);top:calc(-1 * var(--s3) - 1px);width:1px;height:var(--s3);background:var(--line-2)}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
  .flow-step{grid-template-columns:1fr;row-gap:var(--s3);padding:var(--s5)}
  .flow-ic{grid-row:auto;width:44px;height:44px;padding:7px}
  .flow-step+.flow-step::before{left:calc(-1 * var(--s5));top:50%;width:var(--s5);height:1px;background:linear-gradient(90deg,var(--line-2),var(--neon-edge))}
  .flow-step+.flow-step::after{content:"";position:absolute;left:-7px;top:calc(50% - 3px);width:6px;height:6px;border-top:1px solid var(--neon-edge);border-right:1px solid var(--neon-edge);transform:rotate(45deg)}
}
.intro-go{position:relative;align-self:flex-start;margin-top:var(--s5);display:inline-flex;align-items:center;gap:var(--s2);font:600 var(--fs-14)/1 var(--f-body);color:var(--sub);text-decoration:none;padding:var(--s2) 0;transition:color var(--t) var(--ease)}
.intro-go::before{content:"";position:absolute;inset:-6px -4px}
.intro-go:hover{color:var(--ink)}

/* 자세히 */
.how{padding:var(--s7) 0 var(--s6);border-top:1px solid var(--line);margin-top:var(--s7)}
.how>h2{font:700 var(--fs-24)/1.25 var(--f-body);letter-spacing:-.01em}
.how-grid{margin-top:var(--s5);display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:900px){.how-grid{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.how h3{font:700 var(--fs-15)/1.4 var(--f-body);margin-bottom:var(--s2)}
.how p,.how-ol{font-size:var(--fs-14);line-height:1.75;color:var(--sub)}
.how-ol{padding-left:1.2em;display:grid;gap:var(--s1)}
.foot{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--gut) var(--s7);color:var(--mut);font-size:var(--fs-12);border-top:1px solid var(--line)}

/* 1030 형 50015: 스크롤 막대 안 보이게(굴리기는 그대로) */
html, body, * { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* 1030 형 50021: 3단계 카드 = 검증서·판 목록 아래 */
.intro-flow { margin-top: 48px; }
.intro-flow .flow { margin-top: 0; }