/* 블랙에이디 포트폴리오 (테스트) - 클래스는 ba_ 접두어로 기존 사이트 CSS와 충돌 방지
 * 시안을 섹션(01~07)별 이미지로 내보낸 것을 순서대로 쌓음. PC 2x(3840) / 모바일 4x(1500)
 * 이미지 경계의 흰 선을 막기 위해 섹션을 1px 겹치게 붙임 */
.ba_wrap { --hd: 80px; padding-top: var(--hd); overflow: hidden; background: #fff; container-type: inline-size; }
.ba_wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.ba_wrap picture, .ba_wrap img { display: block; width: 100%; height: auto; }
.ba_wrap section { position: relative; --u: calc(100cqw / 1920); }
/* 섹션 사이 여백은 피그마 시안 값(PC 1920 기준 px, 프레임 안에서 위/아래 섹션 사이 간격) 그대로.
 * 시안에서 붙어 있는 경계(히어로↔정보, 06↔07)는 겹치지 않고, 대신 경계 쪽 색을 섹션 배경에 깔아
 * 화면 배율 때문에 생기는 1px 이하 틈이 흰 선으로 보이지 않게 함 */
.ba_wrap .ba_hero { background: #ff582b; }
.ba_wrap .ba_s06 { background: #ff582b; }
.ba_wrap .ba_s07 { background: #fff; }
.ba_wrap .ba_s02 { margin-top: calc(207 * var(--u)); }
.ba_wrap .ba_s03 { margin-top: calc(228 * var(--u)); }
.ba_wrap .ba_s04 { margin-top: calc(151 * var(--u)); }
.ba_wrap .ba_s05 { margin-top: calc(206 * var(--u)); }
.ba_wrap .ba_s06 { margin-top: calc(251.56 * var(--u)); }
/* 05 카드뉴스: 시안 안쪽 폭 1380px + 그림자 여백 10px씩 = 이미지 1400px, 가운데 정렬 (왼쪽 260px) */
.ba_wrap .ba_card { width: 72.9167%; margin-left: 13.5417%; }

/* 01 히어로: 소닉슬립과 같은 규칙 - 헤더 아래 한 화면(PC 100vh-헤더, 태블릿 90vh, 모바일 600px)
 * 시안 이미지(1920x1080 / 375x600)를 --s 배율로 아래 기준 가운데 정렬(cover). 이미지의 원 버튼 자리에 실제 원 버튼+회전 링을 정확히 겹침:
 * 시안 그대로 링 중심 = 아래에서 160px(PC, 링 160px·원 62%) / 100px(모바일, 링 100px) × 배율 → 소닉슬립(bottom 80px+링 160px / bottom 50px+링 100px)과 같은 위치 */
.ba_wrap .ba_hero { --H: max(calc(100vh - var(--hd)), 600px); height: var(--H); overflow: hidden; --s: max(calc(100cqw / 1920), calc(var(--H) / 1080)); }
@supports (height: 100svh) { .ba_wrap .ba_hero { --H: max(calc(100svh - var(--hd)), 600px); } }
.ba_hero_bg { position: absolute; inset: 0; }
.ba_wrap .ba_hero_bg img { position: absolute; bottom: 0; left: calc(50% - 960 * var(--s)); width: calc(1920 * var(--s)); max-width: none; height: auto; }
.ba_scroll_btn { position: absolute; left: 50%; bottom: calc(80 * var(--s)); z-index: 2; width: calc(160 * var(--s)); transform: translateX(-50%); }
.ba_ring { animation: ba_rotate 8s linear infinite; }
.ba_round { position: absolute; top: 50%; left: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ff582b; }
.ba_wrap .ba_round img { width: calc(25 * var(--s)); height: auto; }
@keyframes ba_rotate { to { transform: rotate(360deg); } }
/* 02 작은 카드 한 줄 롤링: 같은 타일 4장을 이어 붙이고 한 타일(25%)만큼 옮기면 처음과 똑같아져 끊김 없이 반복 */
.ba_roll { overflow: hidden; }
.ba_roll_track { display: flex; width: max-content; animation: ba_roll 32s linear infinite; will-change: transform; }
.ba_wrap .ba_roll_tile { flex: none; width: calc(1574 * var(--u)); }  /* 시안(1920px 기준) 한 바퀴 길이 3148px / 2x */
.ba_roll:hover .ba_roll_track { animation-play-state: paused; }
@keyframes ba_roll { to { transform: translateX(-25%); } }

/* 03 검정 띠 롤링(오른쪽): 한 바퀴 4개분 타일 3장을 이어 붙이고 1/3(타일 1장)만큼만 이동 → 처음과 똑같아 끊김 없음 */
.ba_band { overflow: hidden; background: #000; }
.ba_band_track { display: flex; width: max-content; animation: ba_band 18s linear infinite; will-change: transform; }
.ba_wrap .ba_band_tile { flex: none; width: calc(1168 * var(--u)); }  /* PC 2336px / 2x */
@keyframes ba_band { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }

/* 스크롤 모션: JS 가 .ba_motion 을 붙였을 때만 숨김 상태로 시작 (JS 가 꺼져 있어도 내용은 보임) */
.ba_motion [data-ba] { opacity: 0; transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.ba_motion [data-ba="up"] { transform: translateY(48px); }
.ba_motion [data-ba="zoom"] { transform: scale(1.04); }
.ba_motion [data-ba].is_in { opacity: 1; transform: none; }
/* 히어로는 열리자마자 배경이 천천히 줄어들고, 링은 늦게 나타남 */
/* 이미지에 원 버튼이 박혀 있어 확대하면 실제 버튼과 어긋나므로 확대 없이 밝아지기만 함 */
.ba_motion .ba_hero_bg img { animation: ba_fadein 2.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ba_fadein { from { filter: brightness(.6); } to { filter: none; } }
.ba_motion .ba_scroll_btn { opacity: 0; transition: opacity 1s ease .8s; }
.ba_motion .ba_hero.is_in .ba_scroll_btn { opacity: 1; }

@media (max-width: 767px) {
  /* 모바일: 소닉슬립과 같이 높이 600px (시안 375x600). 링 지름 100px, 원 버튼 아래 50px */
  .ba_wrap .ba_hero { --H: 600px; height: 600px; --s: max(calc(100cqw / 375), 1px); }
  .ba_wrap .ba_hero_bg img { left: calc(50% - 187.5 * var(--s)); width: calc(375 * var(--s)); }
  .ba_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .ba_round { background: #ff582b; }
  .ba_wrap .ba_round img { width: calc(20 * var(--s)); }
  .ba_wrap section { --u: calc(100cqw / 375); }
  /* 모바일 시안(375 기준 px) 간격 */
  .ba_wrap .ba_s02 { margin-top: calc(15.75 * var(--u)); }
  .ba_wrap .ba_s03 { margin-top: calc(18 * var(--u)); }
  .ba_wrap .ba_s04 { margin-top: calc(83 * var(--u)); }
  .ba_wrap .ba_s05 { margin-top: calc(72 * var(--u)); }
  .ba_wrap .ba_s06 { margin-top: calc(82.55 * var(--u)); }
  .ba_wrap .ba_s07 { margin-top: calc(53 * var(--u)); }
  /* 05: 시안 왼쪽 40px - 그림자 10px = 이미지 왼쪽 30px, 폭 325.25px (가운데가 아님) */
  .ba_wrap .ba_card { width: 86.7333%; margin-left: 8%; }
  .ba_roll_track { animation-duration: 14s; }
  .ba_wrap .ba_roll_tile { width: calc(333.5 * var(--u)); } /* 모바일 한 바퀴 1334px / 4x */
  .ba_wrap .ba_band_tile { width: calc(360 * var(--u)); }  /* 모바일 1440px / 4x */
  .ba_band_track { animation-duration: 10s; }
  .ba_motion [data-ba="up"] { transform: translateY(32px); }
}

@media (prefers-reduced-motion: reduce) {
  .ba_ring, .ba_roll_track, .ba_band_track { animation: none; }
  .ba_motion [data-ba], .ba_motion .ba_hero_bg img, .ba_motion .ba_scroll_btn { transition: none; }
}

/* ---------- PC 히어로 (소닉슬립과 같은 방식) ----------
 * 글자·원이 없는 깨끗한 배경(1920x1080)을 화면 가득(cover), 글자는 42% 위치, 원 버튼은 아래 80px·지름 160px 고정.
 * 모바일은 위쪽 규칙(시안 배율) 그대로 */
@keyframes ba_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.ba_wrap .mo_br { display: none; }
@media (min-width: 768px) {
  .ba_wrap .ba_hero_bg img { left: 0; bottom: auto; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .ba_motion .ba_hero_bg img { animation-name: ba_kenburns; }
  .ba_wrap .ba_hero_txt { position: absolute; left: 0; right: 0; top: 42%; z-index: 1; transform: translateY(-50%); padding: 0 20px; text-align: center; color: #fff; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0; }
  .ba_hero_txt p { font-size: 44px; font-weight: 200; line-height: 1.25; }
  .ba_hero_txt h2 { font-size: 64px; font-weight: 700; line-height: 1.25; }
  .ba_motion .ba_hero_txt p[data-ba] { transition-delay: .5s; }
  .ba_motion .ba_hero_txt h2[data-ba] { transition-delay: .65s; }
  .ba_wrap .ba_scroll_btn { bottom: 80px; width: 160px; }
  .ba_wrap .ba_round img { width: 25px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ba_hero_txt p { font-size: 34px; }
  .ba_hero_txt h2 { font-size: 49px; }
  .ba_wrap .ba_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .ba_wrap .mo_br { display: inline; }
  .ba_wrap .ba_hero_txt { display: none; }
}


/* ---------- 실제 글자 (이미지에 박혀 있던 글자를 텍스트로) - 소닉슬립과 같은 크기/여백 규칙 ----------
 * PC: 제목 54px bold(영문 Montserrat), 설명 20px/150%. 모바일: 제목 24px, 설명 14px, 좌우 여백 20px */
.ba_wrap { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; letter-spacing: 0; word-break: keep-all; color: #111; }
.ba_wrap .ba_mo_br { display: none; }
.ba_wrap .ba_sec_tit { font-family: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif; font-weight: 800; font-size: 54px; line-height: 1.2; text-transform: uppercase; color: #212121; }
.ba_wrap .ba_sec_desc { font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: #595959; }
.ba_wrap .ba_tit_red { color: #fe3b07; }

/* 02 프로젝트 정보 */
.ba_wrap .ba_info { background: #ff582b; color: #fff; }
.ba_info_inner { padding: calc(120 * var(--u)) calc(250 * var(--u)); }
.ba_info_tit { font-size: 54px; font-weight: 700; line-height: 1.2; margin-bottom: 44px; }
.ba_info_meta { display: flex; gap: 30px; font-size: 20px; line-height: 1.2; margin-bottom: 38px; }
.ba_info_meta div { display: flex; gap: 14px; }
.ba_info_meta dt { font-weight: 700; }
.ba_info_lead { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.ba_info_desc { font-size: 18px; line-height: 1.5; }

/* 04 DESIGN CONCEPT */
.ba_concept_head { height: calc(450 * var(--u)); padding-top: calc(3 * var(--u)); text-align: center; }
.ba_concept_head .ba_sec_desc { margin-top: 27px; }
.ba_colors { display: flex; height: calc(287 * var(--u)); }
.ba_colors li { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 40px 40px 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; list-style: none; }
.ba_colors .c1 { flex: 0 0 50%; background: #ff582b; }
.ba_colors .c2 { flex: 0 0 25%; background: #fd9511; }
.ba_colors .c3 { flex: 0 0 25%; background: #212121; }

/* 05·07 제목/설명 (위치는 시안 그대로, 이미지 위에 얹음) */
.ba_wrap .ba_sec_head { position: absolute; z-index: 2; }
.ba_wrap .ba_head_l { left: calc(272 * var(--u)); top: calc(3 * var(--u)); }
.ba_wrap .ba_head_r { right: calc(270 * var(--u)); top: calc(202 * var(--u)); text-align: right; }
.ba_sec_head .ba_sec_desc { margin-top: 27px; }
.ba_wrap .ba_s05, .ba_wrap .ba_s07 { position: relative; }

/* 글자·칩 모션 */
.ba_motion .ba_colors[data-ba="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.ba_motion .ba_colors[data-ba="wipe"].is_in { clip-path: inset(0 0 0 0); }
.ba_motion [data-ba-delay="100"] { transition-delay: .1s; }
.ba_motion [data-ba-delay="150"] { transition-delay: .15s; }

@media (max-width: 767px) {
  .ba_wrap .ba_mo_br { display: inline; }
  .ba_wrap .ba_sec_tit { font-size: 24px; line-height: 1.3; }
  .ba_wrap .ba_sec_desc { font-size: 14px; }
  .ba_info_inner { padding: 60px 20px; }
  .ba_info_tit { font-size: 24px; margin-bottom: 20px; }
  .ba_info_meta { flex-direction: column; gap: 10px; font-size: 16px; margin-bottom: 20px; }
  .ba_info_meta div { gap: 7px; }
  .ba_info_lead, .ba_info_desc { font-size: 14px; margin-bottom: 15px; }
  .ba_info_desc { margin-bottom: 0; }
  .ba_info br, .ba_concept br { display: none; }
  .ba_concept_head { height: calc(174 * var(--u)); padding: 1px 20px 0; }
  .ba_concept_head .ba_sec_desc, .ba_sec_head .ba_sec_desc { margin-top: 20px; }
  .ba_colors { flex-direction: column; height: auto; }
  .ba_colors li { flex: none !important; height: calc(150 * var(--u)); padding: 0 20px 22px 0; font-size: 14px; }
  .ba_wrap .ba_head_l { left: 20px; top: 0; }
  .ba_wrap .ba_head_r { right: 20px; top: 0; }
  .ba_wrap .ba_card { width: calc(100% - 40px); margin-left: 20px; }  /* 좌우 20px: 이미지 박스 335px */
  .ba_wrap .ba_top { width: calc(100% - 40px); margin-left: 20px; }  /* 좌우 20px: 카드 2장(그림자 포함) 박스 335px */
}

/* 모바일 좌우 20px: 06 배경(mo_06b)과 카드 모음(mo_06c, 폭 335px)을 따로 두고 카드 모음만 좌우 20px 안쪽에 */
.ba_wrap .ba_s06_co { display: none; }
@media (max-width: 767px) {
  .ba_wrap .ba_s06_co { display: block; position: absolute; left: 20px; width: calc(100% - 40px); top: 11.1546%; }
}

/* 02 위쪽 카드 2장 + 카드 한 줄 롤링: 카드를 한 장씩 따로 올리고 모서리·그림자는 CSS (PC/모바일 공통 방식)
 * PC(시안 1920 기준): 위 카드 612.5px 정사각형 2장 간격 25, 아래 카드 504px 간격 20 / 모바일(375): 위 카드 2장 335px 폭, 아래 카드 106.77px 간격 4.4, 모서리 10 */
.ba_wrap .ba_top, .ba_wrap .ba_roll_track { display: none; }
.ba_wrap .ba_pair { display: flex; justify-content: center; gap: calc(25 * var(--u)); margin: calc(67 * var(--u)) 0 calc(154 * var(--u)); }
.ba_wrap .ba_pair picture { flex: none; width: calc(612.5 * var(--u)); border-radius: calc(26 * var(--u)); filter: drop-shadow(0 calc(24 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .42)); }
.ba_wrap .ba_roll { padding: calc(80 * var(--u)) 0 calc(110 * var(--u)); margin: calc(-80 * var(--u)) 0 calc(-110 * var(--u)); }  /* 그림자가 위·아래에서 잘리지 않게 여유 */
.ba_wrap .ba_cardrow { display: flex; gap: calc(20 * var(--u)); width: max-content; list-style: none; animation: ba_cardrow 44s linear infinite; will-change: transform; }
.ba_wrap .ba_cardrow li { flex: none; width: calc(504 * var(--u)); }
.ba_wrap .ba_cardrow img { border-radius: 0; filter: drop-shadow(0 calc(24 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .42)); }
.ba_roll:hover .ba_cardrow { animation-play-state: paused; }
@keyframes ba_cardrow { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .ba_wrap .ba_pair { gap: calc(6.7 * var(--u)); margin: calc(84 * var(--u)) 20px calc(56 * var(--u)); }
  .ba_wrap .ba_pair picture { width: calc((100% - 6.7 * var(--u)) / 2); border-radius: calc(13 * var(--u)); filter: drop-shadow(0 calc(11 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .42)); }
  .ba_wrap .ba_roll { height: calc(172.25 * var(--u) + 60 * var(--u)); padding: calc(30 * var(--u)) 0 calc(30 * var(--u)); margin: calc(-30 * var(--u)) 0 calc(-30 * var(--u)); }
  .ba_wrap .ba_cardrow { gap: calc(4.4 * var(--u)); animation-duration: 28s; }
  .ba_wrap .ba_cardrow li { width: calc(106.77 * var(--u)); }
  .ba_wrap .ba_cardrow img { filter: drop-shadow(0 calc(11 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .42)); }
}
@media (prefers-reduced-motion: reduce) { .ba_cardrow { animation: none; } }

/* ---------- 태블릿 (768~1199px): PC 배치를 그대로 쓰되 글자는 화면 폭에 맞춰 줄이고, 이미지 위 제목 블록은 폭을 제한해 이미지와 겹치지 않게 ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .ba_wrap .ba_sec_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); }
  .ba_wrap .ba_sec_desc { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .ba_info_inner { padding: calc(100 * var(--u)) 48px; }
  .ba_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); margin-bottom: 28px; }
  .ba_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
  .ba_info_lead, .ba_info_desc { font-size: clamp(14px, calc(18 * var(--u) * 1.5), 18px); }
  .ba_concept_head { padding: calc(3 * var(--u)) 48px 0; }
  .ba_concept_head .ba_sec_desc, .ba_sec_head .ba_sec_desc { margin-top: 16px; }
  .ba_sec_head br, .ba_concept br { display: none; }
  .ba_wrap .ba_head_l { left: 48px; width: 46%; }
  .ba_wrap .ba_head_r { right: 48px; width: 46%; }
  .ba_colors li { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); padding: 0 20px 20px 0; }
}

/* PC: 컬러 박스 높이 450, 설명 글자와 박스 사이 간격 60 (모바일은 그대로) */
@media (min-width: 1200px) {
  .ba_concept_head { height: auto; padding-bottom: 60px; }
  .ba_colors { height: 450px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ba_concept_head { height: auto; padding-bottom: calc(60 * var(--u)); }
  .ba_colors { height: calc(450 * var(--u)); }
}