/* 소닉슬립 포트폴리오 페이지
 * - 모든 클래스는 ws_ 접두어 (기존 사이트 CSS와 충돌 방지)
 * - 위치/여백은 시안(1920px) 수치 × --u(화면폭/1920) 로 화면 크기에 비례
 * - 글자 크기는 디자이너 지정값(px) 고정
 * - 이미지 섹션 경계가 0.5px 같은 소수점 위치에 걸리면 흰 배경이 실선처럼 비쳐서,
 *   각 섹션에 경계 색 배경을 깔고 1px 겹치게 붙임 (흰 선 제거)
 */

/* 사이트는 Pretendard를 'Pretendard Variable' 이름으로 불러옴 (html/css/style_03.css @import) → 피그마와 같은 폰트 */
.ws_wrap { --hd: 80px; letter-spacing: 0; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; container-type: inline-size; word-break: keep-all; padding-top: var(--hd); overflow: hidden; color: #111; background: #fff; }
/* 사이트 기본 CSS가 덮어쓰는 값을 막기 위해 안쪽 요소는 전부 위 폰트/자간을 상속
 * - default.css: h1~h6, input 에 'pretendard' 직접 지정
 * - style_03.css: body { letter-spacing: -0.8px } → 피그마는 자간 0% 라서 .ws_wrap 에서 0으로 되돌림 */
.ws_wrap * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; letter-spacing: inherit; }
.ws_wrap ul, .ws_wrap li { list-style: none; }
.ws_wrap img, .ws_wrap picture { display: block; width: 100%; height: auto; }
.ws_wrap section { position: relative; --u: calc(100cqw / 1920); }
.ws_wrap .ws_mo { display: none; }

/* 공통 섹션 제목/설명 */
/* 피그마 '행간 100%' 텍스트의 실제 박스 높이 = 글자크기 × 1.2 (54→64, 20→24, 16→19) 라서 line-height 1.2 로 맞춤 */
.ws_sec_tit { font-weight: 700; font-size: 54px; line-height: 1.2; text-transform: uppercase; }
/* 피그마 자간: AD / SHOPPING 설명만 -2%, 컨셉 설명은 0% */
.ws_sec_desc { font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: #565656; }
.ws_concept .ws_sec_desc { letter-spacing: 0; }

/* 01 비주얼: 헤더 아래 한 화면을 꽉 채움 */
.ws_visual { height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); min-height: 600px; overflow: hidden; background: #111; }
.ws_visual_img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.ws_visual_txt { position: absolute; left: 0; right: 0; top: 42%; z-index: 1; transform: translateY(-50%); padding: 0 20px; text-align: center; color: #fff; }
.ws_visual_txt p { font-size: 44px; font-weight: 200; line-height: 1.25; }
.ws_visual_txt h2 { font-size: 64px; font-weight: 700; line-height: 1.25; }
.ws_scroll_btn { position: absolute; left: 50%; bottom: 80px; z-index: 1; width: 160px; transform: translateX(-50%); }
.ws_ring { animation: ws_rotate 8s linear infinite; }
.ws_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: #204bf9; }
.ws_round img { width: 25px !important; }
@keyframes ws_rotate { to { transform: rotate(360deg); } }

/* 02 프로젝트 정보 */
.ws_info { background: #204bf9; color: #fff; }   /* 히어로가 딱 한 화면이라 위로 겹치면(-1px) 화면 맨 아래에 파란 줄이 보임 */
.ws_info_inner { padding: calc(120 * var(--u)) calc(250 * var(--u)); }
.ws_info_tit { font-size: 54px; font-weight: 700; line-height: 1.2; margin-bottom: 44px; }
.ws_info_meta { display: flex; gap: 30px; font-size: 20px; line-height: 1.2; margin-bottom: 38px; }
.ws_info_meta div { display: flex; gap: 14px; }
.ws_info_meta dt { font-weight: 700; }
.ws_info_lead { font-size: 18px; font-weight: 700; line-height: 1.5; color: #f3f3f3; margin-bottom: 16px; }
.ws_info_desc { font-size: 18px; line-height: 1.5; color: #f3f3f3; margin-bottom: 16px; }
.ws_info_desc:last-child { margin-bottom: 0; }

/* 03 피드: 폰 위/아래 조각 사이로 카드가 한 장씩 넘어가고 가운데 카드가 폰 화면 안에 멈춤 */
.ws_feed { padding-top: calc(145 * var(--u)); }
.ws_feed_stage { position: relative; height: calc(885 * var(--u)); }
.ws_phone_top, .ws_phone_bottom { position: absolute; left: 50%; width: calc(421 * var(--u)) !important; transform: translateX(-50%); z-index: 1; }
.ws_phone_top { top: 0; }
.ws_phone_bottom { top: calc(689 * var(--u)); }
.ws_phone_body { position: absolute; left: 50%; top: calc(230 * var(--u)); width: calc(411 * var(--u)); height: calc(470 * var(--u)); transform: translateX(-50%); background: #0b0f12; box-shadow: inset calc(5 * var(--u)) 0 0 #3c3e3b, inset calc(-5 * var(--u)) 0 0 #3c3e3b; }
.ws_feed_slider { position: absolute; left: 0; right: 0; top: calc(241 * var(--u)); z-index: 2; overflow: hidden; }
.ws_feed_track { display: flex; gap: calc(21 * var(--u)); width: max-content; will-change: transform; }
.ws_feed_track li { flex: 0 0 calc(448 * var(--u)); }
.ws_feed_track.is_moving { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }

/* 04 디자인 컨셉 */
.ws_concept_head { display: flex; align-items: flex-start; padding: calc(205 * var(--u)) calc(80 * var(--u)) calc(65 * var(--u)) calc(270 * var(--u)); }
.ws_concept_head .ws_sec_tit { flex: 0 0 calc(575 * var(--u)); }
.ws_concept_head .ws_sec_desc { margin-top: calc(4 * var(--u)); }
.ws_colors { display: flex; height: calc(584 * var(--u)); }
.ws_colors li { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7px; padding: 0 calc(40 * var(--u)) calc(40 * var(--u)) 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }
.ws_colors li strong { font-weight: 700; }
.ws_colors .primary { flex: 0 0 50%; background: linear-gradient(120deg, #8a31ff, #204bf9); }
.ws_colors .black { flex: 0 0 calc(25% + 1px); margin-left: -1px; background: #111; }
.ws_colors .white { flex: 0 0 25%; background: #f4f4f4; color: #595959; }

/* 05 AD CREATIVE (배경은 이미지, 글자만 위에 얹음) */
.ws_ad { margin-top: -1px; background: #151c22; }
.ws_ad_head { position: absolute; left: calc(280 * var(--u)); right: calc(270 * var(--u)); top: calc(290 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; color: #fff; }
.ws_ad_head .ws_sec_desc { color: #fff; }
.ws_label { display: block; font-weight: 500; font-size: 20px; line-height: 1.2; color: #00adff; margin-bottom: 6px; }

/* 06 SHOPPING LIVE */
.ws_shop { margin-top: -1px; background: #f4f4f4; }
.ws_shop_head { position: absolute; left: calc(280 * var(--u)); top: calc(199 * var(--u)); }
.ws_shop_head .ws_sec_tit { line-height: 1.3; }
.ws_shop_head .ws_sec_desc { margin-top: 30px; }

/* 07 흐르는 띠 */
.ws_marquee { --u: calc(100cqw / 1920); position: relative; z-index: 1; margin-top: -1px; height: calc(120 * var(--u)); background: #204bf9; overflow: hidden; display: flex; align-items: center; }
.ws_marquee_track { display: flex; flex: none; animation: ws_marquee 30s linear infinite; }
.ws_marquee_track span { flex: none; padding-right: calc(100 * var(--u)); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: calc(45 * var(--u)); line-height: 1; text-transform: uppercase; color: #fff; white-space: nowrap; }
@keyframes ws_marquee { to { transform: translateX(-50%); } }

/* 08 광고 피드 */
.ws_more { margin-top: -1px; background: #d6ecff; }
.ws_ad, .ws_shop, .ws_more { overflow: hidden; }

/* ---------- 모션 ----------
 * JS가 .ws_wrap에 .ws_motion을 붙였을 때만 숨겨놓고 시작 (JS 꺼져 있으면 그냥 다 보임)
 * 화면에 들어오면 JS가 .is_in을 붙여서 등장
 */
.ws_motion .ws_visual_img { animation: ws_kenburns 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ws_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }

.ws_motion [data-ws] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.ws_motion [data-ws="up"] { opacity: 0; transform: translateY(40px); }
.ws_motion [data-ws="left"] { opacity: 0; transform: translateX(-60px); }
.ws_motion [data-ws="zoom"] { opacity: 0; transform: scale(1.08); transition-duration: 1.4s; }
.ws_motion [data-ws].is_in { opacity: 1; transform: none; }

/* 04 컬러칩: 왼쪽부터 순서대로 닦아내듯 등장 */
.ws_motion [data-ws="wipe"] li { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.ws_motion [data-ws="wipe"] li:nth-child(2) { transition-delay: .15s; }
.ws_motion [data-ws="wipe"] li:nth-child(3) { transition-delay: .3s; }
.ws_motion [data-ws="wipe"].is_in li { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .ws_motion .ws_visual_img, .ws_ring, .ws_marquee_track { animation: none; }
  .ws_motion [data-ws], .ws_motion [data-ws="wipe"] li { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- 태블릿 (1199px 이하): 사이트 포트폴리오 템플릿과 같은 비율 ---------- */
@media (max-width: 1199px) {
  .ws_visual { height: calc(90vh - var(--hd)); height: calc(90svh - var(--hd)); }
  .ws_visual_txt p { font-size: 34px; }
  .ws_visual_txt h2 { font-size: 49px; }
  .ws_scroll_btn { width: 130px; bottom: 65px; }
  .ws_sec_tit { font-size: 40px; }
  .ws_sec_desc, .ws_colors li { font-size: 17px; }
}

/* ---------- 모바일 (767px 이하) ----------
 * 위치는 모바일 시안(375px) 수치 × --u(화면폭/375), 좌우 여백은 20px 고정, 글자 크기는 디자이너 지정값(px)
 * 섹션 이미지는 HTML의 <picture>가 *_mo.jpg 로 교체
 */
@media (max-width: 767px) {
  .ws_wrap section, .ws_marquee { --u: calc(100cqw / 375); }
  /* 피드는 PC 배치를 0.4286배 축소한 것과 같아서 PC 수치를 그대로 쓰고 단위만 바꿈 */
  /* 피드: 모바일 시안(375px) 수치 그대로 - 폰 177px, 카드 192px, 카드 간격 9.5px */
  .ws_wrap .ws_feed { padding: calc(68 * var(--u)) 0 calc(26 * var(--u)); }
  .ws_feed_stage { height: calc(364 * var(--u)); }
  .ws_phone_top, .ws_phone_bottom { width: calc(177.25 * var(--u)) !important; }
  .ws_phone_bottom { top: calc(300.75 * var(--u)); }
  .ws_phone_body { top: calc(109 * var(--u)); width: calc(176 * var(--u)); height: calc(192 * var(--u)); box-shadow: inset calc(2 * var(--u)) 0 0 #3c3e3b, inset calc(-2 * var(--u)) 0 0 #3c3e3b; }
  .ws_feed_slider { top: calc(109 * var(--u)); }
  .ws_feed_track { gap: calc(9.5 * var(--u)); }
  .ws_feed_track li { flex: 0 0 calc(191.5 * var(--u)); }

  .ws_sec_tit { font-size: 24px; }
  .ws_sec_desc { font-size: 14px; }

  /* 01 비주얼 (사이트 포트폴리오 템플릿 모바일과 동일) */
  .ws_visual { height: 600px; min-height: 0; }

  .ws_visual { --s: max(calc(100vw / 375), 1px); }   /* 다른 모바일 히어로(메디힐 등)와 같이 화면 폭에 비례 */
  .ws_visual_txt { top: calc(600px - 363 * var(--s)); transform: none; }   /* 메디힐·블랙에이디·TCL 모바일 히어로와 같은 위치 (윗줄 글자 상단 약 242px) */
  .ws_visual_txt p { font-size: calc(24 * var(--s)); }
  .ws_visual_txt h2 { font-size: calc(35 * var(--s)); }
  .ws_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }
  .ws_round img { width: calc(20 * var(--s)) !important; }

  /* 02 프로젝트 정보 */
  .ws_info_inner { padding: 60px 20px; }
  .ws_info_tit { font-size: 24px; margin-bottom: 20px; }
  .ws_info_meta { flex-direction: column; gap: 10px; font-size: 16px; margin-bottom: 20px; }
  .ws_info_meta div { gap: 7px; }
  .ws_info_lead, .ws_info_desc { font-size: 14px; margin-bottom: 15px; }
  .ws_info_desc:last-child { margin-bottom: 0; }
  .ws_info br, .ws_concept br { display: none; }
  .ws_wrap .ws_mo { display: inline; }

  /* 04 디자인 컨셉 */
  .ws_concept_head { flex-direction: column; align-items: flex-start; padding: calc(85 * var(--u)) 20px calc(27 * var(--u)); }
  .ws_concept_head .ws_sec_tit { flex: none; }
  .ws_concept_head .ws_sec_desc { margin: 20px 0 0; }
  .ws_colors { height: auto; flex-wrap: wrap; }
  .ws_colors li { height: calc(170 * var(--u)); gap: 5px; padding: 0 20px calc(21 * var(--u)) 0; font-size: 14px; }
  .ws_colors .primary { flex-basis: 100%; }
  /* 모바일 시안의 black 칩은 순검정(#000), PC 시안은 #111 이라서 모바일에서만 따로 지정 */
  .ws_colors .black { flex-basis: calc(50% + 1px); margin-left: 0; margin-right: -1px; background: #000; }
  .ws_colors .white { flex-basis: 50%; }

  /* 05 AD CREATIVE */
  .ws_ad_head { left: 20px; right: 20px; top: calc(78 * var(--u)); flex-direction: column; align-items: flex-start; }
  .ws_ad_head .ws_sec_desc { margin-top: 20px; }
  .ws_label { font-size: 12px; margin-bottom: 10px; }

  /* 06 SHOPPING LIVE */
  .ws_shop_head { left: 20px; top: calc(80 * var(--u)); width: calc(240 * var(--u)); }
  .ws_shop_head .ws_sec_desc { margin-top: 20px; }

  /* 07 흐르는 띠 */
  .ws_marquee { height: calc(60 * var(--u)); }
  .ws_marquee_track span { font-size: 20px; padding-right: 30px; }

  /* 등장 모션 이동거리도 화면에 맞게 줄임 */
  .ws_motion [data-ws="up"] { transform: translateY(24px); }
  .ws_motion [data-ws="left"] { transform: translateX(-30px); }
}