/* =========================================================
   아너테크 | 제품 라인업 페이지 전용 스타일시트
   파일명: lineup.css
   역할: Hero 영역의 비주얼과 제품 목록의 레이아웃을 정의합니다.
   ========================================================= */

/* ---------- Page Variables (페이지 전체에서 반복 사용되는 색상 정의) ---------- */
:root {
  --lineup-blue: #5b95d6;       /* 포인트 강조색 (파란색) */
  --lineup-blue-dark: #1f6396;  /* 깊은 파란색 */
  --lineup-title: #1f5f9a;      /* 제품명 타이틀 색상 */
  --lineup-text: #666666;       /* 일반 본문 텍스트 색상 */
  --lineup-white: #ffffff;      /* 흰색 배경 */
  --lineup-border: #e5e5e5;     /* 카드 및 박스 테두리색 */
}

/* ---------- Hero Section (상단 배경 및 제목 영역) ---------- */

/* 1. 히어로 섹션 배경 및 정렬 설정 */
#page-lineup .hero.ref-hero {
    display: flex;              /* 유연한 레이아웃을 위해 Flexbox 사용 */
    align-items: center;         /* 내부 요소를 세로축 중앙에 정렬 */
    justify-content: flex-start; /* 내부 요소를 왼쪽(시작점)에 배치 (좌측 정렬 핵심) */
    text-align: left;            /* 텍스트 줄바꿈 시 왼쪽 정렬 */
    min-height: 420px;           /* 영역의 최소 높이를 420px로 고정 */
    height: auto;                /* 내용이 많아지면 높이가 자동으로 늘어남 */
    padding: 80px 0;             /* 상하 여백 80px, 좌우는 컨테이너에서 조절 */
    
    /* 배경 이미지: 투명한 검은색 층(30%)을 겹쳐 글씨 가독성을 높임 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
                      url("../assets/lineup/svg-lineup.svg");
    background-size: cover;      /* 배경이 잘리지 않고 영역을 가득 채움 */
    background-position: center; /* 배경 이미지의 중심을 기준으로 배치 */
}

/* 2. 히어로 콘텐츠 박스 (실제 글자가 들어가는 너비 제한 공간) */
#page-lineup .ref-hero-content {
    width: 100%;                 /* 전체 너비 사용 */
    max-width: 1200px;           /* 최대 너비를 1200px로 제한 (중앙 집중) */
    margin: 0 auto;              /* 박스 자체를 가로 중앙에 배치 */
    padding: 0 20px;             /* 양 끝에 최소 20px의 여백 유지 */
    box-sizing: border-box;      /* 패딩이 너비에 포함되도록 계산 */
}

/* 3. 히어로 대제목 스타일 */
#page-lineup .ref-hero-title {
    margin: 0 0 36px;            /* 제목 아래에 36px 여백 확보 */
    font-family: 'Montserrat', sans-serif;
    /* 가변 폰트: 최소 36px ~ 최대 48px 사이에서 화면 크기에 맞게 자동 조절 */
    font-size: clamp(36px, 3.8vw, 48px); 
    line-height: 1.18;           /* 폰트 크기 대비 적절한 줄간격 */
    font-weight: 700;            /* 굵은 글씨 */
    letter-spacing: -0.02em;     /* 글자 사이 간격을 살짝 좁혀 가독성 향상 */
    color: #ffffff;              /* 흰색 글씨 */
}

/* 4. 히어로 설명글 스타일 */
#page-lineup .ref-hero-description {
    max-width: 980px;            /* 글이 너무 길게 늘어지지 않도록 너비 제한 */
    margin: 0;                   /* 좌측 정렬 유지를 위해 마진 제거 */
    font-size: clamp(18px, 2.2vw, 24px); /* 화면에 따른 가변 크기 (최소 18px) */
    line-height: 1.6;            /* 읽기 편한 넉넉한 줄간격 */
    font-weight: 400;            /* 일반 굵기 */
    color: rgba(255, 255, 255, 0.92); /* 약간 투명한 흰색 */
    word-break: keep-all;        /* 단어가 도중에 잘리지 않고 통째로 줄바꿈됨 */
}


/* ---------- Product List (하단 제품 목록 레이아웃) ---------- */

/* 본문 영역 */
.product-content {
  max-width: 1000px;                        /* 읽기 편하도록 본문 폭을 1000px로 제한 */
  margin: 0 auto;                           /* 중앙 정렬 */
  padding: 60px 20px 100px;                 /* 위 60px, 아래 100px 여백 */
}

/* 개별 제품 아이템 */
.product-item {
  padding: 80px 40px;                       /* 내부 상하좌우 여백 */
  border-bottom: 1px solid #f0f0f0;         /* 아이템 사이의 구분선 */
}

/* 지그재그 배경색: 홀수/짝수 번째 아이템마다 배경색을 다르게 설정 */
.product-item:nth-child(odd) { background: #ffffff; }
.product-item:nth-child(even) { background: #f9fbff; }

/* 제품 이름 */
.product-name {
    color: var(--lineup-title); /* 변수에 정의한 파란색 사용 */
    font-size: 1.75rem; /* 큼직한 폰트 크기 */
    font-weight: 700;
    margin-bottom: 20px;
    display: flex; /* 추가: 이름과 영문명을 가로로 정렬 */
    align-items: baseline; /* 추가: 글자 아래쪽 라인을 맞춤 */
    gap: 12px; /* 추가: 한글명과 영문명 사이 간격 */
}

/* 추가할 영문명 스타일 */
.en-name {
    font-family: 'Montserrat', sans-serif; /* 영문 전용 폰트 적용 */
    font-size: 1.1rem; /* 국문보다 작게 설정 */
    font-weight: 500; /* 약간 가볍게 */
    color: #8899aa; /* 시선을 뺏지 않는 차분한 색상 */
    letter-spacing: 0.02em; /* 자간을 살짝 넓혀 세련되게 */
    text-transform: uppercase; /* 모든 글자를 대문자로 변환 (선택 사항) */
}

.product-intro {
    font-size: 1.1rem; /* 기존보다 약 15~20% 크게 설정 */
    line-height: 1.5; /* 줄간격을 넓혀 가독성 확보 */
    color: #444; /* 텍스트 색상을 조금 더 진하게 조정 */
    margin-bottom: 30px; /* 아래 그리드와의 간격 확보 */
    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 유지 */
    max-width: 900px; /* 너무 길게 늘어지지 않도록 너비 제한 */
}

/* 제품 그리드 (이미지 + 설명 리스트 배치) */
.product-grid {
  display: grid;                            /* 그리드 레이아웃 사용 */
  grid-template-columns: 320px 1fr;         /* 왼쪽 이미지(320px), 오른쪽 설명(남은 공간) */
  gap: 40px;                                /* 이미지와 설명 사이 간격 */
  align-items: start;                       /* 내용물이 달라도 상단에 맞춰 정렬 */
}

/* 이미지를 감싸는 박스 스타일 */
.image-box {
  width: 100%;                  /* 부모 그리드 너비에 꽉 차게 설정 */
  max-width: 320px;             /* 이미지가 너무 커지지 않도록 최대 너비 제한 */
  aspect-ratio: 4 / 3;          /* 중요: 이미지 박스의 가로세로 비율을 4:3으로 고정 */
  border-radius: 16px;          /* 모서리를 둥글게 깎음 */
  overflow: hidden;             /* 둥근 모서리 밖으로 나가는 이미지를 숨김 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 은은한 그림자 추가 */
  border: 1px solid var(--lineup-border);  /* 연한 회색 테두리 */
  background: #fff;             /* 이미지 로드 전 흰색 배경 */
}

/* 박스 내부의 실제 이미지 설정 */
.image-box img {
  width: 100%;                  /* 박스 가로폭에 맞춤 */
  height: 100%;                 /* 박스 세로높이에 맞춤 */
  object-fit: cover;            /* 핵심: 이미지가 늘어나지 않게 비율을 유지하며 박스를 가득 채움 */
  display: block;               /* 하단 미세 공백 제거 */
}

/* 특징 리스트 (동그라미 불렛 기호 커스텀) */
.feature-list li {
  position: relative;
  padding-left: 24px;                       /* 기호가 들어갈 왼쪽 여백 */
  margin-bottom: 14px;                      /* 목록 사이 간격 */
  color: #555;
  list-style: none;                         /* 기본 점 기호 숨김 */
}

.feature-list li::before {
  content: "•";                             /* 가짜 요소를 사용해 불렛 기호 생성 */
  position: absolute;
  left: 0;
  color: var(--lineup-blue);                /* 기호만 파란색으로 강조 */
}

/* ---------- Responsive (모바일 환경 대응) ---------- */
@media (max-width: 850px) {
  .product-grid {
    grid-template-columns: 1fr;             /* 화면이 좁아지면 상하 한 줄로 배치 */
    gap: 30px;
  }
  .image-box {
    max-width: 450px;                       /* 모바일에서 이미지가 너무 커지지 않게 제한 */
    margin: 0 auto;                         /* 이미지 중앙 정렬 */
  }
}

/* =========================
   Lineup Sub Navigation
========================= */

.lineup-subnav{
  position: sticky;
  top: 40px;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e9edf2;
}

.lineup-subnav-links{
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
}

.lineup-subnav-links li{
  flex: 0 0 auto;
}

.lineup-subnav-links a{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #d9e2ec;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #1f5f9a;
  background: #fff;
  white-space: nowrap;
}

.lineup-subnav-links a:hover{
  background: #1f5f9a;
  color: #fff;
}

/* 모바일 줄바꿈만 허용, 크기는 유지 */
@media (max-width: 768px){
  .lineup-subnav-links{
    flex-wrap: wrap;
    justify-content: center;
  }
}

.product-item{
  scroll-margin-top:120px;
}