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

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

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

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

/* ---------- 실제 글자: 피그마 px 그대로 (여백만 화면 폭 비례) ---------- */
.cr_wrap .cr_info, .cr_wrap .cr_band, .cr_wrap .cr_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) */
.cr_wrap .cr_info { --u: calc(100cqw / 1920); background: #000; color: #fff; }
.cr_wrap .cr_info_inner { padding: 150px calc(270 * var(--u)); }  /* 따로 떨어진 글자 섹션: 상하 150px */
.cr_wrap .cr_info_tit { font-size: 54px; font-weight: 700; line-height: normal; margin-bottom: 44px; }
.cr_wrap .cr_info_meta { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 20px; line-height: normal; margin-bottom: 34px; }
.cr_wrap .cr_info_meta div { display: flex; gap: 20px; align-items: center; }
.cr_wrap .cr_info_meta dt { font-weight: 700; color: inherit; }
.cr_wrap .cr_info_meta div + div dt { width: 56px; }
.cr_wrap .cr_info_meta dd { color: inherit; }
.cr_wrap .cr_info_lead { font-size: 20px; font-weight: 700; line-height: 1.6; color: inherit; }
.cr_wrap .cr_info_desc { margin-top: 10px; font-size: 18px; font-weight: 400; line-height: 1.6; color: inherit; }

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

/* 컬러 칩: 색 블록 + 오른쪽 아래 코드 */
.cr_wrap .cr_chips { display: flex; flex-direction: column; }
.cr_wrap .cr_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; }
.cr_wrap .cr_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) {
  .cr_wrap .cr_info_inner { padding: 150px 48px; }
  .cr_wrap .cr_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); margin-bottom: 28px; }
  .cr_wrap .cr_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); margin-bottom: 24px; }
  .cr_wrap .cr_info_lead, .cr_wrap .cr_lead { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); }
  .cr_wrap .cr_info_desc, .cr_wrap .cr_desc { font-size: clamp(13px, calc(18 * var(--u) * 1.5), 18px); }
  .cr_wrap .cr_info br, .cr_wrap .cr_band br { display: none; }
  .cr_wrap .cr_band { padding: 152px 48px 152px; gap: 32px; }
  .cr_wrap .cr_band_l { width: auto; }
  .cr_wrap .cr_band_r { flex: 1; width: auto; }
  .cr_wrap .cr_eye { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .cr_wrap .cr_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); }
  .cr_wrap .cr_chips span { font-size: clamp(13px, calc(23 * var(--u) * 1.5), 23px); }
  .cr_wrap .cr_hero_logo { width: 280px; }
  .cr_wrap .cr_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .cr_pc { display: none; }
  .cr_mo { display: block; }
  .cr_wrap .pc_t { display: none; }
  .cr_wrap .mo_t { display: inline; }
  .cr_wrap .mo_br { display: inline; }
  .cr_wrap .cr_info { --u: calc(100cqw / 375); }
  .cr_wrap .cr_info_inner { padding: 80px 20px; }
  .cr_wrap .cr_info_tit { font-size: 24px; margin-bottom: 20px; }
  .cr_wrap .cr_info_meta { flex-direction: column; gap: 10px; font-size: 16px; margin-bottom: 20px; }
  .cr_wrap .cr_info_meta div { gap: 7px; }
  .cr_wrap .cr_info_meta div + div dt { width: 39px; }
  .cr_wrap .cr_info_lead { font-size: 14px; line-height: 1.5; }
  .cr_wrap .cr_info_desc { margin-top: 15px; font-size: 14px; line-height: 1.5;  }
  /* 모바일 글자 띠: 위아래 80 / 좌우 20 */
  .cr_wrap .cr_band { display: block; padding: 82px 20px 82px; }  /* 모바일 상하 80px */
  .cr_wrap .cr_eye { font-size: 14px; }
  .cr_wrap .cr_tit { margin-top: 10px; font-size: 28px; line-height: 1; }
  .cr_wrap .cr_band_l, .cr_wrap .cr_band_r { width: auto; }
  .cr_wrap .cr_band_r { margin-top: 24px; }
  .cr_wrap .cr_lead { font-size: 15px; line-height: 1.5; }
  .cr_wrap .cr_desc { font-size: 14px; line-height: 1.5; }
  .cr_wrap .cr_chips span { font-size: 14px; }
  /* 모바일 히어로: 높이 600px, 원 버튼 지름 100px·아래 50px - 배경 이미지와 같이 화면 폭에 비례(--s) */
  .cr_wrap .cr_hero { height: 600px; min-height: 0; }
  .cr_wrap .cr_hero_bg img { left: 0; top: auto; bottom: 0; width: 100%; height: auto; object-fit: initial; }
  .cr_wrap .cr_hero_txt { top: calc(600px - 394 * var(--s)); transform: none; }
  .cr_wrap .cr_hero_logo { width: calc(112 * var(--s)); }
  .cr_wrap .cr_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .cr_wrap .cr_round img { width: calc(23.5 * var(--s)); }
}
@media (prefers-reduced-motion: reduce) {
  .cr_motion .cr_hero_bg img, .cr_wrap .cr_ring { animation: none; }
  .cr_motion [data-cr], .cr_motion .cr_scroll_btn { opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important; }
}

/* ---------- 페이지 전용 ---------- */
/* PC 정보 띠: 소개 문장은 한 덩어리(20px, 줄간 32px) */
.cr_wrap .cr_info_lead { font-size: 20px; line-height: 32px; }
.cr_wrap .cr_info_desc { margin-top: 0; font-size: 20px; line-height: 32px; }
/* 로고 아이덴티티 띠: 따로 떨어진 글자 섹션 상하 150px (위 151 = 사진 1px 겹침 보정) */
.cr_wrap .cr_logo_band { padding: 152px 0 152px calc(267 * var(--u)); }
.cr_wrap .cr_logo_band .cr_band_l { width: calc(684 * var(--u)); }
.cr_wrap .cr_logo_band .cr_band_r { flex: 1; width: auto; padding-top: calc(48 * var(--u)); }
.cr_wrap .cr_logo_band .cr_desc { margin-top: 0; font-size: 20px; line-height: 1.5; }
.cr_wrap .cr_logo_band .cr_eye { font-weight: 600; }
/* 컬러칩: 흰 글자 24px Medium (모바일 14px) */
.cr_wrap .cr_chips span { color: #fff; font-size: 24px; font-weight: 500; }
.cr_wrap .cr_chips_row { flex-direction: row; }
.cr_wrap .cr_chips_row span { flex: none; width: calc(var(--w) * var(--u)); }
.cr_wrap .cr_side { display: flex; margin-bottom: -2px; }  /* 다음 사진과 1px 겹침 */
.cr_wrap .cr_side_img { width: calc(1250 * var(--u)); height: auto; flex: none; align-self: stretch; object-fit: cover; }
.cr_wrap .cr_chips { position: relative; margin-bottom: -2px; }
.cr_wrap .cr_side .cr_chips { flex: 1; margin-bottom: 0; margin-left: -2px; position: relative; z-index: 1; }  /* 사진과 2px 겹쳐 세로 틈(흰 줄) 방지 */
@media (min-width: 768px) and (max-width: 1199px) {
  .cr_wrap .cr_info_lead, .cr_wrap .cr_info_desc { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); line-height: 1.6; }
  .cr_wrap .cr_logo_band { padding: 152px 48px 152px; }
  .cr_wrap .cr_logo_band .cr_band_l { width: auto; }
  .cr_wrap .cr_logo_band .cr_band_r { padding-top: 0; }
  .cr_wrap .cr_logo_band .cr_desc { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .cr_wrap .cr_chips span { font-size: clamp(13px, calc(24 * var(--u) * 1.5), 24px); }
}
@media (max-width: 767px) {
  .cr_wrap .cr_info_lead, .cr_wrap .cr_info_desc { font-size: 14px; line-height: 1.5; color: #f3f3f3; }
  .cr_wrap .cr_info_desc { margin-top: 15px; }
  /* 로고 아이덴티티 띠: 상하 80px (따로 떨어진 글자 섹션) */
  .cr_wrap .cr_logo_band { padding: 82px 20px 82px; background: #fff !important; color: #000 !important; }
  .cr_wrap .cr_logo_band .cr_eye { font-size: 20px; }
  .cr_wrap .cr_logo_band .cr_tit { margin-top: 14px; font-size: 24px; line-height: normal; }
  .cr_wrap .cr_logo_band .cr_band_r { margin-top: 24px; padding-top: 0; }
  .cr_wrap .cr_logo_band .cr_desc { font-size: 16px; line-height: 1.5; color: #343434 !important; }
  .cr_wrap .cr_chips span { font-size: 14px; }
}
.cr_wrap .cr_hero_logo { width: 430px; }
@media (min-width: 768px) and (max-width: 1199px) { .cr_wrap .cr_hero_logo { width: 340px; } }
@media (max-width: 767px) { .cr_wrap .cr_hero_logo { width: calc(215 * var(--s)); } }