/* 뼈대용 최소 스타일. 디자인 단계에서 교체. 팔레트: 무채 + 포인트 1색 */
:root{
  --ink:#16181c; --ink-2:#4a5058; --ink-3:#838a93;
  --rule:#e3e4e1; --paper:#fff; --desk:#f4f4f2;
  /* AESF 브랜드 — 로고 워드마크 #0d1f3f, 심볼 #0062b3 에서 추출 */
  --navy:#0d1f3f; --navy-2:#1c3560; --blue:#0062b3; --blue-soft:#eef4fa;
  --warn:#a8271f; --warn-soft:#fdf3f2; --ok:#1d6b3f; --ok-soft:#f1f7f3;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word;
}
.wrap{max-width:720px; margin:0 auto; padding:0 20px}
/* 앞부분은 600, 강조 구절만 800. 굵기 차이로도 「컨설턴트를 찾습니다」가 뜬다 */
.kicker{font-size:16px; font-weight:600; color:var(--blue); margin:0 0 var(--s2); letter-spacing:-.01em}
h1{font-size:44px; line-height:1.25; letter-spacing:-.035em; font-weight:600; margin:0 0 var(--s3)}
section.hero > .wrap > p:not(.muted){font-size:18px; line-height:1.7; color:var(--ink-2); max-width:38em}
.hero-lead{margin-bottom:var(--s2)}
.hero-lead b{color:var(--ink)}
h2{font-size:34px; line-height:1.35; letter-spacing:-.03em; font-weight:700; margin:0 0 var(--s3)}
h3{font-size:21px; line-height:1.45; letter-spacing:-.025em; font-weight:700; margin:var(--s5) 0 var(--s2)}
h3.big{font-size:26px; color:var(--navy)}   /* 카드 묶음 위 단독 소제목 — 일반 h3 보다 한 급 크게 */
h3 .sub{font-weight:500; font-size:16px; color:var(--blue)}
/* 우대사항 본문 — 회색은 "안 읽어도 되는 것"으로 읽힌다. 본문색에 가깝게 두고 마커로 구분 */
.note{font-size:16px; color:var(--ink-2); margin-bottom:var(--s2)}
.pref{list-style:none; padding:0; margin:0 0 var(--s2)}
.pref li{position:relative; padding-left:22px; color:var(--ink); margin-bottom:8px}
.pref li::before{content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px;
  border:2px solid var(--blue); border-radius:50%}
p{margin:0 0 var(--s2)}
ul,ol{margin:0 0 var(--s2); padding-left:20px}
li{margin-bottom:6px}
.muted{color:var(--ink-3); font-size:16px}
.tbd{color:var(--warn); border-bottom:1px dashed var(--warn)}

header.top{border-bottom:1px solid var(--rule); padding:12px 0; font-size:16px; color:var(--ink-2)}
header.top .wrap{display:flex; align-items:center; gap:10px}
header.top .brand{display:block; line-height:0}
header.top .brand img{height:24px; width:auto; display:block}
header.top span{padding-left:10px; border-left:1px solid var(--rule)}

.hero-photo{margin:var(--s3) 0; width:100%; height:auto; display:block}
/* 세로형·정사각 원본은 가로로 잘라 넣는다. 안 그러면 사진 하나가 한 화면을 다 먹는다 */
.hero-photo.crop{aspect-ratio:2.12; height:auto; object-fit:cover; object-position:center 40%}
section{padding:var(--s6) 0; border-bottom:1px solid var(--rule)}
section.hero{padding:var(--s7) 0 var(--s6)}
section.band{background:var(--navy); color:#fff; border:0}
section.band h2{color:#fff}
section.band .muted{color:#9fb0c8}
.ico{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* 전형 절차 — 원형 아이콘 가로 배열. 화살표 칸은 단계 사이에 일어나는 일을 적는 자리 */
.flow{list-style:none; padding:0; margin:var(--s4) 0 0; display:flex; align-items:flex-start; gap:4px}
.flow > li{flex:1 1 0; text-align:center; min-width:0}
/* 화살표는 원 중심(위에서 31px)에 맞춘다. 선이 박스 안 22px 에 있으므로 9px 내림 */
.flow > li.arrow{flex:0 0 46px; align-self:flex-start; margin-top:9px; position:relative; height:46px}
.flow > li.arrow::before{content:""; position:absolute; inset:0; top:22px;
  background:linear-gradient(90deg,var(--rule) 0 60%,transparent 60%) repeat-x; background-size:9px 2px; height:2px}
.flow > li.arrow::after{content:""; position:absolute; right:2px; top:18px; width:8px; height:8px;
  border-top:2px solid var(--ink-3); border-right:2px solid var(--ink-3); transform:rotate(45deg)}
.flow > li.arrow span{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:16px; line-height:1.45; color:var(--blue); font-weight:600}
.flow .dot{display:grid; place-items:center; width:62px; height:62px; margin:0 auto var(--s2);
  border:2px solid var(--rule); border-radius:50%; color:var(--navy)}
.flow .dot.last{background:var(--navy); border-color:var(--navy); color:#fff}
.flow .dot .ico{width:24px; height:24px}
.flow b{display:block; font-size:16px; letter-spacing:-.02em; margin-bottom:4px}
.flow .muted{display:block; font-size:16px; line-height:1.55}

@media (max-width:760px){
  /* 좁은 화면에서는 세로 타임라인으로 — 5칸 가로는 글자가 뭉갠다 */
  .flow{display:block}
  /* 원이 두 줄을 세로로 차지하고, 제목·설명이 오른쪽 칸에 쌓인다 */
  .flow > li{display:grid; grid-template-columns:62px 1fr; grid-template-rows:auto auto;
    column-gap:var(--s2); row-gap:2px; text-align:left; align-items:center}
  .flow .dot{grid-column:1; grid-row:1/3}
  .flow b{grid-column:2; grid-row:1; align-self:end}
  .flow .muted{grid-column:2; grid-row:2; align-self:start}
  .flow > li.arrow{display:block; height:auto; min-height:26px; padding:6px 0; margin-left:30px; border-left:2px dotted var(--rule)}
  .flow > li.arrow::before,.flow > li.arrow::after{display:none}
  .flow > li.arrow span{position:static; transform:none; display:block; padding:2px 0 0 16px; white-space:normal}
  .flow .dot{margin:0}
  .flow b{margin-bottom:2px}
}
details{border-top:1px solid var(--rule); padding:var(--s2) 0}
summary{font-weight:700; cursor:pointer}
/* 펼쳤을 때 질문과 답 사이 숨 쉴 틈. 답은 본문색으로 한 단계 낮춰 질문과 구분 */
details[open] summary{margin-bottom:14px}
details p{margin:0; padding-left:2px; font-size:16.5px; line-height:1.8; color:var(--ink-2)}

.btn{display:inline-block; padding:14px 28px; background:var(--navy); color:#fff; text-decoration:none; font-weight:700; border:0; border-radius:3px; font:inherit; font-size:16px; cursor:pointer}
.btn.full{width:100%; text-align:center}
.btn.light{background:#fff; color:var(--navy)}
.btn:disabled{background:#9aa0a6; cursor:not-allowed}
.sticky{position:sticky; bottom:0; z-index:100; background:rgba(255,255,255,.96); border-top:1px solid var(--rule); padding:12px 20px}
.sticky .wrap{padding:0}

form{max-width:520px}
/* 폼 질문은 본문보다 커야 스캔이 된다. 보조 설명은 줄바꿈해서 질문과 분리 */
label{display:block; font-size:17.5px; font-weight:700; letter-spacing:-.02em; line-height:1.5; margin:var(--s4) 0 8px}
label small{display:block; font-size:16px; font-weight:500; color:var(--ink-2); letter-spacing:0; margin-top:3px}
input[type=text],input[type=tel],input[type=email],input[type=url],input[type=date],select,textarea{
  width:100%; padding:13px 14px; border:1px solid #c9ccc6; border-radius:3px; font:inherit; font-size:16px; background:#fff
}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:-1px}
/* 라디오·체크 — 기본 크기는 손가락으로 못 맞춘다. 키우고 브랜드 네이비로 칠한다 */
input{accent-color:var(--navy)}
.radios label,.checks label{font-size:16px; font-weight:500; letter-spacing:-.01em; margin:0; padding:9px 0;
  display:flex; gap:11px; align-items:flex-start; cursor:pointer}
.radios input,.checks input{width:22px; height:22px; margin:1px 0 0; flex:none}
.radios label small{display:inline; font-size:14px; color:var(--ink-3); margin-left:4px}
/* 라디오로 열리는 하위 칸 묶음 — 살짝 들여쓰기만. 세로선 콜아웃은 안 쓴다 */
.sub{padding-left:34px; margin-top:6px}
/* 2차 상단 연락처 확인 줄 */
.contact{font-size:16px; color:var(--ink-2); margin:-6px 0 18px}
.contact .more{margin-left:8px}
.contact em{font-style:normal; font-size:13px; font-weight:700; color:var(--blue); margin-left:6px}
.contact-actions{display:flex; align-items:center; gap:14px; margin-top:12px}
.btn.small{padding:10px 18px; font-size:15px; width:auto}
.btn.ghost{background:#fff; color:var(--navy); border:1.5px solid var(--navy)}
.btn.ghost:hover{background:var(--blue-soft)}
/* 임시 저장 줄 — 버튼 + 살아 움직이는 상태 문구 */
/* 2차 폼 하단 고정 바 — 왼쪽 저장, 오른쪽 제출. 폼 끝에 여백을 줘 바에 가리지 않게 */
.actbar{position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--rule); box-shadow:0 -6px 20px rgba(13,31,63,.06)}
.actbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:12px; padding-bottom:12px}
.actbar .btn{flex:1; width:auto; max-width:none; padding:14px 28px; font-size:17px}
.actbar .btn.ghost{flex:0 0 auto; width:auto; max-width:none; padding:12px 22px; font-size:15px}
/* 저장 상태 알약 — 바 위 왼쪽 */
.savepill{position:fixed; left:max(24px, calc((100% - 1000px) / 2)); bottom:84px; z-index:41;
  background:#fff; border:1px solid var(--rule); border-radius:999px; padding:6px 14px;
  font-size:13.5px; color:var(--ink-3); box-shadow:0 2px 10px rgba(13,31,63,.08); max-width:min(90vw, 640px)}
.savepill.flash{color:var(--navy); border-color:var(--navy); font-weight:700}
.savepill{cursor:pointer; opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s}
.savepill.on{opacity:1; transform:none}
/* 1차·2차 폼 모두 안내 박스(.wrap 720px)와 같은 너비 — 박스·입력 칸·제출 버튼 양끝이 맞는다 */
#apply-form{max-width:none}
#full-form{padding-bottom:96px; max-width:none}
.draft-status{font-size:14.5px; color:var(--ink-3)}
.draft-status.flash{color:var(--navy); font-weight:700}
@media (max-width:640px){ .actbar .btn.ghost{flex:0 0 auto} .savepill{left:16px; font-size:12.5px} }
/* 버튼 위 툴팁 — hover·포커스에 뜬다. 모바일은 hover 가 없어 첫 1회 상태 문구가 그 역할을 한다 */
.tip{position:relative}
.tip::after{content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 10px); width:300px; padding:10px 12px;
  background:#2b2f36; color:#fff; font-size:13.5px; font-weight:500; line-height:1.55; border-radius:6px; text-align:left;
  opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; pointer-events:none; z-index:60}
.tip::before{content:""; position:absolute; left:22px; bottom:calc(100% + 4px); border:6px solid transparent; border-top-color:#2b2f36; opacity:0; transition:opacity .15s; pointer-events:none}
.tip:hover::after,.tip:focus-visible::after,.tip:hover::before,.tip:focus-visible::before{opacity:1; transform:none}
/* 저장 토스트 — 바 위로 2초 떠 있다 사라진다 */
.toast{position:fixed; left:50%; bottom:92px; transform:translate(-50%, 8px); z-index:50; display:flex; align-items:center; gap:10px;
  background:#2b2f36; color:#fff; padding:14px 22px; border-radius:6px; font-size:15.5px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none}
.toast svg{color:#4cc46a; flex:none}
.toast.on{opacity:1; transform:translate(-50%, 0)}
.sub label{margin-top:14px}
.sub label:first-child{margin-top:4px}
.hint{font-size:16px; color:var(--ink-3); margin-top:5px}
/* 직접 작성 이력서 사진 — 왼쪽 미리보기(증명사진 비율), 오른쪽 파일 선택 */
.photo-row{display:flex; align-items:center; gap:16px}
.photo-row img{width:84px; height:112px; object-fit:cover; border:1px solid var(--rule); background:#f4f5f3; flex:none}
.photo-row input[type=file]{flex:1; min-width:0}
.hint.count{font-size:14px; text-align:right}
/* 2차 기본 정보 — 생년월일·성별 나란히 */
.bio{display:grid; grid-template-columns:1fr; gap:0}   /* 생년월일 아래 성별 — 한 줄에 나란히 두면 눈이 갈린다 */
.bio > div > label:first-child{margin-top:var(--s3)}
.radios.inline{display:flex; gap:22px}
.radios.inline label{padding:11px 0}

.hint.count.over{color:var(--navy); font-weight:700}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{margin-top:var(--s2); padding:14px 16px; font-size:16px; display:none}
.msg.show{display:block}
.msg.err{background:var(--warn-soft); color:var(--warn)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.panel{padding:var(--s3); border:1px solid var(--rule); margin:var(--s3) 0}
/* 1차 폼 안내 — 왜 두 단계로 나눴는지가 여기서 안 읽히면 "왜 두 번 시키지"가 된다 */
.lead-panel{background:var(--blue-soft); border-color:var(--navy)}
.lead-panel p{font-size:16px; line-height:1.7; color:var(--ink); margin-bottom:10px}
.lead-panel p:last-child{margin-bottom:0}
.panel.must{background:var(--blue-soft); border-color:var(--navy); margin:12px 0 0}
.panel.must .t{font-size:16px; font-weight:700; color:var(--navy); margin:0 0 8px}
.panel.must ul{margin:0; padding-left:18px}
.panel.must li{font-size:15.5px; line-height:1.65; color:var(--ink-2); margin-bottom:4px}
.panel.must li b{color:var(--ink); font-weight:700}
.lead-panel .why{font-size:16px; color:var(--ink-2); padding-top:10px; border-top:1px solid #cfe0ef}

/* 헤드라인 강조 — 형광펜 한 줄. 구절이 쪼개지지 않게 nowrap */
/* 형광펜이 왼쪽에서 오른쪽으로 그어진다. 두께는 본문과 동일 — 색만으로 강조 */
/* 기본이 100% — 애니메이션이 안 돌아도 밑줄은 그어져 있다. both 로 대기 중엔 0% */
h1 .mark{font-style:normal; font-weight:inherit; white-space:nowrap;
  background-image:linear-gradient(transparent 56%, rgba(0,98,179,.22) 56%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  animation:mark-in .75s cubic-bezier(.22,.61,.36,1) .45s both}
@keyframes mark-in{from{background-size:0% 100%} to{background-size:100% 100%}}
/* 모션 민감 사용자에게는 애니메이션 없이 결과만 */
@media (prefers-reduced-motion:reduce){
  h1 .mark{animation:none; background-size:100% 100%}
}

/* 결핍을 되짚는 구간 — 목록 없이 문장으로만. 앞뒤 섹션과 리듬을 끊는다 */
.pitch{background:var(--blue-soft); border-bottom:0}
.pitch h2{font-size:34px; margin-bottom:var(--s3)}
.pitch .lead{font-size:17.5px; line-height:1.8; color:var(--ink); max-width:34em}
/* S2 「~라면」 카드 두 장. 사진이 위, 글이 아래. 데스크톱 2열, 모바일 1열 */
.reasons{display:grid; grid-template-columns:1fr; gap:var(--s3)}
.reason{background:#fff; border:1px solid #cfdce8; overflow:hidden}
.reason img{display:block; width:100%; height:auto; aspect-ratio:2.12/1; object-fit:cover}   /* 카드 전 히어로 사진과 같은 비율 */   /* height:auto 없으면 height 속성(565)이 그대로 먹어 세로로 늘어진다 */
.reason .body{padding:var(--s3)}
.reason h3{margin-top:0}
.reason .lead{font-size:17px; max-width:34em}
.reason .lead:last-child{margin-bottom:0}
@media(max-width:760px){.reason .body{padding:var(--s2)} .reason img{aspect-ratio:16/10}}
.pitch .lead b{font-weight:700; color:var(--navy)}
.pitch .aside{margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid #cfdce8;
  font-size:16px; color:var(--ink-2); max-width:34em}

.detail{font-size:16px; color:#9fb0c8; margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--navy-2)}

/* ── 와이어프레임 구조용 ─────────────────────────────────── */

/* S1 태그 · 채용 개요표 — 공고로 읽히게 하는 장치 */
.tags{display:flex; gap:6px; flex-wrap:wrap; margin:var(--s2) 0 0}
.tags span{border:1px solid var(--navy); color:var(--navy); padding:3px 12px; font-size:13px; font-weight:600; border-radius:2px}
.sr-head{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
/* 채용 개요 — 가로 선 표. 라벨 앞 아이콘이 훑는 속도를 올린다 */
.overview{width:100%; border-collapse:collapse; font-size:16px; margin:var(--s3) 0}
/* 라벨은 소제목처럼 읽혀야 한다 — 아이콘과 간격을 벌리고 색을 본문색으로 */
.overview th{width:150px; text-align:left; font-weight:700; color:var(--ink); font-size:16px;
  padding:14px 18px 14px 0; border-bottom:1px solid var(--rule); vertical-align:top; white-space:nowrap}
.overview th .ico{width:16px; height:16px; margin-right:10px; vertical-align:-3px; color:var(--navy)}
.overview td{padding:13px 0; border-bottom:1px solid var(--rule)}

/* 카드 그리드 — S3(5) · S4(4) · S6(8) 공용 */
.cards{display:grid; gap:var(--s2); margin:var(--s3) 0}
.cards.c2{grid-template-columns:1fr 1fr}
.cards.c3{grid-template-columns:repeat(3,1fr)}
/* 홀수 장이 남으면 마지막 카드를 가로로 펴 오른쪽 구멍을 막는다(퇴사자 카드 삭제로 S4 가 3장이 됨) */
.cards.c2>:last-child:nth-child(odd){grid-column:1 / -1}
/* 가로로 편 카드는 이미지가 height:auto 라 2배로 커진다 — 2열 카드와 같은 높이로 잘라 맞춘다 */
.cards.c2>:last-child:nth-child(odd) .card-img{height:150px; object-fit:cover}
.card{border:1px solid var(--rule); padding:var(--s2) var(--s2) calc(var(--s2) + 2px)}
.card>b{display:flex; align-items:center; gap:8px; font-size:19px; letter-spacing:-.02em; margin-bottom:8px}
.card span{display:block; font-size:16px; line-height:1.72; color:var(--ink-2)}
.card span b{font-weight:700; color:var(--ink)}
/* 숫자가 든 카드만 무게를 준다 */
.card.hi{border:1.5px solid var(--navy); background:var(--blue-soft)}
.cards.duty .card{background:var(--blue-soft); border-color:transparent}
.cards.duty .card>b{color:var(--navy)}
section.band .card{border-color:var(--navy-2)}
section.band .card>b{color:#fff}
section.band .card span{color:#9fb0c8}

.lead-p{font-size:16.5px; line-height:1.8; color:var(--ink-2); max-width:40em}
section.band .lead-p{color:#b8c4d4}

/* S5 로고 블록 — 두 회사가 한 그룹임을 보여주는 신뢰 장치 */
.logos{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin:var(--s4) 0 var(--s2)}
.logobox{border:1px solid var(--navy-2); padding:var(--s3) var(--s2); text-align:center}
.logobox img{height:44px; width:auto; margin:0 auto var(--s2); display:block}
.logobox svg{height:80px; margin:0 auto var(--s2); display:block}
.logobox .lg-ph{height:26px; display:flex; align-items:center; justify-content:center;
  font-size:16px; margin-bottom:var(--s2)}
.logobox b{display:block; font-size:16px; color:#fff; margin-bottom:3px}
.logobox span{font-size:16px; color:#9fb0c8; letter-spacing:.06em}

.pref.light li{color:var(--ink-2)}

@media (max-width:760px){
  .cards.c2,.cards.c3{grid-template-columns:1fr}
  .logos{grid-template-columns:1fr}
.overview{font-size:15px}
.overview th{width:112px; font-size:14px; padding-right:12px}
  .overview th .ico{width:15px; height:15px; margin-right:7px}
}

footer{padding:var(--s4) 0; font-size:16px; color:var(--ink-3); border-top:1px solid var(--rule)}
footer p{margin:0 0 4px; line-height:1.6}
footer b{color:var(--ink-2); font-weight:600}
footer a{color:inherit; text-decoration:none}
footer .copy{margin-top:var(--s2)}

@media (max-width:640px){
  h1{font-size:32px; line-height:1.28}
  h2{font-size:27px} .pitch h2{font-size:27px}
  h3{font-size:19px; margin-top:var(--s4)}
  .card>b{font-size:17.5px}
  label{font-size:16.5px}
  section.hero > .wrap > p:not(.muted){font-size:16.5px}
  section{padding:var(--s5) 0} section.hero{padding:var(--s6) 0 var(--s5)}
}

/* 사진을 물린 카드. 카드 패딩 밖으로 빼서 상단 full-bleed 로 붙인다 */
.card.ph{padding-top:0; overflow:hidden}
.card-img{display:block; width:calc(100% + var(--s2) * 2); height:auto; margin:0 calc(var(--s2) * -1) var(--s2)}

/* 브랜드샷 — 사진 위에 네이비 오버레이를 깔고 로고를 얹는다 */
.brandshot{position:relative; margin:var(--s3) 0; overflow:hidden}
.brandshot img{display:block; width:100%; height:auto}
.brandshot::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,26,48,.10) 0%, rgba(11,26,48,.62) 100%)}
.bt-logo{width:auto; aspect-ratio:3280/2350; color:#fff}
.brandshot .mark{position:absolute; z-index:1; left:50%; bottom:var(--s3);
  transform:translateX(-50%); height:74px}
@media (max-width:640px){ .brandshot .mark{height:52px; bottom:var(--s2)} }

/* 로고 박스 — 두 회사를 각자 브랜드 색으로 갈라놓는다. 밴드 배경(#0d1f3f)과 셋 다 다른 톤 */
.logobox.aesf{background:var(--paper); border-color:var(--paper)}
.logobox.aesf b{color:var(--navy)}
.logobox.aesf span{color:var(--ink-2)}
.logobox.bt{background:#1a3068; border-color:#33508f}   /* 블루타이거 자체 네이비 */
/* 브랜드샷 로고가 이미지일 때 — 위 .brandshot img 의 width:100% 를 되돌린다 */
.brandshot img.mark{width:auto; height:64px}
@media (max-width:640px){ .brandshot img.mark{height:44px} }
/* 본문 안 강조 문장 — .pitch 밖에서도 같은 급으로 읽히게 */
.say{font-size:19.5px; letter-spacing:-.02em; line-height:1.6}

/* S5 규모 수치 */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--navy-2); border:1px solid var(--navy-2); margin:var(--s3) 0}
.stats>div{background:var(--paper); padding:24px 20px}
.stats dt{font-size:16px; font-weight:600; color:var(--ink); margin-bottom:8px}
.stats dd{margin:0; font-size:40px; font-weight:700; line-height:1; color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stats dd{white-space:nowrap}
.stats dd small{font-size:14px; font-weight:500; margin-left:2px; color:var(--ink-2)}
@media(max-width:640px){
  .stats{grid-template-columns:1fr}
  .stats>div{display:flex; align-items:baseline; justify-content:space-between; padding:16px 20px}
  .stats dt{margin:0}
  .stats dd{font-size:30px}
}



/* S6 사무실 슬라이더 — 한 장씩, 스크롤 스냅 */
.slider{position:relative; margin:var(--s3) 0}
.slider .track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.slider .track::-webkit-scrollbar{display:none}
.slider figure{flex:0 0 100%; margin:0; position:relative; scroll-snap-align:start}
.slider img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--desk)}
.slider figcaption{position:absolute; left:0; bottom:0; padding:8px 14px; font-size:16px; color:#fff; background:var(--navy)}
.sl-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; border-radius:50%; background:var(--navy); color:#fff; font-size:32px; line-height:1; padding-bottom:5px; cursor:pointer}
.sl-nav.prev{left:0; transform:translate(-50%,-50%)} .sl-nav.next{right:0; transform:translate(50%,-50%)}
.sl-nav:hover{background:var(--blue)}
.dots{display:flex; justify-content:center; gap:8px; margin-top:12px}
.dots button{width:8px; height:8px; border-radius:50%; border:0; background:var(--rule); padding:0; cursor:pointer}
.dots button.on{background:var(--navy)}
@media (max-width:640px){
  .slider img{aspect-ratio:4/3}
  .sl-nav{width:36px; height:36px; font-size:24px}
}

/* 개인정보 팝업 — 네이티브 dialog */
.dlg{border:0; padding:0; width:min(92vw,640px); max-height:86vh; background:var(--paper); color:var(--ink)}
.dlg::backdrop{background:rgba(13,31,63,.6)}
.dlg-in{padding:var(--s4) var(--s3)}
.dlg h3{font-size:21px; margin:0 0 var(--s2)}
.dlg h4{font-size:16px; margin:var(--s3) 0 var(--s1); color:var(--navy)}
.dlg p,.dlg li{font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 var(--s1)}
.dlg ul{margin:0; padding-left:18px}
.dlg-t{width:100%; border-collapse:collapse; font-size:16px; margin:var(--s1) 0}
.dlg-t th{width:110px; text-align:left; vertical-align:top; padding:8px 10px 8px 0; color:var(--ink); font-weight:700; border-top:1px solid var(--rule)}
.dlg-t td{padding:8px 0; line-height:1.6; color:var(--ink-2); border-top:1px solid var(--rule)}
.dlg-note{font-size:16px; color:var(--ink-3)}
.dlg form{margin-top:var(--s3)}
.dlg .btn{width:100%}
.more{background:none; border:0; padding:0; margin-left:6px; color:var(--blue); font:inherit; font-size:16px; text-decoration:underline; cursor:pointer}
footer .more{margin-left:0}