/* project_view.css — project_view.html(프로젝트 상세) 전용 스타일. 공통 히어로(.sub_hero 등)는 sub_common.css에 있다 */

/* hero — project_view_visual 위에 오는 최상단 배너. 배경은 Figma에서 마스크+오버레이가 이미 합성된 상태로
   내보내 단일 이미지로 넣는다(별도 마스크 CSS 불필요, file:// 환경 mask-image CORS 이슈도 피할 수 있음) */
.project_view_hero{width:100%;background:var(--color-bg-dark);}
.project_view_hero_inner{display:flex;overflow:hidden;position:relative;width:100%;height:740px;margin:0 auto;padding:80px 30px;flex-direction:column;justify-content:flex-end;}
.project_view_hero_bg{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

/* hero content */
.project_view_hero_content{display:flex;width:100%;margin:0 auto;justify-content:space-between;align-items:flex-end;}
.project_view_hero_title{display:flex;width:1050px;flex-direction:column;gap:35px;}
.project_view_hero_project{display:flex;flex-direction:column;color:var(--color-white);gap:20px;}
.project_view_hero_label{font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.04em;}
.project_view_hero_tit{font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:110px;line-height:0.9;letter-spacing:-0.05em;}
.project_view_hero_info{display:flex;font-size:15px;line-height:1.2;letter-spacing:-0.04em;text-transform:capitalize;gap:50px;}
.project_view_hero_info_item{display:flex;gap:10px;}
.project_view_hero_info_label{font-family:'Inter',sans-serif;font-weight:700;color:rgba(255,255,255,0.6);}
.project_view_hero_info_value{font-family:'Pretendard',sans-serif;font-weight:600;color:var(--color-white);}


/* visual phone */
.project_view_phone{position:absolute;top:376px;left:1509px;width:280px;}
.project_view_phone_img{display:block;width:100%;height:auto;}
/* hero tags */
.project_view_hero_tags{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.project_view_hero_tag{display:flex;width:100px;padding:6px 9px;border-radius:1px;background:var(--color-white);font-family:'Inter',sans-serif;font-weight:600;font-size:18px;line-height:1.5;letter-spacing:-0.04em;color:#333333;justify-content:center;align-items:center;}
.project_view_hero_tag.is_year{width:auto;background:var(--color-accent-red);color:var(--color-white);}

/* visual — 랩탑 목업 + 수상 뱃지. 좌표가 서로 맞물려 계산된 값이라 5px 단위로 반올림하지 않고 Figma 원본 px를 그대로 사용한다 */
.project_view_visual{width:100%;background:var(--color-bg);}
.project_view_visual_inner{position:relative;max-width:1920px;height:1138px;margin:0 auto;}

/* visual laptop */
.project_view_laptop{position:absolute;top:159px;left:107px;width:1499px;height:836px;}
.project_view_laptop_frame{display:block;width:100%;height:100%;object-fit:cover;}
.project_view_laptop_screen{overflow:hidden;position:absolute;top:29px;left:163px;width:1174px;height:735px;border-radius:2px;}
.project_view_laptop_screen_img{display:block;width:100%;height:100%;object-fit:cover;}

/* visual award */
.project_view_award{display:flex;position:absolute;top:179px;left:1509px;width:172px;flex-direction:column;gap:12px;}
.project_view_award_logo{display:block;width:79px;height:96px;mix-blend-mode:darken;}
.project_view_award_text{display:flex;flex-direction:column;}
.project_view_award_badge{display:flex;padding:6px;border-radius:1px;background:var(--color-accent-red);font-family:'Pretendard',sans-serif;font-weight:600;font-size:16px;line-height:1.5;letter-spacing:-0.8px;color:var(--color-white);white-space:nowrap;justify-content:center;align-items:center;}
.project_view_award_badge:first-child{margin-bottom:-1px;}

/* contents02 — Innovation & Connectivity. 이미지 2장이 서로 겹쳐 배치되는 레이아웃이라 project_view_visual과
   동일하게 좌표가 서로 맞물려 계산된 값으로 보고 5px 단위로 반올림하지 않고 Figma 원본 px를 그대로 사용한다 */
.project_view_contents02{overflow:hidden;position:relative;width:100%;background:var(--color-bg);}
.project_view_contents02_inner{position:relative;max-width:1920px;margin:0 auto;padding:107px 150px 110px;}

/* contents02 row — 텍스트 + 이미지 2장을 가로로 배치. 이미지 간 세로/가로 오프셋은 margin으로 표현해
   position:absolute 없이 문서 흐름 안에서 구현한다 */
.project_view_contents02_row{display:flex;align-items:flex-start;}

/* contents02 text */
.project_view_contents02_text{width:597px;flex-shrink:0;margin-top:195px;}
.project_view_contents02_tit{margin-bottom:30px;font-family:'Inter',sans-serif;font-weight:700;font-size:80px;line-height:1;letter-spacing:-0.05em;color:#222222;}
.project_view_contents02_detail{display:flex;flex-direction:column;gap:20px;}
.project_view_contents02_desc{font-family:'Pretendard',sans-serif;font-weight:700;font-size:22px;line-height:1.4;letter-spacing:-0.04em;color:#333333;}
.project_view_contents02_sub{font-family:'Pretendard',sans-serif;font-weight:700;font-size:15px;line-height:1.6;letter-spacing:-0.04em;color:#555555;}

/* contents02 media — Figma에서 두 이미지 모두 그라디언트 페이드 등 내부 효과가 이미 렌더링된 상태로 내보내
   단일 이미지로 넣는다(별도 크롭/그라디언트 CSS 불필요). 이미지+라벨을 세로로 쌓는 로컬 flex 컬럼이라
   position 없이 구현된다 */
.project_view_contents02_media{display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:15px;}
.project_view_contents02_media_professor{margin-top:114px;margin-left:23px;}
.project_view_contents02_shot{overflow:hidden;width:500px;height:920px;border-radius:2px;}
.project_view_contents02_img{display:block;width:100%;height:100%;object-fit:cover;}

/* contents02 label — 이미지 바로 아래 캡션. margin-left로 이미지 왼쪽 기준 들여쓰기 위치만 잡아준다 */
.project_view_contents02_label{display:flex;padding:6px 10px;border-radius:1px;background:#c80060;font-family:'Pretendard',sans-serif;font-weight:700;font-size:15px;line-height:1.5;letter-spacing:-0.04em;color:var(--color-white);white-space:nowrap;}
.project_view_contents02_label_guide{margin-left:148px;}
.project_view_contents02_label_professor{margin-left:132px;}

/* contents02 marquee — DARE TO BE DIFFERENT 무한 반복. common.css의 marquee_loop keyframe을 재사용한다.
   아이템에 margin-right로 간격 지정(gap 사용 금지 — 루프 끊김 발생) */
.project_view_contents02_marquee{display:flex;overflow:hidden;position:absolute;top:837px;left:50%;width:100vw;transform:translateX(-50%);z-index:1;}
.project_view_contents02_marquee_track{display:flex;align-items:center;animation:marquee_loop 80s linear infinite;will-change:transform;}
.project_view_contents02_marquee_item{flex-shrink:0;margin-right:60px;font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:120px;line-height:1.2;letter-spacing:-0.07em;text-transform:uppercase;color:rgba(207,203,200,0.3);white-space:nowrap;}

/* contents03 — 화면 3장이 겹쳐진 레이아웃. project_view_visual과 동일하게 좌표가 서로 맞물려 계산된 값으로 보고
   5px 단위로 반올림하지 않고 Figma 원본 px를 그대로 사용한다 */
.project_view_contents03{overflow:hidden;position:relative;width:100%;background:var(--color-bg);}
.project_view_contents03_inner{position:relative;max-width:1920px;height:1620px;margin:0 auto;}

/* contents03 media — 스크롤 진입 시 아래(media_1)부터 위(media_3)로 순서대로 겹쳐 나타난다(sub.js 참고) */
.project_view_contents03_media{overflow:hidden;position:absolute;border-radius:2px;}
.project_view_contents03_media_1{top:127px;left:189px;width:1414px;height:918px;}
.project_view_contents03_media_2{top:231px;left:465px;width:1414px;height:918px;}
.project_view_contents03_media_3{top:340px;left:37px;width:1414px;height:1235px;}
.project_view_contents03_img{display:block;width:100%;height:100%;object-fit:cover;}

/* contents03 caption — 캡션 텍스트 + 드래그 모션 힌트(Figma엔 실제 모션 데이터가 없어 신규 제작).
   선택 박스(점선 테두리 + 모서리 핸들)의 우하단 핸들을 커서가 잡고 바깥으로 드래그했다 되돌아오는 동작을 반복한다 */
.project_view_contents03_caption{overflow:visible;position:absolute;top:1226px;left:1349px;width:474px;height:270px;padding:60px 58px 50px 45px;border-radius:2px;}
.project_view_contents03_motion{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;}
.project_view_contents03_motion_box,.project_view_contents03_motion_handle,.project_view_contents03_motion_cursor{text-indent:-999999px;color:transparent;font-size:0;}
.project_view_contents03_motion_box{display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:1px dashed rgba(34,34,34,0.35);}
.project_view_contents03_motion_handle{display:block;position:absolute;width:8px;height:8px;border:1px solid rgba(34,34,34,0.35);background:var(--color-bg);}
.project_view_contents03_motion_handle.is_tl{top:-4px;left:-4px;}
.project_view_contents03_motion_handle.is_tr{top:-4px;right:-4px;}
.project_view_contents03_motion_handle.is_bl{bottom:-4px;left:-4px;}
.project_view_contents03_motion_handle.is_br{right:-4px;bottom:-4px;}
.project_view_contents03_motion_cursor{display:block;position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;background:url(/main/images/sub/project/icon_drag_cursor.svg) no-repeat center/contain;animation:project_view_contents03_drag 2.6s ease-in-out infinite;}
.project_view_contents03_text{position:relative;font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;line-height:1.6;letter-spacing:-0.04em;color:#222222;text-transform:capitalize;}

/* keyframes — 우하단 핸들을 잡고 대각선 아래로 드래그했다가 되돌아오는 모션 */
@keyframes project_view_contents03_drag{
  0%,15%{transform:translate(0,0);}
  55%,70%{transform:translate(24px,20px);}
  100%{transform:translate(0,0);}
}

/* contents04 — PC/MOBILE 화면 비교. project_view_visual과 동일하게 좌표가 서로 맞물려 계산된 값으로 보고
   5px 단위로 반올림하지 않고 Figma 원본 px를 그대로 사용한다 */
.project_view_contents04{overflow:hidden;position:relative;width:100%;background:var(--color-bg);}
.project_view_contents04_inner{display:flex;position:relative;max-width:1920px;margin:0 auto;padding:120px 80px 54px;align-items:flex-start;gap:61px;}

/* contents04 decoration — 구분선·PC/MOBILE 라벨. 빈 장식용 span은 none 텍스트 + 숨김 처리한다 */
.project_view_contents04_deco_line_h,.project_view_contents04_deco_line_v,.project_view_contents04_deco_dot{text-indent:-999999px;color:transparent;font-size:0;}
.project_view_contents04_deco_line_h{display:block;position:absolute;top:95px;left:80px;width:1760px;height:1px;background:#aaaaaa;}
.project_view_contents04_deco_line_v{display:block;position:absolute;top:0;left:1569px;width:1px;height:4729px;background:#dedede;}
.project_view_contents04_deco_dot{display:block;position:absolute;top:50px;left:1565px;width:9px;height:9px;border:1px solid #aaaaaa;background:var(--color-bg);}
.project_view_contents04_deco_tag{display:flex;position:absolute;top:31px;padding:0 12px;background:#bcb6aa;font-family:'Inter',sans-serif;font-weight:700;font-size:32px;line-height:1.5;letter-spacing:-0.04em;color:var(--color-white);white-space:nowrap;justify-content:center;align-items:center;}
.project_view_contents04_deco_tag_pc{left:80px;}
.project_view_contents04_deco_tag_mobile{left:1600px;}

/* contents04 label — main Page / Sub Page(1) / Sub Page(2) 공용 라벨 */
.project_view_contents04_label{display:inline-flex;padding:3px 10px;background:var(--color-white);font-family:'Inter',sans-serif;font-weight:600;font-size:18px;line-height:1.4;letter-spacing:-0.07em;color:#222222;text-transform:capitalize;white-space:nowrap;justify-content:center;align-items:center;}

/* contents04 pc */
.project_view_contents04_pc{display:flex;flex-shrink:0;align-items:flex-start;gap:10px;}
.project_view_contents04_pc_main{display:flex;width:724px;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:15px;}
.project_view_contents04_pc_sub{display:flex;width:725px;flex-direction:column;flex-shrink:0;gap:30px;}
.project_view_contents04_pc_sub_item{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:15px;}
.project_view_contents04_shot{overflow:hidden;width:100%;border:1px solid #cccccc;border-radius:6px;}
.project_view_contents04_shot_main{height:3308px;}
.project_view_contents04_shot_sub1{height:1200px;}
.project_view_contents04_shot_sub2{height:2215px;}
.project_view_contents04_img{display:block;width:100%;height:100%;object-fit:cover;}

/* contents04 mobile — 슬라이스 4장을 간격 없이 이어붙여 하나의 긴 스크린샷처럼 보이게 한다 */
.project_view_contents04_mobile{display:flex;width:240px;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:15px;}
.project_view_contents04_mobile_stack{display:flex;width:100%;flex-direction:column;}
.project_view_contents04_mobile_img{display:block;width:100%;height:1150px;border-right:1px solid #cccccc;border-left:1px solid #cccccc;object-fit:cover;}
.project_view_contents04_mobile_img.is_top{border-top:1px solid #cccccc;border-radius:6px 6px 0 0;}
.project_view_contents04_mobile_img.is_bottom{border-bottom:1px solid #cccccc;border-radius:0 0 6px 6px;}

/* contents04 marquee — DARE TO BE DIFFERENT 무한 반복. common.css의 marquee_loop keyframe을 재사용한다.
   아이템에 margin-right로 간격 지정(gap 사용 금지 — 루프 끊김 발생) */
.project_view_contents04_marquee{display:flex;overflow:hidden;position:absolute;top:4585px;left:50%;width:100vw;transform:translateX(-50%);}
.project_view_contents04_marquee_track{display:flex;align-items:center;animation:marquee_loop 80s linear infinite;will-change:transform;}
.project_view_contents04_marquee_item{flex-shrink:0;margin-right:60px;font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:120px;line-height:1.2;letter-spacing:-0.07em;text-transform:uppercase;color:rgba(207,203,200,0.3);white-space:nowrap;}

.view_btn_wrap {
    display: flex;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 30px;
    flex-direction: column;
    gap: 60px;
}

.insight_view_latest {
    display: flex;
    max-width: 1560px;
    margin: 100px auto 0;
    padding: 0 30px;
    flex-direction: column;
    gap: 20px;
}

.insight_view_divider {
    width: 100%;
    height: 2px;
    background: #333333;
}.insight_grid.all_project_grid {
    grid-template-columns: repeat(3, 1fr);
}

.all_project_grid {
    display: grid;
    width: 100%;
    margin-bottom: 60px;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.insight_card_link {
    display: flex;
    width: 100%;
    flex-direction: column;
}
.insight_card_thumb {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    background: var(--color-surface);
    justify-content: center;
    align-items: center;
}
.insight_card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.insight_card_text {
    display: flex;
    width: 100%;
    padding: 20px 50px 30px 10px;
    flex-direction: column;
    gap: 10px;
}
.insight_card_tit {
    display: -webkit-box;
    overflow: hidden;
    font-family: Pretendard;
    font-weight: 700;
    font-size: 22px;
    font-style: normal;
    line-height: 135%;
    letter-spacing: -0.88px;
    color: #222;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.insight_card_meta {
    display: flex;
    align-items: center;
    gap: 15px;
}
.insight_card_category {
    font-family: Inter;
    font-weight: 600;
    font-size: 14px;
    font-style: normal;
    line-height: 135%;
    letter-spacing: -0.7px;
    color: #67635F;
}

.insight_card_date {
    font-family: Pretendard;
    font-weight: 600;
    font-size: 14px;
    font-style: normal;
    line-height: 140%;
    letter-spacing: -0.02em;
    color: var(--color-text-muted);
}
.insight_view_latest_tit {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-text-dark);
}