/* ============================================================
   MAIN.CSS — index.html (메인 페이지) 전용
   ============================================================ */

/* ---------- HERO ---------- */
.hero{
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-h));
    min-height: 560px;
    overflow: hidden;
    background: var(--c-black);
}
.hero-slides{
    position:absolute; inset:0;
}
.hero-slide{
    position:absolute; inset:0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.0s ease, transform 6s ease;
    background-color: var(--c-darkgray);
}
.hero-slide.active{
    opacity: 1;
    transform: scale(1.0);
}
/* 슬라이드 위 오버레이 — 영상이 잘 보이도록 상단·하단만 옅게 (가운데는 영상 그대로) */
.hero > .hero-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(15,17,21,0.55) 0%,
        rgba(15,17,21,0.20) 22%,
        transparent 40%,
        transparent 75%,
        rgba(15,17,21,0.45) 100%);
    pointer-events: none;
}
/* 텍스트 layer — 상단으로 이동 (영상 가운데 안 가림) */
.hero > .hero-content{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 110px 32px 0;
    z-index: 3;
}
.hero-eyebrow{
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--c-white-2);
    margin-bottom: 18px;
    text-transform: uppercase;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.85),
      0 0 10px rgba(0,0,0,0.55);
}
.hero-title{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(40px, 7vw, 92px);
    line-height: 1.05;
    letter-spacing: 0.5px;
    color: var(--c-white);
    text-shadow:
      0 1px 2px rgba(0,0,0,0.45),
      0 2px 8px rgba(0,0,0,0.30);
    margin-bottom: 22px;
}
.hero-title span{
    color: var(--c-navy-hl);
    text-shadow:
      0 1px 2px rgba(0,0,0,0.45),
      0 2px 8px rgba(0,0,0,0.30);
}
.hero-desc{
    font-size: 16px;
    color: var(--c-white-2);
    letter-spacing: 0.4px;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.85),
      0 0 12px rgba(0,0,0,0.5);
}

/* 마우스 따라 별가루 캔버스 (A안) */
.hero-stardust{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

/* 화살표 */
.hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px;
    background: rgba(15,17,21,0.5);
    color: var(--c-white);
    font-size: 28px;
    line-height: 44px;
    border: 1px solid var(--c-line);
    z-index: 3;
    transition: all .25s ease;
}
.hero-arrow:hover{ background: var(--c-navy); border-color: var(--c-navy); }
.hero-arrow.prev{ left: 24px; }
.hero-arrow.next{ right: 24px; }

/* 도트 */
.hero-dots{
    position:absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    display:flex; gap: 10px; z-index: 3;
}
.hero-dots .dot{
    width: 36px; height: 3px;
    background: rgba(242,242,238,0.3);
    border:none;
    transition: background .25s ease;
}
.hero-dots .dot.active{ background: var(--c-white); }

/* ---------- HERO 영상 슬라이드 ---------- */
.hero-slide{ overflow: hidden; }
.hero-slide video.hero-video-el{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--c-black);
    /* 영상 하단의 영어 자막 구간(약 12%)을 가리기 위해
       상단 기준으로 1.14배 확대 → 아래쪽으로만 잘려나감 */
    transform: scale(1.14);
    transform-origin: center top;
}

/* ---------- HERO 하단 제품 탭 (01 K2 / 02 L2 PRO / 03 PORTAL CAM) ---------- */
.hero-tabs{
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 4;
    padding: 0 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-tab{
    background: rgba(15,17,21,0.55);
    border: 1px solid var(--c-line);
    color: var(--c-white-2);
    padding: 14px 26px;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-display);
    letter-spacing: 0.3px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .22s ease, background .22s ease, color .22s ease, transform .22s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero-tab .ht-num{
    color: var(--c-navy-hl);
    font-size: 11px;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.hero-tab:hover{
    color: var(--c-white);
    border-color: rgba(46,98,179,0.5);
    transform: translateY(-1px);
}
.hero-tab.active{
    color: var(--c-white);
    border-color: var(--c-navy-hl);
    background: rgba(27,58,107,0.55);
    box-shadow: 0 0 0 1px var(--c-navy-hl) inset, 0 6px 16px rgba(0,0,0,0.35);
}
.hero-tab.active .ht-num{
    color: #4A82D9;
}

@media (max-width: 768px){
    .hero-tabs{
        bottom: 18px;
        gap: 8px;
        flex-direction: column;       /* 세로 정렬 */
        align-items: stretch;
        width: min(40%, 180px);       /* 모바일 (화면 40% 또는 180px) */
    }
    .hero-tab{ min-width: 0; padding: 12px 14px; font-size: 13px; letter-spacing: 0.4px; gap: 10px; justify-content: center; }
    .hero-tab .ht-num{ font-size: 10px; letter-spacing: 0.3px; }
}

/* ---------- PRODUCT LINEUP ---------- */
.product-lineup{
    background: var(--c-black);
    padding-top: 100px;
}
.product-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.product-card{
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    padding: 32px 24px 28px;
    text-align: center;
    transition: transform .35s ease, border-color .25s ease, background .25s ease;
    position:relative;
    overflow: hidden;
    color: var(--c-white);
}
.product-card::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height: 3px;
    background: var(--c-navy-hl);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.product-card:hover{
    transform: translateY(-8px);
    border-color: var(--c-navy-hl);
    background: var(--c-darkgray-2);
}
.product-card:hover::before{ transform: scaleX(1); }
.product-img{
    width: 100%;
    height: 280px;
    background: var(--c-black-2);
    margin-bottom: 24px;
    display:flex; align-items:center; justify-content:center;
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.product-img img{
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: transform .4s ease;
}
.product-card:hover .product-img img{ transform: scale(1.06); }
.product-name{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.product-tag{
    font-size: 13px;
    color: var(--c-navy-hl);
    letter-spacing: 0.3px;
    margin-bottom: 14px;
    font-weight: 500;
}
.product-desc{
    font-size: 14px;
    color: var(--c-white-2);
    line-height: 1.7;
    margin-bottom: 22px;
    min-height: 72px;
}
.product-more{
    display:inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--c-white-2);
    border-bottom: 1px solid var(--c-white-2);
    padding-bottom: 4px;
    transition: color .25s ease, border-color .25s ease;
}
.product-card:hover .product-more{
    color: var(--c-white);
    border-color: var(--c-navy-hl);
}

/* ---------- MAIN SOFTWARE SECTION ---------- */
.main-software{
    position: relative;
    background:
      radial-gradient(ellipse at 25% 0%, rgba(46,98,179,0.16), transparent 55%),
      radial-gradient(ellipse at 75% 100%, rgba(30,58,95,0.20), transparent 60%),
      var(--c-darkgray);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding-top: 90px;
    padding-bottom: 90px;
}
.main-software .section-title{
    color: var(--c-white);
}
.main-software-cta{
    text-align: center;
    margin-top: 40px;
}
/* SOFTWARE / INDUSTRY 사이 청남 띠 — 명확한 단락 분리 */
.main-software::after{
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-navy-hl), transparent);
    opacity: 0.55;
}

/* ---------- INDUSTRY SECTION ---------- */
.industry-section{
    background: var(--c-black);
    padding-top: 100px;
    padding-bottom: 60px;
}
.industry-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}
.industry-row.reverse .industry-img{ order: 2; }
.industry-row.reverse .industry-text{ order: 1; }

.industry-img{
    width: 100%;
    height: 360px;
    background: var(--c-darkgray);
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.industry-img img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.industry-row:hover .industry-img img{ transform: scale(1.04); }

.industry-text .industry-eyebrow{
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    margin-bottom: 14px;
}
.industry-text h3{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.3px;
    color: var(--c-white);
    margin-bottom: 18px;
}
.industry-text p{
    font-size: 15px;
    color: var(--c-white-2);
    line-height: 1.85;
}

.industry-cta{ text-align: center; margin-top: 40px; }

/* ---------- USE CASES 카드 그리드 (industry.html 과 동일 스타일) ---------- */
.industry-section .industry-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.industry-section .ind-card{
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    overflow: hidden;
    transition: transform .35s ease, border-color .25s ease;
}
.industry-section .ind-card:hover{
    transform: translateY(-6px);
    border-color: var(--c-navy-hl);
}
.industry-section .ind-img{
    width: 100%;
    aspect-ratio: 4 / 3.4;
    background: var(--c-black-2);
    overflow: hidden;
}
.industry-section .ind-img img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.industry-section .ind-card:hover .ind-img img{ transform: scale(1.06); }
.industry-section .ind-body{ padding: 24px; }
.industry-section .ind-body .num{
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    margin-bottom: 8px;
}
.industry-section .ind-body h3{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.3px;
    color: var(--c-white);
    margin-bottom: 12px;
}
.industry-section .ind-body p{
    font-size: 14px;
    color: var(--c-white-2);
    line-height: 1.7;
}

/* ---------- RESPONSIVE ---------- */
/* ---------- 32"+ 대형 ---------- */
@media (min-width: 1600px){
    .hero{ min-height: 720px; }
    .product-grid{ gap: 40px; }
    .product-img{ height: 360px; }
    .product-name{ font-size: 36px; }
    .product-desc{ font-size: 15px; min-height: 84px; }
    .product-lineup{ padding-top: 130px; }
    .main-software{ padding-top: 120px; padding-bottom: 120px; }
    .industry-section{ padding-top: 130px; padding-bottom: 80px; }
    .industry-img{ height: 460px; }
    .industry-text h3{ font-size: 34px; }
    .industry-text p{ font-size: 16px; }
}

/* ---------- 태블릿 (≤1100px) — 제품 2열 ---------- */
@media (max-width: 1100px){
    .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .product-img{ height: 240px; }
    .product-card:last-child{ grid-column: 1 / -1; max-width: 540px; justify-self: center; }
    .industry-section .industry-cards{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ---------- 모바일 (≤860px) ---------- */
@media (max-width: 860px){
    .hero{ min-height: 480px; }
    /* 제품 카드 — 모바일에서도 가로 3열 유지 (스케일만 축소) */
    .product-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .product-card:last-child{ grid-column: auto; max-width: none; }
    .product-card{ padding: 14px 10px 12px; }
    .product-img{ height: clamp(80px, 22vw, 140px); }
    .product-name{ font-size: clamp(15px, 3.5vw, 20px); letter-spacing: 0.3px; }
    .product-tag{ font-size: 10px; letter-spacing: 0.5px; }
    .product-desc{ font-size: 11px; line-height: 1.5; min-height: auto; margin-bottom: 12px; }
    .product-more{ font-size: 10px; letter-spacing: 0.3px; padding: 6px 0; }
    .industry-row{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
    .industry-row.reverse .industry-img{ order: 0; }
    .industry-row.reverse .industry-text{ order: 0; }
    .industry-img{ height: clamp(200px, 50vw, 280px); }
    .industry-section .industry-cards{ grid-template-columns: 1fr; gap: 18px; }
    .industry-section .ind-body{ padding: 20px; }
    .hero-title{ letter-spacing: 0.3px; }
    .hero-arrow{ width: 40px; height: 40px; font-size: 22px; line-height: 36px; }
    .product-lineup{ padding-top: 60px; }
    .main-software{ padding-top: 60px; padding-bottom: 60px; }
    .industry-section{ padding-top: 60px; padding-bottom: 40px; }
}

/* ---------- 작은 모바일 (≤480px) ---------- */
@media (max-width: 480px){
    .hero{ min-height: 420px; }
    .hero-eyebrow{ font-size: 11px; letter-spacing: 0.5px; margin-bottom: 12px; }
    .hero-desc{ font-size: 13px; letter-spacing: 0.5px; padding: 0 12px; }
    .hero-arrow{ width: 36px; height: 36px; font-size: 20px; line-height: 32px; }
    .hero-arrow.prev{ left: 10px; }
    .hero-arrow.next{ right: 10px; }
    .hero-dots{ bottom: 18px; gap: 6px; }
    .hero-dots .dot{ width: 24px; }
    /* 더 좁은 폰 — 가로 3열 그대로, 패딩/폰트만 더 축소 */
    .product-grid{ gap: 8px; }
    .product-card{ padding: 12px 8px 10px; }
    .product-img{ height: clamp(70px, 24vw, 110px); }
    .product-name{ font-size: clamp(13px, 4vw, 18px); letter-spacing: 0.3px; }
    .product-tag{ font-size: 9px; }
    .product-desc{ font-size: 10px; line-height: 1.45; }
    .product-more{ font-size: 9px; }
    .industry-text h3{ font-size: 24px; }
    .industry-text p{ font-size: 14px; line-height: 1.75; }
}