/* 뼈대용 최소 스타일. 디자인 단계에서 교체. 팔레트: 무채 + 포인트 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. 굵기 차이로도 「컨설턴트를 찾습니다」가 뜬다 */
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}
h2{font-size:22px; line-height:1.4; letter-spacing:-.025em; margin:0 0 var(--s2)}
h3{font-size:17px; margin:var(--s4) 0 var(--s1)}
h3 .sub{font-weight:500; font-size:14px; color:var(--blue)}
/* 우대사항 본문 — 회색은 "안 읽어도 되는 것"으로 읽힌다. 본문색에 가깝게 두고 마커로 구분 */
.note{font-size:14.5px; 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:14px}
.tbd{color:var(--warn); border-bottom:1px dashed var(--warn)}

header.top{border-bottom:1px solid var(--rule); padding:12px 0; font-size:14px; 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)}

/* 원본이 2.12:1 라 비율을 강제하지 않는다 — 자르지 않고 가로로 길게 */
.hero-photo{margin:var(--s3) 0; width:100%; height:auto; display:block}
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}
.terms{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s2); margin:var(--s3) 0}
.terms div{padding:var(--s2); border:1px solid var(--rule)}
.terms b{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-3); font-weight:500; margin-bottom:2px}
/* 경쟁사 11곳 중 0곳만 주는 조건이라 카드 하나만 무게를 준다 */
.terms div.hi{border:1.5px solid var(--navy); background:var(--blue-soft)}
.terms div.hi b{color:var(--navy-2)}
.terms small{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.ico{width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.steps{counter-reset:s; list-style:none; padding:0; margin:var(--s3) 0}
.steps li{counter-increment:s; display:grid; grid-template-columns:36px 1fr; gap:var(--s2); padding:var(--s2) 0; border-top:1px solid var(--rule)}
.steps li::before{content:counter(s); font-weight:700; color:var(--ink-3)}
.steps b{display:block}
.steps .muted{display:block}
/* 단계 사이에 무슨 일이 일어나는지 — 채용에서 제일 큰 불안은 "언제 연락 오나" 다 */
.steps .gap{display:block; margin-top:6px; font-size:13px; color:var(--ink-3); padding-left:12px; border-left:2px solid var(--rule)}
details{border-top:1px solid var(--rule); padding:var(--s2) 0}
summary{font-weight:700; cursor:pointer}

.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; 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:14px; font-weight:700; margin:var(--s3) 0 6px}
label small{font-weight:500; color:var(--ink-3)}
input[type=text],input[type=tel],input[type=email],input[type=url],input[type=date],select,textarea{
  width:100%; padding:11px 13px; border:1px solid #c9ccc6; border-radius:3px; font:inherit; font-size:15px; background:#fff
}
textarea{min-height:120px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:-1px}
.radios label,.checks label{font-weight:500; margin:6px 0; display:flex; gap:8px; align-items:flex-start}
.radios input,.checks input{margin-top:5px}
.hint{font-size:13px; color:var(--ink-3); margin-top:5px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{margin-top:var(--s2); padding:14px 16px; font-size:14.5px; 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}

/* 헤드라인 강조 — 형광펜 한 줄. 구절이 쪼개지지 않게 nowrap */
/* 형광펜이 왼쪽에서 오른쪽으로 그어진다. 두께는 본문과 동일 — 색만으로 강조 */
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:0% 100%;
  animation:mark-in .75s cubic-bezier(.22,.61,.36,1) .45s forwards}
@keyframes mark-in{to{background-size:100% 100%}}
/* 모션 민감 사용자에게는 애니메이션 없이 결과만 */
@media (prefers-reduced-motion:reduce){
  h1 .mark{animation:none; background-size:100% 100%}
}

/* 복리후생 — 마지막 카드만 가로로 넓게. 균일 그리드 반복을 피한다 */
.perkgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s1); margin:var(--s3) 0}
.perkcard{margin:0; background:var(--navy-2); overflow:hidden}
.perkcard.wide{grid-column:span 4}
.perkcard img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover}
.perkcard.wide img{aspect-ratio:16/5}
.perkcard figcaption{padding:12px 14px 14px; font-size:14px; line-height:1.5}
.perkcard figcaption b{display:block; color:#fff; font-size:14.5px; margin-top:4px}
.perkcard figcaption .ico{color:#9fb0c8}
.perkcard figcaption .tbd{display:block; font-size:12px; margin-top:4px}
.detail{font-size:14px; color:#9fb0c8; margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--navy-2)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin:var(--s3) 0}
.stats div{border-top:2px solid var(--navy); padding-top:var(--s1)}
.stats b{display:block; font-size:26px; letter-spacing:-.03em; line-height:1.2}
.stats span{font-size:13px; color:var(--ink-3)}
.gallery{display:grid; grid-template-columns:2fr 1fr; gap:var(--s1); margin:var(--s3) 0}
.gallery figure{margin:0}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3}
.gallery figcaption{font-size:12px; color:var(--ink-3); margin-top:4px}
.person{display:grid; grid-template-columns:96px 1fr; gap:var(--s2); align-items:start; margin:var(--s3) 0; padding:var(--s3) 0; border-top:1px solid var(--rule)}
.person img{width:96px; height:96px; object-fit:cover; border-radius:2px}
.person p{margin-bottom:6px}
.team{margin:var(--s3) 0 0}
.team img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.team figcaption{font-size:14px; color:var(--ink-3); margin-top:var(--s1)}
@media (max-width:640px){
  .perkgrid{grid-template-columns:1fr 1fr}
  .perkcard.wide{grid-column:span 2}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:first-child,.gallery figure:last-child{grid-column:span 2; grid-row:auto}
  .stats b{font-size:22px}
}
footer{padding:var(--s4) 0; font-size:13px; color:var(--ink-3)}

@media (max-width:640px){
  h1{font-size:32px; line-height:1.28} h2{font-size:20px}
  section.hero > .wrap > p:not(.muted){font-size:16.5px}
  section{padding:var(--s5) 0} section.hero{padding:var(--s6) 0 var(--s5)}
}