/* project.css — project.html(프로젝트 목록) 전용 스타일. 공통 히어로(.sub_hero 등)는 sub_common.css에 있다 */
/* hero badge — "Our Project" 타이틀 옆에 얹히는 총 프로젝트 수 배지 */
.project_hero_tit_line { display: inline-flex;align-items: center; gap: 25px;}

.project_hero_badge {
    display: inline-flex;
    flex-shrink: 0;
    width: 70px;
    height: 50px;
    border-radius: 234px;
    background: var(--color-accent-red);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--color-white);
    justify-content: center;
    align-items: center;
}

/* major project */
.major_project_section {
    overflow: hidden;
    width: 100%;
    padding: 100px 0 70px;
}

.major_project_inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 30px;
}

/* major project head */
.major_project_head {
    display: flex;
    width: 100%;
    margin-bottom: 40px;
    align-items: center;
    gap: 20px;
}

.major_project_head_tit {
    font-family: 'Inter',sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 90%;
    letter-spacing: -0.04em;
    color: var(--color-text-dark);
    flex-shrink: 0;
}

/* major project head line — 슬라이드 진행률 게이지. fill의 width를 JS가 스와이퍼 progress(0~1)에 맞춰 갱신한다 (service.css의 .solution_head_line과 동일한 패턴) */
.major_project_head_line {
    overflow: hidden;
    position: relative;
    width: 215px;
    height: 1px;
    background: var(--color-border);
    flex-shrink: 0;
}

.major_project_head_line_fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--color-accent-red);
    transition: width var(--transition-base);
}

/* major project swiper */
.major_project_swiper_wrap {
    position: relative;
    width: 100%;
}

.major_project_swiper.swiper {
    overflow: visible;
    width: 100%;
}

.major_project_swiper .swiper-wrapper {
    align-items: stretch;
}

.major_project_card.swiper-slide {
    width: min(880px,84vw);
    height: auto;
    flex-shrink: 0;
}

.major_project_card {
    display: flex;
    width: 100%;
    flex-direction: column;
}

/* major project card media */
.major_project_card_media {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 460px;
    border-radius: 2px;
    background: var(--color-surface);
    justify-content: center;
    align-items: center;
}

.major_project_card_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.major_project_card_media::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17,17,17,0.1);
    pointer-events: none;
}

.major_project_card_arrow {
    display: flex;
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 95px;
    height: 95px;
    transition: transform var(--transition-base),background-color var(--transition-base);
    justify-content: center;
    align-items: center;
}

.major_project_card_arrow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.major_project_card:hover .major_project_card_arrow {
    background: rgba(0,0,0,0.3);
    transform: scale(1.1) rotate(10deg);
}

.major_project_card:hover .major_project_card_media img {
    transform: scale(1.05);
}

/* major project card body — 관리자가 등록하는 콘텐츠라 길이가 들쭉날쭉해도 카드 높이가 흔들리지 않도록 고정 높이(195px = padding 30+30 + 텍스트 영역 135px)를 준다 */
.major_project_card_body {
    display: flex;
    width: 100%;
    height: 195px;
    padding: 30px;
    border-radius: 2px;
    background: var(--color-white);
    align-items: flex-start;
    gap: 35px;
}

.major_project_card_text {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}

/* 타이틀 1줄, 태그 1행은 nowrap으로, 설명은 항상 2줄만큼 공간을 차지하도록 고정 높이로 잡아 실제 줄 수와 무관하게 텍스트 영역 높이가 일정하게 유지되도록 한다 */
.major_project_card_tit {
    overflow: hidden;
    font-family: 'Pretendard',sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--color-text-dark);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.major_project_card_desc {
    display: -webkit-box;
    overflow: hidden;
    height: 48px;
    font-family: 'Pretendard',sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--color-axis-line);
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.major_project_card_tags {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 5px 10px;
}

.major_project_card_tags li {
    overflow: hidden;
    font-family: 'Pretendard',sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #AFABA2;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.major_project_card_badge {
    display: flex;
    flex-shrink: 0;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--color-bg-alt);
    font-family: 'Inter',sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.02em;
    color: var(--color-white);
    white-space: nowrap;
    justify-content: center;
    align-items: center;
}

/* all project */
.all_project_section {
    width: 100%;
    padding: 30px 0 160px;
}

.all_project_inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 30px;
}

/* all project head */
.all_project_head {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 30px;
    border-bottom: 2px solid #333;
    justify-content: space-between;
    align-items: flex-end;
}

.all_project_head_tit {
    font-family: 'Inter',sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 90%;
    letter-spacing: -0.04em;
    color: var(--color-text-dark);
}

.all_project_head_count {
    margin-left: 5px;
}

/* all project filter — 버튼/카운트 배지 베이스는 sub_common.css의 .pill_filter_btn, .pill_filter_count 공통 스타일을 따른다 */
.all_project_filter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* all project grid */
.all_project_grid {
    display: grid;
    width: 100%;
    margin-bottom: 60px;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.all_project_card {
    cursor: pointer;
}

.all_project_card_thumb {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 5/4;
    border-radius: 2px;
    background: var(--color-surface);
    justify-content: center;
    align-items: center;
}

.all_project_card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.all_project_card:hover .all_project_card_thumb img {
    transform: scale(1.05);
}

/* all project card text — 타이틀+서브태그를 한 묶음으로 묶어 고정 높이를 준다. 관리자가 등록하는 콘텐츠라 길이가 제각각이어도 그리드 행 높이가 흔들리지 않도록 타이틀 2줄, 서브 1줄로 고정하고 넘치는 부분은 말줄임 처리한다 */
.all_project_card_text {
    display: flex;
    height: 135px;
    padding: 20px 90px 30px 10px;
    flex-direction: column;
    justify-content: space-between;
}

.all_project_card_tit {
    display: -webkit-box;
    overflow: hidden;
    font-family: 'Pretendard',sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-dark);
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.all_project_card_sub {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.all_project_card_sub li {
    overflow: hidden;
    font-family: 'Pretendard',sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #AFABA2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.all_project_card_sub li:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-left: 5px;
    border-radius: 50%;
    background: #D9D9D9;
    vertical-align: middle;
}

/* insight card — Insight.html 게시판 카드. 그리드/스크롤 리빌 애니메이션은 all_project_grid, all_project_card 셀렉터를 그대로 공유하고, 카드 내부만 뉴스 리스트 형태(썸네일+타이틀+카테고리·날짜)로 구성한다. data-category 속성은 all_project_filter_btn의 data-filter 값과 매칭되도록 두어 추후 필터링 개발 시 그대로 연동할 수 있게 한다 */
.insight_grid.all_project_grid {
    grid-template-columns: repeat(3,1fr);
}

.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:hover .insight_card_thumb img {
    transform: scale(1.05);
}

.insight_card_text {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 20px 50px 30px 10px;
}

.insight_card_tit {
    display: -webkit-box;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: #222;
    font-family: Pretendard;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 135%;
    /* 29.7px */
    letter-spacing: -0.88px;
}

.insight_card_meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.insight_card_category {
    color: #67635F;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 135%;
    /* 18.9px */
    letter-spacing: -0.7px;
}

.insight_card_date {
    letter-spacing: -0.02em;
    color: var(--color-text-muted);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    /* 19.6px */
}

/* all project pagination */
.all_project_pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.all_project_page_btn {
    display: flex;
    width: 52px;
    height: 50px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-family: 'Inter',sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #444444;
    transition: background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.all_project_page_btn:hover {
    background: var(--color-border);
}

.all_project_page_btn.is_active {
    border-color: transparent;
    background: var(--color-accent-red);
    color: var(--color-white);
}

.all_project_page_btn.is_active:hover {
    background: var(--color-accent-red);
}

.all_project_page_ellipsis {
    display: flex;
    width: 30px;
    height: 50px;
    font-family: 'Inter',sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #444444;
    justify-content: center;
    align-items: center;
}

.all_project_page_arrow {
    display: flex;
    width: 52px;
    height: 50px;
    border-radius: 4px;
    background: #E8E7E2;
    transition: opacity var(--transition-base);
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.all_project_page_arrow:hover {
    opacity: 0.85;
}

.all_project_page_arrow[disabled] {
    cursor: default;
    pointer-events: none;
}

.all_project_page_arrow[disabled] img {
    opacity: 0.4;
}

.all_project_page_prev img {
    transform: rotate(180deg);
}

/*GIF SIZE*/
.sub_hero_mascot{position:absolute;top:80px;right:150px;width:490px;}

/* 1920px~1025px 구간 — PC 디자인을 1920px 기준 비율 그대로 축소한다. RESPONSIVE-VW-GUIDE.md 기준.
px→vw 변환 대상만 오버라이드하고 나머지 선언(레이아웃 타입, 색상 등)은 위 PC 규칙을 그대로 따른다.
border 1px/2px, outline, box-shadow, 단위 없는 line-height, 이미 %·vw·min()으로 작성된 값은 변환 대상에서 제외했다 */
@media screen and (min-width:1025px) and (max-width:1920px){
  /* hero badge */
  .project_hero_tit_line{gap:1.3021vw;}
  .project_hero_badge{width:3.6458vw;height:2.6042vw;border-radius:12.1875vw;font-size:1.5625vw;}

  /* major project */
  .major_project_section{padding:5.2083vw 0 3.6458vw;}
  .major_project_inner{max-width:100vw;padding:0 1.5625vw;}

  /* major project head */
  .major_project_head{margin-bottom:2.0833vw;gap:1.0417vw;}
  .major_project_head_tit{font-size:1.25vw;}
  .major_project_head_line{width:11.1979vw;}

  /* major project card media */
  .major_project_card_media{height:23.9583vw;border-radius:0.1042vw;}
  .major_project_card_arrow{width:4.9479vw;height:4.9479vw;}

  /* major project card body */
  .major_project_card_body{height:10.1563vw;padding:1.5625vw;border-radius:0.1042vw;gap:1.8229vw;}
  .major_project_card_text{gap:1.0417vw;}
  .major_project_card_tit{font-size:1.25vw;}
  .major_project_card_desc{height:2.5vw;font-size:0.8333vw;}
  .major_project_card_tags{gap:0.2604vw 0.5208vw;}
  .major_project_card_tags li{font-size:0.6771vw;}
  .major_project_card_badge{padding:0.3125vw 0.5208vw;border-radius:0.2083vw;font-size:0.625vw;}

  /* all project */
  .all_project_section{padding:1.5625vw 0 8.3333vw;}
  .all_project_inner{max-width:100vw;padding:0 1.5625vw;}

  /* all project head */
  .all_project_head{margin-bottom:1.0417vw;padding-bottom:1.5625vw;}
  .all_project_head_tit{font-size:1.25vw;}
  .all_project_head_count{margin-left:0.2604vw;}

  /* all project filter */
  .all_project_filter{gap:0.4167vw;}

  /* all project grid */
  .all_project_grid{margin-bottom:3.125vw;gap:1.0417vw;}
  .all_project_card_thumb{border-radius:0.1042vw;}

  /* all project card text */
  .all_project_card_text{height:7.0313vw;padding:1.0417vw 4.6875vw 1.5625vw 0.5208vw;}
  .all_project_card_tit{font-size:1.0417vw;}
  .all_project_card_sub{gap:0.2604vw;}
  .all_project_card_sub li{font-size:0.6771vw;}
  .all_project_card_sub li:not(:last-child)::after{width:0.1563vw;height:0.1563vw;margin-left:0.2604vw;}

  /* insight card */
  .insight_card_thumb{border-radius:0.1042vw;}
  .insight_card_text{gap:0.5208vw;padding:1.0417vw 2.6042vw 1.5625vw 0.5208vw;}
  .insight_card_tit{font-size:1.1458vw;letter-spacing:-0.0458vw;}
  .insight_card_meta{gap:0.7813vw;}
  .insight_card_category{font-size:0.7292vw;letter-spacing:-0.0365vw;}
  .insight_card_date{font-size:0.7292vw;}

  /* all project pagination */
  .all_project_pagination{gap:0.7813vw;}
  .all_project_page_btn{width:2.7083vw;height:2.6042vw;border-radius:0.2083vw;font-size:0.8333vw;}
  .all_project_page_ellipsis{width:1.5625vw;height:2.6042vw;font-size:0.9375vw;}
  .all_project_page_arrow{width:2.7083vw;height:2.6042vw;border-radius:0.2083vw;}

  /* gif size */
  .sub_hero_mascot{top:4.1667vw;right:7.8125vw;width:25.5208vw;}
}