/* 네이처빌 포트폴리오 (테스트) - 클래스는 nb_ 접두어로 기존 사이트 CSS와 충돌 방지
 * 시안(PC 1920 / 모바일 375)의 레이어 위치(px)를 --u(화면폭/1920, 모바일은 /375)에 곱해 화면 크기에 비례해 배치 */
.nb_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) 위로 올라오지 않게 독립된 층으로 가둠 */
.nb_wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.nb_wrap img { display: block; max-width: none; }
.nb_wrap picture { display: block; }

/* 01 히어로: 소닉슬립과 같은 규칙 (헤더 아래 한 화면 / 모바일 600px, 글자 42%, 원 버튼 아래 80px·지름 160px) */
.nb_wrap .nb_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); }
.nb_hero_bg { position: absolute; inset: 0; }
.nb_wrap .nb_hero_bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.nb_wrap .nb_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; }
.nb_hero_txt p { font-size: 44px; font-weight: 400; line-height: 1.25; }
.nb_hero_txt p.nb_en { font-size: 44px; font-weight: 700; line-height: 1.25; }
.nb_hero_txt h2 { font-size: 72px; font-weight: 700; line-height: 1.25; }
.nb_wrap .nb_scroll_btn { position: absolute; left: 50%; bottom: 80px; z-index: 2; width: 160px; transform: translateX(-50%); }
.nb_ring { width: 100%; animation: nb_rotate 8s linear infinite; }
.nb_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: #f5e9c4; }
.nb_wrap .nb_round img { width: 25px; height: auto; }
@keyframes nb_rotate { to { transform: rotate(360deg); } }

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

/* 가로 띠/카드 줄 롤링 (한 바퀴 길이만큼 배경이 밀려 이어짐) */
.nb_wrap .nb_roll { height: calc(var(--h) * var(--u)); overflow: hidden; }
.nb_roll i { display: block; width: 100%; height: 100%; background-repeat: repeat-x; background-size: calc(var(--p) * var(--u)) 100%; animation: nb_roll var(--t) linear infinite; }
@keyframes nb_roll { to { background-position-x: calc(var(--p) * var(--u) * -1); } }
.nb_roll.nb_rev i { animation-direction: reverse; }
.nb_motion [data-nb] { transition-delay: var(--d, 0ms); }
.nb_motion [data-nb="zoom"] { opacity: 0; transform: scale(1.06); transition-duration: 1.4s; }
.nb_motion [data-nb="zoom"].is_in { opacity: 1; transform: none; }
/* 컬러 칩 이름표 */
/* 컬러 칩: 왼쪽에서 오른쪽으로 차례로 펼쳐짐 */
.nb_motion [data-nb="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); }
.nb_motion [data-nb="wipe"].is_in { clip-path: inset(0 0 0 0); }


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

/* 프로젝트 정보 (PC: 시안 0~504, 위 122 / 좌 243) */
.nb_wrap .nb_info { --u: calc(100cqw / 1920); background: #fbf6e3; color: #565656; min-height: calc(504 * var(--u)); }
.nb_wrap .nb_info_inner { padding: calc(122 * var(--u)) calc(243 * var(--u)); }
.nb_wrap .nb_info_tit { font-size: 54px; font-weight: 700; line-height: 64px; color: #46310c; margin-bottom: 38px; }
.nb_wrap .nb_info_meta { display: flex; flex-wrap: wrap; font-size: 20px; line-height: 24px; margin-bottom: 38px; }
.nb_wrap .nb_info_meta div { display: flex; }
.nb_wrap .nb_info_meta div:nth-child(1) { width: 166px; }
.nb_wrap .nb_info_meta div:nth-child(2) { width: 169.5px; }
.nb_wrap .nb_info_meta dt { font-weight: 700; min-width: 70px; }
.nb_wrap .nb_info_lead { font-size: 18px; font-weight: 700; line-height: 27px; margin-bottom: 16.5px; }
.nb_wrap .nb_info_desc { font-size: 18px; line-height: 27px; }
.nb_wrap .nb_info_desc span { display: block; }

/* PC 섹션 제목·설명 */
.nb_wrap .ph_tit { font-size: 54px; font-weight: 700; line-height: 64px; text-transform: uppercase; white-space: nowrap; }
.nb_wrap .ph_desc { font-size: 20px; line-height: 30px; color: #565656; white-space: nowrap; }
.nb_wrap .ph_head { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y) * var(--u)); z-index: 20; }
.nb_wrap .ph_center { left: calc(-1 * var(--u)); right: 0; text-align: center; }
.nb_wrap .ph_promo .ph_desc { position: absolute; left: calc(1060 * var(--u)); top: 0; }  /* 시안 x1266 */
.nb_wrap .ph_banner .ph_desc { margin: 23.5px 0 0 3px; }

/* 컬러 칩 이름표: 오른쪽 정렬, 이름 / 색 코드 (PC 20px Bold, 줄 높이 31) */
.nb_wrap .nb_lab { left: auto; right: calc(var(--r, 0) * var(--u)); width: auto; top: calc(var(--y) * var(--u)); text-align: right; font-size: 20px; line-height: 31px; font-weight: 700; white-space: nowrap; }
.nb_wrap .nb_lab b, .nb_wrap .nb_lab span { display: block; font-weight: 700; }

/* 모바일 섹션 제목 블록 (좌우 20px, 제목 24 → 10 → 문단 14) */
.nb_wrap .mo_head { position: absolute; left: 20px; right: 20px; top: calc(var(--y) * var(--u)); z-index: 20; }
.nb_wrap .mo_center { text-align: center; }
.nb_wrap .mo_tit { font-size: 24px; font-weight: 700; line-height: 29px; text-transform: uppercase; white-space: nowrap; }
.nb_wrap .mo_desc { margin-top: 10px; font-size: 14px; line-height: 21px; color: #565656; white-space: nowrap; }

/* 글자 띠(NATUREVILLE): 실제 글자가 흐르는 롤링 */
.nb_wrap .nb_mq { height: calc(var(--h) * var(--u) + 1px); overflow: hidden; }
.nb_mq_t { display: flex; width: max-content; height: 100%; animation: nb_mq var(--t) linear infinite; }
.nb_mq_t span { position: relative; flex: 0 0 calc(var(--p) * var(--u)); height: 100%; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; white-space: nowrap; }
.nb_mq_t b { position: absolute; left: calc(var(--tl) * var(--u)); top: calc(var(--ty) * var(--u)); font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--fs) * 1.295 * var(--u)); font-weight: 800; color: #fff; letter-spacing: 0.072em; }
.nb_mq.nb_rev .nb_mq_t { animation-direction: reverse; }
@keyframes nb_mq { to { transform: translateX(calc(var(--p) * var(--u) * -1)); } }

@media (min-width: 768px) and (max-width: 1199px) {
  .nb_wrap .nb_info_inner { padding: calc(100 * var(--u)) 48px; }
  .nb_wrap .nb_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); line-height: 1.2; margin-bottom: 28px; }
  .nb_wrap .nb_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); margin-bottom: 24px; }
  .nb_wrap .nb_info_meta div:nth-child(1), .nb_wrap .nb_info_meta div:nth-child(2) { width: auto; margin-right: 20px; }
  .nb_wrap .nb_info_lead, .nb_wrap .nb_info_desc { font-size: clamp(14px, calc(18 * var(--u) * 1.5), 18px); line-height: 1.5; }
  .nb_wrap .ph_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); line-height: 1.2; }
  .nb_wrap .ph_desc { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); line-height: 1.5; }
  .nb_wrap .nb_lab { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); line-height: 1.2; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .nb_hero_txt p { font-size: 34px; }
  .nb_hero_txt p.nb_en { font-size: 34px; }
  .nb_hero_txt h2 { font-size: 56px; }
  .nb_wrap .nb_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  /* 모바일 프로젝트 정보 (시안 0~337: 위 57.5 / 좌우 20) */
  .nb_wrap .nb_info { --u: calc(100cqw / 375); min-height: calc(337 * var(--u)); }
  .nb_wrap .nb_info_inner { padding: 57.5px 20px 40px; }
  .nb_wrap .nb_info_tit { font-size: 25px; line-height: 30px; margin-bottom: 20px; }
  .nb_wrap .nb_info_meta { flex-direction: column; gap: 10px; font-size: 12px; line-height: 14px; margin-bottom: 19px; }
  .nb_wrap .nb_info_meta div:nth-child(1), .nb_wrap .nb_info_meta div:nth-child(2) { width: auto; }
  .nb_wrap .nb_info_meta dt { min-width: 47px; color: #46310c; }
  .nb_wrap .nb_info_desc { font-size: 14px; line-height: 21px; letter-spacing: -0.05em; }
  .nb_wrap .nb_info_desc .nb_s1 { font-weight: 600; margin-bottom: 6px; }
  .nb_wrap .nb_info_desc .nb_s2 { font-weight: 300; }
  .nb_wrap .mo_br { display: inline; }
  .nb_wrap .pc_t { display: none; }
  .nb_wrap .mo_t { display: inline; }
  /* 모바일 칩 이름표: 14px (이름 Bold / 코드 Regular), 오른쪽 20 */
  .nb_wrap .nb_lab { right: 20px; font-size: 14px; line-height: 17px; }
  .nb_wrap .nb_lab span { font-weight: 400; }

  .nb_pc { display: none; }
  .nb_mo { display: block; }
  /* 모바일 히어로: 높이 600px, 글자 윗줄 상단 약 242px(메디힐 기준)·원 버튼 지름 100px·아래 50px - 배경 이미지와 같이 화면 폭에 비례(--s) */
  .nb_wrap .nb_hero { height: 600px; min-height: 0; }
  .nb_wrap .nb_hero_bg img { left: 0; top: auto; bottom: 0; width: 100%; height: auto; object-fit: initial; }
  .nb_wrap .nb_hero_txt { top: calc(600px - 363 * var(--s)); transform: none; }
  .nb_hero_txt p { font-size: calc(24 * var(--s)); font-weight: 400; }
  .nb_hero_txt p.nb_en { font-size: calc(24 * var(--s)); font-weight: 700; }
  .nb_hero_txt h2 { font-size: calc(30 * var(--s)); line-height: 1.4; }
  .nb_wrap .nb_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .nb_wrap .nb_round img { width: calc(20 * var(--s)); }
}
@media (prefers-reduced-motion: reduce) {
  .nb_motion .nb_hero_bg img, .nb_ring, .nb_roll i, .nb_mq_t { animation: none; }
  .nb_motion [data-nb], .nb_motion .nb_scroll_btn { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 이어 붙인 이미지 사이로 흰 실선이 비치지 않게: 폭·높이를 1px 겹침 (화면 폭에 따라 생기는 소수점 틈 방지) */
.nb_wrap .L.sm { height: calc(var(--ih) * var(--u) + 1px); width: calc(var(--w) * var(--u) + var(--ex, 0px)); object-fit: fill; }

/* 태블릿(768~1199): 설명이 옆 이미지에 겹치거나 화면 밖으로 나가지 않게 제목 아래로 쌓고 줄바꿈 허용 (마이프렌드와 같은 규칙) */
@media (min-width: 768px) and (max-width: 1199px) {
  .nb_wrap .ph_center .ph_desc { margin-top: 12px !important; }
  .nb_wrap .ph_promo { width: 46%; }
  .nb_wrap .ph_banner { width: calc(400 * var(--u)); }
  .nb_wrap .ph_promo .ph_desc, .nb_wrap .ph_banner .ph_desc { position: static; margin: 12px 0 0; white-space: normal; }
  .nb_wrap .ph_promo .ph_desc br, .nb_wrap .ph_banner .ph_desc br { display: none; }
}