/* ────────────── Reset ────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;width:100%;overflow-x:hidden;}

/* ────────────── Hero Section ────────────── */
.hero{position:relative;height:100vh;overflow:hidden;}
.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:none;z-index:2;}
.hero-content{position:absolute;z-index:3;top:62%;right:8%;transform:translateY(-50%);text-align:right;max-width:650px;color:#fff;}
.hero-content h1{font-size:3rem;font-weight:800;line-height:1.4;margin-bottom:1.2rem;letter-spacing:-0.03em;}
.hero-content p{font-size:1.1rem;color:#ddd;margin-bottom:2rem;line-height:1.6;}
.btn-hero{display:inline-block;padding:0.75rem 1.8rem;border:1px solid #fff;border-radius:30px;background:transparent;color:#fff;text-decoration:none;font-size:0.9rem;transition:all .3s ease;}
.btn-hero:hover{background:#fff;color:#000;}

/* ────────────── 벨트 솔루션 섹션 ────────────── */
.belt-solution{background:linear-gradient(to bottom,#000 0%,#1a1a1a 100%);padding:12rem 1rem 6rem;color:#fff;}
.belt-container{display:flex;align-items:center;justify-content:center;gap:5rem;max-width:1200px;margin:0 auto;flex-wrap:wrap;}
.belt-video{flex:1 1 600px;max-width:600px;border-radius:8px;overflow:hidden;}
.belt-video video{width:100%;height:auto;display:block;object-fit:cover;border-radius:8px;}
.belt-text{flex:1 1 500px;max-width:600px;}
.belt-text h2{font-size:2.4rem;font-weight:800;margin-bottom:1.8rem;}
.belt-text p{font-size:1.15rem;line-height:1.8;color:#ccc;margin-bottom:2rem;}
.btn-line{display:inline-block;padding:0.6rem 1.4rem;border:1px solid #666;border-radius:20px;font-size:0.9rem;color:#ccc;text-decoration:none;transition:.3s;}
.btn-line:hover{color:#fff;border-color:#fff;}

/* ───────────── 반도테크가 선택 받는 이유 ───────────── */
.why-bando{background:linear-gradient(to bottom,#1a1a1a 0%,#0a0f2c 100%);color:#fff;padding:6rem 1rem;}
.why-container{display:flex;align-items:center;justify-content:center;gap:5rem;max-width:1200px;margin:0 auto;flex-wrap:wrap;}
.why-text{flex:1 1 500px;max-width:600px;}
.why-text h2{font-size:2rem;font-weight:700;margin-bottom:1.8rem;}
.why-text ul{list-style:none;padding:0;}
.why-text li{position:relative;padding-left:26px;margin-bottom:1rem;font-size:1rem;line-height:1.6;}
.why-text li::before{content:"✔";position:absolute;left:0;top:0;color:#50d166;font-size:1rem;}
.why-video{flex:1 1 400px;max-width:500px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,.4);}
.why-video video{width:100%;height:100%;object-fit:cover;display:block;}

/* ───────────── PRODUCT ───────────── */
.product{padding:6rem 1rem;background:linear-gradient(to bottom,#0a0f2c 0%,#1d56ff 100%);color:#fff;text-align:center;}
.product h2{font-size:2.4rem;font-weight:800;margin-bottom:.5rem;}
.product .subtitle{font-size:.95rem;color:#bbb;margin-bottom:2.4rem;}

/* 탭 */
.tabs{display:inline-flex;border:1px solid #444;border-radius:30px;overflow:hidden;margin-bottom:3rem;}
.tab-btn{padding:0.6rem 1.6rem;font-size:.9rem;background:none;border:none;color:#ccc;cursor:pointer;transition:.3s;}
.tab-btn.active{background:#fff;color:#000;font-weight:bold;}

/* ▼ 카드 그리드 – 데스크톱 4열 고정 */
.card-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);   /* 가로 4개 고정 */
    gap:1.5rem;
    padding:1rem;
    max-width:1400px;
    margin:0 auto;
}

.card{
    background:#fff;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    overflow:hidden;
    padding:10px;
    transition:transform .2s ease;
}
.card:hover{transform:translateY(-4px);}

.card img{
    width:100%;
    height:auto;               /* ✅ 원본 비율 유지 */
    object-fit:contain;
    display:block;
}


/* 비활성 탭 숨김 */
.tab-content{display:none;}
.tab-content.active{display:block;}

/* 준비 중 */
.coming{color:#888;margin-top:2rem;font-size:.95rem;}

/* ───────────── MLG GALLERY ───────────── */
.mlg-gallery{padding:6rem 1rem;background:linear-gradient(180deg,#1d56ff 0%,#6f78ff 50%,#877cff 100%);color:#fff;text-align:center;position:relative;}
.mlg-title{display:inline-flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem;}
.mlg-title img{height:50px;object-fit:contain;}
.mlg-gallery .subtitle{font-size:.95rem;color:#eee;margin-bottom:2rem;line-height:1.6;}
.mlg-swiper{max-width:1300px;margin:0 auto 3rem;padding:0 1rem;overflow:visible;position:relative;}
.swiper-slide{width:600px;height:auto;transition:transform .3s ease;}
.swiper-slide img{width:100%;height:360px;object-fit:cover;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,.2);display:block;}
.swiper-button-prev,
.swiper-button-next{color:#fff;top:50%;width:48px;height:48px;transform:translateY(-50%);background:rgba(0,0,0,.25);border-radius:50%;transition:.3s;}
.swiper-button-prev:hover,
.swiper-button-next:hover{background:rgba(255,255,255,.8);color:#000;}
.swiper-button-prev{left:0;}
.swiper-button-next{right:0;}
.swiper-button-prev::after,
.swiper-button-next::after{font-size:18px;}
.btn-mlg{display:inline-block;padding:.75rem 2rem;border:1px solid #fff;border-radius:30px;color:#fff;text-decoration:none;font-size:.95rem;transition:all .3s ease;}
.btn-mlg:hover{background:#fff;color:#000;}

/* ───────────── BRANDS ───────────── */
.brands{background:linear-gradient(to bottom,#877cff 0%,#b3aaff 50%,#d7e4ff 100%);text-align:center;padding:6rem 1rem;overflow:hidden;color:#000;}
.brands h2{font-size:2.4rem;font-weight:700;margin-bottom:.5rem;}
.brands .subtitle{font-size:1rem;margin-bottom:2rem;}
.brand-marquee{overflow:hidden;position:relative;width:100%;margin:2rem 0;}
.marquee-track{display:flex;width:max-content;animation:scroll-left 20s linear infinite;}
.marquee-track img{height:80px;margin:0 1.5rem;object-fit:contain;transition:transform .3s ease;}
.marquee-track img:hover{transform:scale(1.1);}
.marquee-left .marquee-track{animation-name:scroll-left;}
.marquee-right .marquee-track{animation-name:scroll-right;}
.brand-marquee.small .marquee-track img{height:60px;margin:0 1rem;}
@keyframes scroll-left{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes scroll-right{0%{transform:translateX(-50%);}100%{transform:translateX(0);}}

/* ───────────── FOOTER ───────────── */
.site-footer{background:#000;color:#aaa;font-size:.85rem;padding:2.5rem 1rem;border-top:1px solid #222;}
.footer-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.5rem;max-width:1100px;margin:0 auto;}
.footer-logo img{height:60px;object-fit:contain;display:block;}
.footer-text{text-align:left;max-width:800px;line-height:1.6;}
.footer-text p{margin-bottom:.6rem;}
.footer-text p:last-child{margin-bottom:0;font-size:.8rem;color:#666;}