/* ===== ABOUT(회사소개) — newbird career 레이아웃 재현 (좌 라벨 레일 · 우 콘텐츠) ===== */

/* ── 공통: 좌 라벨 + 우 콘텐츠 2단 ── */
.ab-sec{padding:clamp(64px,9vw,130px) 0 0;}
.ab-grid{display:grid;grid-template-columns:clamp(200px,22vw,280px) 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
.ab-side{position:sticky;top:130px;margin-left: 10px;margin-top: 6px;}
.ab-label{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0;}
.ab-label::after{content:"";width:18px;height:4px;background:var(--red);border-radius:2px;}
.ab-main{min-width:0;}
.ab-title{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.28;color:var(--ink);margin:0 0 clamp(24px,3vw,38px);}
.ab-title em{font-style:normal;color:var(--red);}
.ab-sub{font-size:15.5px;color:var(--ink-2);line-height:2;margin:0 0 clamp(40px,5.5vw,72px);}
.ab-sub strong{color:var(--ink);font-weight:700;}
.ab-line{border:0;border-top:1px solid rgba(21,23,27,.18);margin:0 0 clamp(44px,6vw,80px);}

/* ── 히어로 ── */
.ab-hero{padding:clamp(126px,16vh,190px) 0 0;}
.ab-hero .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.26em;color:var(--red);text-transform:uppercase;margin:0 0 22px;}
.ab-hero h1{font-size:clamp(2.4rem,6vw,4.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:0 0 24px;}
.ab-hero h1 em{font-style:normal;color:var(--red);}
.ab-hero .lead{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--gray);line-height:1.8;margin:0;max-width:56ch;}

/* ── WORK STYLE : 아이콘 + 영문 대제목 + 한글 부제 (플랫 2단) ── */
.ab-ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,96px) clamp(36px,6vw,88px);}
.ab-way .ic{display:block;width:52px;height:52px;color:var(--ink);margin:0 0 clamp(28px,4vw,54px);}
.ab-way .ic svg{width:100%;height:100%;}
.ab-way h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;text-transform:uppercase;}
.ab-way .kr{font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:600;color:var(--ink);margin:0 0 22px;}
.ab-way p{font-size:15px;color:var(--ink-2);line-height:1.95;margin:0;max-width:44ch;}

/* ── NUMBERS : 플랫 통계 (상단 보더) ── */
.ab-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.4vw,44px);}
.ab-num{border-top:2px solid var(--ink);padding-top:clamp(18px,2.4vw,26px);}
.ab-num .k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);margin:0 0 14px;}
.ab-num .v{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 0 10px;line-height:1;}
.ab-num .v em{font-style:normal;color:var(--red);}
.ab-num .d{font-size:13.5px;color:var(--gray);line-height:1.65;margin:0;}

/* ── HISTORY 헤드 (좌 대형 카피 · 우 리드) ── */
.ab-hist-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:center;margin:0 0 clamp(34px,4.6vw,58px);}
.ab-hist-head .ab-title{margin:0;font-size:clamp(2.1rem,4.2vw,2.8rem);line-height:1.15;}
.ab-hist-lead{font-size:15.5px;color:var(--ink-2);line-height:2;margin:0;}
.ab-hist-lead strong{color:var(--ink);font-weight:700;}

/* ── HISTORY : 타임라인 (기간+부제 · 제목+본문+칩) ── */
.ab-hist2{border-top:1px solid #e5e8ec;}
.ab-row2{display:grid;grid-template-columns:clamp(150px,17vw,220px) 1fr;gap:clamp(24px,4vw,64px);padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid #e5e8ec;}
.ab-row2 .yr{font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0;line-height:1.3;white-space:nowrap;}
.ab-row2.now .yr::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:12px;vertical-align:3px;}
.ab-row2 .sub{font-size:13.5px;color:var(--gray-2);margin:10px 0 0;}
.ab-row2 .ev h4{font-size:clamp(1.3rem,2.3vw,1.85rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 0 16px;line-height:1.35;}
.ab-row2 .ev p{font-size:15.5px;color:var(--ink-2);line-height:1.95;margin:0;}
.ab-row2 .ev p strong{color:var(--ink);font-weight:700;}
.ab-row2 .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.6vw,28px);}
.ab-row2 .tags span{font-size:13.5px;font-weight:600;color:var(--ink-2);background:#EEF1F4;border-radius:999px;padding:10px 18px;line-height:1;}
.ab-row2 .tags span.hl{background:#fff;border:1.5px solid var(--red);color:var(--red);padding:8.5px 16.5px;}

/* ── SERVICE : 플랫 2단 리스트 ── */
.ab-svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,56px) clamp(36px,6vw,88px);}
.ab-svc-item{display:block;text-decoration:none;color:inherit;border-top:1px solid rgba(21,23,27,.14);padding-top:clamp(18px,2.4vw,24px);transition:.18s;}
.ab-svc-item .en{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--gray-2);display:block;margin:0 0 10px;text-transform:uppercase;}
.ab-svc-item h3{font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px;transition:color .18s;}
.ab-svc-item p{font-size:14px;color:var(--gray);line-height:1.7;margin:0;}
.ab-svc-item:hover h3{color:var(--red);}

/* ── CLIENTS : 거래 계단 차트 ── */
.ab-stair{margin-top:clamp(40px,5.4vw,64px);}
.ab-stair-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid #e5e8ec;margin-bottom:clamp(26px,3.6vw,44px);}
.ab-stair-head h3{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0;}
.ab-stair-head span{font-size:13px;color:var(--gray-2);white-space:nowrap;}
.ab-hbars{display:flex;flex-direction:column;gap:clamp(8px,1.1vw,13px);}
.hrow{display:grid;grid-template-columns:34px minmax(150px,220px) 1fr;align-items:center;gap:clamp(10px,1.6vw,20px);}
.hrow b{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--gray-2);}
.hrow span{font-size:14px;color:var(--ink-2);line-height:1.4;word-break:keep-all;}
.hrow i{display:block;height:clamp(16px,1.9vw,22px);border-radius:7px;background:linear-gradient(90deg,#E9EDF2,#DCE2EA);width:calc(var(--i) / var(--n,13) * 100%);filter:brightness(calc(1.05 - var(--i) * 0.011));}
.hrow.hot b{color:var(--red);}
.hrow.hot span{color:var(--ink);font-weight:700;}
.hrow.hot i{background:linear-gradient(90deg,#F1564E,#E23A38);box-shadow:0 8px 20px rgba(233,68,68,.28);filter:none;}
.ab-stair-note{margin-top:clamp(36px,5vw,56px);padding-top:clamp(20px,2.6vw,28px);border-top:1px solid #e5e8ec;font-size:15px;line-height:1.9;color:var(--ink-2);}
.ab-stair-note strong{color:var(--ink);font-weight:700;}
@media (max-width:640px){
  .hrow{grid-template-columns:26px minmax(110px,150px) 1fr;gap:8px;}
  .hrow span{font-size:12px;}
  .hrow b{font-size:11px;}
  .hrow i{height:14px;border-radius:5px;}
}

/* ── FAQ : 아코디언 ── */
.ab-faq{border-top:1px solid rgba(21,23,27,.18);}
.ab-q{border-bottom:1px solid rgba(21,23,27,.14);}
.ab-q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;padding:clamp(20px,2.4vw,26px) 4px;}
.ab-q .q{font-size:clamp(1.02rem,1.5vw,1.15rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.5;transition:color .18s;}
.ab-q button:hover .q{color:var(--red);}
.ab-q .ic{flex:none;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:var(--gray-2);font-size:18px;line-height:1;transition:transform .25s ease,color .18s;}
.ab-q.open .ic{transform:rotate(45deg);color:var(--red);}
.ab-q .a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.ab-q .a p{font-size:15px;color:var(--gray);line-height:1.8;margin:0;padding:0 34px clamp(20px,2.4vw,26px) 4px;}

/* ── 풀블리드 이미지 (스크롤 시 배경 고정·패럴랙스) ── */
.ab-photo{margin-top:clamp(48px,7vw,90px);height:clamp(360px,72vh,760px);background:url(../assets/imgs/projects/3d/cg-001.png) center/cover no-repeat;background-attachment:fixed;}
/* 모바일·터치 기기는 fixed 미지원 → 일반 스크롤로 대체 */
@media (hover:none),(max-width:860px){.ab-photo{background-attachment:scroll;height:clamp(240px,42vh,420px);}}

/* 마지막 섹션 아래 여백 */
.ab-sec.last{padding-bottom:clamp(64px,9vw,130px);}

@media (max-width:860px){
  .ab-grid{grid-template-columns:1fr;gap:26px;}
  .ab-side{position:static;top:auto;}
  .ab-ways{grid-template-columns:1fr;gap:52px;}
  .ab-nums{grid-template-columns:repeat(2,1fr);}
  .ab-svc{grid-template-columns:1fr;}
  .ab-row2{grid-template-columns:1fr;gap:14px;}
  .ab-hist-head{grid-template-columns:1fr;gap:18px;}
}
@media (max-width:540px){
  .ab-nums{grid-template-columns:1fr;}
  .ab-hero-visual{aspect-ratio:16/9;}
}