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

/* 01 히어로: 소닉슬립과 같은 규칙 (헤더 아래 한 화면 / 모바일 600px, 글자 42%, 원 버튼 아래 80px·지름 160px) */
.mf_wrap .mf_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); }
.mf_hero_bg { position: absolute; inset: 0; }
.mf_wrap .mf_hero_bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.mf_wrap .mf_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; }
.mf_hero_txt p { font-size: 44px; font-weight: 200; line-height: 1.25; }
.mf_hero_txt p.mf_en { font-size: 24px; font-weight: 700; line-height: 1.25; }
.mf_hero_txt h2 { font-size: 64px; font-weight: 700; line-height: 1.25; }
.mf_wrap .mf_scroll_btn { position: absolute; left: 50%; bottom: 80px; z-index: 2; width: 160px; transform: translateX(-50%); }
.mf_ring { width: 100%; animation: mf_rotate 8s linear infinite; }
.mf_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: linear-gradient(135deg,#0ad8ff,#2a6bff); }
.mf_wrap .mf_round img { width: 25px; height: auto; }
@keyframes mf_rotate { to { transform: rotate(360deg); } }

/* 본문: 시안 레이어 절대위치 */
.mf_wrap .mf_stage { position: relative; overflow: hidden; height: calc(var(--sh) * var(--u)); }
.mf_pc { --u: calc(100cqw / 1920); }
.mf_mo { --u: calc(100cqw / 375); display: none; }
.mf_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 가 .mf_motion 을 붙였을 때만 숨김 상태로 시작) */
.mf_motion [data-mf] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.mf_motion [data-mf="up"] { opacity: 0; transform: translateY(40px); }
.mf_motion [data-mf].is_in { opacity: 1; transform: none; }
.mf_motion .mf_hero_txt p[data-mf] { transition-delay: .5s; }
.mf_motion .mf_hero_txt h2[data-mf] { transition-delay: .65s; }
.mf_motion .mf_hero_bg img { animation: mf_kenburns 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mf_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.mf_motion .mf_scroll_btn { opacity: 0; transition: opacity 1s ease .9s; }
.mf_motion .mf_hero.is_in .mf_scroll_btn { opacity: 1; }

/* 가로 띠/카드 줄 롤링 (한 바퀴 길이만큼 배경이 밀려 이어짐) */
.mf_wrap .mf_roll { height: calc(var(--h) * var(--u)); overflow: hidden; }
.mf_roll i { display: block; width: 100%; height: 100%; background-repeat: repeat-x; background-size: calc(var(--p) * var(--u)) 100%; animation: mf_roll var(--t) linear infinite; }
@keyframes mf_roll { to { background-position-x: calc(var(--p) * var(--u) * -1); } }
.mf_roll.mf_rev i { animation-direction: reverse; }
.mf_motion [data-mf] { transition-delay: var(--d, 0ms); }
.mf_motion [data-mf="zoom"] { opacity: 0; transform: scale(1.06); transition-duration: 1.4s; }
.mf_motion [data-mf="zoom"].is_in { opacity: 1; transform: none; }
/* 컬러 칩 이름표 */
.mf_wrap .mf_lab { left: auto; right: calc(var(--r) * var(--u)); width: auto; top: calc(var(--y) * var(--u)); text-align: right; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); letter-spacing: 0; white-space: nowrap; }
.mf_lab b, .mf_lab span { display: block; font-weight: 700; }
/* 컬러 칩: 왼쪽에서 오른쪽으로 차례로 펼쳐짐 */
.mf_motion [data-mf="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); }
.mf_motion [data-mf="wipe"].is_in { clip-path: inset(0 0 0 0); }

/* 폰 피드: 폰 위/아래 조각 사이로 카드가 2초마다 한 장씩 넘어가고, 가운데 카드는 폰 화면 크기로 커짐 */
.mf_pc { --g: 20; --nw: 457; --nh: 571; --mt: 70; --fw: 496; --fh: 619; }
/* 모바일: PC 폰·카드를 그대로 200/496 비율로 축소 (PC와 동일한 모양) */
.mf_mo { --g: 8.06; --nw: 184.27; --nh: 230.24; --mt: 28.23; --fw: 200; --fh: 249.6; }
.mf_wrap .mf_feed { height: calc(var(--h) * var(--u)); }
.mf_feed img { width: 100%; height: auto; }
.mf_ph_top { position: absolute; left: 0; top: 0; z-index: 2; }
.mf_wrap .mf_ph_bot { position: absolute; left: 0; top: calc(var(--by) * var(--u)); z-index: 2; }
.mf_slider { position: absolute; left: calc(var(--x) * var(--u) * -1); width: 100cqw; top: calc(var(--ft) * var(--u)); z-index: 3; }
.mf_track { display: flex; align-items: flex-start; gap: calc(var(--g) * var(--u)); width: max-content; list-style: none; will-change: transform; }
.mf_track li { flex: none; width: calc(var(--nw) * var(--u)); height: calc(var(--nh) * var(--u)); margin-top: calc(var(--mt) * var(--u)); transition: width 1.2s cubic-bezier(.4, 0, .2, 1), height 1.2s cubic-bezier(.4, 0, .2, 1), margin-top 1.2s cubic-bezier(.4, 0, .2, 1); }
.mf_track li.is_focus { width: calc(var(--fw) * var(--u)); height: calc(var(--fh) * var(--u)); margin-top: 0; z-index: 3; }
/* 카드 비율이 서로 달라도(모바일 c 0.89 / 나머지 0.8) 잘리지 않게 칸 안에 통째로 맞춤 */
.mf_wrap .mf_track li img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.mf_track.is_moving { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }

@media (min-width: 768px) and (max-width: 1199px) {
  .mf_hero_txt p { font-size: 34px; }
  .mf_hero_txt p.mf_en { font-size: 20px; }
  .mf_hero_txt h2 { font-size: 49px; }
  .mf_wrap .mf_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .mf_pc { display: none; }
  .mf_mo { display: block; }
  /* 모바일 히어로: 높이 600px, 글자 윗줄 상단 약 242px(메디힐 기준)·원 버튼 지름 100px·아래 50px - 배경 이미지와 같이 화면 폭에 비례(--s) */
  .mf_wrap .mf_hero { height: 600px; min-height: 0; }
  /* 메디힐과 같이: 배경은 최소 375x600(--s 최소 1px)으로 가운데·아래 기준 → 375보다 좁은 폰에서도 위에 빈 띠가 생기지 않음 */
  .mf_wrap .mf_hero_bg img { left: calc(50% - 187.5 * var(--s)); top: auto; bottom: 0; width: calc(375 * var(--s)); height: auto; object-fit: initial; }
  .mf_wrap .mf_hero_txt { top: calc(600px - 363 * var(--s)); transform: none; }
  .mf_hero_txt p { font-size: calc(24 * var(--s)); }
  .mf_hero_txt p.mf_en { font-size: calc(14 * var(--s)); }
  .mf_hero_txt h2 { font-size: calc(35 * var(--s)); }
  .mf_wrap .mf_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .mf_wrap .mf_round img { width: calc(20 * var(--s)); }
}
@media (prefers-reduced-motion: reduce) {
  .mf_motion .mf_hero_bg img, .mf_ring, .mf_roll i { animation: none; }
  .mf_motion [data-mf], .mf_motion .mf_scroll_btn { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 폰 몸통: 카드 뒤(z-index 0)에 항상 깔려 있어 카드가 지나가도 폰 틀이 비지 않음 */
.mf_ph_body { position: absolute; z-index: 0; background: #fff; left: calc(var(--bl) * var(--u)); width: calc(var(--bw) * var(--u)); top: calc(var(--ft) * var(--u)); height: calc((var(--by) - var(--ft) + var(--ext, 0)) * var(--u)); }
.mf_ph_side { position: absolute; z-index: 0; left: 0; width: 100%; top: calc((var(--ft) - 3) * var(--u)); height: calc((var(--by) - var(--ft) + 6 + var(--ext, 0)) * var(--u)); background-repeat: no-repeat; background-size: 100% 100%; }

/* 실제 텍스트 레이어: 시안 좌표·글자 크기(px)에 --u 를 곱해 이미지 레이어와 같이 비례 배치 */
.mf_wrap .T { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; font-size: calc(var(--fs) * var(--u)); line-height: var(--lh); letter-spacing: var(--ls, 0); font-weight: var(--wt, 400); color: var(--c); white-space: pre-line; word-break: keep-all; overflow-wrap: break-word; }
.mf_wrap .T.nw { white-space: pre; }
.mf_wrap .T.up { text-transform: uppercase; }
.mf_wrap .mo_intro b, .mf_wrap .mo_intro span { display: block; }
.mf_wrap .mo_intro b { font-weight: 600; }
.mf_wrap .mo_intro span { font-weight: 300; }
.mf_wrap .mo_intro .lh2 { line-height: 2; }
.mf_wrap .mf_chips { height: calc(var(--h) * var(--u)); }

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

/* 프로젝트 정보 (PC: 시안 1080~1588, 위아래 137 / 좌 243) */
.mf_wrap .mf_info { --u: calc(100cqw / 1920); background: #3548e4; color: #fff; }
.mf_wrap .mf_info_inner { padding: calc(137 * var(--u)) calc(243 * var(--u)); }
.mf_wrap .mf_info_tit { font-size: 54px; font-weight: 700; line-height: 64px; margin-bottom: 38px; }
.mf_wrap .mf_info_meta { display: flex; flex-wrap: wrap; gap: 0 30px; font-size: 20px; line-height: 24px; margin-bottom: 38px; }
.mf_wrap .mf_info_meta div { display: flex; gap: 14px; }
.mf_wrap .mf_info_meta dt { font-weight: 700; min-width: 56px; }
.mf_wrap .mf_info_lead { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.mf_wrap .mf_info_desc { font-size: 18px; line-height: 1.5; }

/* PC 섹션 제목·설명 */
.mf_wrap .ph_tit { font-size: 54px; font-weight: 700; line-height: 64px; text-transform: uppercase; white-space: nowrap; }
.mf_wrap .ph_desc { font-size: 20px; line-height: 1.5; color: #565656; }
.mf_wrap .ph_lab { display: block; font-size: 20px; line-height: 23.36px; color: #6db9fe; text-transform: uppercase; margin-bottom: 5.83px; }
.mf_wrap .ph_head { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); z-index: 20; }
.mf_wrap .ph_goal .ph_tit { line-height: 62.28px; }
.mf_wrap .ph_goal { display: grid; grid-template-columns: calc(756 * var(--u)) calc(606 * var(--u)); }
.mf_wrap .ph_goal .ph_lab, .mf_wrap .ph_goal .ph_tit { grid-column: 1; }
.mf_wrap .ph_goal .ph_desc { grid-column: 2; grid-row: 1 / span 2; margin-top: calc(32.11 * var(--u)); }  /* 시안 x1035·y3965 (제목 오른쪽) */
/* 글자 묶음 아래 끝을 바로 아래 이미지(카드) 위 끝(--b, 시안 px)에 맞춤: 텍스트-이미지 간격 PC 60px / 모바일 40px 통일 */
.mf_wrap .mf_stage { --tg: 60px; }
.mf_wrap .mf_stage .ab { top: auto; bottom: calc((var(--sh) - var(--b)) * var(--u) + var(--tg)); }  /* 시안 x1035·y3965 */
.mf_wrap .ph_banner .ph_desc { margin-top: 39px; white-space: nowrap; }
/* DESIGN CONCEPT (시안 y2865, 칩까지 158) */
.mf_wrap .mf_concept_pc { --u: calc(100cqw / 1920); display: flex; align-items: flex-start; padding: 0 calc(80 * var(--u)) 60px calc(269 * var(--u)); }  /* 글자 → 컬러칩 60px */
.mf_wrap .mf_concept_pc .ph_tit { flex: 0 0 calc(575 * var(--u)); color: #121212; }
.mf_wrap .mf_concept_pc .ph_desc { margin-top: 4px; max-width: calc(958 * var(--u)); }

/* 컬러 칩: 색 블록 + 오른쪽 아래 이름표 (PC 20px Bold, 아래 40 / 이름-코드 7) */
.mf_wrap .mf_chips { height: calc(var(--h) * var(--u)); }
.mf_wrap .mf_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: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7px; padding: 0 calc(var(--r) * var(--u)) calc(40 * var(--u)) 0; font-size: 20px; line-height: 24px; font-weight: 700; }
.mf_wrap .mf_chips b { font-weight: 700; }
.mf_wrap .mf_chips em { font-style: normal; }

/* 모바일 섹션 제목 블록 (좌우 20px, 라벨 12 → 10 → 제목 24 → 20 → 문단 14) */
.mf_wrap .mo_head { position: absolute; left: 20px; right: 20px; top: calc(var(--y) * var(--u)); z-index: 20; color: #111; }
.mf_wrap .mo_head.mo_narrow { right: auto; width: calc(280 * var(--u)); }  /* 배너: 오른쪽 비스듬한 이미지에 닿지 않게 */
.mf_wrap .mo_lab { display: block; font-size: 12px; line-height: 14px; color: #6ebbff; text-transform: uppercase; margin-bottom: 10px; }
.mf_wrap .mo_tit { font-size: 24px; font-weight: 700; line-height: 29px; text-transform: uppercase; }
.mf_wrap .mo_desc { margin-top: 20px; font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; color: #565656; }

/* 컨셉 제목·설명: 1599px 이하는 설명이 길어지므로 위아래로 쌓고 높이를 내용에 맞춤 (메디힐과 같은 규칙) */
@media (min-width: 768px) and (max-width: 1599px) {
  .mf_wrap .mf_concept_pc { flex-direction: column; height: auto; padding-bottom: 60px; }
  .mf_wrap .mf_concept_pc .ph_tit { flex: none; }
  .mf_wrap .mf_concept_pc .ph_desc { margin-top: 14px; max-width: none; }
}
/* 태블릿 (768~1199): PC 배치 그대로, 글자는 화면 폭에 맞춰 줄임 (메디힐과 같은 clamp) */
@media (min-width: 768px) and (max-width: 1199px) {
  .mf_wrap .mf_info_inner { padding: calc(100 * var(--u)) 48px; }
  .mf_wrap .mf_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); line-height: 1.2; margin-bottom: 28px; }
  .mf_wrap .mf_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); gap: 0 20px; margin-bottom: 24px; }
  .mf_wrap .mf_info_lead, .mf_wrap .mf_info_desc { font-size: clamp(14px, calc(18 * var(--u) * 1.5), 18px); }
  .mf_wrap .ph_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); line-height: 1.2; }
  .mf_wrap .ph_desc { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .mf_wrap .ph_lab { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); line-height: 1.2; }
  .mf_wrap .ph_goal { top: calc(760 * var(--u)); right: calc(279 * var(--u)); }
  .mf_wrap .ph_goal { display: block; }
  .mf_wrap .ph_goal .ph_desc { width: auto; margin-top: 12px; }
  .mf_wrap .ph_banner { width: 46%; }
  .mf_wrap .ph_banner .ph_desc { white-space: normal; margin-top: 12px; }
  .mf_wrap .ph_banner br { display: none; }
  .mf_wrap .mf_chips span { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); line-height: 1.2; }
}
@media (max-width: 767px) {
  .mf_wrap .mf_stage { --tg: 40px; }
  .mf_wrap .mf_concept_pc { display: none; }
  /* 모바일 프로젝트 정보 (시안 598~913: 위 57 / 아래 56, 좌우 20) */
  .mf_wrap .mf_info { --u: calc(100cqw / 375); }
  .mf_wrap .mf_info_inner { padding: 57px 20px 56px; }
  .mf_wrap .mf_info_tit { font-size: 25px; line-height: 30px; margin-bottom: 20px; }
  .mf_wrap .mf_info_meta { flex-direction: column; gap: 10px; font-size: 12px; line-height: 14px; margin-bottom: 20px; }
  .mf_wrap .mf_info_meta div { gap: 0; }
  .mf_wrap .mf_info_meta dt { min-width: 47px; }
  .mf_wrap .mf_info_lead { font-size: 14px; font-weight: 600; letter-spacing: -0.05em; margin-bottom: 0; }
  .mf_wrap .mf_info_desc { font-size: 14px; font-weight: 300; letter-spacing: -0.05em; margin-top: 7px; }
  .mf_wrap .mo_br { display: inline; }
  /* 모바일 칩 이름표: 14px (이름 Bold / 코드 Regular), 오른쪽·아래 20, 간격 5 */
  .mf_wrap .mf_chips span { gap: 5px; padding: 0 20px 20px 0; font-size: 14px; line-height: 17px; }
  .mf_wrap .mf_chips em { font-weight: 400; }
}