기존에 위쪽과 아래쪽 미디어 쿼리 구간으로 분리되어 있던 모든 스타일 코드를 단 한 번에 복사해서 바로 적용할 수 있도록 완벽하게 하나로 결합한 최종 마스터 통합 CSS 전체 소스 코드입니다.
기존 CSS 파일(style.css 또는 products.css)의 내용 전체를 깨끗하게 지우시고, 아래 코드를 통째로 복사(Ctrl+A 후 Ctrl+C)하여 그대로 덮어쓰기(교체) 하시면 모든 페이지의 레이아웃이 완벽하게 정돈됩니다.
------------------------------
## 🏆 완벽히 결합된 최종 마스터 통합 CSS 전체 소스 코드

/* ==========================================================================
   LAIFUDE VINA - OFFICIAL INTEGRATED MASTER STYLE SHEET
   VERSION 5.0 (ALL-IN-ONE COMBINED COMPLETE EDITION)
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. GLOBAL & RESET STYLES (전역 및 기본 레이아웃 설정)
   -------------------------------------------------------------------------- */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    max-width: 100%; /* 모든 요소가 화면 밖으로 나가지 않도록*/
}

/* 전체 적용 — 데스크톱 + 모바일 모두 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* body만으론 부족 — html에도 막아야 가로 스크롤 완전 차단 */
    max-width: 100%;
}

body{
    width:100%;
    height:100%;
    font-family:'Inter',sans-serif;
    background:#f8f8f8;
    color:#111;
    overflow-y:auto;
    overflow-x:hidden;
    max-width: 100%;
}
/* 이미지 섹션 공통 속성 */
.brand-story img,
.collections img,
.contact-banner img {
    width: 100%;
    display: block;
    height: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* --------------------------------------------------------------------------
   2. HEADER & NAVIGATION STYLES (상단 네비게이션)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Header & NAVIGATION (🚨 최상단 메뉴 밀림 및 언어 버튼 가림 현상 완벽 해결)
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 40px;
    display: flex;
    justify-content: space-between; /* 로고 왼쪽, 메뉴 오른쪽 */
    align-items: center;
    z-index: 9999;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 데스크톱에서 로고/nav 너비 자동 — 모바일에서 width:100%가 ☰ 버튼을 밀어내는 원인이었음 */
.header .logo {
    flex-shrink: 0; /* 로고가 줄어들지 않도록 */
}


.logo {
    display: flex !important;
    align-items: center !important;
}

.logo img {
    height: 45px !important; /* 상단 바 디자인을 위해 로고 높이 안정적으로 미세 조정 */
    width: auto !important;
    display: block !important;
}

.menu-toggle {
    display: none; 
    font-size: 32px;
    cursor: pointer;
    background: none;
    border: none;
    color: #111;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    padding-right: 0;
}

.main-nav a {
    color: #111111;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.main-nav a:hover {
    color: #0F9D58;
}

/* 💡 [최종 보정] 가려져 있던 우측 상단 다국어 선택 지구본 버튼 컴포넌트 디자인 수복 */
.main-nav .language {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.main-nav .language:hover {
    border-color: #0F9D58 !important;
    color: #0F9D58 !important;
    background: rgba(15, 157, 88, 0.02) !important;
}

.main-nav .language i {
    font-size: 11px !important;
    color: #6b7280 !important;
}
/* --------------------------------------------------------------------------
   3. INDEX MAIN HERO STYLES (첫 화면 메인 비주얼)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   3. INDEX MAIN HERO STYLES (첫 화면 메인 비주얼 - 가로 폭 1400px 제한)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   3. INDEX MAIN HERO STYLES (첫 화면 메인 비주얼 - 인물 잘림 방지 최종 보정)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    max-width: 1400px;
    min-height: calc(100vh - 110px);
    margin: 110px auto 40px;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background-image: url("image/hero3.png");
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,.03); 
}

.hero-overlay {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.96) 0%,
        rgba(255,255,255,0.85) 45%,
        rgba(255,255,255,0.30) 60%,
        rgba(255,255,255,0) 75%
    );
}

/* [추가 팁] 화면 너비가 애매한 노트북(1200px~1399px) 구간에서 글씨와 인물이 겹치지 않도록 글씨 영역 너비 최적화 */
.hero-content {
    position: relative;
    z-index: 10;
    width: 50%;
    min-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 20px 60px 80px; /* !important 제거 → 모바일 미디어쿼리가 정상 override 가능 */
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:60px;
    line-height:1.05;
    font-weight:600;
    margin-bottom:35px;
    color:#111;
}

.hero h1 span{
    color:#0F9D58;
}

.hero p{
    font-size:22px;
    line-height:1.8;
    color:#444;
    max-width:650px;
}

.hero-features{
    margin-top:50px;
    max-width:1000px;
}
.hero-title-zone h1 {
    word-break: keep-all;     /* 단어 단위로 깔끔하게 끊어지게 처리 */
    white-space: normal;      /* 반응형 크기에 맞춰 자연스러운 행간 보장 */
    max-width: 800px;         /* 글자 박스의 최대 너비를 주어 자연스러운 2줄 유도 */
    margin: 0 auto;           /* 중앙 정렬 */
}


.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:45px;
}

.feature-item{
    text-align:left;
    transition:.4s;
}

.feature-item img{
    width:56px;
    height:56px;
    margin-bottom:18px;
    transition:.4s;
}

.feature-item h3{
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:10px;
    color:#111;
}

.feature-item p{
    font-size:14px;
    line-height:1.7;
    color:#555;
}

.feature-item:hover{
    transform:translateY(-5px);
}

.feature-item:hover img{
    transform:scale(1.08);
    filter: drop-shadow(0 0 6px rgba(15,157,88,.25)) drop-shadow(0 0 14px rgba(15,157,88,.15));
}

.feature-item:hover h3{
    color:#0F9D58;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
}

.btn-primary{
    background:#0F9D58;
    color:#fff;
    padding:18px 34px;
    border-radius:6px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    border:2px solid #0F9D58;
    color:#0F9D58;
    padding:18px 34px;
    border-radius:6px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.btn-secondary:hover{
    background:#0F9D58;
    color:#fff;
}
/* --------------------------------------------------------------------------
   🖤 [첫 페이지 전용] 가로형 프리미엄 배너 및 버튼 컴포넌트 스타일
   -------------------------------------------------------------------------- */
.laifude-premium-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #0f172a;
    max-width: 1400px;
    margin: 60px auto;
    padding: 50px 60px;
    border-radius: 20px;
    gap: 40px;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

.laifude-premium-banner .banner-title-zone {
    flex: 1.2 !important;
    min-width: 0 !important;
}

.laifude-premium-banner .banner-desc-zone {
    flex: 1.5 !important;
    min-width: 0 !important;
}

.laifude-premium-banner .banner-btn-zone {
    display: flex !important;
    flex-direction: column !important; /* 버튼 2개 우측 위아래 배치 */
    gap: 12px !important;
    flex: 1 !important;
    min-width: 240px !important;
}

.laifude-premium-banner .banner-title-zone h2 {
    color: #ffffff !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
}

.laifude-premium-banner .banner-desc-zone p {
    color: #94a3b8 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}
/* 프리미엄 배너 내부 버튼 링크 스타일 독립 설정 */
.laifude-premium-banner .banner-btn-green,
.laifude-premium-banner .banner-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: all 0.25s ease-in-out !important;
    cursor: pointer !important;
}

.laifude-premium-banner .banner-btn-green {
    background: #0F9D58 !important;
    color: #ffffff !important;
    border: 2px solid #0F9D58 !important;
}

.laifude-premium-banner .banner-btn-green:hover {
    background: #0d8a4c !important;
    border-color: #0d8a4c !important;
    transform: translateY(-2px) !important;
}

.laifude-premium-banner .banner-btn-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.laifude-premium-banner .banner-btn-outline:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
}
/* --------------------------------------------------------------------------
   🛍️ 상품 컬렉션 그리드 영역 (5개 제품 가로 1열 수평 정렬)
   -------------------------------------------------------------------------- */
.collection-grid {
    display: flex !important;
    flex-direction: row !important;  
    justify-content: space-between !important;
    align-items: stretch !important;  
    gap: 20px !important;            
    max-width: 1400px !important;    
    margin: 60px auto !important;    
    padding: 0 20px !important;
}

.collection-grid .product-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;              
    min-width: 0 !important;         
    background: #fff !important;
    border-radius: 15px !important;  
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.08) !important;
    transition: .3s ease !important;
}

.collection-grid .product-card:hover {
    transform: translateY(-8px) !important;
}

.collection-grid .product-card img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;  
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

.card-content {
    padding: 20px 15px !important; 
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important;         
}

.card-content h3 {
    font-size: 18px !important;      
    color: #111;
    line-height: 1.3;
}
/* --------------------------------------------------------------------------
   🎯 [모든 페이지 적용] 배너 이미지 가로 폭 제한 및 정중앙 배정 컴포넌트
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   🎯 [모든 페이지 적용] 배너 이미지 가로 폭 제한 및 정중앙 배정 컴포넌트
   -------------------------------------------------------------------------- */
/* 테크놀로지, 프로덕트, 컬렉션, 소개, 컨택트 등 모든 서브페이지의 레이아웃 상한선 통제 */
.technology-page,
.products-page,
.collections-page,
.about-page,
.sustainability-page,
.contact-page { /* 💡 컨택트 페이지 배너 구역 추가 */
    width: 100% !important;
    max-width: 1400px !important;    /* 💡 모든 서브 배너 이미지 가로 폭 1400px 고정 */
    margin: 40px auto !important;     /* 💡 좌우 마진 auto 효과로 화면 한가운데 정중앙 배치 */
    padding: 0 20px !important;       
    overflow: hidden !important;
}

/* 상단 고정형 메뉴바(Header)와 첫 번째 이미지가 겹쳐서 잘리는 현상 방어 */
.technology-page,
.products-page,
.about-page,
.contact-page { /* 💡 컨택트 페이지 상단 여백 확보 */
    padding-top: 90px !important; 
}

/* 모든 페이지 내부의 첫 번째, 두 번째 통배너 대형 이미지 최적화 규격 선언 */
.technology-page img,
.products-page img,
.collections-page img,
.about-page img,
.sustainability-page img,
.contact-page img { /* 💡 컨택트 페이지 이미지 라운딩 및 비율 최적화 */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;   /* 라인프드 특유의 모던한 둥근 사각형 아이덴티티 통일 */
    object-fit: cover !important;
}

/* --------------------------------------------------------------------------
📝 CONTACT PAGE & B2B QUOTATION FORM STYLES (견적 요청 폼 서식)
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   5. CONTACT PAGE & B2B QUOTATION FORM STYLES (견적서 화면 가로 폭 1400px 제한)
   -------------------------------------------------------------------------- */
/* =====================================
   B2B QUOTATION FORM CLEAN STYLE
===================================== */
/* =====================================
   B2B QUOTATION FORM PRECISE FIX
===================================== */
#quotation-form {
    width: 100%;
    max-width: 800px; 
    margin: 60px auto !important; /* 📌 상하 여백을 주고 화면 정확히 정중앙 정렬 */
    background: #ffffff;
    padding: 40px;

    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-sizing: border-box;
}

/* 블록 레이아웃으로 감싸 타이틀이 폼 안쪽 왼쪽 라인에서 정확히 시작하게 교정 */
.form-section-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

#quotation-form h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: #111111;
    margin: 0 !important; /* 마진 초기화로 쏠림 방지 */
    text-align: left !important;
}

/* 개인정보 동의 체크 영역 커스텀 */
.privacy-agreement-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
    text-align: left;
    margin-top: 10px;
    cursor: pointer;
}

.privacy-agreement-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0F9D58; /* 체크 시 브랜드 초록색 활성화 */
    margin: 0;
}

.privacy-agreement-row span {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #666666;
    letter-spacing: 0.5px;
}

/* 📌 [강력 조치] 폼 외부 영역에 홀로 고립되어 정렬을 깨트리는 무명 유령 체크박스 레이어 전체 숨김 처리 */
body > label:not([class]), 
main > label:not([class]),
#quotation-form ~ label {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 기본 입력창 및 가로 2열 그리드 규격 유지 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 1. 모든 입력란(텍스트, 이메일, 수량) 및 텍스트창의 테두리를 진한 녹색으로 지정 */
#quotation-form input[type="text"],
#quotation-form input[type="email"],
#quotation-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
    
    /* 📌 진한 녹색 테두리 적용 (색상코드 #0D5C34) */
    border: 1px solid #0D5C34;
    border-radius: 4px; /* 테두리 모서리 부드럽게 */
    background-color: #ffffff;
    font-size: 14px;
    outline: none; /* 브라우저 기본 포커스 아웃라인 제거 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 2. 사용자가 입력란을 클릭(포커스)했을 때 효과 */
#quotation-form input[type="text"]:focus,
#quotation-form input[type="email"]:focus,
#quotation-form textarea:focus {
    border: 2px solid #084325; /* 조금 더 굵고 진한 녹색으로 강조 */
    padding: 11px 14px; /* border가 2px로 두꺼워질 때 전체 크기가 넘치지 않도록 패딩 미세 조정 */
    box-shadow: 0 0 5px rgba(13, 92, 52, 0.2); /* 은은한 녹색 그림자 효과 */
}

/* 3. 체크박스(체크 형태) 자체의 색상도 조화를 이루도록 스타일링 (선택사항) */
#quotation-form input[type="checkbox"] {
    accent-color: #0D5C34; /* 최신 브라우저에서 체크박스 내부를 진한 녹색으로 채움 */
    cursor: pointer;
}


.collection-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 10px;
    background: #fdfdfd;
    padding: 18px;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.collection-group label {
    font-size: 13px;
    font-weight: 600;
    color: #444444;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 버튼 단일 노출 보장 */
#quotation-form #submit-btn {
    width: 100% !important;
    background: #0F9D58 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(15, 157, 88, 0.2);
    transition: all 0.2s ease;
}

#quotation-form #submit-btn:hover {
    background: #11864d !important;
    transform: translateY(-2px);
}



/* 성공 메시지 레이어 */
#success-message {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #0F9D58;
    margin-top: 15px;
}



/* --------------------------------------------------------------------------
   6. PREMIUM ORIGINAL FOOTER STYLES (🚨 모든 페이지 푸터 블랙 테마 전면 개정)
   -------------------------------------------------------------------------- */
/* =====================================
   FOOTER SECTION (웹/데스크톱 기본: 가로 다단 정렬)
===================================== */
.footer {
    background: #111111; 
    color: #ffffff;
    padding: 60px 80px 40px 80px;
    font-family: 'Inter', sans-serif;
    width: 100%;
}

.footer-top {
    display: grid !important;
    /* 📌 웹 환경에서 절대 아래로 떨어지지 않도록 6개 칼럼 가로 배치 강제 정의 */
    grid-template-columns: 2fr repeat(4, 1fr) 1.5fr !important; 
    gap: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
}

/* 로고 및 카피라이트 영역 */
.footer-logo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo img {
    height: 45px; 
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-logo p {
    font-size: 14px;
    line-height: 1.6;
    color: #999999;
    max-width: 260px;
    margin: 0;
}

.footer-logo .copyright {
    font-size: 13px;
    color: #666666;
    margin-top: auto; /* 하단 밀착 */
}

/* 개별 메뉴 링크 칼럼 */
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-column h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.footer-column a {
    font-size: 14px;
    color: #bbbbbb;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #0F9D58; 
}

/* 소셜 및 언어 선택 영역 */
.footer-column.social {
    gap: 20px;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: #cccccc; 
    font-size: 16px; 
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: #0F9D58;
    color: #ffffff;
    transform: translateY(-3px);
}
a[aria-label="Facebook"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;                  /* 원의 가로 크기 */
  height: 40px;                 /* 원의 세로 크기 */
  background-color: #1877F2;    /* 페이스북 공식 브랜드 파란색 */
  color: #ffffff;               /* 아이콘 색상 (흰색) */
  border-radius: 50%;           /* 완벽한 원형 모서리 */
  text-decoration: none;        /* 링크 밑줄 제거 */
  transition: background-color 0.2s ease;
}

/* 마우스를 올렸을 때 약간 어둡게 효과 (선택 사항) */
a[aria-label="Facebook"]:hover {
  background-color: #0b63d3;
}



/* 지구본 다국어 버튼 보정 */
.language-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid #374151 !important; /* 테두리 선을 다크하게 변경 */
    border-radius: 8px;
    background: #1f2937 !important;  /* 💡 버튼 내부를 짙은 색으로 채움 */
    cursor: pointer;
    font-size: 14px;
    color: #d1d5db !important;       /* 지구본 및 English 텍스트를 화이트 톤으로 최적화 */
    transition: 0.3s;
}

.language-footer:hover {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* --------------------------------------------------------------------------
7. GOOGLE TRANSLATION UI CLOAKING STYLES (구글 번역 위젯 로고 강제 은폐)
-------------------------------------------------------------------------- */
.goog-te-banner-frame {
display: none !important;
}
body {
top: 0 !important;
}
#google_translate_element,
.goog-logo-link,
.goog-te-gadget span,
.goog-te-gadget img {
display: none !important;
}
.goog-te-gadget {
font-size: 0 !important;
color: transparent !important;
}
.goog-te-balloon-frame,
#goog-gt-tt,
.orig {
display: none !important;
visibility: hidden !important;
}
/* --------------------------------------------------------------------------
8. RESPONSIVE MEDIA QUERIES (스마트폰 모바일 브레이크 포인트 - 768px 이하)
-------------------------------------------------------------------------- */
/*=====================================
   RESPONSIVE: MOBILE (최대 768px) - 레이아웃 교정 완료
===================================== */
@media screen and (max-width: 768px) {
    /* 1. 로고와 메뉴 겹침 해결 */
    .header {
        max-width: 1200px;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70px !important;
        margin: 0 auto;
        padding: 0px 20px;
        display: flex;
        justify-content: space-between !important; /* 로고 왼쪽, ☰ 오른쪽 */
        align-items: center;
        background: #ffffff !important;
        border-bottom: 1px solid #eeeeee !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
        gap: 0 !important; /* space-between이면 gap 불필요 */
    }
    .logo {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .logo img {
        height: 32px !important; /* 모바일 전용 로고 크기 축소로 겹침 방지 */
        width: auto !important;
    }

    .menu-toggle {
        display: block !important;
        background: none !important;
        border: none !important;
        font-size: 28px !important;
        color: #111111 !important;
        cursor: pointer !important;
        padding: 8px !important;
        line-height: 1 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10000 !important;  /* 헤더보다 위 — 다른 요소가 덮지 못하도록 */
        flex-shrink: 0 !important;  /* flex 컨테이너에서 줄어들지 않도록 */
        min-width: 44px !important; /* 터치 최소 영역 확보 */
        text-align: center !important;
    }
    
    /* 모바일 펼침 메뉴 스타일 정돈 */
    .header nav,
    .main-nav {
        display: none !important; /* 📌 기본 상태: 완전히 숨김 */
        position: absolute !important;
        top: 70px !important; /* 헤더 바로 아래 닿도록 설정 */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        padding: 25px 20px 35px 20px !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 99998 !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y:auto !important;
    }
    .main-nav.open {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
        /* 모바일 가독성을 위해 메뉴 글씨들을 다시 노출시킵니다 */
    .main-nav a {
        display: block !important;
        width: 100% !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #111111 !important;
        padding: 10px 0 !important;
        text-align: left !important;
        border-bottom: 1px solid #f5f5f5 !important; /* 메뉴간 구분선 */
        margin: 0 !important;
        text-decoration: none !important;
        
    }

    .header nav a:last-of-type,
    .main-nav a:last-of-type {
        border-bottom: none !important;
    }

    /* 모바일 내 언어 버튼 너비 확장 */
    .header nav .language,
    .main-nav .language {
        display: inline-flex !important;
        visibility: visible !important;
        margin-top: 15px !important;
        width: 100% !important;
        background: #f8f9fa !important;
        padding: 12px 16px !important;
        border: 1px solid #e9ecef !important;
        border-radius: 6px !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        color: #333333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* 2. 모바일 hero - 배경이미지 제거 (타이틀 존에만 별도 적용) */
    .hero {
        position: relative;
        max-width: 100% !important;
        margin: 70px 0 0 0 !important;
        border-radius: 0 !important;
        background-image: none !important; /* 모바일에서 hero 전체 배경 제거 */
        background-color: #ffffff !important;
        min-height: unset !important;
        overflow: visible !important;
    }

    /* hero-overlay 모바일에서 숨김 (타이틀 존이 자체 배경 가짐) */
    .hero-overlay {
        display: none !important;
    }

    /* 타이틀 존 - 배경이미지를 여기에만 적용 */
    .hero-title-zone {
        position: relative;
        background-image: url("image/hero3.png");
        background-size: cover;
        background-position: 92% top;
        min-height: 60vw;
        background-repeat: no-repeat;
        padding: 90px 20px 40px 20px;
        box-sizing: border-box;
    }

    /* 타이틀 존 위에 흰색 그라데이션 오버레이 (텍스트 가독성) */
    .hero-title-zone::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(255,255,255,0.92) 0%,
            rgba(255,255,255,0.80) 50%,
            rgba(255,255,255,0.40) 100%
        );
        z-index: 0;
    }

    .hero-title-zone h1,
    .hero-title-zone p {
        position: relative;
        z-index: 1;
    }

    .hero-title-zone h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
        word-break: keep-all !important;
        max-width: 100% !important;
    }

    .hero-title-zone p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        color: #444 !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        min-height: unset !important;
        box-sizing: border-box !important;
        background: #ffffff;
    }

    /* feature 구역 - 흰 배경에 2열 그리드 */
    .hero-features {
        background: #ffffff;
        padding: 25px 16px 10px 16px !important;
        margin: 0 !important;
    }

    /* 2열 그리드 */
    .feature-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* feature 아이템 카드 */
    .feature-item {
        margin-bottom: 0 !important;
        text-align: left !important;
        background: #f8f9fa !important;
        border-radius: 10px !important;
        padding: 14px 12px !important;
        border: 1px solid #eee !important;
    }

    .feature-item img {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 8px !important;
    }

    .feature-item h3 {
        font-size: 10px !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.3px !important;
        line-height: 1.3 !important;
    }

    .feature-item p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #666666 !important;
    }

    /* 버튼 영역 */
    .hero-buttons {
        background: #ffffff;
        padding: 16px 16px 30px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .btn-primary, .btn-secondary {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 15px 20px !important; /* 터치하기 편하도록 세로 두께 확장 */
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        box-sizing: border-box !important;
    }
    /* 기타 하단 그리드 요소 세로 한 줄 정렬 안전 조치 */
    .collections-grid, .info-row-top, .info-row-bottom {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }
    /* =====================================
   PREMIUM BANNER RESPONSIVE (모바일 세로 정렬)
===================================== */
    .laifude-premium-banner {
        flex-direction: column !important;
        padding: 30px 20px !important;
        gap: 20px !important;
        width: 100% !important; /* 좌우 15px 여백 */
        margin: 20px auto !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .laifude-premium-banner .banner-title-zone h2 {
        font-size: 22px !important;
    }

    .laifude-premium-banner .banner-btn-zone {
        min-width: unset !important;
        width: 100% !important;
    }

    /* =====================================
   COLLECTION GRID RESPONSIVE (모바일 세로 정렬)
===================================== */


.collections-page,
.technology-page,
.products-page,
.about-page,
.sustainability-page,
.contact-page {
    padding: 70px !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
}
    .collection-grid {
        flex-direction: column !important;
        padding: 0 15px !important;
        gap: 15px !important;
        margin: 30px auto !important;
    }

    .technology-page {
    padding-top: 70px !important; /* 헤더 높이만큼만 */
    background: #fff;
}

.technology-page img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: auto;
    height: auto;
}

    /* =====================================
   CONTACT INFO CARDS RESPONSIVE (모바일 세로 정렬)
===================================== */
.contact-page {
    padding-top: 70px !important; /* 헤더 높이만큼만 */
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
}
    .contact-page-info-grid {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }


    /* =====================================
   FORM RESPONSIVE (모바일 레이아웃 최적화)
===================================== */
    #quotation-form {
        padding: 25px 20px;
    }
    .form-row {
        grid-template-columns: 1fr; /* 모바일에서는 무조건 1줄에 1개씩 */
        gap: 15px;
    }
    .collection-group {
        grid-template-columns: 1fr 1fr; /* 모바일 체크박스는 2열 정렬 */
    }


    .footer {
        padding: 40px 20px 30px 20px;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .footer-top {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 1열로 세로 정렬 */
        gap: 30px;
    }
    .footer-logo {
        grid-column: span 1;
        margin-bottom: 10px;
        text-align: left; /* 모바일에서는 로고와 카피라이트를 정렬 */
    }
    .footer-logo img {
        height: 35px; /* 로고 크기 축소 */
        width: auto;
    }
    .footer-logo p {
        max-width: 100%; /* 로고 밑 설명 글씨 폭 제한 */
        font-size: 13px; /* 카피라이트 글씨 크기 축소 */
    }
    .footer-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 20px; /* 구분을 위한 얇은 경계선 */
        margin: 0 !important;
    }
    .footer-column.social {
        border-bottom: none;
        padding-bottom: 0;
    }
    .social-icons {
        justify-content: flex-start !important; /* 소셜 아이콘 좌측 정렬 */
        margin-bottom: 5px !important;
    }

    .language-footer {
        align-self: flex-start !important;
        width: auto !important;
    }

}



/* =====================================
   FOOTER RESPONSIVE (화면 크기별 해제 및 변형)
===================================== */

/* ❶ 태블릿 화면 (최대 1024px) */
@media screen and (max-width: 1024px) {
    .footer {
        padding: 50px 40px 30px 40px;
    }
    .footer-top {
        grid-template-columns: repeat(3, 1fr) !important; /* 3열 배열로 압축 */
        gap: 40px 30px;
    }
    .footer-logo {
        grid-column: span 3; /* 로고 영역을 맨 위로 길게 배치 */
        margin-bottom: 10px;
    }
    .footer-logo img {
        height: 35px; /* 로고 크기 축소 */
        width: auto;
    }
    .footer-logo p {
        max-width: 100%; /* 로고 밑 설명 글씨 폭 제한 */
        font-size: 13px; /* 카피라이트 글씨 크기 축소 */
    }
}

/* ❷ 모바일 화면 (최대 768px 이하에서만 세로 정렬 적용) */

/* ==========================================
   📞 [완벽 복구] CONTACT PAGE 하단 정보 카드 가로 정렬 및 아이콘 수복
   ========================================== */
/* 개인정보 동의 라벨 하단 여백 보호 */
.privacy-agreement-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    cursor: pointer !important;
}

/* 1. 카드를 감싸는 부모 컨테이너 (가로 3열 행 정렬 강력 지시) */
.contact-page-info-grid {
    display: flex !important;
    flex-direction: row !important; /* 무조건 가로 1줄 정렬 */
    justify-content: space-between !important;
    align-items: stretch !important;  /* 3개 카드의 높이를 똑같이 일치 */
    gap: 25px !important;            /* 카드 사이의 여백 */
    width: 100% !important;
    margin-top: 60px !important;      /* 제출 버튼과의 수직 공간 확보 */
    clear: both !important;
}

/* 2. 개별 카드 컴포넌트 프리미엄 디자인 */
.contact-info-card-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;               /* 가로 폭을 정확하게 3등분 분배 */
    min-width: 0 !important;
    background: #ffffff !important;
    padding: 35px 20px !important;
    border-radius: 15px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.contact-info-card-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(15, 157, 88, 0.1) !important;
    border-color: #0F9D58 !important;
}

/* 3. 상단 둥근 아이콘 써클 존 디자인 */
.contact-info-card-item .card-icon-zone {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: rgba(15, 157, 88, 0.08) !important; /* 은은한 브랜드 그린 배경 */
    color: #0F9D58 !important;                     /* 아이콘 자체는 선명한 시그니처 그린 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 24px !important;
    margin-bottom: 20px !important;
}

/* 4. 카드 내부 텍스트 폰트 제어 */
.contact-info-card-item h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 8px !important;
    word-break: break-all !important; /* 주소나 이메일이 길어지면 카드 안에서 자동 줄바꿈 */
}

.contact-info-card-item p {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0F9D58 !important; /* 서브 카테고리는 초록색으로 세련되게 강조 */
}


/* ==========================================================================
   🌐 [최종 해결] 상단 다국어 언어 버튼 안쪽 당김 및 팝업 활성화 고정
   ========================================================================== */
/* 1. 메뉴바 전체를 우측 벽에서 안쪽으로 60px 더 강력하게 당김 */

/* 2. 언어 변경 버튼 자체의 z-index와 클릭 유효 공간 선언 */
.main-nav .language,
button.language {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    padding: 9px 16px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10000 !important; /* 헤더보다 높은 등급을 주어 클릭 무반응 현상 차단 */
    white-space: nowrap !important;
}

/* ==========================================================================
   🌐 [교정 마감] 구글 번역바 완전 은폐 및 다국어 활성화 스타일 고정
   ========================================================================== */
/* 자바스크립트의 .style 지시가 씹히지 않도록 기본 배치 초기화 */
/* 🚨 튀어나오는 구글 위젯 프레임 및 강제 공백 레이아웃 박멸 */
.goog-te-banner-frame,
.goog-te-banner,
.skiptranslate,
#google_translate_element {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

body {
    top: 0 !important;
    position: static !important;
}

/* 구글 툴팁 및 원문 오버레이 완전 차단 */
#goog-gt-tt, 
.goog-te-balloon-frame,
.orig {
    display: none !important;
    visibility: hidden !important;
}
/* ==========================================================================
   🌐 [레이아웃 수복] 다국어 메뉴 팝업 우측 끝선 밀착 및 잘림 현상 박멸
   ========================================================================== */
.language-menu {
    position: absolute !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    z-index: 999999 !important;
    display: none !important; /* 평소 숨김 */
    width: 160px !important;  /* 팝업 창 가로 크기 안정적으로 고정 */
}

/* 스크립트에 의해 active 클래스가 붙으면 화면 노출 */
.language-menu.active {
    display: block !important;
}

/* 🚨 1. 상단 헤더 버튼 클릭 시: 버튼 내부에 고정되어 우측 정렬 (절대 잘리지 않음) */
.main-nav {
    position: relative !important; /* 내비게이션 바 전체를 기준점으로 고정 */
}
.language-menu.is-header {
    top: 50px !important;          /* 헤더 메뉴바 아래 적당한 위치 */
    right: 60px !important;        /* 헤더 우측 패딩 여백 라인에 칼정렬 일치 */
    left: auto !important;
}

/* 🚨 2. 하단 푸터 버튼 클릭 시: 푸터 버튼 내부에 고정되어 위로 솟아오름 */
.language-footer {
    position: relative !important; /* 푸터 버튼 자체를 기준점으로 박아 넣음 */
}
.language-menu.is-footer {
    bottom: 50px !important;       /* 푸터 단추 위쪽 공간으로 배치 */
    left: 0 !important;            /* 푸터 지구본 버튼과 왼쪽 시작 라인 일치 */
    top: auto !important;
    right: auto !important;
}

/* 구글 위젯 UI 은폐용 철벽 속성 유지 */
.goog-te-banner-frame, .goog-te-banner, .skiptranslate, #google_translate_element, #goog-gt-tt, .goog-te-balloon-frame, .orig {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}
body { top: 0 !important; position: static !important; }

/* ==========================================================================
   🏁 [최종 마감] 푸터 내재화에 따른 다국어 팝업 솟아오름 간격 고정
   ========================================================================== */
.language-footer .language-menu.is-footer {
    position: absolute !important;
    bottom: 45px !important;    /* 💡 푸터 단추 위로 45픽셀만큼 정확하게 수직 공중부양 */
    left: 0 !important;         /* 버튼 왼쪽 끝선과 자석처럼 일치 */
    top: auto !important;
    right: auto !important;
    width: 150px !important;    /* 푸터 버튼 너비에 예쁘게 맞춤 */
}
/* =====================================
   CONTACT PAGE LAYOUT BALANCING
===================================== */
.contact-page-container {
    width: 100%;
    background: #fdfdfd;
    padding: 30px 0 40px 0; /* 상단 헤더 차단 여백 설계 */
    display: flex;
    justify-content: center;
}

.form-wrapper-block {
    width: 100%;
    max-width: 750px; /* 견적서 박스 전체 가로폭 제어 */
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    padding: 0 16px !important;
}

/* 대제목 정렬 보정 명세 */
.page-main-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111111;
    letter-spacing: -0.5px;
    text-align: left !important;
    margin: 0 0 10px 0 !important;
    font-family: 'Inter', sans-serif;
}

/* 폼 입력창 구조 전용 정밀 패딩 설계 */
#quotation-form {
    margin: 0 !important;
    background: #ffffff;
    border: 1px solid #eef0f2;
    padding: 20px 16px !important;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.input-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.input-field label {
    font-size: 11px;
    font-weight: 700;
    color: #888888;
    letter-spacing: 0.5px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
}

.method-title {
    font-size: 11px;
    font-weight: 700;
    color: #888888;
    margin-right: 10px;
}

/* 유령 파편 원천 물리적 매몰 강제 규격 */
body > input[type="button"],
body > button:not([id="submit-btn"]),
.contact-page-container ~ button {
    display: none !important;
    opacity: 0 !important;
}

@media screen and (max-width:480px){

    .hero h1{
        font-size:26px !important;
    }

    .hero p{
        font-size:14px !important;
    }

    .hero-buttons{
        gap:10px !important;
    }

    .btn-primary,
    .btn-secondary{
        padding:14px !important;
        font-size:12px !important;
    }

    .feature-item img{
        width:40px !important;
        height:40px !important;
    }

    .footer{
        padding:35px 15px 25px;
    }

}

/* 기본 상태: 아이콘을 페이스북 파란색으로 변경 */
.fa-facebook-f {
    color: #1877F2;
}

/* 선택 사항: 마우스를 올렸을 때(Hover) 약간 어둡게 변하는 효과 */
.fa-facebook-f:hover {
    color: #0b5ed7;
}

/* ==========================================================================
   📱 스마트폰 전용 교정 미디어 쿼리 마감선 (이 아래로는 코드를 쓰지 마세요)
   ========================================================================== */