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

/* 01 히어로: 헤더 아래 한 화면 / 모바일 600px, 원 버튼 아래 80px·지름 160px (모바일 아래 50px·100px) */
.al_wrap .al_hero { position: relative; height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); min-height: 600px; overflow: hidden; background: #f6ece0; --s: max(calc(100cqw / 375), 1px); }
.al_hero_bg { position: absolute; inset: 0; }
.al_wrap .al_hero_bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.al_wrap .al_hero_txt { position: absolute; left: 0; right: 0; top: 42%; z-index: 1; transform: translateY(-50%); padding: 0 20px; display: flex; justify-content: center; }
.al_wrap .al_hero_logo { width: 359px; height: auto; }
.al_wrap .al_scroll_btn { position: absolute; left: 50%; bottom: 80px; z-index: 2; width: 160px; transform: translateX(-50%); }
.al_wrap .al_ring { width: 100%; animation: al_rotate 8s linear infinite; }
.al_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%; }
.al_wrap .al_round img { width: 30px; height: auto; transform: rotate(90deg); }
@keyframes al_rotate { to { transform: rotate(360deg); } }

/* 스크롤 모션 (JS 가 .al_motion 을 붙였을 때만 숨김 상태로 시작) */
.al_motion [data-al] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.al_motion [data-al="up"] { opacity: 0; transform: translateY(40px); }
.al_motion [data-al="fade"] { opacity: 0; transition-duration: 1.2s; }
.al_motion [data-al].is_in { opacity: 1; transform: none; will-change: auto; }  /* 등장 후 GPU 레이어 해제: 사진 경계 틈(줄) 방지 */
.al_motion .al_hero_txt [data-al] { transition-delay: .5s; }
.al_motion .al_hero_bg img { animation: al_kenburns 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes al_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.al_motion .al_scroll_btn { opacity: 0; transition: opacity 1s ease .9s; }
.al_motion .al_hero.is_in .al_scroll_btn { opacity: 1; }
/* 컬러 칩: 왼쪽에서 오른쪽으로 펼쳐짐 */
.al_motion [data-al="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); }
.al_motion [data-al="wipe"].is_in { clip-path: inset(0 0 0 0); }

/* 본문 */
.al_pc { --u: calc(100cqw / 1920); }
.al_mo { --u: calc(100cqw / 375); display: none; }
.al_wrap .al_img { width: 100%; height: auto; margin-bottom: -2px; position: relative; }  /* 띠·칩(relative)보다 뒤에 오는 사진이 위에 그려져 경계를 덮도록 */  /* 소수점 높이로 생기는 1px 흰 줄 방지: 다음 띠·사진이 1px 겹쳐 덮음 */
.al_wrap .al_band, .al_wrap .al_chips, .al_wrap .hn_note { position: relative; }
.al_wrap .al_band { margin-bottom: -2px; }
.al_wrap .al_mo > .al_chips, .al_wrap .al_pc > .al_chips { margin-bottom: -2px; }  /* 칩 블록 아래도 사진과 2px 겹침 */  /* 글자 띠 높이가 소수점일 때 아래 사진과 사이로 흰 줄이 비치지 않게 1px 겹침 (아래 padding +1 보정) */

/* ---------- 실제 글자: 피그마 px 그대로 (여백만 화면 폭 비례) ---------- */
.al_wrap .al_info, .al_wrap .al_band, .al_wrap .al_chips span { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0; word-break: keep-all; }

/* 프로젝트 정보 (PC: 위아래 150 / 왼쪽 270) */
.al_wrap .al_info { --u: calc(100cqw / 1920); background: #753aba; color: #fff; }
.al_wrap .al_info_inner { padding: 150px calc(270 * var(--u)); }  /* 따로 떨어진 글자 섹션: 상하 150px */
.al_wrap .al_info_tit { font-size: 54px; font-weight: 700; line-height: normal; margin-bottom: 44px; }
.al_wrap .al_info_meta { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 20px; line-height: normal; margin-bottom: 34px; }
.al_wrap .al_info_meta div { display: flex; gap: 20px; align-items: center; }
.al_wrap .al_info_meta dt { font-weight: 700; color: #fff; }
.al_wrap .al_info_meta div + div dt { width: 56px; }
.al_wrap .al_info_meta dd { color: #fff; }
.al_wrap .al_info_lead { font-size: 20px; font-weight: 700; line-height: 1.6; color: #fff; }
.al_wrap .al_info_desc { margin-top: 10px; font-size: 18px; font-weight: 400; line-height: 1.6; color: #fff; }

/* PC 글자 띠: 왼쪽 소제목+제목 / 오른쪽 설명 (위아래 150, 왼쪽 270) */
.al_wrap .al_band { display: flex; align-items: flex-start; padding: 152px 0 152px calc(270 * var(--u)); }  /* 따로 떨어진 글자 섹션: 상하 150px (위 151 = 사진 1px 겹침 보정) */
.al_wrap .al_band_l { flex: none; width: calc(var(--rx) * var(--u) - 270 * var(--u)); }
.al_wrap .al_band_r { flex: none; width: calc(var(--rw) * var(--u)); min-width: 0; }
.al_wrap .al_eye { font-size: 20px; font-weight: 500; line-height: normal; }
.al_wrap .al_tit { margin-top: 14px; font-size: 54px; font-weight: 700; line-height: normal; white-space: nowrap; }
.al_wrap .al_lead { font-size: 20px; font-weight: 700; line-height: 1.6; }
.al_wrap .al_desc { margin-top: 10px; font-size: 18px; line-height: 1.6; }
.al_wrap .al_grad { background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }

/* 컬러 칩: 색 블록 + 오른쪽 아래 코드 */
.al_wrap .al_chips { display: flex; flex-direction: column; }
.al_wrap .al_chips span { display: block; height: calc(var(--h) * var(--u)); padding: 0 calc(var(--r) * var(--u)) 0 0; color: #343434; font-size: 23px; font-weight: 500; line-height: 1; text-align: right; position: relative; }
.al_wrap .al_chips span i { position: absolute; right: calc(var(--r) * var(--u)); bottom: calc(var(--b) * var(--u)); font-style: normal; }

/* 태블릿 (768~1199): PC 배치 그대로, 글자는 화면 폭에 맞춰 줄임 */
@media (min-width: 768px) and (max-width: 1199px) {
  .al_wrap .al_info_inner { padding: 150px 48px; }
  .al_wrap .al_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); margin-bottom: 28px; }
  .al_wrap .al_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); margin-bottom: 24px; }
  .al_wrap .al_info_lead, .al_wrap .al_lead { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); }
  .al_wrap .al_info_desc, .al_wrap .al_desc { font-size: clamp(13px, calc(18 * var(--u) * 1.5), 18px); }
  .al_wrap .al_info br, .al_wrap .al_band br { display: none; }
  .al_wrap .al_band { padding: 152px 48px 152px; gap: 32px; }
  .al_wrap .al_band_l { width: auto; }
  .al_wrap .al_band_r { flex: 1; width: auto; }
  .al_wrap .al_eye { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .al_wrap .al_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); }
  .al_wrap .al_chips span { font-size: clamp(13px, calc(23 * var(--u) * 1.5), 23px); }
  .al_wrap .al_hero_logo { width: 280px; }
  .al_wrap .al_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .al_pc { display: none; }
  .al_mo { display: block; }
  .al_wrap .pc_t { display: none; }
  .al_wrap .mo_t { display: inline; }
  .al_wrap .mo_br { display: inline; }
  .al_wrap .al_info { --u: calc(100cqw / 375); }
  .al_wrap .al_info_inner { padding: 80px 20px; }
  .al_wrap .al_info_tit { font-size: 24px; margin-bottom: 20px; }
  .al_wrap .al_info_meta { flex-direction: column; gap: 10px; font-size: 16px; margin-bottom: 20px; }
  .al_wrap .al_info_meta div { gap: 7px; }
  .al_wrap .al_info_meta div + div dt { width: 39px; }
  .al_wrap .al_info_lead { font-size: 15px; line-height: 1.5; }
  .al_wrap .al_info_desc { margin-top: 10px; font-size: 14px; line-height: 1.5;  }
  /* 모바일 글자 띠: 위아래 80 / 좌우 20 */
  .al_wrap .al_band { display: block; padding: 82px 20px 82px; }  /* 모바일 상하 80px */
  .al_wrap .al_eye { font-size: 14px; }
  .al_wrap .al_tit { margin-top: 10px; font-size: 28px; line-height: 1; }
  .al_wrap .al_band_l, .al_wrap .al_band_r { width: auto; }
  .al_wrap .al_band_r { margin-top: 24px; }
  .al_wrap .al_lead { font-size: 15px; line-height: 1.5; }
  .al_wrap .al_desc { font-size: 14px; line-height: 1.5; }
  .al_wrap .al_chips span { font-size: 14px; }
  /* 모바일 히어로: 높이 600px, 원 버튼 지름 100px·아래 50px - 배경 이미지와 같이 화면 폭에 비례(--s) */
  .al_wrap .al_hero { height: 600px; min-height: 0; }
  .al_wrap .al_hero_bg img { left: 0; top: auto; bottom: 0; width: 100%; height: auto; object-fit: initial; }
  .al_wrap .al_hero_txt { top: calc(600px - 394 * var(--s)); transform: none; }
  .al_wrap .al_hero_logo { width: calc(112 * var(--s)); }
  .al_wrap .al_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .al_wrap .al_round img { width: calc(23.5 * var(--s)); }
}
@media (prefers-reduced-motion: reduce) {
  .al_motion .al_hero_bg img, .al_wrap .al_ring { animation: none; }
  .al_motion [data-al], .al_motion .al_scroll_btn { opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important; }
}