@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   로엔디앤씨 채용페이지 — 스타일시트
   0726 분리: 원래 03_채용페이지_recruit_v3.html 안에 인라인으로 있던 CSS.
   ※ 이 파일은 03_채용페이지_recruit_v3.html · recruit.js · assets/ 와 한 세트다.
      배포할 때 넷을 같이 올려야 한다.
   ══════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
/* 폴백에 'Malgun Gothic' 만 두면 이 페이지가 강조에 쓰는 weight 800 이 없어
   폰트 스왑 전(그리고 CDN 차단 환경에서는 영구히) 전부 합성 볼드로 그려진다.
   → 800 을 가진 Apple SD Gothic Neo · Noto Sans KR 을 앞에 세운다. */
body{width:100%;background:#0B0A09;color:#F5F1E8;font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;font-size:25px;line-height:1.62;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.sec{padding:100px 56px;position:relative;overflow:hidden}
.sec+.sec{border-top:1px solid #221F1A}
.kick{font-size:21px;font-weight:800;letter-spacing:.16em;color:#E2C57E;margin-bottom:22px}
h2{font-size:47px;line-height:1.26;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
h2 .ghost{color:#7E766A}
.lede{font-size:26px;color:#B5AC9C}
.lede b{color:#F5F1E8}
.g{color:#E2C57E}
.hero{position:relative;text-align:center;padding:118px 56px 104px;overflow:hidden}
.grid-tex{position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(243,245,247,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(243,245,247,.045) 1px,transparent 1px);
background-size:54px 54px;
-webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 12%,#000,transparent 74%)}
.hero::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-46%;height:70%;background:radial-gradient(ellipse at center,rgba(226,197,126,.11),transparent 65%);pointer-events:none}
.hero>*{position:relative}
.hero .logo{width:332px;margin:0 auto 46px}
.hero h1{font-size:92px;line-height:1.14;font-weight:900;letter-spacing:-.03em;margin-bottom:34px}
.badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:64px}
.badge{font-size:22px;font-weight:800;padding:12px 26px;border-radius:999px;border:1px solid #3B3428;color:#E8D6B3}
.badge.fill{background:#E2C57E;border-color:#E2C57E;color:#0B0A09}
.glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(226,197,126,.07),transparent 65%);pointer-events:none}
.pay-rules{margin-top:30px;display:grid;gap:16px;list-style:none}
.pay-rules li{display:flex;gap:16px;align-items:baseline;font-size:24px;color:#B5AC9C}
.pay-rules .ok{color:#E2C57E;font-weight:800;flex:none}
.pay-rules b{color:#F5F1E8}
.shot{margin-top:40px;background:#151310;border:1px solid #2A2620;border-radius:22px;overflow:hidden}
.shot .bar{display:flex;gap:7px;padding:16px 18px;border-bottom:1px solid #2A2620;background:rgba(243,245,247,.03)}
.shot .bar i{width:13px;height:13px;border-radius:50%;background:#F87171;opacity:.75}
.shot .bar i:nth-child(2){background:#FBBF24}
.shot .bar i:nth-child(3){background:#E2C57E}
.shot img{width:100%;border-bottom:1px solid #2A2620}
.shot figcaption{padding:24px 28px;font-size:22.5px;color:#B5AC9C;line-height:1.6}
.shot figcaption b{display:block;color:#F5F1E8;font-size:25px;margin-bottom:4px}
.cp-note{margin-top:18px;font-size:19px;color:#7E766A}
.fair{margin-top:30px;background:rgba(226,197,126,.09);border:1px solid rgba(226,197,126,.3);border-radius:16px;padding:28px 30px;font-size:24px;color:#B5AC9C}
.fair b{color:#F5F1E8}
.proof{margin-top:44px;background:#151310;border:1px solid rgba(226,197,126,.35);border-radius:22px;padding:34px 34px 30px}
.proof-head{font-size:25px;font-weight:800;margin-bottom:6px}
.proof-sub{font-size:22px;color:#B5AC9C;margin-bottom:26px}
/* 0724 : grid 기본값(stretch) 때문에 좌측 두 박스가 골드 박스 높이까지 늘어나
   숫자 아래에 빈 공간이 크게 남았다. 내용 높이대로 두고 세로 가운데 정렬 —
   골드 박스만 크게 남아 '강조' 의도가 그대로 살아난다. */
.proof-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}
.pstat{background:rgba(11,10,9,.55);border:1px solid #2A2620;border-radius:16px;padding:24px 14px;text-align:center}
.pstat b{display:block;font-size:44px;font-weight:800;color:#E2C57E;letter-spacing:-.02em;line-height:1.1}
.pstat span{display:block;font-size:20px;color:#B5AC9C;margin-top:8px}
/* 6주 강조 : 세 번째 통계 박스 (골드 채움) — 다른 두 박스보다 크게, 숫자도 sibling(56/62px)보다 크게. 1000px 분기점 대응 값은 아래 데스크톱 미디어쿼리에서 재지정.
   지속 효과는 텍스트를 절대 안 사라지게(글자색은 항상 고정) 박스 위 광택 스윕 + 글자 뒤 글로우 펄스로 구현 — background-clip:text 방식은 헤드리스 렌더 검증 중 글자가 통째로 안 보이는 버그가 확인돼 폐기 */
.pstat.spot{background:linear-gradient(140deg,#EBD08C 0%,#E2C57E 48%,#D4B061 100%);border:none;position:relative;overflow:hidden;padding:28px 16px 24px!important;animation:heroGlow 2.6s ease-in-out infinite}
.sec.invert .pstat.spot{background:linear-gradient(140deg,#EBD08C 0%,#E2C57E 48%,#D4B061 100%);border:none}
.pstat.spot::after{content:"";position:absolute;top:-30%;left:-70%;width:45%;height:180%;
  background:linear-gradient(75deg,transparent 20%,rgba(255,255,255,.65) 48%,rgba(255,255,255,.15) 58%,transparent 78%);
  transform:rotate(0deg);pointer-events:none;z-index:0;animation:heroSweep 3.4s ease-in-out infinite}
/* 0724R2 : font-size 를 이 고특이도 선택자에서 빼낸다.
   `.sec.invert .pstat.spot b`(0,4,1)+!important 가 데스크톱 블록의
   `.pstat.spot b`(0,3,1)+!important 를 이겨서, 데스크톱에서 38px 로 지정해둔
   숫자가 실제로는 60px 로 렌더되고 있었다(형제 숫자는 40px). 크기는
   아래 max-width:999px 블록(모바일)과 데스크톱 블록이 각자 맡는다. */
.pstat.spot b,.sec.invert .pstat.spot b{
  position:relative;z-index:1;white-space:nowrap;line-height:1.1;font-weight:800;
  color:#1A140A;animation:heroTextGlow 2.6s ease-in-out infinite;
}
.pstat.spot span,.sec.invert .pstat.spot span{position:relative;z-index:1;color:#5A4416;font-weight:700;margin-top:8px}
@media (max-width:999px){   /* 모바일 · 잡코리아 세로 렌더 : 기존 값 그대로 보존 */
  .pstat.spot b,.sec.invert .pstat.spot b{font-size:60px}
  .pstat.spot span,.sec.invert .pstat.spot span{font-size:18px;margin-top:8px}
}
@keyframes heroSweep{0%,8%{left:-70%}55%,100%{left:130%}}
@keyframes heroTextGlow{0%,100%{text-shadow:0 1px 0 rgba(255,255,255,0)}50%{text-shadow:0 1px 16px rgba(255,255,255,.75),0 0 26px rgba(255,244,214,.6)}}
@keyframes heroGlow{0%,100%{box-shadow:0 8px 22px rgba(133,100,54,.30)}50%{box-shadow:0 8px 30px rgba(226,197,126,.62)}}
@media (prefers-reduced-motion:reduce){.pstat.spot,.pstat.spot::after,.pstat.spot b{animation:none}}
.ig-shot{max-width:460px;margin:28px auto 0}
.proof-note{margin-top:22px;font-size:20px;color:#7E766A;line-height:1.6}
.proof-note b{color:#B5AC9C}
.b3{margin-top:16px;display:grid;gap:14px}
.b3card{background:#151310;border:1px solid #2A2620;border-radius:22px;padding:30px 32px 26px}
.b3card .bno{font-size:19px;font-weight:800;letter-spacing:.14em;color:#E2C57E;margin-bottom:10px}
.b3card h3{font-size:28px;font-weight:800;margin-bottom:8px}
.b3card p{font-size:23px;color:#B5AC9C}
.b3card p b{color:#F5F1E8}
.shot .bar .url{margin-left:12px;font-size:19px;color:#B5AC9C;background:rgba(243,245,247,.05);border:1px solid #2A2620;border-radius:999px;padding:4px 18px;letter-spacing:.02em}
/* 0725 : 개인 홈페이지 4화면 그리드 (한 장 -> 2x2 네 박스) */
.hp-gal{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp-gal figure{margin:0;background:#151310;border:1px solid #2A2620;border-radius:16px;overflow:hidden}
.hp-gal .bar{display:flex;align-items:center;gap:6px;padding:12px 15px;border-bottom:1px solid #2A2620;background:rgba(243,245,247,.03)}
.hp-gal .bar i{width:10px;height:10px;border-radius:50%;background:#F87171;opacity:.75}
.hp-gal .bar i:nth-child(2){background:#FBBF24}
.hp-gal .bar i:nth-child(3){background:#E2C57E}
.hp-gal .bar .tag{margin-left:auto;font-size:16.5px;font-weight:700;color:#B5AC9C;letter-spacing:.01em}
.hp-gal .win{aspect-ratio:4/3;overflow:hidden;background:#0B0A09}
.hp-gal .win img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.hp-gal figure:hover .win img{transform:scale(1.05)}
.hp-cap{margin-top:20px;font-size:22.5px;color:#B5AC9C;line-height:1.6}
.hp-cap b{display:block;color:#E2C57E;font-size:24px;margin-bottom:5px}
.sec.invert .hp-gal figure{background:#FFFDF8;border-color:#D9D2C4}
.sec.invert .hp-gal .bar{background:#EAE3D5;border-bottom-color:#D9D2C4}
.sec.invert .hp-gal .bar i{background:#C9C0AE;opacity:1}
.sec.invert .hp-gal .bar .tag{color:#856436}
.sec.invert .hp-gal .win{background:#EAE3D5}
.sec.invert .hp-cap{color:#5A5347}
.sec.invert .hp-cap b{color:#856436}
@media (hover:none){.hp-gal figure:hover .win img{transform:none}}
/* 0725 : 블로그 원고 + 뉴스 브리핑 2단 짝 */
.pair2{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair2 figure{margin:0;background:#151310;border:1px solid #2A2620;border-radius:16px;overflow:hidden}
.pair2 .bar{display:flex;align-items:center;gap:6px;padding:12px 15px;border-bottom:1px solid #2A2620;background:rgba(243,245,247,.03)}
.pair2 .bar i{width:10px;height:10px;border-radius:50%;background:#F87171;opacity:.75}
.pair2 .bar i:nth-child(2){background:#FBBF24}
.pair2 .bar i:nth-child(3){background:#E2C57E}
.pair2 .bar .url{margin-left:auto;font-size:16px;color:#B5AC9C;background:rgba(243,245,247,.05);border:1px solid #2A2620;border-radius:999px;padding:3px 12px}
.pair2 .win{aspect-ratio:5/6;overflow:hidden;background:#0B0A09}
.pair2 .win img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pair2 figcaption{padding:16px 18px 18px;font-size:19.5px;color:#B5AC9C;line-height:1.55}
.pair2 figcaption b{display:block;color:#F5F1E8;font-size:21px;margin-bottom:4px}
.sec.invert .pair2 figure{background:#FFFDF8;border-color:#D9D2C4}
.sec.invert .pair2 .bar{background:#EAE3D5;border-bottom-color:#D9D2C4}
.sec.invert .pair2 .bar i{background:#C9C0AE;opacity:1}
.sec.invert .pair2 .bar .url{background:#FFFDF8;border-color:#D9D2C4;color:#5A5347}
.sec.invert .pair2 .win{background:#EAE3D5}
.sec.invert .pair2 figcaption{color:#5A5347}
.sec.invert .pair2 figcaption b{color:#1A1712}
.who{margin-top:48px;display:grid;grid-template-columns:300px 1fr;gap:18px}
.who-photo{position:relative;border-radius:22px;overflow:hidden;border:1px solid #3B3428;background:#151310}
.who-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
/* 0724R2 : 그라디언트가 .95 에 닿는 지점이 박스 최하단뿐이라, 글자가 실제로
   놓이는 구간의 유효 배경은 사진 픽셀에 가까웠다(밝은 사진 위에서 3.6:1 까지 하락
   — 페이지 유일의 소형 텍스트 AA 실패). 글자 구간에 불투명 바닥값을 깐다. */
.who-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 20px 18px;
  background:linear-gradient(transparent 0%,rgba(8,9,11,.72) 42%,rgba(8,9,11,.93) 68%,rgba(8,9,11,.97) 100%);
  font-size:20px;color:#B5AC9C;line-height:1.5}
.who-photo figcaption b{display:block;color:#F5F1E8;font-size:23px;margin-bottom:2px}
.who-card{background:#151310;border:1px solid #2A2620;border-radius:22px;padding:32px 32px 28px}
.who-card p{font-size:23px;color:#B5AC9C}
.who-card p b{color:#F5F1E8}
.tr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.tr-chip{font-size:20px;font-weight:700;padding:9px 18px;border-radius:999px;border:1px solid #3B3428;color:#B5AC9C}
.promise{margin-top:18px;background:linear-gradient(160deg,rgba(226,197,126,.13),rgba(226,197,126,.03));border:1px solid rgba(226,197,126,.35);border-radius:22px;padding:34px 34px 30px}
.promise h3{font-size:29px;font-weight:800;margin-bottom:18px}
.promise ul{list-style:none;display:grid;gap:15px}
.promise li{display:flex;gap:16px;align-items:baseline;font-size:23.5px;color:#B5AC9C}
.promise .ok{color:#E2C57E;font-weight:800;flex:none}
.promise b{color:#F5F1E8}
.sig{margin-top:20px;font-size:22px;color:#F5F1E8;font-weight:700}
.site-gal{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:14px}
.site-gal figure{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid #2A2620;background:#151310}
.site-gal img{width:100%;height:100%;object-fit:cover;display:block}
.site-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;font-size:19px;font-weight:600;color:#B5AC9C;background:linear-gradient(transparent,rgba(11,10,9,.92))}
.site-gal figcaption b{color:#F5F1E8}
.site-gal .feat{grid-column:span 2;grid-row:span 2}
.site-gal .feat figcaption{font-size:23px;color:#F5F1E8;padding-top:54px}
.site-gal .feat figcaption b{color:#E2C57E}
.perf-note{margin-top:26px;font-size:19px;color:#7E766A;text-align:center}
.award{margin-top:26px;display:flex;align-items:center;gap:20px;background:linear-gradient(160deg,rgba(226,197,126,.12),rgba(226,197,126,.03));border:1px solid rgba(226,197,126,.35);border-radius:18px;padding:24px 28px}
.award-mark{flex:none;width:78px;height:78px;border-radius:50%;border:2px solid #E2C57E;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:800;color:#E2C57E;letter-spacing:-.02em}
.award-txt{font-size:21px;color:#B5AC9C;line-height:1.5}
.award-txt b{display:block;font-size:26px;color:#F5F1E8;margin-bottom:5px}
.wf-label{display:inline-block;margin:44px 0 18px;font-size:23px;font-weight:800;color:#E8D6B3;background:rgba(226,197,126,.1);border:1px solid rgba(226,197,126,.3);border-radius:999px;padding:10px 24px}
.ph2{display:grid;grid-template-columns:1fr 1.03fr;gap:14px}
.ph2 img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:1px solid #2A2620}
.ph3{margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.ph3 figure{background:#151310;border:1px solid #2A2620;border-radius:18px;overflow:hidden}
.ph3 img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ph3 figcaption{padding:16px 14px;text-align:center;font-size:20px;color:#B5AC9C;line-height:1.45}
.ph3 figcaption b{display:block;color:#F5F1E8;font-size:22px}
.intv{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.intv img{width:100%;border-radius:18px;border:1px solid #2A2620}
.intv-cap{margin-top:18px;font-size:22px;color:#B5AC9C;text-align:center}
.intv-cap b{color:#E2C57E}
.faq{margin-top:48px;display:grid;gap:14px}
.qa{background:#151310;border:1px solid #2A2620;border-radius:18px;padding:30px 32px}
.qa .q{display:flex;gap:16px;align-items:baseline;font-size:27px;font-weight:800;margin-bottom:12px}
.qa .q .qn{flex:none;color:#E2C57E}
.qa .a{font-size:23.5px;color:#B5AC9C}
.qa .a b{color:#F5F1E8}
.apply{margin-top:48px;background:#151310;border:1px solid #3B3428;border-radius:22px;overflow:hidden}
.ap-row{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid #2A2620}
.ap-row:last-child{border-bottom:none}
.ap-row .pk{padding:28px 28px;font-size:22px;font-weight:800;color:#B5AC9C;background:rgba(243,245,247,.03)}
.ap-row .pv{padding:28px 30px 28px 4px;font-size:24px}
.ap-row .pv b{color:#E2C57E}
.ap-row .pv .big{font-size:31px;font-weight:800;color:#F5F1E8;letter-spacing:.01em}
.steps{margin-top:34px;display:grid;gap:0}
.step{display:flex;gap:22px;align-items:flex-start;background:#151310;border:1px solid #2A2620;border-radius:18px;padding:26px 30px}
.step .no{flex:none;width:52px;height:52px;border-radius:50%;background:#E2C57E;color:#0B0A09;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.step h3{font-size:26px;font-weight:800}
.step p{font-size:22px;color:#B5AC9C}
.st-arr{text-align:center;color:#7E766A;font-weight:800;font-size:30px;padding:6px 0}
.chans{margin-top:40px;display:grid;gap:12px}
.chan{display:flex;align-items:center;gap:18px;background:#151310;border:1px solid #2A2620;border-radius:999px;padding:20px 32px}
.chan .ic{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#0B0A09}
.chan .nm{font-size:24px;font-weight:700;color:#B5AC9C;width:220px}
.chan .id{font-size:26px;font-weight:800;color:#F5F1E8;letter-spacing:.02em}
.final{padding:130px 56px 96px;text-align:center;position:relative;overflow:hidden;border-top:1px solid #221F1A}
.final::before{content:"";position:absolute;left:-20%;right:-20%;top:-40%;height:80%;background:radial-gradient(ellipse at top,rgba(226,197,126,.13),transparent 62%);pointer-events:none}
.final>*{position:relative}
.final .logo{width:250px;margin:0 auto 50px}
.final h2{font-size:60px;line-height:1.3;font-weight:900;letter-spacing:-.03em;margin-bottom:26px}
.final .fp{font-size:26px;color:#B5AC9C;margin-bottom:60px}
.final .fp b{color:#E2C57E}
.legal{border-top:1px solid #2A2620;padding-top:40px;text-align:left}
.legal .co{font-size:22px;color:#B5AC9C;line-height:1.85}
.legal .co b{color:#F5F1E8}
.legal .note{margin-top:20px;font-size:18.5px;color:#7E766A;line-height:1.7}

/* ── 기존 공고 이식용 컴포넌트 ── */
.greet{margin-top:12px;font-size:26px;line-height:1.9;color:#B5AC9C;text-align:center}
.greet b{color:#F5F1E8}
.greet .em{color:#E2C57E;font-weight:800}
.greet p+p{margin-top:32px}
.bighead{font-size:64px;line-height:1.24;font-weight:900;letter-spacing:-.03em;text-align:center;margin-bottom:24px}
.bio-t{font-size:24px;font-weight:800;color:#0B0A09;background:#E2C57E;border-radius:999px;padding:12px 28px;display:inline-block;margin-bottom:28px}
.bio-ph img{width:100%;display:block}
.band{margin-top:48px;background:linear-gradient(160deg,rgba(226,197,126,.15),rgba(226,197,126,.03));border:1px solid rgba(226,197,126,.4);border-radius:22px;padding:50px 40px;text-align:center}
.band .bt{font-size:44px;font-weight:900;line-height:1.32;letter-spacing:-.03em;margin-bottom:22px}
.band .bs{font-size:24px;color:#B5AC9C;line-height:1.78}
.band .bs b{color:#F5F1E8}
.numgrid{margin-top:44px;display:grid;gap:14px}
.numcard{display:flex;gap:26px;align-items:center;background:#151310;border:1px solid #2A2620;border-radius:18px;padding:32px 34px}
.numcard .nn{flex:none;width:62px;height:62px;border-radius:16px;border:2px solid #E2C57E;color:#E2C57E;font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center}
.numcard h3{font-size:31px;font-weight:800}
.growth{margin-top:44px;display:grid;gap:14px}
.gcard{background:#151310;border:1px solid #2A2620;border-radius:18px;padding:30px 34px;font-size:25px;color:#D9D2C4;line-height:1.6}
.gcard b{color:#E2C57E;font-weight:800}
.edu{margin-top:48px;display:grid;gap:26px}
.edu-item{background:#151310;border:1px solid #2A2620;border-radius:22px;padding:38px 34px 32px;text-align:center}
.edu-no{width:58px;height:58px;margin:0 auto 20px;border-radius:50%;border:2px solid #E2C57E;color:#E2C57E;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center}
.edu-item h3{font-size:32px;font-weight:800;color:#E2C57E;margin-bottom:14px}
.edu-item p{font-size:23.5px;color:#B5AC9C}
.edu-item img{margin-top:26px;border-radius:16px;border:1px solid #2A2620;width:100%}
.stepline{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sl{background:#151310;border:1px solid #2A2620;border-radius:16px;padding:24px 12px;text-align:center}
.sl .sn{font-size:19px;font-weight:800;letter-spacing:.1em;color:#0B0A09;background:#E2C57E;border-radius:999px;padding:6px 16px;display:inline-block;margin-bottom:14px}
.sl .st{font-size:23px;font-weight:800}
.about{margin-top:48px;background:#151310;border:1px solid #2A2620;border-radius:22px;padding:46px 40px}
.about p{font-size:25px;color:#B5AC9C;line-height:1.9;text-align:center}
.about p+p{margin-top:30px}
.about b{color:#F5F1E8}
.about .hl{color:#E2C57E;font-weight:800}
.about .sign{margin-top:38px;text-align:center;font-size:27px;font-weight:800;color:#F5F1E8}
.tagline{padding:118px 56px;text-align:center;font-size:72px;font-weight:900;letter-spacing:-.04em;line-height:1.25;border-top:1px solid #221F1A}
.hero .yt{display:inline-flex;align-items:center;gap:14px;font-size:23px;font-weight:800;color:#F5F1E8;border:2px solid rgba(245,241,232,.55);border-radius:999px;padding:14px 34px;margin-bottom:38px}
.hero .yt .p{width:38px;height:27px;border-radius:7px;background:#FF0000;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}

.ytcap{margin-top:44px}
.ytcap>img{width:100%;border-radius:18px;border:1px solid #2A2620;display:block}
.ytcap2{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ytcap2 img{width:100%;border-radius:14px;border:1px solid #2A2620;display:block}
.ytcap-cap{margin-top:18px;font-size:21px;color:#7E766A;text-align:center}
.ytcap-cap b{color:#B5AC9C}
.numcard{overflow:hidden;padding:0}
.numcard .nph{flex:none;width:250px;height:170px}
.numcard .nph img{width:100%;height:100%;object-fit:cover;display:block}
.numcard .ntx{display:flex;align-items:center;gap:24px;padding:0 32px}
/* ── 데코 타이포 (기존 공고 스타일 이식) ── */
.hand{font-family:'Nanum Brush Script','Nanum Pen Script',cursive;color:#E2C57E;font-weight:400;letter-spacing:.01em;line-height:1.25;display:block}
.hand-l{font-size:56px;margin-bottom:2px;transform:rotate(-1.2deg)}
.hand-m{font-size:46px;margin-bottom:2px}
.mark{background:linear-gradient(transparent 56%,rgba(226,197,126,.40) 56%);padding:0 3px;color:#F5F1E8}
.inv{display:inline-block;background:#E2C57E;color:#0B0A09;font-weight:800;padding:6px 20px;border-radius:8px;letter-spacing:-.02em;line-height:1.4}
.invd{display:inline-block;background:#151310;border:1px solid #3B3428;color:#F5F1E8;font-weight:800;padding:10px 24px;border-radius:10px;line-height:1.4}
.uwave{border-bottom:3px solid rgba(226,197,126,.55);padding-bottom:4px}
.bigq{font-family:Georgia,'Times New Roman',serif;font-size:104px;line-height:.62;color:#3B3428;display:block;margin-bottom:16px;text-align:center}
.plus{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#E2C57E;color:#0B0A09;font-size:30px;font-weight:900;margin-right:14px;vertical-align:-8px}
.gcard .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:rgba(226,197,126,.12);border:1px solid rgba(226,197,126,.3);font-size:26px;margin-right:20px;vertical-align:-14px}
.intv img{width:100%;aspect-ratio:351/408;object-fit:cover}
/* ── 텍스트 창 제거 : 글만 든 박스는 걷어내고 선·여백·타이포로 구분 ── */
/* 선언 밴드 : 박스 -> 상하 골드 헤어라인 */
.band{background:none;border:none;border-radius:0;padding:8px 0;margin-top:52px}
.band::before,.band::after{content:"";display:block;width:96px;height:2px;background:linear-gradient(90deg,transparent,#B8944F,transparent)}
.band::before{margin:0 auto 36px}
.band::after{margin:34px auto 0}
.band .bt{font-size:46px}
.band .bs{font-size:25px}

/* 회사소개 · 대표 약력 · 인물 소개 : 박스 제거 */
.about{background:none;border:none;padding:0;margin-top:44px}
.who-card{background:none;border:none;padding:0}
.who{grid-template-columns:270px 1fr;gap:36px;align-items:center;margin-top:44px}

/* 인DB 문단 : 박스 -> 좌측 골드 바 */
.fair{background:none;border:none;border-left:3px solid rgba(226,197,126,.55);border-radius:0;padding:4px 0 4px 30px;margin-top:34px}

/* 실측 통계 : 겉박스 제거, 숫자 타일만 유지 */
.proof{background:none;border:none;padding:0;margin-top:44px}
.proof-head{font-size:28px}

/* GIVE 6종 : 박스 -> 구분선 리스트 */

/* 자산 3종 */
.b3{gap:0;margin-top:8px}
.b3card{background:none;border:none;border-top:1px solid #221F1A;border-radius:0;padding:32px 0 28px}
.b3 .b3card:first-child{border-top:none}

/* 세 가지 약속 */
.promise{background:none;border:none;border-top:1px solid rgba(226,197,126,.32);border-radius:0;padding:36px 0 0;margin-top:34px}

/* 성장 4항목 */
.growth{gap:0;margin-top:38px}
.gcard{background:none;border:none;border-top:1px solid #221F1A;border-radius:0;padding:28px 0}
.growth .gcard:first-child{border-top:none}

/* Q&A */
.faq{gap:0;margin-top:40px}
.qa{background:none;border:none;border-top:1px solid #221F1A;border-radius:0;padding:36px 0 32px}
.faq .qa:first-child{border-top:none}

/* 비결 1·2·3 : 카드 배경 제거, 사진만 남김 */
.numgrid{gap:0;margin-top:38px}
.numcard{background:none;border:none;border-top:1px solid #221F1A;border-radius:0;padding:22px 0;gap:30px}
.numgrid .numcard:first-child{border-top:none}
.numcard .nph{width:208px;height:132px}
.numcard .nph img{border-radius:12px}
.numcard .ntx{padding:0}

/* 교육 ①②③ : 박스 제거 + 사진 축소 */
.edu{gap:64px;margin-top:44px}
.edu-item{background:none;border:none;padding:0}
.edu-item img{max-width:72%;margin-left:auto;margin-right:auto}

/* STEP 01~04 */
.sl{background:none;border:none;padding:0;border-radius:0}
.stepline{gap:16px}

/* 지원 4단계 */
.steps{gap:0;margin-top:30px}
.step{background:none;border:none;border-radius:0;border-top:1px solid #221F1A;padding:26px 0}
.steps .step:first-child{border-top:none}
.st-arr{display:none}

/* 복지 사진 3장 */
.ph3 figure{background:none;border:none}
.ph3 img{border-radius:16px;border:1px solid #2A2620}

/* 인터뷰 2장 */
.intv{margin-top:40px;gap:18px}
.intv img{width:100%;aspect-ratio:335/392;object-fit:cover;border-radius:16px;border:1px solid #2A2620}

/* 유튜브 캡처 */
.ytcap>img,.ytcap2 img{border:none}

.intv .ivc{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid #2A2620}
.intv .ivc img{width:100%;aspect-ratio:349/390;object-fit:cover;object-position:center 16%;border:none;border-radius:0;display:block}
.intv .ivc figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 24px 22px;background:linear-gradient(transparent,rgba(8,9,11,.94));font-size:20px;color:#B5AC9C;line-height:1.5}
.intv .ivc figcaption b{display:block;color:#F5F1E8;font-size:25px;margin-bottom:4px}
.ap-row .pv,.pay-row .pv{padding:28px 30px 28px 30px}
.ap-row .pk,.pay-row .pk{padding:28px 24px 28px 30px}

/* ═══════════ 0723-5 하이브리드 정비 ═══════════ */

/* [4] 각주·보조 텍스트 대비 상향 : #7E766A(4.1:1) -> #8C8272(5.2:1, AA 통과) */
h2 .ghost{color:#8C8272}
.f-arr,.st-arr,.fine,.pt-note,.cp-note,.proof-note,.perf-note,.ytcap-cap{color:#8C8272}
.legal .note{color:#8C8272;font-size:20px;border-left:3px solid rgba(226,197,126,.45);padding-left:26px;margin-top:26px}

/* [2] 정렬축 통일 : 중앙정렬은 히어로 · 태그라인 · 최종 CTA 세 곳만 */
.bighead,.subhead,.greet,.band,.bigq,.edu-item,.perf-note,.ytcap-cap,.intv-cap{text-align:left}
.about p,.about .sign{text-align:left}
.band::before{margin:0 0 36px}
.band::after{margin:34px 0 0}
.edu-no{margin:0 0 20px}
.edu-item img{max-width:100%;margin-left:0;margin-right:0}

/* [2] 손글씨 강등 : 문구는 그대로 두고 골드 아이브로우 라벨로 (서명·선언 2곳만 손글씨 유지) */
.hand.lbl{font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;font-size:21px;font-weight:800;letter-spacing:.16em;color:#E2C57E;margin-bottom:18px;transform:none;line-height:1.5}

/* [3] 골드 면적 축소 : 솔리드 골드 채움은 히어로 배지 · .only · .inv.solid 만 */
.bio-t{background:none;color:#E2C57E;border:1px solid rgba(226,197,126,.45)}
.sl .sn{background:none;color:#E2C57E;border:1px solid rgba(226,197,126,.45)}
.step .no{background:none;border:2px solid #E2C57E;color:#E2C57E}
.plus{background:none;border:2px solid #E2C57E;color:#E2C57E;font-size:24px;font-weight:800}
.wf-label{background:none;border:none;border-radius:0;padding:0;margin:44px 0 18px;font-size:21px;letter-spacing:.16em;color:#E2C57E}
.inv{background:none;color:#E2C57E;border:1px solid rgba(226,197,126,.45);padding:8px 20px}
.inv.solid{background:#E2C57E;color:#0B0A09;border-color:#E2C57E}

/* [1] 라이트 반전 섹션 (아이보리) : 밝은 소스가 몰린 구간 */
.sec.invert{background:#F5F1E8;color:#2A2620;border-top:none}
.sec.invert .glow{display:none}
.sec.invert h2,.sec.invert h3,.sec.invert .bighead,.sec.invert .proof-head{color:#1A1712}
.sec.invert .kick,.sec.invert .g,.sec.invert .bno{color:#856436}
.sec.invert .lede,.sec.invert p,.sec.invert .greet,.sec.invert .fair{color:#5A5347}
.sec.invert b{color:#1A1712}
.sec.invert .ghost{color:#8E877A}
.sec.invert .shot{background:#FFFDF8;border-color:#D9D2C4}
.sec.invert .shot .bar{background:#EAE3D5;border-bottom-color:#D9D2C4}
.sec.invert .shot .bar i,.sec.invert .shot .bar i:nth-child(2),.sec.invert .shot .bar i:nth-child(3){background:#C9C0AE;opacity:1}
.sec.invert .shot .bar .url{background:#FFFDF8;border-color:#D9D2C4;color:#5A5347}
.sec.invert .shot img{border-bottom-color:#D9D2C4}
.sec.invert .shot figcaption{color:#5A5347}
.sec.invert .shot figcaption b{color:#1A1712}
.sec.invert .b3card{border-top-color:#DED7C8}
.sec.invert .pstat{background:#FFFDF8;border-color:#D9D2C4}
.sec.invert .pstat b{color:#856436}
.sec.invert .pstat span{color:#5A5347}
.sec.invert .proof-sub,.sec.invert .proof-note,.sec.invert .cp-note{color:#6E675A}
.sec.invert .proof-note b{color:#5A5347}
.sec.invert .fair{border-left-color:#856436}

/* [1] 마감 블록 : 전화번호 · 회사정보 · 법적고지를 아이보리로 뒤집어 페이지를 밝게 닫는다 */
.closing{background:#F5F1E8;color:#2A2620;padding:96px 56px 88px;text-align:center}
.closing .calltag{font-size:21px;font-weight:800;letter-spacing:.16em;color:#856436;margin-bottom:20px}
.closing .callnum{display:inline-block;background:#1A1712;color:#F5F1E8;font-size:46px;font-weight:900;letter-spacing:.02em;border-radius:16px;padding:24px 52px;margin-bottom:16px}
.closing .callsub{font-size:23px;color:#5A5347;margin-bottom:54px}
.closing .legal{border-top:1px solid #D9D2C4}
.closing .legal .co{color:#5A5347}
.closing .legal .co b{color:#1A1712}
.closing .legal .note{color:#6E675A;border-left-color:#856436}

/* ═══════════ 0723-6 스크롤 리듬 : 묶을 건 붙이고, 넘어갈 땐 벌린다 ═══════════ */

/* (1) 한 덩어리로 읽는 것 — 라벨·제목·리드·문단은 더 붙인다 */
.kick{margin-bottom:13px}
.hand.lbl{margin-bottom:13px}
h2{margin-bottom:17px}
.bighead{margin-bottom:18px}
.greet{margin-top:10px}
.greet p+p{margin-top:24px}
.about p+p{margin-top:24px}
.proof-head{margin-bottom:5px}
.proof-sub{margin-bottom:20px}
.band .bt{margin-bottom:18px}
.legal .note{margin-top:22px}
.cp-note{margin-top:16px}
.pt-note,.proof-note{margin-top:18px}

/* (2) 블록이 바뀔 때 — 제목 묶음에서 내용 블록으로 */
.trust,.nots,.facts,.flow,.duty,.req-grid,.pay,.bento,.b3,.growth,.faq,
.numgrid,.who,.bio,.proof,.site-gal,.intv,.ytcap,.apply,.quotebar,.edu{margin-top:68px}
.stepline{margin-top:56px}
.shot{margin-top:52px}
.promise{margin-top:44px}
.fair{margin-top:38px}

/* (3) 다음 스텝으로 넘어갈 때 — 같은 섹션 안에서 화제가 바뀌는 지점 */
.band{margin-top:108px}
.wf-label{margin:104px 0 13px}
.edu{gap:96px}

/* (4) 섹션 사이 — 안 보이던 헤어라인을 걷어내고 여백만으로 구분한다 */
.sec{padding:128px 56px}
.sec+.sec{border-top:none}
.hero{padding:118px 56px 118px}
.tagline{padding:154px 56px;border-top:none}
.final{border-top:none;padding:150px 56px 104px}
.closing{padding:112px 56px 92px}
.legal{padding-top:56px}

/* (5) 리스트 : 항목 안은 붙고, 항목 사이는 벌어진다 */
.b3card{padding:38px 0 34px}
.qa{padding:44px 0 40px}
.gcard{padding:34px 0}
.step{padding:32px 0}
.numcard{padding:30px 0}
.b-cell .bno,.b3card .bno{margin-bottom:9px}
.b-cell h3,.b3card h3{margin-bottom:7px}
.qa .q{margin-bottom:10px}

/* ═══ 0723-6 그리드 정합 : 거터 16px · 라운드 16px 로 전 블록 통일 ═══ */
.ph2{grid-template-columns:1fr 1fr;gap:16px}
.ph3,.site-gal,.intv,.ytcap2,.cases,.proof-stats{gap:16px}
.ph2 img,.ph3 img,.ph3.plain img,.site-gal figure,.intv img,.intv .ivc,
.ytcap>img,.ytcap2 img,.edu-item img,.shot,.who-photo{border-radius:16px}
.case,.pstat{border-radius:16px}

/* ═══ 0723-6 채널 아이콘 : 원색 3종 -> 골드 단색 라인 ═══ */
.chan .ic{background:none;border:1px solid rgba(226,197,126,.45)}
.chan .ic svg{width:27px;height:27px;display:block}
.hero .yt .p{background:#FF0000;color:#fff}

/* ═══ 0723-7 인터뷰 카드 : 번인 자막을 페이지 캡션으로 덮어 두 카드 규격 통일 ═══ */
.intv .ivc.mask figcaption{padding:104px 24px 22px;
  background:linear-gradient(rgba(11,10,9,0) 0%,rgba(11,10,9,.55) 9%,rgba(11,10,9,.98) 22%,#0B0A09 34%)}

/* ═══ 0723-11 대표 사진 : 전신 -> 상반신 크롭으로 교체하고 열 폭을 키움 ═══ */
/* 크롭본이 세로로 짧아 같은 높이를 쓰면서 인물만 1.4배 커진다 */
.bio-ph{margin:0}

/* ═══ 0723-16 실측 숫자 강조 + 회사소개 가운데정렬 ═══ */
.pstat{padding:18px 14px 16px}
.pstat b{font-size:56px;letter-spacing:-.03em;line-height:1.05}
.pstat span{font-size:21px;margin-top:10px}
.sec.invert .pstat{background:#FFFDF8;border-color:#D9CFB8}
.sec.invert .pstat b{color:#7E5A24}
.proof-head{font-size:30px}
.about p,.about .sign{text-align:center}

/* ═══ 0723-17 사업실적 5장 : 빈칸 없이 균형 배치 ═══
   3열 기준  [ feat 2x2 ][ 2번 1x2 ]
             [ 3 ][ 4 ][ 5 ]           -> 3x3 아홉 칸을 정확히 채운다 */
.site-gal{grid-template-columns:repeat(3,1fr);grid-auto-rows:212px;gap:16px}
.site-gal figure:nth-child(2){grid-row:span 2}
.site-gal figure{margin:0}

/* ═══ 0723-18 대표 약력 : 인물 사진 확대 ═══ */
.bio-ph{align-self:end}









































.numcard{overflow:hidden;padding:0;gap:0}
.numcard .ntx{display:flex;align-items:center;gap:24px;padding:0 34px}

































/* ═══ 0723-11 채널 유도 배너 : 플랫폼 원색 아이콘으로 생기 ═══ */
/* 본문 .chan 아이콘은 골드 라인 유지. 여기만 원색 — 외부 플랫폼은 제 색이어야 눈이 먼저 알아본다 */
.ch-band .ch-icons{display:flex;gap:16px;margin-bottom:28px}
.ch-ic{width:84px;height:84px;border-radius:23px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.ch-ic svg{width:47px;height:47px;display:block}
.ch-ic.yt{background:#FF0033}
.ch-ic.ig{background:radial-gradient(circle at 28% 110%,#FFD860 0%,#FA7E1E 24%,#D62976 52%,#962FBF 74%,#4F5BD5 100%)}
.ch-tags{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
.ch-tags span{font-size:20px;font-weight:700;color:#E2C57E;border:1px solid rgba(226,197,126,.45);border-radius:999px;padding:11px 22px;background:rgba(226,197,126,.06)}




/* ═══ 0723-19 채널 태그 버튼형 + 브랜드 컬러 ═══ */
.ch-ic.yt{background:#FF0000}
.ch-tags{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.ch-tags a,.ch-tags span{display:inline-flex;align-items:center;gap:11px;
  font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em;
  border:none;border-radius:999px;padding:16px 30px;text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.45)}
.ch-tags svg{width:23px;height:23px;flex:none;display:block}
.ch-tags .t-yt{background:#FF0000}
.ch-tags .t-ig{background:radial-gradient(circle at 28% 112%,#FFD860 0%,#FA7E1E 22%,#D62976 50%,#962FBF 73%,#4F5BD5 100%)}










































































/* ═══ 0723-11 수상 증빙 : 주장 대신 제3자 증거를 눈으로 ═══ */
.award-gal{margin-top:18px;display:grid;gap:14px}
.award-gal figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(226,197,126,.3);background:#151310}
.award-gal img{width:100%;display:block}
.award-gal .ag-cert{max-width:100%}
.award-cap{margin-top:14px;font-size:19px;color:#8C8577;line-height:1.6}







































/* ═══ 0723-15 인터뷰 -> 유튜브 영상 카드 ═══ */
.intv .ivc{margin:0;background:#151310;border:1px solid #2A2620;border-radius:16px;overflow:hidden;position:relative}
.intv .ivc .ivshot{display:block;position:relative;overflow:hidden}
.intv .ivc img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:none;border-radius:0}
.intv .ivc figcaption{position:static;background:none;padding:22px 26px 26px;font-size:21px;color:#B5AC9C;line-height:1.55}
.intv .ivc figcaption b{display:block;color:#F5F1E8;font-size:26px;margin-bottom:5px}
.yt-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:rgba(11,10,9,.58);border:2px solid rgba(245,241,232,.88);pointer-events:none}
.yt-badge::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-left:23px solid #F5F1E8;border-top:14px solid transparent;border-bottom:14px solid transparent}




/* ═══ 0723-19 채널 카드 로고 : 브랜드 컬러 ═══ */
.chan .ic.br{border:none;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.chan .ic.br svg{width:29px;height:29px}
.chan .ic.kakao svg{width:33px;height:33px}
.chan .ic.kakao{background:#FEE500}
.chan .ic.yt{background:#FF0000}
.chan .ic.ig{background:radial-gradient(circle at 28% 112%,#FFD860 0%,#FA7E1E 22%,#D62976 50%,#962FBF 73%,#4F5BD5 100%)}

/* ═══════════════════════════════════════════════════════════════
   채용페이지 전용 — 공고(860px 고정)를 웹페이지로 이식
   ① 반응형  ② 랜딩 셸  ③ 연출
   ═══════════════════════════════════════════════════════════════ */

/* ── ① 반응형 ─────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{width:100%;max-width:none;background:#0B0A09}
/* 0726 — overflow-x:hidden 제거. 500·1600·2400px 전 폭에서 문서 가로 넘침 0 으로 실측 확인했고,
   유일하게 튀어나오는 .glow 장식은 .sec{overflow:hidden} 이 이미 잡는다.
   body 에 걸어 두면 실제 넘침이 생겨도 소리 없이 잘려서 못 찾게 되므로 걷어냈다. */
.page{max-width:860px;margin:0 auto;position:relative}

@media (max-width:880px){ .page{max-width:none;zoom:.90} }
@media (max-width:720px){
  .page{zoom:.74}
  .sec{padding:104px 34px}
  .hero{padding:96px 34px 100px}
  .final{padding:120px 34px 88px}
  .closing{padding:96px 34px 84px}
  .tagline{padding:124px 34px}
  .ph3,.stepline,.proof-stats,.cases,.site-gal{grid-template-columns:1fr 1fr}
  .ph2,.intv,.ytcap2,.who,.bio{grid-template-columns:1fr}
  .who{gap:24px}
  .numcard{flex-direction:column;align-items:flex-start;gap:18px}
  .numcard .nph{width:100%;height:auto;aspect-ratio:16/10}
  .numcard .ntx{padding:0}
  .ap-row,.pay-row{grid-template-columns:1fr}
  .ap-row .pk,.pay-row .pk{padding-bottom:6px}
  .ap-row .pv,.pay-row .pv{padding-top:0}
  .site-gal .feat{grid-column:span 2;grid-row:span 1}
  .edu-item img{max-width:100%}
}
/* 0726 — 본문 실효 크기를 16px 로 올린다. 25px × .64 = 16.0px
   (역보정으로 폰트만 키우면 줄바꿈이 다 깨지므로 배율 한 값만 올린다) */
@media (max-width:560px){ .page{zoom:.66} }
@media (max-width:430px){ .page{zoom:.64} }

/* 이미지 전용 잔재 정리 */
.hero .logo{max-width:60%}
img{height:auto}

/* ── ② 랜딩 셸 ────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:60;background:rgba(11,10,9,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid #221F1A;transition:padding .2s ease}
.topbar .in{max-width:860px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.topbar.shrunk .in{padding:9px 22px}
/* 0726 읽은 만큼 진행바 — 상단바 테두리 위에 얹는다. 요소는 recruit.js 가 만든다 */
.tb-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#E2C57E;
  transform:scaleX(var(--prog,0));transform-origin:0 50%;will-change:transform;pointer-events:none}
.tb-logo{display:inline-flex;align-items:center;padding:10px 0;gap:9px;font-weight:800;font-size:15px;letter-spacing:.14em;color:#F5F1E8}
.tb-logo img{width:22px;height:auto}
.tb-logo em{font-style:normal;color:#E2C57E;font-size:12px;letter-spacing:.2em}
/* 0726 터치 타깃 — 40px → 46px */
.tb-cta{font-size:14px;font-weight:800;background:#E2C57E;color:#0B0A09;text-decoration:none;padding:12px 20px;border-radius:999px;white-space:nowrap}

.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;
  font-size:24px;padding:20px 42px;border-radius:999px;position:relative;overflow:hidden;transition:transform .14s ease}
.cta:hover{transform:translateY(-2px)}
.cta-main{background:#E2C57E;color:#0B0A09}
.cta-ghost{border:2px solid rgba(245,241,232,.5);color:#F5F1E8}
a.yt{text-decoration:none}
a.chan{text-decoration:none;transition:transform .14s ease,border-color .14s ease}
a.chan:hover{transform:translateY(-2px);border-color:rgba(226,197,126,.5)}
a.big{color:#F5F1E8;text-decoration:none;border-bottom:2px solid rgba(226,197,126,.5)}
a.callnum{text-decoration:none;position:relative;overflow:hidden}

.ytcap .ytwrap{position:relative;cursor:pointer;border-radius:16px;overflow:hidden;display:block}
.ytcap .ytwrap img{display:block;width:100%}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;
  background:rgba(11,10,9,.62);border:2px solid rgba(245,241,232,.85);transition:transform .18s ease,background .18s ease}
.yt-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:26px solid #F5F1E8;border-top:16px solid transparent;border-bottom:16px solid transparent}
.ytcap .ytwrap:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(226,197,126,.9)}
.ytcap .ytwrap:hover .yt-play::after{border-left-color:#0B0A09}
/* 0726 — 원래 .ytcap 안에만 걸려 있어서 히어로·상담사 인터뷰 영상 3개가
   재생 순간 iframe 기본 크기(300x150)로 무너졌다. 선택자를 일반화한다. */
.ytwrap iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.hero-videocard .ytwrap,.intv .ivc .ivshot{aspect-ratio:16/9}

.stick{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(11,10,9,.94);backdrop-filter:blur(10px);border-top:1px solid #2A2620;transform:translateY(110%);transition:transform .28s ease}
.stick.on{transform:translateY(0)}
.stick a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:15px;padding:14px 0;border-radius:999px}
.stick .s-main{background:#E2C57E;color:#0B0A09}
.stick .s-sub{border:1px solid #3B3428;color:#F5F1E8}
@media (max-width:900px){
  .stick{display:flex}
  /* 0726 — .stick 실높이 약 75px 이 문서 마지막(법적 고지)을 영구히 덮고 있었다. */
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}

#lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.94);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
#lightbox.on{display:flex}
#lightbox img{max-width:100%;max-height:88vh;border-radius:12px}
#lightbox .lb-hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:13px;color:#8C8272}

/* ── ③ 연출 ───────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

.rv-stg>*{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.rv-stg.in>*{opacity:1;transform:none}
.rv-stg.in>*:nth-child(1){transition-delay:0ms}
.rv-stg.in>*:nth-child(2){transition-delay:80ms}
.rv-stg.in>*:nth-child(3){transition-delay:160ms}
.rv-stg.in>*:nth-child(4){transition-delay:240ms}
.rv-stg.in>*:nth-child(5){transition-delay:320ms}
.rv-stg.in>*:nth-child(n+6){transition-delay:400ms}
.rv-stg.fast.in>*:nth-child(2){transition-delay:45ms}
.rv-stg.fast.in>*:nth-child(3){transition-delay:90ms}
.rv-stg.fast.in>*:nth-child(4){transition-delay:135ms}
.rv-stg.fast.in>*:nth-child(n+5){transition-delay:180ms}
.rv-stg.slow.in>*:nth-child(2){transition-delay:130ms}
.rv-stg.slow.in>*:nth-child(3){transition-delay:260ms}
.rv-stg.slow.in>*:nth-child(n+4){transition-delay:390ms}

.gal-stg figure,.gal-stg img,.gal-stg>div{opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.gal-stg.in figure,.gal-stg.in img,.gal-stg.in>div{opacity:1;transform:none}
.gal-stg.in>*:nth-child(2){transition-delay:60ms}
.gal-stg.in>*:nth-child(3){transition-delay:120ms}
.gal-stg.in>*:nth-child(4){transition-delay:180ms}
.gal-stg.in>*:nth-child(n+5){transition-delay:240ms}

.rv-rows .ap-row,.rv-rows .pay-row{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.rv-rows.in .ap-row,.rv-rows.in .pay-row{opacity:1;transform:none}
.rv-rows.in .ap-row:nth-child(2),.rv-rows.in .pay-row:nth-child(2){transition-delay:55ms}
.rv-rows.in .ap-row:nth-child(3),.rv-rows.in .pay-row:nth-child(3){transition-delay:110ms}
.rv-rows.in .ap-row:nth-child(4),.rv-rows.in .pay-row:nth-child(4){transition-delay:165ms}
.rv-rows.in .ap-row:nth-child(5),.rv-rows.in .pay-row:nth-child(5){transition-delay:220ms}

.shot-zoom img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.shot-zoom:hover img{transform:scale(1.045)}
@media (hover:none){ .shot-zoom:hover img{transform:none} }
/* 확대 커서(CSS)와 실제 확대 동작(JS) 대상이 어긋나 있었다.
   .award-gal img 는 클릭하면 열리는데 커서 신호가 없었고(하필 인증서 원본이라 확대가 가장 필요),
   .ph-card 는 마크업에 존재하지 않는 죽은 선택자였다. JS 목록과 일치시킨다. */
.shot img,.who-photo img,.ph3 img,.ph2 img,.site-gal img,.intv img,
.award-gal img{cursor:zoom-in}

.band-glow{position:relative}
.band-glow::after{content:"";position:absolute;left:50%;top:50%;width:min(560px,90%);height:210px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse,rgba(226,197,126,.14),transparent 68%);transition:opacity 1.2s ease .1s}
.band-glow.in::after{opacity:1}

.fair-line{position:relative}
.fair-line::before{transform-origin:top;transform:scaleY(0);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.fair-line.in::before{transform:scaleY(1)}
.fair{position:relative}
.fair::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(226,197,126,.55)}

/* 카운트업 span 이 부모의 span 규칙(.pstat span 등)에 먹히지 않도록 */
.pstat b .cnum, .fact .fn .cnum, .t-item .tn .cnum, b .cnum, .cnum{
  display:inline;font-size:inherit;font-weight:inherit;color:inherit;
  margin:0;line-height:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}

/* 아이보리 전환 페더 — 하드컷 대신 번지게 */
.pre-invert{position:relative}
.pre-invert::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;
  background:linear-gradient(rgba(245,241,232,0),rgba(245,241,232,.10))}
.post-invert{position:relative;padding-top:150px}
.post-invert::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;
  background:linear-gradient(rgba(245,241,232,.13),rgba(245,241,232,0))}

.btn-sheen::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transition:left .65s ease}
.btn-sheen:hover::after,.btn-sheen:focus-visible::after{left:130%}

/* 히어로 진입 시퀀스 */
.hero>*{opacity:0;transform:translateY(18px);animation:heroIn .72s cubic-bezier(.22,.61,.36,1) forwards}
.hero .grid-tex{opacity:1;transform:none;animation:none}
.hero .logo{animation-delay:.10s}
.hero .yt{animation-delay:.22s}
.hero h1{animation-delay:.34s;opacity:0;transform:translateY(18px)}
.hero .badges{animation-delay:.46s}
.hero .hero-ctas{animation-delay:.58s}
@keyframes heroIn{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv-stg>*,.gal-stg figure,.gal-stg img,.gal-stg>div,.rv-rows .ap-row,.rv-rows .pay-row{
    opacity:1!important;transform:none!important;transition:none!important}
  .band-glow::after{opacity:1;transition:none}
  .fair-line::before{transform:scaleY(1);transition:none}
  .shot-zoom:hover img{transform:none}
  .hero>*{opacity:1;transform:none;animation:none}
  .btn-sheen::after{display:none}
}

/* ═══ 0723-20 카카오톡 친구추가 모달 ═══ */
a.chan-kakao{cursor:pointer}
#kmodal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:24px;background:rgba(6,5,4,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#kmodal.on{display:flex;animation:kmfade .18s ease}
@keyframes kmfade{from{opacity:0}to{opacity:1}}
.km-box{width:100%;max-width:420px;margin:auto 0;background:#141210;border:1px solid #2E2A22;border-radius:24px;
  padding:38px 32px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:kmup .22s cubic-bezier(.2,.7,.3,1)}
@keyframes kmup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.km-ic{width:64px;height:64px;border-radius:50%;background:#FEE500;display:flex;align-items:center;
  justify-content:center;margin:0 auto 18px}
.km-ic svg{width:36px;height:36px;display:block}
.km-t{font-size:17px;font-weight:700;color:#B5AC9C;letter-spacing:.02em}
.km-id{font-size:36px;font-weight:900;color:#F5F1E8;letter-spacing:.01em;margin:6px 0 10px}
.km-msg{font-size:15px;font-weight:700;color:#E2C57E;min-height:20px}
.km-go{display:block;margin:22px 0 0;background:#FEE500;color:#191600;font-size:19px;font-weight:800;
  border-radius:14px;padding:16px 20px;text-decoration:none}
.km-go:hover{filter:brightness(1.05)}
.km-steps{margin:22px 0 0;padding:20px 0 0;border-top:1px solid #262219;text-align:left;
  list-style:none;counter-reset:k}
.km-steps li{position:relative;padding:0 0 0 34px;margin-bottom:11px;font-size:16px;line-height:1.55;color:#9C9384}
.km-steps li:last-child{margin-bottom:0}
.km-steps li::before{counter-increment:k;content:counter(k);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;background:#231F19;color:#E2C57E;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.km-steps b{color:#F5F1E8;font-weight:700}
.km-close{margin:20px 0 0;padding:12px 20px;background:none;border:none;color:#B5AC9C;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;padding:6px 10px}
.km-close:hover{color:#B5AC9C}

/* ═══════════════════════════════════════════════════════════════
   ④ 데스크톱 레이어 — 1200px 가운데 정렬
      공고(860px)보다 넓게 쓰되, 창 폭에 무한정 늘리지 않는다.
      세로로만 쌓이던 블록을 가로로 펴고, 타이포는 한 단만 올린다.
   ═══════════════════════════════════════════════════════════════ */
.page{max-width:1200px;margin:0 auto}
@media (max-width:999px){ .page{max-width:900px} }

/* ═══════════════════════════════════════════════════════════════
   0724 데스크톱 풀 리디자인 — 실제 채용 홈페이지 레이아웃
   ( >=1000px 에만 적용 · 모바일/잡코리아 세로 렌더는 불변 )
   당근·우아한형제들·카카오 실측 패턴 이식 :
   컨테이너 1300 + 배경 풀블리드 · 히어로 스플릿 · 스토리 2컬럼 · 세로 리듬 압축
   ═══════════════════════════════════════════════════════════════ */

/* 기본형(모바일/잡코리아) : 데스크톱 전용 요소 정리
   ※ 내비는 모바일에서만 감춘다. 미디어쿼리 없이 .tb-nav{display:none} 을 두면
      위쪽 @media(min-width:1000px) 의 display:flex 를 뒤에서 덮어써(같은 특이도, 나중 선언 우선)
      데스크톱에서도 내비가 통째로 사라진다 — 0724 수정 */
/* 0726 — 모바일에서 내비를 감추면 30,000px 문서에 점프 수단이 0 이 된다.
   라벨은 그대로 두고, 상단바 아래 가로 스크롤 칩으로 흘린다. */
@media (max-width:999px){
  .topbar .in{flex-wrap:wrap;padding-bottom:0}
  .tb-nav{display:flex;order:3;width:100%;gap:6px;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -22px;padding:2px 22px 10px;scroll-snap-type:x proximity}
  .tb-nav::-webkit-scrollbar{display:none}
  .tb-nav a{flex:none;white-space:nowrap;scroll-snap-align:start;
    font-size:20px;font-weight:700;color:#B5AC9C;text-decoration:none;
    padding:9px 16px;border:1px solid #2A2620;border-radius:999px}
  .tb-nav a:active{color:#E2C57E;border-color:#3B3428}
}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.hero-facts>div{background:rgba(21,19,16,.7);border:1px solid #2A2620;border-radius:14px;padding:16px 8px;text-align:center}
.hero-facts b{display:block;font-size:27px;font-weight:800;color:#E2C57E;letter-spacing:-.02em;line-height:1}
.hero-facts span{display:block;font-size:14px;color:#B5AC9C;margin-top:7px;line-height:1.3}
.hero-videocard{background:#151310;border:1px solid #2E2A22;border-radius:16px;overflow:hidden;margin-top:12px}
.hero-videocard .ytwrap{position:relative;display:block;cursor:pointer}
.hero-videocard .ytwrap img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hvc-cap{padding:14px 16px;font-size:16px;color:#B5AC9C}
.hvc-cap .p{display:inline-flex;align-items:center;justify-content:center;width:22px;height:16px;border-radius:4px;background:#FF0000;color:#fff;font-size:10px;margin-right:7px;vertical-align:-2px}
.hero-lead{font-size:22px;color:#B5AC9C;line-height:1.6;margin:6px 0 22px}
.hero-lead b{color:#F5F1E8}

/* 약력 타임라인 기본형(모바일) : 세로 목록 */
.bio-timeline{margin-top:44px;border-top:1px solid #2A2620;padding-top:32px}
.bio-timeline .bio-t{margin-bottom:24px}
.bio-timeline ul{list-style:none;display:grid;gap:16px}
.bio-timeline li{font-size:22.5px;color:#D9D2C4}
.bio-timeline li b{color:#E2C57E;font-weight:800;margin-right:14px}
.sv-media{margin:0}
.sv-media img{width:100%;display:block}

/* ── 0724 Round2 : 텍스트 섹션 2컬럼 에디토리얼 + 수상 이미지 압축 ── */

/* ═══════════════════════════════════════════════════════════════
   0724 Round3 : 데스크톱 웹표준 타이포 (860px 이미지용 큰 글씨 → 웹 크기)
   + glow 경계 제거 + 개인브랜드 골드카드 정리
   본문 17px 기준으로 전 컴포넌트 리스케일 (모바일/잡코리아는 불변)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   0724 Round4 — 가독성 · 시인성 전면 정비   (데스크톱 ≥1000px 전용)

   근거 : 리서치 5건 + 6축 감사 + 적대적 검증(생존 66건) + 완결성 비평(14건).
   나중 선언이 이기므로 위쪽 블록을 건드리지 않고 여기서 덮는다.
   1000px 미만(모바일 · 잡코리아 세로 렌더)은 한 글자도 바뀌지 않는다.

   ① 타이포  본문 17 → 19px. 본문이 16.5·17·17.5·18·19 다섯 값으로 흩어져
             위계가 아니라 들쭉날쭉으로 읽히던 것을 4단으로 압축.
             최소 글씨 하한을 12/13/14.5px → 13/14/17px 로 끌어올림.
   ② 대비    회색 6종이 4.8~5.4 턱걸이 밴드에 몰려 있고 하필 그 글씨들이
             13~15px 이었다. 배경별 3단 램프로 접어 최소 대비를 4.9 이상으로.
             다크 본문(8.8:1)↔강조(17.6:1)의 휘도 2.0배 계단이 halation 의
             실제 원인이라, 강조를 한 단 낮춰 계단을 1.43배로 좁힌다.
   ③ 글줄    ch(숫자 0 기준) 폐기 → em. 최악 58자 → 30자대.
   ④ 연출    데스크톱에서 꺼졌어야 할 무한 광택/글로우 애니메이션 잔존분 제거.
   ⑤ 접근성  포커스 링 신설(파일 전체에 outline 선언이 0건이었다).
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   데스크톱(≥1000px) — 원래 다섯 덩어리로 흩어져 있던 같은 조건의
   @media 를 선언 순서 그대로 하나로 합친 블록.
   순서를 유지했으므로 최종 계산값은 병합 전과 동일하다.
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  /* ← 병합: 원래 1094~1198줄 블록 */

  /* ── 여백 : 좌우 균형 ── */
  .sec{padding:146px 72px}
  .hero{padding:140px 72px 132px}
  .final{padding:164px 72px 112px}
  .closing{padding:126px 72px 98px}
  .tagline{padding:172px 72px;font-size:84px}
  .topbar .in{max-width:1200px;padding:15px 72px}

  /* ── 타이포 : 860px 설계 대비 한 단만 ── */
  body{font-size:26px}
  .hero .logo{width:372px;margin-bottom:48px}
  .hero h1{font-size:100px;margin-bottom:36px}
  .bighead{font-size:70px;margin-bottom:20px}
  h2{font-size:52px;margin-bottom:19px}
  .lede{font-size:28px}
  .greet{font-size:27px;line-height:1.9}
  .kick{font-size:21px}
  .cta{font-size:25px;padding:21px 46px}
  .band .bt{font-size:50px}
  .band .bs{font-size:26px}

  /* ── 글줄 보호 ──
     0724R2 : ch 단위 폐기. ch 는 숫자 '0' 한 글자의 폭이고 Pretendard 에서
     1ch ≈ 0.596em 이라, 68ch = 40.5em = 한글 약 40~46자였다. 한글 권장(25~35자)을
     애초에 초과 허용하는 설계여서 '보호받는' 문단조차 45~47자로 실측됐다.
     한글은 1자 ≈ 1em 이므로 em 으로 직접 잡는다. 목록 누락분도 전부 편입. */
  .lede,.greet,.about p,.proof-sub,.cp-note,.proof-note,.perf-note,.award-cap,
  .fine,.note,.qa .a,.edu-item p,.b3card p,.gcard,.promise li,.who-card p,
  .shot figcaption,.legal .note,.legal .co,
  .fair,.step p,.band .bs,.ap-row .pv,.ytcap-cap,.intv-cap,.pt-note,
  .b-cell p,.f-step p,.duty-item p,.req-card li,.r-item p,.bio-timeline li,
  .site-gal figcaption,.ph3 figcaption,.intv .ivc figcaption,.who-photo figcaption,
  .award-txt,.hvc-cap,.pay-rules li,.flow-note,.sig{max-width:var(--measure,30em)}
  .lede,.greet,.about p,.hero-lead{max-width:var(--measure-lede,27em)}
  .cp-note,.proof-note,.perf-note,.award-cap,.fine,.pt-note,.ytcap-cap,.intv-cap,
  .legal .note,.legal .co{max-width:var(--measure-note,29em)}

  /* ── 큰 이미지가 화면을 압도하지 않게 폭 제한 (가운데) ── */
  .ytcap,.award-gal,.shot,.hp-shot{max-width:940px;margin-left:auto;margin-right:auto}
  .ytcap-cap{max-width:940px;margin-left:auto;margin-right:auto}

  /* ── 실적의 비결 : 3열 카드 ── */
  .numgrid{grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
  .numgrid .numcard,.numcard{display:block;border-top:none!important;padding:0;gap:0}
  .numcard .nph{width:100%;height:250px}
  .numcard .nph img{border-radius:16px}
  .numcard .ntx{display:flex;align-items:center;gap:18px;padding:22px 0 0}
  .numcard h3{font-size:32px}

  /* ── 교육 3종 : 좌우 지그재그 ── */
  .edu{gap:96px}
  .edu-item{display:grid;grid-template-columns:1fr 1.1fr;grid-template-areas:"n img" "h img" "p img";
    gap:0 56px;align-items:start}
  .edu-item .edu-no{grid-area:n}
  .edu-item h3{grid-area:h;font-size:36px}
  .edu-item p{grid-area:p;font-size:25px}
  .edu-item img{grid-area:img;align-self:center;margin:0;max-width:100%}
  .edu-item:nth-child(even){grid-template-columns:1.1fr 1fr;grid-template-areas:"img n" "img h" "img p"}

  /* ── 가로 전개 ── */
  .growth{grid-template-columns:1fr 1fr;column-gap:52px}
  .growth .gcard:nth-child(2){border-top:none}
  .b3{grid-template-columns:repeat(3,1fr);column-gap:36px;margin-top:52px}
  .b3card{border-top:none;border-left:1px solid rgba(133,100,54,.28);padding:4px 0 0 26px}
  .b3 .b3card:first-child{border-left:none;padding-left:0}
  .faq{grid-template-columns:1fr 1fr;column-gap:60px}
  .faq .qa:nth-child(2){border-top:none}
  .qa .q{font-size:29px}
  .qa .a{font-size:24px}
  .chans{grid-template-columns:repeat(3,1fr);gap:18px}
  .chan{flex-direction:column;text-align:center;border-radius:22px;padding:34px 20px 30px;gap:13px}
  .chan .nm{width:auto;font-size:22px}
  .chan .id{font-size:26px}
  a.chan-kakao{cursor:pointer}
  .steps{grid-template-columns:repeat(3,1fr);column-gap:28px}
  .step{border-top:none;border-left:1px solid #221F1A;padding:6px 0 0 24px}
  .steps .step:first-child{border-left:none;padding-left:0}

  /* ── 갤러리 ── */
  .site-gal{grid-auto-rows:250px;gap:18px}
  .ph2,.ph3,.ytcap2,.proof-stats{gap:20px}
  .intv{gap:24px;max-width:1040px;margin-left:auto;margin-right:auto}
  .stepline{gap:22px}
  .sl .st{font-size:25px}
  .pstat b{font-size:62px}
  .pstat.spot{padding:30px 16px 26px!important}
  .pstat.spot b{font-size:68px!important}
  .pstat.spot span{font-size:19px!important}

  /* ── 인물 · 표 ── */
  .who{grid-template-columns:340px 1fr;gap:48px}
  .ap-row,.pay-row{grid-template-columns:240px 1fr}
  .ap-row .pv .big{font-size:38px}

  /* ── 마감 ── */
  .shot figcaption{font-size:24px;padding:30px 36px}
  .shot figcaption b{font-size:28px}
  .closing .callnum{font-size:56px;padding:28px 64px}
  .closing .callsub{font-size:25px}
  .final h2{font-size:68px}
  .final .fp{font-size:28px}
  /* ← 병합: 원래 1205~1280줄 블록 */

  /* ── 컨테이너 폭 확대 (1200 → 1300) ── */
  .page{max-width:1300px}
  /* 0726 — scroll-margin-top 은 전역으로 옮겼다(파일 끝). 모바일에 필수. */

  /* 배경이 다른 섹션은 뷰포트 전체로 깨고(풀블리드), 콘텐츠만 1300 중앙에 정렬 */
  .hero,.tagline,.sec.invert,.sec.pre-invert,.sec.post-invert,.final,.closing{
    width:var(--vwz);margin-left:calc(50% - var(--halfvwz));margin-right:calc(50% - var(--halfvwz));
    padding-left:max(48px,calc(var(--halfvwz) - 650px));
    padding-right:max(48px,calc(var(--halfvwz) - 650px))}

  /* ── 세로 리듬 압축 : 146px → 92px, 배너/갭도 축소 ── */
  .sec{padding:92px 48px}
  .hero{padding-top:0;padding-bottom:0}
  .tagline{padding-top:118px;padding-bottom:118px;font-size:80px}
  .final{padding-top:120px;padding-bottom:104px}
  .closing{padding-top:104px;padding-bottom:92px}
  .band{margin-top:64px}
  .band .bt{font-size:48px}
  .wf-label{margin:64px 0 14px}
  .edu{gap:72px}
  .trust,.nots,.facts,.flow,.duty,.req-grid,.pay,.bento,.b3,.growth,.faq,
  .numgrid,.who,.bio,.proof,.site-gal,.intv,.ytcap,.apply,.quotebar{margin-top:52px}

  /* ── 상단 스티키 내비게이션 ── */
  .topbar .in{max-width:1300px;padding:15px 48px}
  .tb-logo{font-size:16px;text-decoration:none}
  .tb-nav{display:flex;gap:34px;margin-left:auto;margin-right:40px}
  .tb-nav a{color:#B5AC9C;text-decoration:none;font-size:16px;font-weight:700;letter-spacing:-.01em;
    padding:6px 1px;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;white-space:nowrap}
  .tb-nav a:hover{color:#F5F1E8;border-bottom-color:rgba(226,197,126,.65)}
  .tb-cta{font-size:15px;padding:12px 24px}   /* 0726 터치 타깃 46px */

  /* ── 히어로 : 좌 카피 / 우 영상 스플릿 ── */
  .hero{min-height:820px;display:flex;align-items:center;text-align:left}
  .hero-in{max-width:1300px;width:100%;margin:0 auto;
    padding:76px 0;display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center;position:relative}
  .hero-copy{text-align:left}
  .hero .logo{width:196px;margin:0 0 32px}
  .hero h1{font-size:80px;line-height:1.08;margin-bottom:24px;letter-spacing:-.035em}
  .hero-lead{font-size:24px;color:#B5AC9C;line-height:1.62;margin-bottom:36px;max-width:30ch}
  .hero-lead b{color:#F5F1E8;font-weight:700}
  .badges{justify-content:flex-start;gap:10px;margin-bottom:38px}
  .hero-ctas{justify-content:flex-start;margin-top:0}
  .hero-visual{position:relative}
  .hero-videocard{background:#151310;border:1px solid #2E2A22;border-radius:20px;overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.55)}
  .hero-videocard .ytwrap{border-radius:0;display:block}
  .hero-videocard .ytwrap img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
  .hvc-cap{padding:18px 22px;font-size:17px;color:#B5AC9C;letter-spacing:-.01em}
  .hvc-cap .p{display:inline-flex;align-items:center;justify-content:center;width:26px;height:19px;
    border-radius:5px;background:#FF0000;color:#fff;font-size:11px;margin-right:8px;vertical-align:-3px}
  .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .hero-facts>div{background:rgba(21,19,16,.7);border:1px solid #2A2620;border-radius:16px;padding:20px 14px;text-align:center}
  .hero-facts b{display:block;font-size:34px;font-weight:800;color:#E2C57E;letter-spacing:-.02em;line-height:1}
  .hero-facts span{display:block;font-size:15px;color:#B5AC9C;margin-top:9px}

  /* ── 카드 그리드 거터 확대 ── */
  .numgrid{gap:30px}
  .site-gal{gap:20px}
  .ph2,.ph3,.ytcap2,.proof-stats,.cases,.intv{gap:22px}
  .b3{column-gap:40px}
  .growth{column-gap:56px}
  .faq{column-gap:64px}
  .chans{gap:20px}
  .steps{column-gap:32px}

  /* 실측 숫자 배너 : 3분할이 화면을 꽉 채우도록 */
  .proof-stats{grid-template-columns:repeat(3,1fr)}
  .pstat b{font-size:60px}

  /* 표(모집공고/정산) 왼쪽 라벨 폭 */
  .ap-row,.pay-row{grid-template-columns:220px 1fr}
  /* ← 병합: 원래 1309~1351줄 블록 */

  /* 약력 : 가로 4분할 타임라인 */
  .bio-timeline{margin-top:56px;padding-top:36px}
  .bio-timeline .bio-t{margin-bottom:28px}
  .bio-timeline ul{grid-template-columns:repeat(4,1fr);gap:28px}
  .bio-timeline li{position:relative;padding-top:22px}
  .bio-timeline li::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:#E2C57E}
  .bio-timeline li b{display:block;font-size:25px;margin:0 0 6px}
  .sv-media.bio-ph{align-self:end}

  /* 에디토리얼 스플릿 : 헤딩(좌 · 스티키) / 본문(우) */
  .split2{display:grid;grid-template-columns:0.8fr 1.2fr;gap:64px;align-items:start}
  .split2 .s2-head{position:sticky;top:100px}
  .split2 .s2-head h2,.split2 .s2-head .bighead{margin-bottom:0}
  .split2 .s2-body>*:first-child{margin-top:0}
  .split2 .greet,.split2 .about{margin-top:0}

  /* 텍스트+비주얼 좌우 (지그재그) */
  .split-v{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .split-v.rev .sv-media{order:-1}
  .split-v .sv-copy>*:first-child{margin-top:0}
  .split-v .intv,.split-v .ytcap,.split-v .ytcap2{margin-top:0}

  /* 수상 증빙 : 인증서(세로) 좌 크게 + 가로 2장 우 스택 → 세로 4000px 압축 */
  .award-gal{grid-template-columns:1fr 1fr;grid-auto-flow:row;align-items:start;gap:16px}
  .award-gal .ag-cert{grid-column:1;grid-row:1 / span 2;align-self:stretch}
  .award-gal figure:nth-child(1){grid-column:2;grid-row:1}
  .award-gal figure:nth-child(3){grid-column:2;grid-row:2}
  .award-gal figure:nth-child(1) img,
  .award-gal figure:nth-child(3) img{aspect-ratio:16/9;object-fit:cover;height:100%}
  .award-gal .ag-cert img{height:100%;object-fit:cover}

  /* 개인브랜드/사업실적/콜파일럿 : 큰 이미지 폭·간격 정돈 */
  .hp-shot,.shot.ig-shot{max-width:820px}
  .b3{margin-top:44px}

  /* 상담사 인터뷰 2장 : 폭 유지하되 여백 축소 */
  .intv{max-width:100%}

  /* 회사 소개(대표 편지) : 대칭 중앙 레터 */
  .about{max-width:840px;margin-left:auto;margin-right:auto}
  /* ← 병합: 원래 1358~1500줄 블록 */

  /* ── 장식용 glow가 섹션 overflow:hidden 에 잘려 생기는 경계선 제거 ── */
  .glow{display:none}

  /* ── 기준 본문 ── */
  body{font-size:17px}

  /* ── 히어로 ── */
  .hero{min-height:660px}
  .hero-in{padding:64px 0}
  .hero .logo{width:158px;margin-bottom:26px}
  .hero h1{font-size:56px;line-height:1.12;margin-bottom:20px}
  .hero-lead{font-size:18px;line-height:1.62;margin-bottom:30px}
  .badges{gap:8px;margin-bottom:30px}
  .badge{font-size:14px;padding:8px 18px}
  .cta{font-size:16px;padding:15px 32px}
  .hvc-cap{font-size:15px;padding:14px 18px}
  .hero-facts{margin-top:14px;gap:12px}
  .hero-facts>div{padding:16px 12px}
  .hero-facts b{font-size:26px}
  .hero-facts span{font-size:14px;margin-top:7px}

  /* ── 상단 내비 ── */
  .topbar .in{padding:13px 48px}
  .tb-logo{font-size:14px}
  .tb-logo img{width:20px}
  .tb-nav{gap:30px;margin-right:34px}
  .tb-nav a{font-size:15px}
  .tb-cta{font-size:14px;padding:12px 24px}   /* 0726 터치 타깃 46px (원래 40px) */

  /* ── 섹션 헤딩·리드·라벨 ── */
  .kick{font-size:14px;letter-spacing:.14em;margin-bottom:14px}
  .hand.lbl{font-size:14px;letter-spacing:.14em;margin-bottom:12px}
  h2{font-size:33px;line-height:1.3;margin-bottom:16px}
  .bighead{font-size:42px;line-height:1.24;margin-bottom:16px}
  .lede{font-size:19px;line-height:1.6}
  .greet{font-size:18px;line-height:1.8}
  .greet p+p{margin-top:20px}
  .about p{font-size:18px;line-height:1.85}
  .wf-label{font-size:15px;letter-spacing:.14em;margin:56px 0 12px}

  /* ── 밴드·태그라인·손글씨 ── */
  .band .bt{font-size:31px}
  .band .bs{font-size:18px;line-height:1.75}
  .tagline{font-size:52px}
  .hand-l{font-size:38px}
  .hand-m{font-size:31px}
  .bigq{font-size:70px}
  .band .bigq{font-size:70px}

  /* ── 약력 타임라인 ── */
  .bio-t{font-size:16px;padding:9px 20px}
  .bio-timeline li{font-size:16px;padding-top:18px}
  .bio-timeline li b{font-size:19px}

  /* ── 실적의 비결 · 성장 · 자산3 ── */
  .numcard h3{font-size:22px}
  .nn{font-size:20px;width:48px;height:48px}
  .gcard{font-size:18px;line-height:1.6}
  .gcard .ic{width:44px;height:44px;font-size:22px}
  .b3card .bno,.b-cell .bno{font-size:13px}
  .b3card h3{font-size:21px}
  .b3card p{font-size:17px;line-height:1.62}

  /* ── 교육 ── */
  .edu-item h3{font-size:24px}
  .edu-item p{font-size:17.5px;line-height:1.62}
  .edu-no{width:44px;height:44px;font-size:20px}
  .sl .sn{font-size:13px;padding:6px 14px}
  .sl .st{font-size:18px}
  .plus{width:36px;height:36px;font-size:20px}

  /* ── 콜파일럿 · 개인브랜드 ── */
  .shot figcaption{font-size:17px;padding:22px 26px;line-height:1.6}
  .shot figcaption b{font-size:19px}
  .fair{font-size:17.5px;line-height:1.62}
  .proof-head{font-size:20px}
  .proof-sub{font-size:16px}
  .pstat b{font-size:40px}
  .pstat span{font-size:15px;margin-top:8px}
  .pstat.spot{padding:26px 16px 22px!important;animation:none}
  .pstat.spot b{font-size:38px!important}
  .pstat.spot span{font-size:15px!important;margin-top:8px!important}

  /* ── 인사담당 · 약속 ── */
  .who-photo figcaption{font-size:15px}
  .who-photo figcaption b{font-size:18px}
  .who-card p{font-size:17.5px;line-height:1.7}
  .tr-chip{font-size:15px;padding:7px 14px}
  .promise h3{font-size:21px}
  .promise li{font-size:17.5px;line-height:1.6}
  .sig{font-size:16px}

  /* ── 사업실적 · 수상 · 복지 ── */
  .site-gal figcaption{font-size:15px}
  .site-gal .feat figcaption{font-size:18px}
  .award-mark{width:60px;height:60px;font-size:19px}
  .award-txt{font-size:16px}
  .award-txt b{font-size:20px}
  .ph3 figcaption{font-size:16px}
  .ph3 figcaption b{font-size:18px}

  /* ── 분양상담사란 · 인터뷰 ── */
  .intv .ivc figcaption{font-size:16px;padding:18px 22px 22px}
  .intv .ivc figcaption b{font-size:20px}
  .intv-cap{font-size:16px}

  /* ── Q&A ── */
  .qa .q{font-size:20px}
  .qa .a{font-size:17.5px;line-height:1.62}

  /* ── 모집공고 표 · 단계 · 채널 ── */
  .ap-row .pk,.pay-row .pk{font-size:16px}
  .ap-row .pv,.pay-row .pv{font-size:17.5px}
  .ap-row .pv .big{font-size:26px}
  .step h3{font-size:19px}
  .step p{font-size:16.5px;line-height:1.55}
  .step .no{width:42px;height:42px;font-size:19px}
  .chan .nm{font-size:16px}
  .chan .id{font-size:20px}
  .chan .ic{width:44px;height:44px}

  /* ── 최종 CTA · 마감 ── */
  .final h2{font-size:40px}
  .final .fp{font-size:18px}
  .final .logo{width:200px}
  .closing .calltag{font-size:15px}
  .closing .callnum{font-size:40px;padding:20px 46px}
  .closing .callsub{font-size:17px}
  .legal .co{font-size:16px;line-height:1.8}
  .legal .note{font-size:14.5px;line-height:1.7}

  /* ── 각주·캡션 일괄 ── */
  .fine,.pt-note,.cp-note,.proof-note,.perf-note,.ytcap-cap,.award-cap,.intv-cap{font-size:15px;line-height:1.65}

  /* 인스타 실측 각주 : 위의 캡처(.ig-shot, 820px 가운데)와 축을 맞춰 가운데 정렬.
     좌측 끝에 붙어 있어 이미지와 어긋나 보이던 것을 정리. text-wrap:balance 로
     줄 길이를 고르게 나눠 가운데 정렬 특유의 들쭉날쭉함을 없앤다. */
  .proof>.proof-note{margin-left:auto;margin-right:auto;text-align:center;text-wrap:balance}
  /* ← 원래 1520~1665줄 블록 */

  /* ─────────────── ① 타이포 : 본문 19px 기준 ─────────────── */
  body{font-size:19px;line-height:1.75}

  .lede{font-size:23px;line-height:1.68}
  .hero-lead{font-size:20px;line-height:1.66}
  .greet,.about p{font-size:19px;line-height:1.85}

  /* 본문급 — 개별로 흩어져 있던 16.5~18px 을 한 값으로 */
  .b3card p,.edu-item p,.qa .a,.who-card p,.promise li,.fair,.step p,
  .ap-row .pv,.pay-row .pv,.gcard,.b-cell p,.f-step p,.duty-item p,
  .req-card li,.r-item p,.bio-timeline li,.flow-note,.pay-rules li{
    font-size:19px;line-height:1.75}
  .step p{line-height:1.7}

  /* 캡션 — 15·16·17·18 네 값이 같은 역할을 하고 있었다 → 17 */
  .shot figcaption,.intv .ivc figcaption,.ph3 figcaption,.site-gal figcaption,
  .who-photo figcaption,.hvc-cap,.award-txt{font-size:17px;line-height:1.72}
  .shot figcaption b,.intv .ivc figcaption b,.ph3 figcaption b,
  .who-photo figcaption b,.award-txt b{font-size:20px}
  .site-gal .feat figcaption{font-size:19px}

  /* 각주 — 15px + 4.97:1 조합이 최약점이었다. 법적 고지는 14.5px 로 최소였다. */
  .fine,.pt-note,.cp-note,.proof-note,.perf-note,.ytcap-cap,.award-cap,.intv-cap,
  .legal .note{font-size:17px;line-height:1.78}
  .legal .co{font-size:18px;line-height:1.8}

  /* 라벨 — 한글에 +0.14em 자간은 어절 인지를 무너뜨린다. 크기는 올리고 자간은 줄인다. */
  .kick,.hand.lbl{font-size:15px;letter-spacing:.08em}
  .wf-label{font-size:16px;letter-spacing:.06em}
  .closing .calltag{font-size:16px;letter-spacing:.06em}
  .b3card .bno,.b-cell .bno{font-size:15px;letter-spacing:.06em;margin-bottom:11px}
  .sl .sn{font-size:14px;letter-spacing:.1em}   /* "STEP 01" — 라틴이라 자간 유지 */
  .badge,.hero-facts span,.tr-chip{font-size:15px}
  .tb-logo em{font-size:13px;letter-spacing:.12em}   /* 페이지 최소 글씨였던 12px */
  .tb-nav a{font-size:16px}
  .tb-cta{font-size:15px}

  /* 카드 제목 — 19·20·21·22·24 다섯 값 → 22 / 26 두 값 */
  .step h3,.qa .q,.chan .id,.proof-head,.award-txt b,.intv .ivc figcaption b{font-size:22px}
  .b3card h3,.promise h3,.numcard h3,.edu-item h3{font-size:26px}

  /* 제목 단계 — 본문 상향에 맞춰 비율 유지 */
  h2{font-size:36px;line-height:1.3}
  .bighead{font-size:46px}
  .hero h1{font-size:60px}
  .tagline{font-size:58px}      /* 히어로 h1 과 4px 차이로 겹치던 것을 벌림 */
  .final h2{font-size:44px}
  .final .fp{font-size:20px}
  .closing .callsub{font-size:18px}

  /* 숫자 트랙 — 40 / 46 두 값. 골드 타일이 형제(40)보다 크다는 강조 의도는 유지하되
     60px 은 폐기(특이도 사고로 의도와 다르게 렌더되던 값) */
  .pstat b{font-size:40px}
  .pstat.spot b,.sec.invert .pstat.spot b{font-size:46px}
  .pstat span,.pstat.spot span,.sec.invert .pstat.spot span{font-size:16px;margin-top:9px}
  .ap-row .pv .big{font-size:28px}

  /* 라이트박스 안내 — 닫는 방법을 알려주는 유일한 문구가 13px · 5.3:1 이었다 */
  #lightbox .lb-hint{font-size:16px;color:#D9D2C4;bottom:26px;
    background:rgba(11,10,9,.72);padding:8px 18px;border-radius:999px;
    width:max-content;margin:0 auto;left:0;right:0}

  /* ─────────────── ② 대비 : 배경별 3단 램프 ─────────────── */

  /* 다크 — 본문을 올리고 강조를 내려 한 문장 안 휘도 계단을 2.0배 → 1.43배로 */
  .lede,.greet,.about p,.b3card p,.edu-item p,.qa .a,.who-card p,.promise li,
  .fair,.step p,.gcard,.b-cell p,.f-step p,.duty-item p,.r-item p,
  .hero-lead,.band .bs,.flow-note,.pay-rules li{color:#C6BDAB}
  .req-card li,.bio li,.bio-timeline li,.ap-row .pv,.pay-row .pv{color:#C6BDAB}
  .lede b,.greet b,.about p b,.b3card p b,.edu-item p b,.qa .a b,.who-card p b,
  .promise li b,.fair b,.step p b,.gcard b,.b-cell p b,.f-step p b,.duty-item p b,
  .r-item p b,.hero-lead b,.band .bs b,.flow-note b,.proof-note b{color:#E8E1D2}
  .fine,.pt-note,.cp-note,.proof-note,.perf-note,.ytcap-cap,.award-cap,.intv-cap,
  .f-arr,.st-arr,.req-card .rc-sub,.quotebar .qs,.legal .note{color:#968B7A}
  .shot figcaption,.intv .ivc figcaption,.ph3 figcaption,.site-gal figcaption,
  .who-photo figcaption,.hvc-cap,.award-txt{color:#C6BDAB}
  /* 카드 경계선 1.21:1 — '박스를 걷어내고 선으로 구분한다'는 설계인데 선이 안 보였다 */
  /* 0726 — 이 규칙은 전역으로 옮겼다(파일 끝). 모바일 구분선 대비가 1.21:1 이었다. */

  /* 라이트(.sec.invert / .closing) */
  .sec.invert .ghost,.closing .ghost{color:#6E675A}          /* 3.16:1 → 4.97:1 */
  .sec.invert .proof-sub,.sec.invert .proof-note,
  .sec.invert .cp-note,.sec.invert .fine,.sec.invert .pt-note,
  .sec.invert .perf-note,.sec.invert .award-cap{color:#625B4E}   /* 4.97 → 5.96 */
  .sec.invert .kick,.sec.invert .g,.sec.invert .bno,
  .closing .calltag{color:#7E5A24}                                /* 4.81 → 5.52 */
  /* 법정 고지는 브랜드 강조색이 아니라 중립·고대비로 간다.
     위계는 색이 아니라 크기·여백·좌측 골드 바로 낮춘다. */
  .closing .legal .note{color:#4A443A}
  .closing .legal .co{color:#5A5347}
  .sec.invert .pstat.spot span,.pstat.spot span{color:#533E13}    /* 골드 그라디언트 최암부에서도 4.9 이상 */
  .sec.invert .pstat{border-color:#C7BCA2}                        /* 타일 경계 1.36:1 → 보임 */
  /* 라이트 패널에서는 antialiased 가 획을 깎아 오히려 흐려진다(다크 전용 최적화값) */
  .sec.invert,.closing{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}

  /* 상단바 — 아이보리 섹션 위를 지날 때 실효 배경이 밝아져 내비 대비가 8.8 → 5.6 으로 떨어졌다 */
  .topbar{background:rgba(11,10,9,.94);border-bottom-color:#3B3428}
  .topbar.shrunk{background:#0B0A09}

  /* ─────────────── ③ 연출 : 무한 애니메이션 잔존분 제거 ─────────────── */
  /* 1366행에서 .pstat.spot{animation:none} 만 껐고 ::after 광택 스윕(3.4초)과
     b 의 텍스트 글로우(2.6초)는 계속 돌고 있었다. 바로 아래가 각주다. */
  .pstat.spot::after{animation:none;opacity:0}
  .pstat.spot b,.sec.invert .pstat.spot b{animation:none;text-shadow:none}

  /* ─────────────── ④ 개인브랜드 섹션 (사용자 지목 구간) ─────────────── */
  /* 3열이라 열당 글줄이 22자로 잘게 끊겼다 → 2열 */
  .b3{grid-template-columns:1fr 1fr;column-gap:48px;row-gap:40px}
  .b3 .b3card:nth-child(3){border-left:none;padding-left:0}
  .b3card p{max-width:none}
  /* 캡처 안 글자(41~61px)가 페이지 최대 숫자(40px)보다 커서 본문을 밀어냈다 */
  .sec.invert .shot.ig-shot{max-width:620px}
  /* .proof 블록은 통계·캡처·각주가 이미 가운데인데 제목·소제목만 좌측이라
     한 덩어리 안에서 축이 흔들렸다. 블록 전체를 하나의 가운데 축으로 묶는다. */
  .proof{text-align:center}
  .proof-stats{max-width:940px;margin-left:auto;margin-right:auto}
  .proof-head,.proof-sub{margin-left:auto;margin-right:auto;text-wrap:balance}
  .proof .shot figcaption{text-align:left}
  /* 개인브랜드 리드("…채널 주인은 그대로입니다") → 통계 블록 사이 간격 확대 68→104 */
  .sec.invert .lede+.proof{margin-top:104px}

  /* 콜파일럿 시연 데이터 고지 : 위 캡처(가운데)와 축을 맞춰 가운데 정렬 */
  .sec.invert .cp-note{text-align:center;margin-left:auto;margin-right:auto;text-wrap:balance}
  /* 시연 고지 → 인DB 문단 사이 간격 확대 38→60 */
  .sec.invert .cp-note+.fair{margin-top:60px}

  /* ─────────────── ⑤ 배치 ─────────────── */
  .split-v{align-items:start}
  .split-v .sv-media{align-self:center}
  /* .closing 은 가운데 정렬인데 .legal 만 좌측 정렬 + 폭 제한이라 아래에 매달려 있었다 */
  .closing .legal{margin-left:auto;margin-right:auto}
  .closing .legal .co,.closing .legal .note{margin-left:auto;margin-right:auto;text-align:left}

  /* ─────────────── ⑥ 포커스 표시 (파일 전체 outline 선언 0건이었다) ─────────────── */
  /* 0726 — 포커스 표시는 전역으로 옮겼다(파일 끝) */
}

/* 초광폭(≥1600) : 좌우 여백이 과하지 않게 콘텐츠를 살짝 더 넓게 */
@media (min-width:1600px){
  .page{max-width:1360px}
  .hero,.tagline,.sec.invert,.sec.pre-invert,.sec.post-invert,.final,.closing{
    padding-left:max(48px,calc(var(--halfvwz) - 680px));padding-right:max(48px,calc(var(--halfvwz) - 680px))}
  .hero-in,.topbar .in{max-width:1360px}
}

/* ═══════════════════════════════════════════════════════════════
   0724R2 — 모니터 대응 배율 (--z)   ※ 0724 1차안을 전면 교체

   1차안의 실패 : 기준을 100vw(브라우저 뷰포트)로 잡았다. 그런데
     CSS 뷰포트 = 모니터 물리폭 ÷ Windows 디스플레이 배율
   이라, ① 1920 모니터를 OS 125%로 쓰면 뷰포트가 1536이라 기준 1600을
   못 넘겨 배율이 통째로 무효였고, ② 100vw 파생이라 Ctrl+휠로 확대하면
   뷰포트가 줄며 --z 도 같이 줄어 확대를 수학적으로 100% 상쇄했다
   (paint = 선언px × --z × 확대율 = 선언px × 물리폭/기준폭 → 확대율 소거).
   WCAG 2.2 SC 1.4.4(텍스트 200% 확대) 실패이자, OS 배율 설정까지 무시했다.

   교체안 : 기준을 screen.width 로 바꾼다.
     · screen.width 는 OS 디스플레이 배율은 반영하고(1920@125% → 1536)
       브라우저 확대에는 불변이다 → 확대가 1:1로 살아난다.
     · k=0.55 부분보정 — 넓은 화면 이득의 절반만 취해, 만에 하나
       screen.width 가 확대에 반응하는 브라우저(파이어폭스)에서도
       사용자 확대가 45% 이상 살아남는다.
     · dpr 변화 감지 — 확대는 devicePixelRatio 를 바꾸므로, dpr 이
       변했을 때는 재계산하지 않는다(모니터 간 이동일 때만 재계산).

     z = clamp(1, 1 + (screen.width/1360 - 1) × 0.55, 1.9)
     1360→1.00  1536→1.07  1920→1.23  2048→1.28  2560→1.48  3840→1.90

   ※ 1536(1920@125%) 환경에서는 배율이 해줄 수 있는 게 거의 없다.
     그 환경의 "글씨가 안 보인다"는 배율이 아니라 기본 타이포 문제이므로
     아래 Round4 블록에서 본문 17→19px 등 기준값 자체를 올려 해결한다.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;                 /* 초흑 페이지 옆 흰 스크롤바(화면에서 가장 밝은 광원) 제거 */
  --z:1;
  --vwz:calc(100vw / var(--z));      /* zoom 보정된 뷰포트 폭  */
  --halfvwz:calc(50vw / var(--z));   /* zoom 보정된 뷰포트 절반 */
  /* 글줄 폭 토큰 — em 기준이라 배율(--z)이 어떻게 변해도 '자수'가 고정된다.
     한글은 1자 ≈ 1em 이므로 30em ≈ 30자(권장 25~35자 밴드). */
  --measure:30em;         /* 본문      */
  --measure-lede:27em;    /* 리드·인사말 */
  --measure-note:29em;    /* 각주·캡션  */
}
/* 스크롤바 자리를 항상 예약 — 100vw 에 스크롤바가 포함돼 풀블리드가
   7.5px 밀리던 오차를 고정한다(환경마다 값이 달라지던 문제도 같이 해소) */
html{scrollbar-gutter:stable}

/* JS 미동작 시 폴백. zoom 미지원 브라우저(FF<126)에서는 --z 를 1로 둬야
   --vwz 역보정 때문에 풀블리드가 깨지지 않으므로 @supports 로 가둔다. */
@supports (zoom:1){
  @media (min-width:1560px){ :root{ --z:1.08 } }
  @media (min-width:1760px){ :root{ --z:1.16 } }
  @media (min-width:1980px){ :root{ --z:1.25 } }
  @media (min-width:2200px){ :root{ --z:1.34 } }
  @media (min-width:2450px){ :root{ --z:1.44 } }
  @media (min-width:2800px){ :root{ --z:1.58 } }
  @media (min-width:3200px){ :root{ --z:1.74 } }
  @media (min-width:3600px){ :root{ --z:1.90 } }
}
html{ zoom:var(--z) }

/* zoom 영향을 받는 뷰포트 단위 전부 보정 (fixed 계열) */
#lightbox{width:var(--vwz);height:calc(100vh / var(--z));inset:auto;left:0;top:0}
#lightbox img{max-width:min(100%,1600px);max-height:calc(88vh / var(--z));width:auto}
#kmodal{width:var(--vwz);height:calc(100vh / var(--z));inset:auto;left:0;top:0}

/* 인쇄·PDF 는 배율 완전 해제 */
@media print{
  :root{ --z:1 !important; --vwz:100%; --halfvwz:50% }
  html{ zoom:1 }
}

/* ══════════════════════════════════════════════════════════════
   보류 구역 — 마크업이 없어 아무 요소에도 안 붙는 스타일.
   지우지 않는 이유: 되살릴 계획이 있는 컴포넌트다.
     .pay / .pay-row / .pk / .pv / .paytable  → 정산 스펙 표 (수익 챕터 확장용)
     .nots / .not-item / .x                   → "이건 안 합니다" 취소선 블록
     .trust / .t-item / .tn / .tl             → 히어로 신뢰 지표 2×2
     .facts / .fact                           → 팩트 리스트
     .flow / .f-step / .f-who / .f-arr / .flow-note → 전형 절차 플로우
     .duty / .duty-item                       → 직무 항목
     .req-grid / .req-card / .rc-sub          → 자격요건 카드
   ※ .pt-note 는 현재 사용 중이므로 여기 없다.
   ══════════════════════════════════════════════════════════════ */
.nots{margin-top:48px;display:grid;gap:14px}
.not-item{background:#151310;border:1px solid #2A2620;border-radius:18px;padding:30px 32px}
.not-item .x{display:inline-block;font-weight:800;color:#8A8072;text-decoration:line-through;text-decoration-color:rgba(190,70,80,.85);text-decoration-thickness:3px;font-size:29px;margin-bottom:10px}
.not-item p{font-size:24px;color:#B5AC9C}
.not-item p b{color:#F5F1E8}
.pay{margin-top:48px;background:#151310;border:1px solid #3B3428;border-radius:22px;overflow:hidden}
.pay-row{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid #2A2620}
.pay-row:last-child{border-bottom:none}
.pay-row .pk{padding:28px 28px;font-size:22px;font-weight:800;color:#B5AC9C;background:rgba(243,245,247,.03)}
.pay-row .pv{padding:28px 30px 28px 4px;font-size:23.5px}
.pay-row .pv b{color:#E2C57E}
.paytable{margin-top:34px;background:linear-gradient(160deg,rgba(226,197,126,.13),rgba(226,197,126,.03));border:1px solid rgba(226,197,126,.35);border-radius:22px;padding:36px 34px 32px}
.paytable h3{font-size:31px;font-weight:800;margin-bottom:12px;line-height:1.3}
.paytable p{font-size:23.5px;color:#B5AC9C}
.paytable p b{color:#F5F1E8}
.paytable{margin-top:44px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.t-item{background:rgba(21,19,16,.85);border:1px solid #2A2620;border-radius:22px;padding:30px 30px 26px}
.t-item .tn{font-weight:800;font-size:42px;letter-spacing:-.02em;color:#E2C57E;margin-bottom:8px}
.t-item .tn small{font-size:26px;font-weight:800;color:#F5F1E8}
.t-item .tl{font-size:21.5px;color:#B5AC9C;line-height:1.5}
.facts{margin-top:48px;display:grid;gap:16px}
.fact{background:#151310;border:1px solid #2A2620;border-radius:22px;padding:36px 34px 32px}
.fact .tag{display:inline-block;font-size:19px;font-weight:800;letter-spacing:.08em;padding:7px 18px;border-radius:999px;margin-bottom:18px}
.fact.hard .tag{background:rgba(243,245,247,.08);color:#B5AC9C}
.fact.good .tag{background:rgba(226,197,126,.12);color:#E2C57E}
.fact .fn{font-weight:800;font-size:50px;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.fact.good .fn{color:#E2C57E}
.fact h3{font-size:27px;font-weight:700;margin-bottom:10px}
.fact p{font-size:23.5px;color:#B5AC9C}
.flow{margin-top:48px;display:grid;gap:0}
.f-step{background:#151310;border:1px solid #2A2620;border-radius:22px;padding:34px 34px 30px}
.f-step.you{background:linear-gradient(160deg,rgba(226,197,126,.16),rgba(226,197,126,.04));border-color:rgba(226,197,126,.45)}
.f-step .f-who{font-size:20px;font-weight:800;letter-spacing:.14em;color:#E2C57E;margin-bottom:10px}
.f-step.pro .f-who{color:#B5AC9C}
.f-step h3{font-size:31px;font-weight:800;margin-bottom:8px}
.f-step p{font-size:23.5px;color:#B5AC9C}
.f-arr{text-align:center;color:#7E766A;font-weight:800;font-size:34px;padding:10px 0}
.flow-note{margin-top:26px;background:rgba(226,197,126,.09);border:1px solid rgba(226,197,126,.3);border-radius:16px;padding:26px 30px;font-size:23.5px;color:#B5AC9C}
.flow-note b{color:#F5F1E8}
.duty{margin-top:48px;display:grid;gap:14px}
.duty-item{display:flex;gap:22px;align-items:flex-start;background:#151310;border:1px solid #2A2620;border-radius:18px;padding:28px 30px}
.duty-item .no{flex:none;width:56px;height:56px;border-radius:14px;background:rgba(226,197,126,.12);color:#E2C57E;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;margin-top:4px}
.duty-item h3{font-size:26px;font-weight:800;margin-bottom:4px}
.duty-item p{font-size:22.5px;color:#B5AC9C}
.req-grid{margin-top:48px;display:grid;gap:18px}
.req-card{background:#151310;border:1px solid #2A2620;border-radius:22px;padding:38px 38px 34px}
.req-card.hl{border-color:rgba(226,197,126,.35)}
.req-card h3{font-size:30px;font-weight:800;margin-bottom:8px}
.req-card .rc-sub{font-size:22px;color:#7E766A;margin-bottom:24px}
.req-card ul{list-style:none;display:grid;gap:15px}
.req-card li{display:flex;gap:16px;align-items:baseline;font-size:24px;color:#D9D2C4}
.req-card li b{color:#F5F1E8}
.req-card .ok{flex:none;color:#E2C57E;font-weight:800}
.req-card .rc-sub,.quotebar .qs{color:#8C8272}
.req-card .rc-sub{margin-bottom:18px}
.flow-note{margin-top:30px}

/* ══════════════════════════════════════════════════════════════
   0726 전역 이관 — 원래 @media(min-width:1000px) 안에 갇혀 있어
   모바일에서는 아예 동작하지 않던 규칙들. 데스크톱 전용일 이유가 없다.
   ══════════════════════════════════════════════════════════════ */
[id]{scroll-margin-top:84px}
:where(a,button,[tabindex],[role="button"]):focus-visible{
  outline:3px solid #E2C57E;outline-offset:3px;
  box-shadow:0 0 0 6px rgba(11,10,9,.85);border-radius:6px}
.tb-cta:focus-visible,.cta-main:focus-visible,.stick .s-main:focus-visible{
  outline-color:#0B0A09;box-shadow:0 0 0 6px rgba(226,197,126,.6)}
.sec.invert :where(a,button,[tabindex],[role="button"]):focus-visible{
  outline-color:#7E5A24;box-shadow:0 0 0 6px rgba(245,241,232,.9)}

/* ══════════════════════════════════════════════════════════════
   0726 추가 — 모바일 가독성·구분 보강
   ══════════════════════════════════════════════════════════════ */
/* 구분선 대비: 원래 #221F1A(1.21:1) 가 모바일에서 사실상 안 보였다 */
.sec+.sec,.b-cell,.b3card,.qa,.gcard,.step,.numcard{border-color:#3B3428}
/* 섹션 경계를 배경 톤 교차로 한 번 더 — 스크롤 중 챕터가 바뀐 게 보이게 */
@media (max-width:999px){ .sec:nth-of-type(even){background:#0E0C0A} }
/* 라이트박스 닫기 버튼(44x44) — 원래 오버레이 탭 말고는 닫는 수단이 없었다 */
#lightbox .lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;
  display:grid;place-items:center;border:0;background:rgba(11,10,9,.6);
  border-radius:50%;color:#F5F1E8;font-size:26px;line-height:1;cursor:pointer}
#lightbox .lb-x:hover{background:rgba(11,10,9,.9)}
/* 100vh → 100dvh : 모바일 주소창 때문에 힌트가 화면 밖으로 나가던 것 */
@supports (height:100dvh){ #lightbox{height:100dvh} #kmodal{height:100dvh} }