/* ============================================================
   PRODUCT.CSS — product.html (제품 일람)
   ============================================================ */

.product-list-page .page-hero{
    position: relative;
    /* 32"+ 와이드 모니터에서 사진이 가로로 늘어진 듯 보이지 않도록 폭 캡 + 가운데 정렬 */
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    height: clamp(420px, 56vh, 780px);
    background:
      linear-gradient(180deg, rgba(15,17,21,0.40) 0%, rgba(15,17,21,0.55) 55%, rgba(15,17,21,0.92) 100%),
      url('../data/images/product-hero/01.webp') center/cover no-repeat,
      var(--c-darkgray);
    border-bottom: 1px solid var(--c-line);
    padding: 40px 32px;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.product-list-page .page-hero > .page-hero-inner{
    position: relative;
    z-index: 2;
}

/* ============================================================
   첫 진입 시 시네마틱 줌-아웃
   처음 빠르게 시작 → 끝에 슬로모션으로 멈춤
   ============================================================ */
@keyframes productHeroZoom{
    0%   { transform: scale(2.6); }
    100% { transform: scale(1.0); }
}
.product-list-page .page-hero.initial-zoom .hero-bg-slides .bg-slide:first-child{
    animation: productHeroZoom 5s cubic-bezier(0.10, 0.75, 0.05, 1) both;
    /* cubic-bezier: 처음 빠르게 (0.10, 0.75) → 끝 슬로모션 (0.05, 1) */
}

/* ============================================================
   제품 라벨 (L2 PRO / K2 / PORTAL CAM)
   ============================================================ */
.hero-product-labels{
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 18px;
    padding: 0 16px;
    flex-wrap: wrap;
    justify-content: center;
    /* 줌 끝나기 전엔 살짝 늦게 등장 */
    opacity: 0;
    transition: opacity .8s ease 0.3s, transform .8s ease 0.3s;
    transform: translateX(-50%) translateY(12px);
}
.product-list-page .page-hero:not(.initial-zoom) .hero-product-labels,
.product-list-page .page-hero.labels-ready .hero-product-labels{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hero-label-btn{
    background: rgba(15,17,21,0.45);
    border: 1px solid rgba(242,242,238,0.22);
    color: var(--c-white-2);
    padding: 12px 24px;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    min-width: 140px;
    justify-content: center;
}
.hero-label-btn .num{
    font-size: 11px;
    color: var(--c-navy-hl);
    letter-spacing: 0.3px;
    font-weight: 500;
}
.hero-label-btn .lbl{
    font-size: 14px;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.hero-label-btn:hover{
    border-color: var(--c-navy-hl);
    color: var(--c-white);
    background: rgba(46,98,179,0.25);
}
.hero-label-btn.active{
    border-color: var(--c-navy-hl);
    background: rgba(46,98,179,0.35);
    color: var(--c-white);
    box-shadow: 0 6px 22px rgba(46,98,179,0.35);
}
.hero-label-btn.active .num{
    color: var(--c-white);
}

/* 스크롤 시 헤더 가려지지 않도록 — 각 제품 row에 여유 */
.product-row{
    scroll-margin-top: 80px;
}

@media (max-width: 720px){
    .hero-product-labels{ bottom: 18px; gap: 8px; }
    .hero-label-btn{ padding: 8px 14px; min-width: 100px; }
    .hero-label-btn .lbl{ font-size: 12px; letter-spacing: 0.4px; }
}
.product-list-page .page-hero-inner{
    max-width: var(--max-w);
    margin: 0 auto;
}
.product-list-page .page-hero .eyebrow{
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    margin-bottom: 16px;
}
.product-list-page .page-hero h1{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: 0.5px;
    color: var(--c-white);
    margin-bottom: 16px;
}
.product-list-page .page-hero .lead{
    color: var(--c-white-2);
    letter-spacing: 0.3px;
}

/* 제품 카드 그리드 — K2 / L2 PRO / PORTAL CAM 가로 3열 */
.product-row-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

/* 각 제품 카드 — 이미지 위, 텍스트 아래 */
.product-row{
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 0;
    padding: 24px;
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    transition: border-color .25s ease, transform .25s ease;
}
.product-row:hover{
    border-color: var(--c-navy-hl);
    transform: translateY(-4px);
}

/* reverse 클래스 비활성 (3열에서는 의미 없음) */
.product-row.reverse .product-row-img{ order: 0; }
.product-row.reverse .product-row-text{ order: 0; }

.product-row-img{
    width:100%;
    height: 240px;
    background: var(--c-black-2);
    border: 1px solid var(--c-line);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow: hidden;
}
.product-row-img img{
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: transform .5s ease;
}
.product-row:hover .product-row-img img{ transform: scale(1.05); }

.product-row-text .ord{
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--c-navy-hl);
    margin-bottom: 14px;
}
.product-row-text h2{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 44px;
    letter-spacing: 0.5px;
    color: var(--c-white);
    margin-bottom: 6px;
}
.product-row-text .sub{
    font-size: 13px;
    color: var(--c-navy-hl);
    letter-spacing: 0.3px;
    margin-bottom: 14px;
    font-weight: 700;
}
.product-row-text .desc{
    font-size: 14px;
    color: var(--c-white-2);
    line-height: 1.7;
    margin-bottom: 16px;
}
.product-row-text .features{
    margin-bottom: 22px;
}
.product-row-text .features li{
    font-size: 13px;
    color: var(--c-white);
    padding: 4px 0 4px 22px;
    position: relative;
}
.product-row-text .features li::before{
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 14px; height: 1px;
    background: var(--c-navy-hl);
}

/* ---------- 32"+ 대형 ---------- */
@media (min-width: 1600px){
    .product-list-page .product-category{ padding: 90px 40px; }
    .product-row-list{ gap: 40px; }
    .product-row-img{ height: 300px; }
    .product-row-text h2{ font-size: 44px; }
    .product-row-text .desc{ font-size: 15px; }
    .product-row-text .features li{ font-size: 13px; }
}

/* ---------- 태블릿/모바일 (≤960px) — 1열 스택 + 카드 내부 이미지|텍스트 가로 ---------- */
@media (max-width: 960px){
    .product-row-list{
        grid-template-columns: 1fr;       /* 한 줄에 한 제품 */
        gap: 18px;
    }
    .product-row{
        flex-direction: row;              /* 이미지|텍스트 가로 배치 */
        align-items: center;
        gap: 18px;
        padding: 16px;
    }
    .product-row-img{
        flex: 0 0 38%;                    /* 좌측 이미지 영역 비율 */
        height: clamp(140px, 28vw, 220px);
    }
    .product-row-text{ flex: 1 1 auto; min-width: 0; }
    .product-row-text h2{ font-size: clamp(22px, 4.5vw, 32px); letter-spacing: 0.4px; }
    .product-row-text .sub{ font-size: 12.5px; }
    .product-row-text .desc{ font-size: 13px; line-height: 1.6; }
    .product-row-text .features li{ font-size: 12px; padding: 3px 0 3px 18px; }
    .product-row-text .features li::before{ top: 12px; width: 10px; }
}

/* ---------- 작은 모바일 (≤520px) — 가로 비율 살짝 조정 ---------- */
@media (max-width: 520px){
    .product-list-page .product-category{ padding: 48px 14px; }
    .product-row{ gap: 12px; padding: 12px; }
    .product-row-img{ flex: 0 0 36%; height: clamp(120px, 32vw, 170px); }
    .product-row-text .ord{ font-size: 14px; font-weight: 800; letter-spacing: 0.4px; margin-bottom: 6px; }
    .product-row-text h2{ font-size: clamp(18px, 5.5vw, 26px); letter-spacing: 0.3px; margin-bottom: 4px; }
    .product-row-text .sub{ font-size: 11px; margin-bottom: 8px; }
    .product-row-text .desc{ font-size: 11.5px; line-height: 1.55; margin-bottom: 8px; }
    .product-row-text .features{ margin-bottom: 12px; }
    .product-row-text .features li{ font-size: 11px; padding: 2px 0 2px 14px; }
    .product-row-text .features li::before{ top: 10px; width: 8px; }
    .product-row-text .btn{ font-size: 11px; padding: 7px 14px; }
}

/* ============================================================
   제품 비교 접이식 섹션 (하드웨어 ↓ 소프트웨어 ↑)
   ============================================================ */
.product-compare-fold-section{
    background: var(--c-black);
    padding: 8px 32px 24px;
    margin-top: -32px;
}
.product-compare-fold-section .section-inner{
    max-width: var(--max-w);
    margin: 0 auto;
}
.compare-fold{
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.compare-fold[open]{
    border-color: var(--c-navy-hl);
    box-shadow: 0 0 0 1px rgba(90,161,255,0.18);
}
.compare-fold-summary{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px 60px;
    cursor: pointer;
    list-style: none;             /* 기본 ▶ 마커 제거 (Chrome) */
    user-select: none;
    text-align: center;
}
.compare-fold-summary::-webkit-details-marker{ display: none; }   /* Safari */
.compare-fold-summary:hover{ background: rgba(90,161,255,0.06); }
.compare-fold .cf-text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: center; }
.compare-fold .cf-title{
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--c-white);
}
.compare-fold .cf-sub{
    font-size: 13px;
    color: var(--c-navy-hl) !important;
    letter-spacing: 0.3px;
    font-weight: 700 !important;
}
.compare-fold .cf-arrow{
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-navy-hl);
    flex-shrink: 0;
    transition: transform .3s ease;
}
.compare-fold[open] .cf-arrow{ transform: translateY(-50%) rotate(180deg); }

.compare-fold-body{
    padding: 0 28px 28px;
    border-top: 1px solid var(--c-line);
    animation: cf-slide .25s ease-out;
}
@keyframes cf-slide{
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cf-table-wrap{ overflow-x: auto; margin-top: 18px; }
.cf-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cf-table thead th{
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #5AA1FF;
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--c-line);
}
.cf-table thead th:first-child{ background: transparent; }
.cf-table tbody th{
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #5AA1FF;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-line);
    white-space: nowrap;
}
.cf-table tbody td{
    color: var(--c-white);
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--c-line);
    line-height: 1.5;
}
.cf-table tbody tr:last-child th,
.cf-table tbody tr:last-child td{ border-bottom: none; }
.cf-cta{ text-align: center; margin-top: 22px; }

@media (max-width: 720px){
    .product-compare-fold-section{ padding: 28px 16px; }
    .compare-fold-summary{ padding: 18px 16px; }
    .compare-fold .cf-title{ font-size: 16px; letter-spacing: 0.3px; }
    .compare-fold .cf-sub{ font-size: 12px; }
    .compare-fold-body{ padding: 0 12px 20px; }
    .cf-table{ font-size: 12px; }
    .cf-table thead th{ padding: 10px 8px; font-size: 12px; }
    .cf-table tbody th{ padding: 10px 8px; font-size: 11.5px; white-space: normal; word-break: keep-all; }
    .cf-table tbody td{ padding: 10px 8px; font-size: 11.5px; word-break: keep-all; }
}

/* ============================================================
   카테고리 (장비 / 소프트웨어) 공통 헤더
   ============================================================ */
.product-category .cat-heading{
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-line);
}
.product-list-page .product-category{ padding: 64px 32px; }
.product-category .cat-eyebrow{
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    margin-bottom: 14px;
}
.product-category .cat-title{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: 0.5px;
    color: var(--c-white);
    margin-bottom: 14px;
}
.product-category .cat-sub{
    font-size: 15px;
    color: var(--c-white-2);
    letter-spacing: 0.5px;
}

/* sw-* 스타일은 common.css로 이동 (메인 페이지와 공유) */
.sw-category{
    background: transparent;
}