/* 팀얼터너티브 포트폴리오 - 클래스는 ta_ 접두어로 기존 사이트 CSS와 충돌 방지
 * 시안(PC 1920 / 모바일 375)의 레이어 위치(px)를 --u(화면폭/1920, 모바일은 /375)에 곱해 화면 크기에 비례해 배치 (마이프렌드·화홍엠과 같은 틀) */
.ta_wrap { --hd: 80px; padding-top: var(--hd); overflow: hidden; background: #fff; container-type: inline-size; position: relative; z-index: 1; }  /* 안쪽 레이어가 고정 헤더(z-index 9) 위로 올라오지 않게 독립된 층으로 가둠 */
.ta_wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.ta_wrap img { display: block; max-width: none; }
.ta_wrap picture { display: block; }
.ta_wrap .mo_t, .ta_wrap .mo_br { display: none; }

/* 01 히어로: 헤더 아래 한 화면 / 모바일 600px, 원 버튼 아래 80px·지름 160px (모바일 아래 50px·100px) */
.ta_wrap .ta_hero { position: relative; height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); min-height: 600px; overflow: hidden; background: #111; --s: max(calc(100cqw / 375), 1px); }
.ta_hero_bg { position: absolute; inset: 0; }
.ta_wrap .ta_hero_bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.ta_wrap .ta_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; }
.ta_hero_txt p { font-size: 44px; font-weight: 200; line-height: 1.25; }
.ta_hero_txt h2 { font-size: 64px; font-weight: 700; line-height: 1.25; }
.ta_wrap .ta_scroll_btn { position: absolute; left: 50%; bottom: 80px; z-index: 2; width: 160px; transform: translateX(-50%); }
.ta_ring { width: 100%; animation: ta_rotate 8s linear infinite; }
.ta_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: #005bff; }
.ta_wrap .ta_round img { width: 25px; height: auto; }
@keyframes ta_rotate { to { transform: rotate(360deg); } }

/* 본문: 시안 레이어 절대위치 */
.ta_wrap .ta_stage { position: relative; overflow: hidden; height: calc(var(--sh) * var(--u)); }
.ta_pc { --u: calc(100cqw / 1920); }
.ta_mo { --u: calc(100cqw / 375); display: none; }
.ta_wrap .L { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: auto; }

/* 스크롤 모션 (JS 가 .ta_motion 을 붙였을 때만 숨김 상태로 시작) */
.ta_motion [data-ta] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.ta_motion [data-ta="up"] { opacity: 0; transform: translateY(40px); }
.ta_motion [data-ta].is_in { opacity: 1; transform: none; }
.ta_motion .ta_hero_txt p[data-ta] { transition-delay: .5s; }
.ta_motion .ta_hero_txt h2[data-ta] { transition-delay: .65s; }
.ta_motion .ta_hero_bg img { animation: ta_kenburns 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ta_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.ta_motion .ta_scroll_btn { opacity: 0; transition: opacity 1s ease .9s; }
.ta_motion .ta_hero.is_in .ta_scroll_btn { opacity: 1; }
.ta_motion [data-ta] { transition-delay: var(--d, 0ms); }
/* 컬러 칩: 왼쪽에서 오른쪽으로 펼쳐짐 */
.ta_motion [data-ta="wipe"] { opacity: 1; transform: none; clip-path: inset(0 99.6% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); transition-delay: var(--d, 0ms); }
.ta_motion [data-ta="wipe"].is_in { clip-path: inset(0 0 0 0); }

/* 가로로 흐르는 카드 줄 (한 바퀴 길이만큼 배경이 밀려 이어짐) */
.ta_wrap .ta_roll { height: calc(var(--h) * var(--u)); overflow: hidden; }
.ta_roll i { display: block; width: 100%; height: 100%; background-repeat: repeat-x; background-size: calc(var(--p) * var(--u)) 100%; background-position-x: calc(var(--o, 0) * var(--u)); animation: ta_roll var(--t) linear infinite; }
@keyframes ta_roll { to { background-position-x: calc((var(--o, 0) - var(--p)) * var(--u)); } }

/* 글자 띠(TEAM ALTERNATIVE · ...): 실제 글자가 흐르는 롤링 (같은 묶음 2개를 이어 붙여 반 바퀴마다 이어짐) */
.ta_wrap .ta_mq { height: calc(var(--h) * var(--u) + 1px); overflow: hidden; background: #000; }
.ta_mq_t { display: flex; width: max-content; height: 100%; animation: ta_mq var(--t) linear infinite reverse; }  /* 오른쪽으로 흐름 */
.ta_mq_t > div { display: flex; flex: none; align-items: flex-start; gap: calc(var(--gap) * var(--u)); padding-right: calc(var(--gap) * var(--u)); padding-top: calc(var(--ty) * var(--u)); font-family: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif; font-size: calc(var(--fs) * var(--u)); font-weight: 700; line-height: normal; color: #fff; text-transform: uppercase; white-space: nowrap; }
.ta_mq_t b, .ta_mq_t u { font-weight: 700; text-decoration: none; }
@keyframes ta_mq { to { transform: translateX(-50%); } }

/* ---------- 실제 글자: 피그마 px 그대로 (위치만 화면 폭 비례, 글자 크기는 고정) ---------- */
.ta_wrap .ta_info, .ta_wrap .ph_head, .ta_wrap .mo_head, .ta_wrap .ta_chips span { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0; word-break: keep-all; }

/* 프로젝트 정보 (PC: 위아래 120 / 좌우 250, 높이 561) */
.ta_wrap .ta_info { --u: calc(100cqw / 1920); background: #005bff; color: #fff; min-height: calc(561 * var(--u)); }
.ta_wrap .ta_info_inner { padding: calc(120 * var(--u)) calc(250 * var(--u)); }
.ta_wrap .ta_info_tit { font-size: 54px; font-weight: 700; line-height: 1.2; margin-bottom: 44px; }
.ta_wrap .ta_info_meta { display: flex; flex-wrap: wrap; gap: 0 30px; font-size: 20px; line-height: 24px; margin-bottom: 38px; }
.ta_wrap .ta_info_meta div { display: flex; gap: 14px; align-items: center; }
.ta_wrap .ta_info_meta dt { font-weight: 700; width: 56px; }
.ta_wrap .ta_info_meta div:nth-child(1) dd { width: 127px; }
.ta_wrap .ta_info_meta div:nth-child(2) dd { width: 166px; }
.ta_wrap .ta_info_lead { font-size: 18px; font-weight: 700; line-height: 1.5; color: #f3f3f3; margin-bottom: 16px; }
.ta_wrap .ta_info_desc { font-size: 18px; font-weight: 400; line-height: 1.5; color: #f3f3f3; }

/* PC 섹션 제목·설명 */
.ta_wrap .ph_tit { font-family: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif; font-size: 54px; font-weight: 700; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.ta_wrap .ph_desc { margin-top: 23.8px; font-size: 18px; line-height: 1.5; color: #565656; white-space: nowrap; }
.ta_wrap .ph_desc2 { font-size: 20px; letter-spacing: -0.4px; margin-top: 30px; }
.ta_wrap .ph_head { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y) * var(--u)); z-index: 20; }
.ta_wrap .ph_center { left: 0; right: 0; text-align: center; }
.ta_wrap .ph_right { width: calc(var(--w) * var(--u)); text-align: right; }
.ta_wrap .ph_right .ph_desc { margin-top: 30px; }
/* 글자 블록 아래 끝을 바로 아래 이미지 위 끝(--b, 시안 px)에 맞춤: 텍스트-이미지 간격 PC 60px / 모바일 40px 통일 (화면 폭과 상관없이 고정) */
.ta_wrap .ta_stage { --tg: 60px; }
.ta_wrap .ta_stage .ab { top: auto; bottom: calc((var(--sh) - var(--b)) * var(--u) + var(--tg)); }

/* 컬러 칩: 색 블록 + 오른쪽 아래 코드 (PC 24px SemiBold, 모바일 14px Bold) */
.ta_wrap .ta_chips { height: calc(var(--h) * var(--u)); }
.ta_wrap .ta_chips span { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); display: block; padding: 0; color: #fff; font-size: 24px; line-height: 29px; font-weight: 600; text-align: right; }
.ta_wrap .ta_chips span { padding: calc(var(--pt) * var(--u)) calc(var(--r) * var(--u)) 0 0; }

/* 모바일 섹션 제목 블록 */
.ta_wrap .mo_head { position: absolute; left: 20px; right: 20px; top: calc(var(--y) * var(--u)); z-index: 20; }
.ta_wrap .mo_center { text-align: center; }
.ta_wrap .mo_tit { font-family: 'Montserrat', 'Pretendard Variable', Pretendard, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.35; text-transform: uppercase; white-space: nowrap; }
.ta_wrap .mo_desc { margin-top: 20px; font-size: 14px; line-height: 1.5; color: #565656; }
.ta_wrap .mo_ad { left: 20px; right: 20px; }
.ta_wrap .mo_ad .mo_tit { line-height: 1.3; }
.ta_wrap .mo_ad .mo_desc { margin-top: 20px; }  /* 제목-설명 간격 20 */
.ta_wrap .mo_desc2 { letter-spacing: -0.28px; white-space: nowrap; }
.ta_wrap .mo_right { left: 20px; right: 20px; text-align: right; }

/* 태블릿 (768~1199): PC 배치 그대로, 글자는 화면 폭에 맞춰 줄임 */
@media (min-width: 768px) and (max-width: 1199px) {
  .ta_wrap .ta_info_inner { padding: calc(100 * var(--u)) 48px; }
  .ta_wrap .ta_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); margin-bottom: 28px; }
  .ta_wrap .ta_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); margin-bottom: 24px; }
  .ta_wrap .ta_info_lead, .ta_wrap .ta_info_desc { font-size: clamp(14px, calc(18 * var(--u) * 1.5), 18px); }
  .ta_wrap .ta_info_desc br { display: none; }
  .ta_wrap .ph_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); }
  .ta_wrap .ph_desc { font-size: clamp(13px, calc(18 * var(--u) * 1.5), 18px); white-space: normal; }
  .ta_wrap .ph_desc2 { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .ta_wrap .ph_center .ph_desc { padding: 0 24px; }
  .ta_wrap .ta_chips span { font-size: clamp(14px, calc(24 * var(--u) * 1.5), 24px); }
  .ta_hero_txt p { font-size: 34px; }
  .ta_hero_txt h2 { font-size: 50px; }
  .ta_wrap .ta_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .ta_pc { display: none; }
  .ta_mo { display: block; }
  .ta_wrap .pc_t { display: none; }
  .ta_wrap .mo_t { display: inline; }
  .ta_wrap .mo_br { display: inline; }
  .ta_wrap .ta_info { --u: calc(100cqw / 375); min-height: calc(470 * var(--u)); }
  .ta_wrap .ta_info_inner { padding: 60px 20px; }
  .ta_wrap .ta_info_tit { font-size: 24px; line-height: 1.2; margin-bottom: 20px; }
  .ta_wrap .ta_info_meta { flex-direction: column; gap: 10px; font-size: 16px; line-height: 19px; margin-bottom: 20px; }
  .ta_wrap .ta_info_meta div { gap: 7px; }
  .ta_wrap .ta_info_meta dt { width: auto; min-width: 39px; }
  .ta_wrap .ta_info_meta div:nth-child(1) dd, .ta_wrap .ta_info_meta div:nth-child(2) dd { width: auto; }
  .ta_wrap .ta_info_lead, .ta_wrap .ta_info_desc { font-size: 14px; width: 343px; max-width: calc(100% + 8px); word-break: break-all; }
  .ta_wrap .ta_info_lead { margin-bottom: 15px; }
  .ta_wrap .ta_chips span { font-size: 14px; line-height: 17px; font-weight: 700; }
  .ta_wrap .ta_stage { --tg: 40px; }
  /* 흐르는 글자 띠: 띠 높이 안에서 글자 세로 가운데 */
  .ta_mo .ta_mq_t > div { align-items: center; padding-top: 0; line-height: 1; }
  /* 모바일 히어로: 높이 600px, 글자 윗줄 상단 217px(시안)·원 버튼 지름 100px·아래 50px - 배경 이미지와 같이 화면 폭에 비례(--s) */
  .ta_wrap .ta_hero { height: 600px; min-height: 0; }
  .ta_wrap .ta_hero_bg img { left: 0; top: auto; bottom: 0; width: 100%; height: auto; object-fit: initial; }
  .ta_wrap .ta_hero_txt { top: calc(600px - 363 * var(--s)); transform: none; }
  .ta_hero_txt p { font-size: calc(24 * var(--s)); }
  .ta_hero_txt h2 { font-size: calc(30 * var(--s)); }
  .ta_wrap .ta_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .ta_wrap .ta_round img { width: calc(20 * var(--s)); }
}
@media (prefers-reduced-motion: reduce) {
  .ta_motion .ta_hero_bg img, .ta_ring, .ta_roll i, .ta_mq_t { animation: none; }
  .ta_motion [data-ta], .ta_motion .ta_scroll_btn { opacity: 1 !important; transform: none !important; transition: none !important; }
}