/* ============================================================
   SINWOO 홈페이지 목업 v4 — 공통 스타일
   페이지 공통 셸(내비·푸터) + 블록 부품
   ============================================================ */

:root{
  --ink:#13204E;
  --navy:#23468F;
  --gold:#F2B33D;
  --paper:#FFFFFF;
  --mist:#F2F5FA;
  --line:#D9E0EA;
  --muted:#5A6A80;
  --maxw:1220px;
  --sans:system-ui,-apple-system,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono','Consolas','D2Coding',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
html[lang="ko"] body{word-break:keep-all}
h1,h2,h3,h4{margin:0; letter-spacing:-.03em; line-height:1.34; font-weight:800}
html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{letter-spacing:-.025em; line-height:1.2}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ── 좌측 라벨 스트립 ── */
.spine{
  position:fixed; left:0; top:0; bottom:0; width:34px; z-index:60;
  background:var(--ink); display:flex; align-items:center; justify-content:center;
}
.spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  color:#8FA0C4; white-space:nowrap;
}
.spine::before,.spine::after{
  content:''; position:absolute; left:9px; width:16px; height:16px;
  border:1px solid #3B4C7E; border-radius:50%;
}
.spine::before{top:78px} .spine::after{bottom:78px}
.shell{margin-left:34px}

/* ── 내비 (드롭다운) ── */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:30px; height:70px}
.logo{display:flex; align-items:center; flex:0 0 auto}
.logo img{height:32px; width:auto}
.nav-links{display:flex; gap:4px; font-size:15px; font-weight:600}
.nav-item{position:relative}
.nav-item > a{display:block; padding:9px 14px; border-radius:3px; color:var(--muted)}
.nav-item > a:hover,.nav-item.on > a{color:var(--ink); background:var(--mist)}
.nav-item.has-sub > a::after{content:'\25BE'; font-size:9px; margin-left:6px; opacity:.6; vertical-align:2px}
.nav-sub{
  position:absolute; top:100%; left:0; min-width:186px; background:#fff;
  border:1px solid var(--line); box-shadow:0 12px 28px rgba(19,32,78,.13);
  padding:6px; display:none; z-index:70;
}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:block}
.nav-sub a{display:block; padding:9px 12px; font-size:14.5px; font-weight:500; color:var(--muted); border-radius:2px}
.nav-sub a:hover,.nav-sub a.on{background:var(--mist); color:var(--ink)}
.nav-sub .sub-note{display:block; font-size:11.5px; color:#93A2BC; margin-top:1px; font-weight:400}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:16px}
.lang{display:flex; font-family:var(--mono); font-size:11.5px; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.lang a{padding:6px 10px; color:var(--muted)}
.lang a.on{background:var(--ink); color:#fff}
.burger{display:none}

/* ── 버튼 ── */
.btn{
  display:inline-block; background:var(--navy); color:#fff; padding:12px 21px;
  border-radius:3px; font-size:14.5px; font-weight:700; border:0; cursor:pointer;
  font-family:inherit; transition:background .18s ease; text-align:center;
}
.btn:hover{background:#1B3670}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--mist)}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-gold:hover{background:#E0A32B}
/* 상단 내비의 버튼은 본문 CTA 보다 한 치수 작게 — 헤더에서 버튼이 소리치면 안 된다 */
.nav-right .btn{padding:7px 14px; font-size:13px; font-weight:600}

/* ── 공통 라벨 ── */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--navy); display:flex; align-items:center; gap:12px; font-weight:600;
}
.eyebrow::after{content:''; height:1px; flex:1; background:var(--line); max-width:80px}

/* ── 히어로 (홈 전용) ── */
.hero{position:relative; min-height:620px; display:flex; align-items:center; border-bottom:1px solid var(--line); overflow:hidden}
.hero-bg{position:absolute; inset:0; background:url('../assets/hero.jpg') center right/cover}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.975) 0%, rgba(255,255,255,.945) 36%, rgba(255,255,255,.62) 58%, rgba(255,255,255,.14) 80%, rgba(19,32,78,.12) 100%)}
.hero-l{position:relative; z-index:2; padding:88px 0; max-width:660px}
.hero-l h1{font-size:clamp(29px,3.4vw,46px); margin:24px 0 20px}
html[lang="de"] .hero-l h1{font-size:clamp(33px,4vw,54px)}
.hero-l h1 .thin{display:block; font-weight:500; font-size:.62em; color:var(--navy); margin-top:14px; letter-spacing:-.02em; line-height:1.34}
html[lang="de"] .hero-l h1 .thin{font-size:.5em}
.hero-sub{font-size:17.5px; color:var(--muted); max-width:530px}
.hero-cta{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap}
.hero-meta{
  margin-top:42px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; gap:34px; font-family:var(--mono); font-size:11.5px;
  color:var(--muted); letter-spacing:.06em; flex-wrap:wrap;
}
.hero-meta b{display:block; font-family:var(--sans); font-size:20px; color:var(--ink); letter-spacing:-.02em; margin-bottom:3px}
.hero-tag{
  position:absolute; right:34px; bottom:34px; z-index:2; background:var(--ink); color:#fff;
  padding:12px 19px; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
}

/* ── 서브페이지 상단 배너 ── */
.phead{position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:62px 0 56px; border-bottom:1px solid var(--line)}
.phead.has-bg{padding:62px 0 56px} /* 머리띠 높이는 배경 유무와 무관하게 한 치수 — 메뉴 이동 때 널뛰지 않게 */
.phead-bg{position:absolute; inset:0; background-size:cover; background-position:center 34%}
.phead-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(19,32,78,.965) 0%, rgba(19,32,78,.93) 42%, rgba(19,32,78,.74) 72%, rgba(19,32,78,.58) 100%);
}
.phead .wrap{position:relative; z-index:2}
.phead .eyebrow{color:var(--gold)}
.phead .eyebrow::after{background:#33447A}
.phead h1{font-size:clamp(27px,3vw,42px); margin:18px 0 14px; max-width:1000px}
.phead p{color:#A9B8D6; font-size:17px; max-width:660px}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#7E8FBB; margin-bottom:20px}
.crumb a:hover{color:#fff}

/* ── 사진을 배경으로 깐 섹션 ── */
.imgsec{position:relative; overflow:hidden; padding:88px 0; border-bottom:1px solid var(--line); color:#fff}
.imgsec-bg{position:absolute; inset:0; background-size:cover; background-position:center 38%}
.imgsec-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(19,32,78,.955) 0%, rgba(19,32,78,.90) 46%, rgba(19,32,78,.66) 100%);
}
.imgsec .wrap{position:relative; z-index:2}
.imgsec .eyebrow{color:var(--gold)}
.imgsec .eyebrow::after{background:#33447A}
.imgsec .sec-head p,.imgsec p{color:#A9B8D6}
.imgsec .checks li{border-color:#33447A; color:#C3D0EA}
.imgsec .checks li::before{color:var(--gold)}

/* ── 신뢰 띠 ── */
.trust{background:#0E1838; color:#B7C4DE}
.trust-in{display:flex; gap:36px; padding:19px 28px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto}
.trust-in span::before{content:'\2713\00a0\00a0'; color:var(--gold)}

/* ── 섹션 ── */
.sec{padding:84px 0; border-bottom:1px solid var(--line)}
.sec-alt{background:var(--mist)}
.sec-head{max-width:700px; margin-bottom:44px}
.sec-head h2{font-size:clamp(23px,2.4vw,34px); margin:19px 0 15px}
html[lang="de"] .sec-head h2{font-size:clamp(26px,2.7vw,38px)}
.sec-head p{color:var(--muted); font-size:17px}

/* ── 처리 흐름 ── */
.flow{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--paper)}
.step{padding:30px 25px; border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step-n{font-family:var(--mono); font-size:12px; color:var(--navy); letter-spacing:.2em; font-weight:600}
.step h3{font-size:17.5px; margin:13px 0 9px}
.step p{font-size:14.5px; color:var(--muted); line-height:1.55}
.step-de{font-family:var(--mono); font-size:10.5px; color:#93A2BC; letter-spacing:.1em; margin-top:14px}

/* ── 어두운 블록 (증거) ── */
.dark{background:var(--ink); color:#fff; padding:84px 0; border-bottom:1px solid var(--line)}
.dark .eyebrow{color:var(--gold)}
.dark .eyebrow::after{background:#33447A}
.dark .sec-head p{color:#A9B8D6}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2B3C6E; border:1px solid #2B3C6E}
.pcard{background:#182858; padding:28px 26px}
.pcard h3{font-size:16.5px; margin-bottom:10px}
.pcard p{font-size:14.5px; color:#A9B8D6; line-height:1.55}
.pcard-k{font-family:var(--mono); font-size:10.5px; color:var(--gold); letter-spacing:.16em; margin-bottom:14px}

/* ── 전송 결과 예시 ── */
.receipt{
  background:#0E1838; border:1px solid #2B3C6E; padding:26px 28px;
  font-family:var(--mono); font-size:13px; color:#C3D0EA; overflow-x:auto;
}
.receipt .rl{display:flex; gap:18px; padding:7px 0; border-bottom:1px dashed #2B3C6E; white-space:nowrap}
.receipt .rl:last-child{border-bottom:0}
.receipt .rk{color:#7E8FBB; min-width:210px; letter-spacing:.08em}
.receipt .rv{color:#fff}
.receipt .ok{color:#7BD3A0}
.receipt-cap{margin-top:14px; font-family:var(--mono); font-size:10.5px; color:#7E8FBB; letter-spacing:.1em}

/* ── 이미지 밴드 ── */
.band{border:1px solid var(--line); background:var(--paper)}
.band img{width:100%}
.band-cap{
  padding:13px 20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.12em;
}

/* ── 밴드 (이미지 없는 언어용 — CSS로 그림) ── */
.cband{
  border:1px solid #2B3C6E;
  background:linear-gradient(100deg, var(--ink) 0%, #1B2E63 58%, var(--navy) 100%);
  color:#fff; padding:34px 36px;
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
}
.cband h3{font-size:21px; margin-bottom:9px; line-height:1.35}
.cband p{color:#A9B8D6; font-size:14.5px; max-width:420px}
.cband-steps{display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end}
.cband-steps span{
  border:1px solid #3B4C7E; padding:9px 15px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; color:#C3D0EA; white-space:nowrap;
}
.cband-steps span.on{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700}

/* ── 페이지 사진 (자연 비율 — 자르지 않는다) ── */
.photo{border:1px solid var(--line); background:var(--paper)}
.photo img{width:100%; height:auto}
.photo-cap{
  padding:13px 20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.12em;
}

/* ── 고객사 (한 줄, 압축) ── */
.clients{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.client{background:var(--paper); padding:17px 18px}
.client-k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--navy); margin-bottom:7px; white-space:nowrap}
.client h3{font-size:15.5px; margin-bottom:4px; line-height:1.25}
.client p{font-size:12.8px; color:var(--muted); line-height:1.45}

/* ── 맡는 일 / 맡지 않는 일 ── */
.scope{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.scope-box{border:1px solid var(--line); background:var(--paper)}
.scope-box.no{background:var(--mist)}
.scope-h{
  padding:16px 22px; border-bottom:1px solid var(--line); font-size:16px; font-weight:800;
}
.scope-box.no .scope-h{color:var(--muted)}
.scope-box ul{list-style:none; margin:0; padding:8px 22px 20px}
.scope-box li{padding:11px 0 11px 22px; border-bottom:1px solid var(--line); position:relative; font-size:14.5px}
.scope-box li:last-child{border-bottom:0}
.scope-box li b{display:block; font-weight:600}
.scope-box li span{display:block; color:var(--muted); font-size:13px; margin-top:2px}
.scope-box li::before{position:absolute; left:0; top:11px; font-family:var(--mono); font-size:13px}
.scope-box.yes li::before{content:'+'; color:var(--navy)}
.scope-box.no li::before{content:'\2013'; color:#A9B4C6}

/* ── 카드 그리드 ── */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.feats-3{grid-template-columns:repeat(3,1fr)}
.feat{background:var(--paper); border:1px solid var(--line); padding:30px 28px; border-left:3px solid var(--navy)}
.feat h3{font-size:18px; margin-bottom:11px}
.feat p{font-size:14.5px; color:var(--muted)}
.feat-k{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.16em; margin-bottom:15px}
.feat ul{margin:14px 0 0; padding-left:17px; font-size:14px; color:var(--muted)}
.feat li{padding:3px 0}

/* ── 2단 split ── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split-top{align-items:start}
.split h2{font-size:clamp(24px,2.5vw,34px); margin:18px 0 16px}
.split p{color:var(--muted); margin-bottom:13px}
.checks{list-style:none; padding:0; margin:24px 0 0; font-size:15px}
.checks li{padding:11px 0 11px 27px; border-top:1px solid var(--line); position:relative}
.checks li::before{content:'\2192'; position:absolute; left:0; color:var(--navy); font-family:var(--mono)}
.dark .checks li{border-color:#33447A; color:#C3D0EA}
.dark .checks li::before{color:var(--gold)}

/* ── 표형 목록 (서식 줄·업무 목록) ── */
.zeile{border:1px solid var(--line); background:var(--paper)}
.zeile-h{background:var(--ink); color:#fff; padding:12px 18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em}
.zeile-r{display:grid; grid-template-columns:82px 1fr; border-top:1px solid var(--line)}
.zeile-r:first-of-type{border-top:0}
.zeile-kz{background:var(--mist); padding:14px 16px; font-family:var(--mono); font-size:12px; color:var(--navy); font-weight:600; border-right:1px solid var(--line)}
.zeile-t{padding:12px 16px; font-size:13.5px}
.zeile-t b{display:block; font-weight:600; line-height:1.4}
.zeile-t span{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}

/* ── 사실 목록 (회사) ── */
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.facts dl{background:var(--paper); margin:0; padding:22px 26px}
.facts dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--muted); margin-bottom:7px}
.facts dd{margin:0; font-size:16px; font-weight:600}
.facts dd small{display:block; font-weight:400; font-size:13.5px; color:var(--muted); margin-top:4px}

/* 한 줄 압축형 (연락처처럼 항목이 적을 때) — 내용 길이에 맞춰 열 폭을 나눈다 */
.facts-3{grid-template-columns:1.1fr 1.05fr 0.85fr}
.facts-3 dl{padding:16px 18px}
.facts-3 dt{font-size:9.5px; margin-bottom:5px}
.facts-3 dd{
  font-size:13.5px; line-height:1.4; font-weight:600;
  word-break:keep-all; overflow-wrap:anywhere;   /* 넘칠 때만 끊는다 */
}
.facts-3 dd a{white-space:nowrap}
.facts-3 dd small{font-size:11.8px; margin-top:3px; word-break:keep-all}

/* 항목 수가 열 수로 안 떨어질 때 — 마지막 칸을 늘려 빈칸을 없앤다 */
.facts-fill{grid-template-columns:repeat(3,1fr)}
.facts-fill dl:last-child{grid-column:span 2}

/* ── 3칸 안내 ── */
.probe{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.probe > div{background:var(--paper); padding:30px 26px}
.probe b{display:block; font-size:19px; margin-bottom:7px}
.probe span{color:var(--muted); font-size:14.5px}

/* ── CTA + 폼 ── */
.cta{position:relative; background:var(--ink); color:#fff; padding:84px 0; overflow:hidden}
.cta-bg{position:absolute; inset:0; background:url('../assets/hero.jpg') center/cover; filter:blur(3px); transform:scale(1.06)}
.cta-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(19,32,78,.97) 0%, rgba(19,32,78,.92) 52%, rgba(19,32,78,.78) 100%)}
.cta .wrap{position:relative; z-index:2}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.cta h2{font-size:clamp(27px,3.1vw,40px); margin:20px 0 16px}
.cta p{color:#A9B8D6; font-size:17px}
.cta .eyebrow{color:var(--gold)}
.cta .eyebrow::after{background:#33447A}
.cta .checks li{border-color:#33447A; color:#C3D0EA}
.cta .checks li::before{color:var(--gold)}
.form{background:#182858; border:1px solid #2B3C6E; padding:30px 28px}
.form label{display:block; font-size:12.5px; color:#8FA0C4; margin:0 0 7px; font-weight:600}
.form .fg{margin-bottom:17px}
.form input,.form select,.form textarea{
  width:100%; background:#0E1838; border:1px solid #2B3C6E; color:#fff;
  padding:11px 13px; font-family:inherit; font-size:14.5px; border-radius:2px;
}
.form textarea{min-height:82px; resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold); outline-offset:1px}
.form .btn{width:100%; margin-top:6px}
.form-note{margin-top:14px; font-size:12.5px; color:#7E8FBB}
.form-note a{text-decoration:underline}

/* ── 이어서 볼 페이지 ── */
.sec-next{padding:40px 0}
.next-h{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:#93A2BC; margin-bottom:12px;
}
.next{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.next a{padding:15px 18px; background:var(--paper); transition:background .18s ease}
.next a:hover{background:var(--mist)}
.next b{display:block; font-size:14.5px; margin-bottom:3px}
.next span{color:var(--muted); font-size:12.6px; line-height:1.45}

/* ── 푸터 ── */
.foot{background:#0B1330; color:#8093B8; padding:32px 0 16px; font-size:13px}
.foot p{line-height:1.55}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:26px; padding-bottom:20px; border-bottom:1px solid #1E2C57}
.foot h4{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:#5D6E97; margin:0 0 9px; font-weight:600}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{padding:2.5px 0}
.foot a:hover{color:#fff}
.foot-logo{margin-bottom:11px}
.foot-logo img{height:26px; width:auto}
.foot-bot{display:flex; justify-content:space-between; gap:20px; padding-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; flex-wrap:wrap}
/* 제작 크레딧 — 배경에 거의 묻히게, 찾으면 읽히는 정도 */
.foot-made{
  color:#22315A; font-size:9.5px; letter-spacing:.12em;
  align-self:center; transition:color .25s ease;
}
.foot-made:hover{color:#6E82A8}

/* ── 등장 애니메이션 ── */
.rise{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ── 반응형 ── */
@media (max-width:1080px){
  .nav-in{gap:18px}
  .facts-3{grid-template-columns:repeat(2,1fr)}
  .facts-fill{grid-template-columns:repeat(2,1fr)}
  .facts-fill dl:last-child{grid-column:auto}
  .nav-links{font-size:14.5px}
  .nav-item > a{padding:9px 10px}
}
@media (max-width:980px){
  .hero{min-height:auto}
  .hero-l{padding:58px 0 52px; max-width:none}
  .hero-bg{background-position:center}
  .hero-bg::after{background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 60%, rgba(255,255,255,.82) 100%)}
  .hero-tag{display:none}
  .flow{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pgrid,.feats-3,.next{grid-template-columns:repeat(2,1fr)}
  .split,.cta-grid{grid-template-columns:1fr; gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .spine{display:none} .shell{margin-left:0}
  .nav-in{position:relative; gap:12px}
  .nav-links{
    display:none; position:absolute; top:70px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:10px 24px 20px;
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-item > a{padding:12px 0; border-bottom:1px solid var(--line)}
  .nav-item.has-sub > a::after{display:none}
  .nav-sub{
    position:static; display:block; border:0; box-shadow:none; padding:4px 0 8px 14px;
    min-width:0; background:transparent;
  }
  .nav-sub a{padding:8px 0; border-bottom:0}
  .burger{
    display:block; margin-left:auto; width:38px; height:38px; border:1px solid var(--line);
    border-radius:3px; cursor:pointer; position:relative; background:#fff;
  }
  .burger::before,.burger::after,.burger i{
    content:''; position:absolute; left:9px; right:9px; height:2px; background:var(--ink);
  }
  .burger::before{top:12px} .burger i{top:18px} .burger::after{top:24px}
  .nav-right{margin-left:0}
  .flow,.pgrid,.feats,.feats-3,.probe,.facts,.next{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--line)}
  .sec,.dark,.cta{padding:56px 0}
  .phead{padding:44px 0 40px}
  .wrap{padding:0 20px}
  .receipt .rk{min-width:150px}
}

/* ── 밴드 반응형 ── */
@media (max-width:980px){
  .cband{grid-template-columns:1fr; gap:22px}
  .cband-steps{justify-content:flex-start}
  .phead-img{max-height:220px}
}
@media (max-width:680px){
  .cband{padding:26px 24px}
  .phead-img{max-height:170px}
}

/* ── 고객사 · 업무 범위 반응형 ── */
@media (max-width:980px){
  .clients{grid-template-columns:repeat(3,1fr)}
  .facts-3{grid-template-columns:repeat(2,1fr)}
  .scope{grid-template-columns:1fr; gap:20px}
}
@media (max-width:680px){
  .clients{grid-template-columns:repeat(2,1fr)}
  .facts-3{grid-template-columns:1fr}
}