/* ═══════════════════════════════════════════════════
   WOCS COMMON STYLES — Dark Luxury Theme
   Colors: Obsidian + Antique Gold + Warm Ivory
   Fonts: Cormorant Garamond (display) + Lexend (body)
   ═══════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --gold: #c9a96e;
  --gold-light: #e4d5a8;
  --ivory: #f0ebe0;
  --bg: #09090b;
  --bg2: #111113;
  --bg3: #18181b;
  --font-display: 'Cormorant Garamond', 'Noto Serif KR', serif;
  --font-body: 'Lexend', 'Noto Sans KR', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { background: var(--bg); color: var(--ivory); font-family: var(--font-display); min-height: 100vh; overflow-x: hidden; }
::selection { background: rgba(201,169,110,0.27); color: var(--ivory); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ── Typography ── */
.font-body { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }
.slab { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); }
.gold-text { background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shimmer-text { background: linear-gradient(90deg, var(--gold) 0%, #f5e6c8 25%, var(--gold) 50%, #f5e6c8 75%, var(--gold) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s linear infinite; }

/* ── Buttons ── */
.btn-gold { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 16px 40px; border: 1px solid var(--gold); color: var(--gold); background: transparent; cursor: pointer; transition: all .4s; position: relative; overflow: hidden; display: inline-block; text-align: center; }
.btn-gold:hover { background: var(--gold); color: var(--bg); }
.btn-gold-fill { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 16px 40px; border: 1px solid var(--gold); color: var(--bg); background: var(--gold); cursor: pointer; transition: all .4s; display: inline-block; text-align: center; }
.btn-gold-fill:hover { background: transparent; color: var(--gold); }
.btn-sm { padding: 10px 24px; font-size: 10px; }

/* ── Layout ── */
.section-pad { padding: 120px 5%; max-width: 1400px; margin: 0 auto; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }

/* ── Header (injected by JS) ── */
#wocs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.header-scrolled { background: rgba(9,9,11,0.93) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(201,169,110,0.12); }
.header-bar { border-bottom: 1px solid rgba(201,169,110,0.14); padding: 8px 5%; display: flex; justify-content: flex-end; align-items: center; gap: 24px; font-family: var(--font-body); font-size: 11px; color: rgba(240,235,224,0.53); letter-spacing: 1px; }
.header-main { display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 70px; }
.header-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; }
.header-logo-icon { width: 40px; height: 40px; border: 2px solid var(--gold); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.header-logo-icon span { transform: rotate(-45deg); font-weight: 700; font-size: 18px; color: var(--gold); }
.header-logo-text { font-weight: 600; font-size: 20px; letter-spacing: 4px; color: var(--ivory); }
.header-logo-sub { font-family: var(--font-body); font-size: 8px; letter-spacing: 4px; color: var(--gold); margin-top: -2px; }

/* Nav */
.nav-list { display: flex; gap: 0; align-items: center; list-style: none; }
.nav-item { position: relative; }
.nav-link { font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: rgba(240,235,224,0.8); background: none; border: none; cursor: pointer; padding: 24px 16px; transition: color .3s; display: block; }
.nav-link:hover, .nav-item:hover .nav-link { color: var(--gold); }
.nav-arrow { font-size: 8px; margin-left: 4px; }

/* Mega Menu */
.mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(9,9,11,0.96); backdrop-filter: blur(30px); border: 1px solid rgba(201,169,110,0.12); padding: 32px; min-width: 280px; display: none; animation: slideUp .3s ease forwards; }
.mega-menu.multi { min-width: 600px; display: none; flex-direction: row; gap: 40px; }
.nav-item:hover .mega-menu { display: flex; }
.mega-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 3px; color: var(--gold); margin-bottom: 16px; text-transform: uppercase; }
.mega-link { font-family: var(--font-body); font-size: 13px; color: rgba(240,235,224,0.73); padding: 7px 0; cursor: pointer; transition: all .2s; border-bottom: 1px solid rgba(201,169,110,0.03); display: block; }
.mega-link:hover { color: var(--gold); padding-left: 8px; }

/* ── Page Hero (Subpages) ── */
.page-hero { padding: 180px 5% 100px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 20%, rgba(201,169,110,0.05), transparent 70%); pointer-events: none; }
.page-hero .slab { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1.15; margin-bottom: 24px; }
.page-hero p { font-family: var(--font-body); font-size: 15px; color: rgba(240,235,224,0.6); line-height: 1.8; max-width: 600px; }

/* ── Cards ── */
.card { background: var(--bg2); border: 1px solid rgba(201,169,110,0.12); padding: 40px; transition: all .4s; }
.card:hover { border-color: rgba(201,169,110,0.25); transform: translateY(-4px); }
.card-image { width: 100%; height: 240px; object-fit: cover; margin-bottom: 24px; filter: brightness(0.85); transition: filter .4s; }
.card:hover .card-image { filter: brightness(1); }
.card-tag { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.card-title { font-size: 24px; font-weight: 400; margin-bottom: 12px; }
.card-desc { font-family: var(--font-body); font-size: 13px; color: rgba(240,235,224,0.6); line-height: 1.7; }
.card-link { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-top: 20px; display: inline-block; transition: padding-left .3s; }
.card-link:hover { padding-left: 8px; }

/* ── Product Detail ── */
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.product-hero-image { width: 100%; height: 500px; object-fit: cover; }
.product-specs { margin-top: 60px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { font-family: var(--font-body); font-size: 13px; padding: 16px 20px; border-bottom: 1px solid rgba(201,169,110,0.14); text-align: left; }
.spec-table th { color: var(--gold); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.spec-table td { color: rgba(240,235,224,0.7); }
.spec-table tr:hover td { color: var(--ivory); }

/* ── Features Grid ── */
.feature-item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: rgba(9,9,11,0.5); border: 1px solid rgba(201,169,110,0.12); transition: border-color .3s; }
.feature-item:hover { border-color: rgba(201,169,110,0.25); }
.feature-icon { font-size: 28px; flex-shrink: 0; }
.feature-title { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--gold); letter-spacing: 1px; margin-bottom: 4px; }
.feature-desc { font-family: var(--font-body); font-size: 12px; color: rgba(240,235,224,0.53); }

/* ── Gallery Grid ── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-item:hover img { transform: scale(1.05); }

/* ── Breadcrumb ── */
.breadcrumb { font-family: var(--font-body); font-size: 11px; letter-spacing: 1px; color: rgba(240,235,224,0.4); padding: 16px 0; }
.breadcrumb a { color: rgba(240,235,224,0.5); transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin: 0 8px; }

/* ── CTA Section ── */
.cta-section { background: radial-gradient(ellipse at 50% 50%, rgba(201,169,110,0.03), var(--bg)); padding: 120px 5%; text-align: center; }

/* ── Footer (injected by JS) ── */
.footer { background: var(--bg2); border-top: 1px solid rgba(201,169,110,0.12); padding: 80px 5% 40px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; max-width: 1400px; margin: 0 auto 60px; }
.footer-brand p { font-family: var(--font-body); font-size: 12px; color: rgba(240,235,224,0.4); line-height: 1.8; margin-bottom: 20px; }
.footer-col-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; }
.footer-link { font-family: var(--font-body); font-size: 12px; color: rgba(240,235,224,0.5); display: block; padding: 5px 0; transition: color .2s; }
.footer-link:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(201,169,110,0.12); padding-top: 30px; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-family: var(--font-body); font-size: 11px; color: rgba(240,235,224,0.3); letter-spacing: 1px; }

/* ── Floating CTA ── */
.floating-cta { position: fixed; bottom: 30px; right: 30px; z-index: 999; display: flex; flex-direction: column; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.floating-cta.visible { opacity: 1; pointer-events: all; }
.float-btn { width: 56px; height: 56px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: transform .3s; }
.float-btn:hover { transform: scale(1.1); }
.float-btn-gold { background: var(--gold); color: var(--bg); box-shadow: 0 8px 30px rgba(201,169,110,0.27); }
.float-btn-dark { background: rgba(9,9,11,0.87); border: 1px solid rgba(201,169,110,0.27); color: var(--gold); font-size: 16px; }

/* ── Noise Overlay ── */
.noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Animations ── */
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

.anim { opacity: 0; transform: translateY(40px); transition: all 0.85s cubic-bezier(0.16,1,0.3,1); }
.anim.visible { opacity: 1; transform: none; }
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .product-hero { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .page-hero { padding: 140px 5% 60px; }
  .section-pad { padding: 80px 5%; }
  .nav-list { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .mega-menu.multi { min-width: auto; flex-direction: column; }
}

/* ── Image Replace Marker ── */
/* 
  [사진 교체 가이드]
  data-replace="true" 속성이 있는 img 태그는 
  대표님이 실제 사진으로 교체할 이미지입니다.
  src 값만 변경하면 됩니다.
*/

/* ── Mobile Navigation ── */
#mobile-hamburger { display: none !important; }
@media (max-width: 768px) {
  #mobile-hamburger { display: block !important; }
  .header-main { position: relative; }
  .page-hero h1 { font-size: 28px !important; }
  .page-hero p { font-size: 13px !important; }
  .product-hero { grid-template-columns: 1fr !important; gap: 30px !important; }
  .product-hero-image { height: 300px !important; }
  .card { padding: 24px; }
  .card-image { height: 180px; }
  .btn-gold, .btn-gold-fill { padding: 14px 28px; font-size: 10px; }
  .spec-table { font-size: 11px; }
  .spec-table th, .spec-table td { padding: 10px 8px; }
  .mega-menu { display: none !important; }
}
@media (max-width: 480px) {
  .section-pad { padding: 60px 4%; }
  .page-hero { padding: 120px 4% 40px; }
  .container { padding: 0 4%; }
  .grid-2, .grid-3, .grid-4 { gap: 16px; }
}

/* ═══ GLITZCAMP-STYLE COMPONENTS ═══ */

/* Image Gallery Grid */
.gallery-hero { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; height:420px; margin-bottom:40px }
.gallery-hero img { width:100%; height:100%; object-fit:cover; cursor:pointer; filter:brightness(0.95); transition:filter .3s }
.gallery-hero img:hover { filter:brightness(1) }
.gallery-hero img:first-child { grid-row:1/3 }
@media(max-width:768px) { .gallery-hero { grid-template-columns:1fr; grid-template-rows:auto; height:auto } .gallery-hero img { height:200px } }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:9999; align-items:center; justify-content:center }
.lightbox.active { display:flex }
.lightbox img { max-width:85vw; max-height:85vh; object-fit:contain }
.lightbox-close { position:absolute; top:20px; right:30px; font-size:36px; color:#fff; cursor:pointer; z-index:10000 }
.lightbox-nav { position:absolute; top:50%; font-size:48px; color:rgba(255,255,255,0.7); cursor:pointer; padding:20px; transform:translateY(-50%); transition:color .2s }
.lightbox-nav:hover { color:#fff }
.lightbox-prev { left:10px }
.lightbox-next { right:10px }
.lightbox-count { position:absolute; top:20px; left:30px; color:rgba(255,255,255,0.75); font-size:14px; font-family:var(--font-body) }

/* Product Card (Glitzcamp style) */
.prod-card { background:var(--bg); border:1px solid rgba(201,169,110,0.14); overflow:hidden; transition:border-color .3s,transform .3s }
.prod-card:hover { border-color:rgba(201,169,110,0.3); transform:translateY(-4px) }
.prod-card img { width:100%; height:260px; object-fit:cover; transition:transform .5s }
.prod-card:hover img { transform:scale(1.03) }
.prod-card-body { padding:24px }
.prod-card-title { font-size:20px; font-weight:400; margin-bottom:8px; color:var(--ivory) }
.prod-card-desc { font-family:var(--font-body); font-size:13px; color:rgba(240,235,224,0.65); line-height:1.7 }
.prod-card-link { display:inline-block; margin-top:16px; font-family:var(--font-body); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); text-decoration:none; transition:color .2s }
.prod-card-link:hover { color:var(--ivory) }

/* Split Section (Glitzcamp image+text) */
.split-section { display:grid; grid-template-columns:1fr 1fr; min-height:400px; overflow:hidden }
.split-section.reverse .split-img { order:2 }
.split-img { overflow:hidden }
.split-img img { width:100%; height:100%; object-fit:cover; filter:brightness(0.92); min-height:400px }
.split-text { padding:60px 5%; display:flex; flex-direction:column; justify-content:center }
@media(max-width:768px) { .split-section { grid-template-columns:1fr } .split-section.reverse .split-img { order:0 } .split-img img { height:300px } }

/* FAQ Accordion */
.faq-item { border-bottom:1px solid rgba(201,169,110,0.14); padding:20px 0 }
.faq-q { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-body); font-size:14px; color:var(--ivory); transition:color .2s }
.faq-q:hover { color:var(--gold) }
.faq-q .faq-icon { font-size:20px; color:var(--gold); transition:transform .3s }
.faq-q.open .faq-icon { transform:rotate(45deg) }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; font-family:var(--font-body); font-size:13px; color:rgba(240,235,224,0.65); line-height:1.8 }
.faq-a.open { max-height:300px; padding-top:12px }

/* Contact Form */
.contact-form { max-width:800px; margin:0 auto }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px }
.form-input { width:100%; padding:14px 18px; background:var(--bg); border:1px solid rgba(201,169,110,0.15); color:var(--ivory); font-family:var(--font-body); font-size:13px; outline:none; transition:border-color .3s }
.form-input:focus { border-color:rgba(201,169,110,0.5) }
.form-input::placeholder { color:rgba(240,235,224,0.25) }
textarea.form-input { min-height:120px; resize:vertical }
.form-label { display:block; font-family:var(--font-body); font-size:11px; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; margin-bottom:8px }
@media(max-width:768px) { .form-row { grid-template-columns:1fr } }

/* Spec Badges */
.spec-badges { display:flex; gap:24px; flex-wrap:wrap; margin:32px 0 }
.spec-badge { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; color:rgba(240,235,224,0.8) }
.spec-badge .badge-icon { width:36px; height:36px; border:1px solid rgba(201,169,110,0.2); display:flex; align-items:center; justify-content:center; font-size:16px }

/* Browse More / Related */
.browse-more { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px }
.browse-item { text-align:center; text-decoration:none; padding:20px; border:1px solid rgba(201,169,110,0.12); transition:border-color .3s }
.browse-item:hover { border-color:rgba(201,169,110,0.3) }
.browse-item img { width:100%; height:150px; object-fit:cover; margin-bottom:12px }
.browse-item span { font-family:var(--font-body); font-size:12px; color:rgba(240,235,224,0.8) }

/* ═══ GLITZCAMP COMPLETE CSS ═══ */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.testimonial-card{background:var(--bg);border:1px solid rgba(201,169,110,0.14);padding:32px;transition:border-color .3s}
.testimonial-card:hover{border-color:rgba(201,169,110,0.3)}
.testimonial-stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.testimonial-text{font-family:var(--font-body);font-size:13px;color:rgba(240,235,224,0.8);line-height:1.8;font-style:italic;margin-bottom:16px}
.testimonial-author{font-family:var(--font-body);font-size:12px;color:var(--gold)}
.testimonial-role{font-family:var(--font-body);font-size:11px;color:rgba(240,235,224,0.45);margin-top:4px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.blog-card{text-decoration:none;display:block;overflow:hidden;border:1px solid rgba(201,169,110,0.12);transition:border-color .3s,transform .3s}
.blog-card:hover{border-color:rgba(201,169,110,0.25);transform:translateY(-3px)}
.blog-card img{width:100%;height:200px;object-fit:cover;transition:transform .5s}
.blog-card:hover img{transform:scale(1.05)}
.blog-card-body{padding:24px}
.blog-card-date{font-family:var(--font-body);font-size:10px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:8px}
.blog-card-title{font-size:18px;font-weight:400;color:var(--ivory);margin-bottom:8px;line-height:1.3}
.blog-card-excerpt{font-family:var(--font-body);font-size:12px;color:rgba(240,235,224,0.65);line-height:1.7}
.newsletter-bar{display:flex;gap:0;max-width:500px;margin:0 auto}
.newsletter-input{flex:1;padding:14px 20px;background:var(--bg);border:1px solid rgba(201,169,110,0.2);border-right:none;color:var(--ivory);font-family:var(--font-body);font-size:13px;outline:none}
.newsletter-input:focus{border-color:var(--gold)}
.newsletter-btn{padding:14px 28px;background:var(--gold);border:1px solid var(--gold);color:var(--bg);font-family:var(--font-body);font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s;white-space:nowrap}
.newsletter-btn:hover{background:transparent;color:var(--gold)}
.partner-logos{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;padding:20px 0;opacity:0.4}
.partner-logos span{font-family:var(--font-body);font-size:11px;letter-spacing:3px;color:rgba(240,235,224,0.65);text-transform:uppercase}
.social-links{display:flex;gap:12px;margin-top:16px}
.social-link{width:36px;height:36px;border:1px solid rgba(201,169,110,0.2);display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(240,235,224,0.65);text-decoration:none;transition:all .3s}
.social-link:hover{border-color:var(--gold);color:var(--gold)}
.chat-float{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;z-index:999;box-shadow:0 4px 20px rgba(201,169,110,0.3);transition:transform .3s;text-decoration:none}
.chat-float:hover{transform:scale(1.1)}
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel-slide{min-width:100%}
.carousel-slide img{width:100%;height:400px;object-fit:cover}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;width:44px;height:44px;font-size:20px;cursor:pointer;z-index:5;transition:background .3s}
.carousel-btn:hover{background:rgba(201,169,110,0.7)}
.carousel-prev{left:12px}
.carousel-next{right:12px}
.carousel-dots{display:flex;justify-content:center;gap:8px;padding:16px 0}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(240,235,224,0.2);cursor:pointer;transition:background .3s}
.carousel-dot.active{background:var(--gold)}
.parts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.part-item{padding:24px;border:1px solid rgba(201,169,110,0.12);transition:border-color .3s}
.part-item:hover{border-color:rgba(201,169,110,0.25)}
.part-icon{font-size:36px;margin-bottom:12px}
.part-title{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ivory);letter-spacing:1px;margin-bottom:4px}
.part-desc{font-family:var(--font-body);font-size:11px;color:rgba(240,235,224,0.65)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step-item{padding:32px 24px;border:1px solid rgba(201,169,110,0.12);position:relative;transition:border-color .3s}
.step-item:hover{border-color:rgba(201,169,110,0.3)}
.step-item::before{content:counter(step);counter-increment:step;position:absolute;top:-14px;left:24px;background:var(--gold);color:var(--bg);width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.step-title{font-size:16px;font-weight:400;color:var(--ivory);margin-bottom:8px}
.step-desc{font-family:var(--font-body);font-size:12px;color:rgba(240,235,224,0.65);line-height:1.7}
@media(max-width:768px){.parts-grid,.steps-grid{grid-template-columns:1fr 1fr}.testimonial-grid,.blog-grid{grid-template-columns:1fr}}

/* ═══ GLITZCAMP PRODUCT DETAIL COMPONENTS ═══ */
.gallery-5{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:420px}
.gallery-5 .g-main{grid-row:1/3;position:relative;overflow:hidden}
.gallery-5 img{width:100%;height:100%;object-fit:cover;cursor:pointer;filter:brightness(0.95);transition:filter .3s,transform .4s}
.gallery-5 img:hover{filter:brightness(1);transform:scale(1.02)}
.gallery-5 .g-dl{position:absolute;bottom:16px;right:16px;background:var(--gold);color:var(--bg);padding:10px 24px;font-family:var(--font-body);font-size:12px;letter-spacing:1px;cursor:pointer;transition:opacity .3s;text-decoration:none;z-index:3}
.gallery-5 .g-dl:hover{opacity:0.85}
@media(max-width:768px){.gallery-5{grid-template-columns:1fr;height:auto}.gallery-5 .g-main{grid-row:auto}.gallery-5 img{height:200px}}

.spec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:32px}
.spec-card{background:rgba(240,235,224,0.03);border:1px solid rgba(201,169,110,0.14);padding:24px;text-align:center;transition:border-color .3s}
.spec-card:hover{border-color:rgba(201,169,110,0.3)}
.spec-card img{width:100%;height:160px;object-fit:contain;margin-bottom:16px;filter:brightness(0.9)}
.spec-card-name{font-size:16px;color:var(--ivory);margin-bottom:8px}
.spec-card-info{font-family:var(--font-body);font-size:12px;color:rgba(240,235,224,0.8);line-height:1.6}

.showcase-slider{position:relative;overflow:hidden;min-height:450px}
.showcase-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.showcase-slide.active{opacity:1}
.showcase-slide img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.35)}
.showcase-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;height:100%;padding:60px 5%}
.showcase-text{display:flex;flex-direction:column;justify-content:center;max-width:500px}
.showcase-cards{display:flex;gap:12px;align-items:center;overflow:hidden}
.showcase-card{min-width:180px;height:200px;position:relative;overflow:hidden;flex-shrink:0}
.showcase-card img{width:100%;height:100%;object-fit:cover;filter:brightness(0.85)}
.showcase-card .sc-label{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,0.7));font-family:var(--font-body);font-size:11px;color:#fff}
.showcase-nav{display:flex;gap:12px;margin-top:20px}
.showcase-nav button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);background:transparent;color:#fff;font-size:16px;cursor:pointer;transition:all .3s}
.showcase-nav button:hover{border-color:#fff;background:rgba(255,255,255,0.1)}

.furniture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.furniture-item{text-align:center;padding:20px}
.furniture-item img{width:100%;height:120px;object-fit:contain;margin-bottom:12px;filter:brightness(0.9)}
.furniture-item span{font-family:var(--font-body);font-size:13px;color:var(--gold)}
@media(max-width:768px){.showcase-inner{grid-template-columns:1fr}.furniture-grid{grid-template-columns:repeat(2,1fr)}}

.mat-slider{position:relative;overflow:hidden;margin-top:40px}
.mat-track{display:flex;transition:transform .5s ease}
.mat-card{min-width:25%;padding:0 8px;box-sizing:border-box;flex-shrink:0}
.mat-card-inner{background:rgba(240,235,224,0.04);border:1px solid rgba(201,169,110,0.14);padding:28px 20px;min-height:140px;transition:border-color .3s}
.mat-card-inner:hover{border-color:rgba(201,169,110,0.3)}
.mat-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.mat-dot{width:8px;height:8px;border-radius:50%;background:rgba(240,235,224,0.15);cursor:pointer;transition:background .3s}
.mat-dot.active{background:var(--gold)}
.furn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:40px}
.furn-card{position:relative;overflow:hidden;border-radius:6px;cursor:pointer;aspect-ratio:1.92/1;transition:transform .4s,box-shadow .4s}
.furn-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(201,169,110,0.18)}
.furn-card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.85);transition:filter .4s,transform .5s}
.furn-card:hover img{filter:brightness(1);transform:scale(1.05)}
.furn-card .furn-label{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;background:linear-gradient(transparent,rgba(9,9,11,0.82));font-family:var(--font-body);font-size:13px;color:var(--ivory);letter-spacing:.3px;transition:padding .3s}
.furn-card:hover .furn-label{padding-bottom:14px}
.furn-card .furn-label small{display:block;font-size:10px;color:var(--gold);margin-top:2px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.furn-card:hover .furn-label small{opacity:1;transform:translateY(0)}
@media(max-width:1024px){.furn-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.furn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.mat-card{min-width:50%}}

/* === Occasion Page Styles === */
.occ-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.occ-intro img{width:100%;height:auto;object-fit:cover;filter:brightness(0.88)}
.occ-intro-text .slab{margin-bottom:12px}
.occ-intro-text h2{font-size:clamp(22px,3vw,36px);font-weight:300;line-height:1.3}
.occ-intro-text p{font-family:var(--font-body);font-size:14px;color:rgba(240,235,224,0.75);line-height:2;margin-top:16px}
.occ-prod-row{margin-top:32px}
.occ-prod-row h4{font-size:15px;font-weight:400;color:rgba(240,235,224,0.5);margin-bottom:16px;letter-spacing:1px}
.occ-prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.occ-prod-item{text-align:center;text-decoration:none;transition:transform .3s}
.occ-prod-item:hover{transform:translateY(-4px)}
.occ-prod-item img{width:100%;aspect-ratio:1/0.8;object-fit:cover;border:1px solid rgba(201,169,110,0.12);transition:border-color .3s}
.occ-prod-item:hover img{border-color:rgba(201,169,110,0.35)}
.occ-prod-item span{display:block;font-family:var(--font-body);font-size:11px;color:rgba(240,235,224,0.65);margin-top:8px}
.occ-prod-item .occ-prod-btn{display:inline-block;margin-top:8px;font-family:var(--font-body);font-size:10px;letter-spacing:1px;color:var(--gold);border:1px solid rgba(201,169,110,0.3);padding:4px 12px;text-decoration:none;transition:all .3s}
.occ-prod-item:hover .occ-prod-btn{background:var(--gold);color:var(--bg)}
.occ-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}
.occ-why-card{text-align:center;padding:32px 20px}
.occ-why-card .occ-icon{font-size:40px;margin-bottom:16px;display:block}
.occ-why-card h4{font-size:16px;font-weight:400;color:var(--ivory);margin-bottom:8px}
.occ-why-card p{font-family:var(--font-body);font-size:12px;color:rgba(240,235,224,0.6);line-height:1.7}
.occ-scenario{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:60px}
.occ-scenario.reverse{direction:rtl}
.occ-scenario.reverse>*{direction:ltr}
.occ-scenario img{width:100%;height:320px;object-fit:cover;filter:brightness(0.85)}
.occ-scenario h3{font-size:clamp(18px,2vw,26px);font-weight:300;margin-bottom:12px}
.occ-scenario p{font-family:var(--font-body);font-size:13px;color:rgba(240,235,224,0.7);line-height:1.9}
.occ-trend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.occ-trend-card{padding:32px;border:1px solid rgba(201,169,110,0.12);transition:border-color .3s}
.occ-trend-card:hover{border-color:rgba(201,169,110,0.3)}
.occ-trend-card .trend-icon{font-size:32px;margin-bottom:16px}
.occ-trend-card h4{font-size:15px;font-weight:400;color:var(--gold);margin-bottom:8px}
.occ-trend-card p{font-family:var(--font-body);font-size:12px;color:rgba(240,235,224,0.6);line-height:1.7}
.occ-related{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.occ-rel-card{position:relative;overflow:hidden;text-decoration:none;display:block;transition:transform .3s}
.occ-rel-card:hover{transform:translateY(-4px)}
.occ-rel-card img{width:100%;height:220px;object-fit:cover;filter:brightness(0.7);transition:filter .4s}
.occ-rel-card:hover img{filter:brightness(0.85)}
.occ-rel-card .occ-rel-label{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(transparent,rgba(9,9,11,0.85))}
.occ-rel-card .occ-rel-label span{font-family:var(--font-body);font-size:13px;color:var(--ivory);display:block}
.occ-rel-card .occ-rel-label small{font-family:var(--font-body);font-size:10px;color:var(--gold);margin-top:4px;display:inline-block;opacity:0;transform:translateY(4px);transition:all .3s}
.occ-rel-card:hover .occ-rel-label small{opacity:1;transform:translateY(0)}
.occ-benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.occ-benefit{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:24px;border:1px solid rgba(201,169,110,0.1);transition:border-color .3s}
.occ-benefit:hover{border-color:rgba(201,169,110,0.25)}
.occ-benefit img{width:100%;height:140px;object-fit:cover}
.occ-benefit h4{font-size:14px;font-weight:500;color:var(--ivory);margin-bottom:6px}
.occ-benefit p{font-family:var(--font-body);font-size:12px;color:rgba(240,235,224,0.6);line-height:1.7}
@media(max-width:1024px){.occ-prod-grid{grid-template-columns:repeat(3,1fr)}.occ-related{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.occ-intro,.occ-scenario,.occ-scenario.reverse{grid-template-columns:1fr}.occ-why-grid,.occ-trend-grid{grid-template-columns:1fr}.occ-benefit-grid{grid-template-columns:1fr}.occ-prod-grid{grid-template-columns:repeat(2,1fr)}}

/* === Authority & Conversion Styles === */
.trust-bar{display:flex;justify-content:center;gap:clamp(24px,4vw,60px);padding:24px 5%;background:rgba(201,169,110,0.06);border-top:1px solid rgba(201,169,110,0.12);border-bottom:1px solid rgba(201,169,110,0.12);flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px}
.trust-num{font-family:var(--font-serif);font-size:clamp(22px,2.5vw,32px);color:var(--gold);font-weight:600;line-height:1}
.trust-label{font-family:var(--font-body);font-size:11px;color:rgba(240,235,224,0.6);line-height:1.3}
.lead-magnet{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lead-card{background:rgba(201,169,110,0.04);border:1px solid rgba(201,169,110,0.18);padding:40px;text-align:center;transition:all .4s}
.lead-card:hover{border-color:rgba(201,169,110,0.4);transform:translateY(-4px)}
.lead-card .lead-icon{font-size:48px;margin-bottom:16px}
.lead-card h4{font-size:18px;font-weight:400;color:var(--ivory);margin-bottom:10px}
.lead-card p{font-family:var(--font-body);font-size:13px;color:rgba(240,235,224,0.65);line-height:1.8;margin-bottom:20px}
.lead-card .btn-lead{display:inline-block;padding:12px 32px;background:var(--gold);color:var(--bg);font-family:var(--font-body);font-size:12px;letter-spacing:1px;text-decoration:none;transition:all .3s}
.lead-card .btn-lead:hover{background:var(--ivory);color:var(--bg)}
.o4o-section{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.o4o-benefits{list-style:none;padding:0;margin:20px 0 0}
.o4o-benefits li{font-family:var(--font-body);font-size:13px;color:rgba(240,235,224,0.75);padding:10px 0;border-bottom:1px solid rgba(201,169,110,0.08);display:flex;align-items:center;gap:10px}
.o4o-benefits li::before{content:'✓';color:var(--gold);font-weight:600;font-size:14px}
.hero-stat-row{display:flex;gap:32px;margin-top:24px;flex-wrap:wrap}
.hero-stat{text-align:left}
.hero-stat strong{display:block;font-family:var(--font-serif);font-size:clamp(24px,3vw,36px);color:var(--gold);font-weight:600}
.hero-stat span{font-family:var(--font-body);font-size:11px;color:rgba(240,235,224,0.5);letter-spacing:.5px}
@media(max-width:768px){.lead-magnet,.o4o-section{grid-template-columns:1fr}.hero-stat-row{gap:20px}}



.mega-sub{display:block;font-size:0.7em;color:rgba(240,235,224,0.33);margin-top:3px;font-weight:300;letter-spacing:0.3px;line-height:1.2}

/* ── Grid utility classes (inline style replacement) ── */
.wocs-grid-auto { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.wocs-grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
  .wocs-grid-auto { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .wocs-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .wocs-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .wocs-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE — 2025 Standard
   Base: 360px mobile → min-width expansion
   ═══════════════════════════════════════════════════ */

/* ── Global Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; display: block; }
p { word-break: keep-all; }

/* ── Mobile Base (0~479px) ── */
body { font-size: 1rem; line-height: 1.6; }
h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem); }
h2 { font-size: clamp(1.25rem, 3vw + 0.5rem, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.75rem); }

section { padding: 2rem 1rem; }
.container { padding: 0 1rem; }
.section-pad { padding: 2rem 1rem; max-width: 100%; }

.grid-2, .grid-4, .spec-cards, .testimonial-grid, .blog-grid,
.occ-trend-grid, .occ-benefit-grid, .occ-why-grid, .occ-prod-grid,
.rv-stat-grid, .core-grid, .check-grid {
  grid-template-columns: 1fr !important;
}
.parts-grid, .steps-grid { grid-template-columns: 1fr 1fr; }
.furn-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

.page-hero { padding: 5rem 1rem 2rem !important; min-height: 50vh; display: flex; align-items: center; }
.page-hero > div { width: 100%; }
.page-hero img { object-fit: cover !important; object-position: center !important; }

.gallery-5 { grid-template-columns: 1fr; height: auto; }
.gallery-5 .g-main { grid-row: auto; grid-column: auto; }
.gallery-5 img { height: 200px; object-fit: cover; }
.collab-card img, .blog-card img, .furn-card img, .spec-card img, .occ-rel-card img, .occ-prod-item img { width: 100%; height: 200px; object-fit: cover; }

.split-section, .split-section.reverse { grid-template-columns: 1fr; }
.split-section .split-img { order: -1; }
.split-section .split-text { order: 1; }
.split-img img { height: 250px; object-fit: cover; }

.header-bar { display: none; }
.header-main { padding: 0 0.75rem; position: relative; }
.header-logo-text { font-size: 1rem; letter-spacing: 3px; }
.header-logo-sub { font-size: 6px; }
.nav-list { display: none !important; }
.nav-list.mobile-open {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  background: rgba(9,9,11,0.98) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 10000 !important;
  padding: 80px 24px 40px !important;
  gap: 0 !important;
  overflow-y: auto !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.nav-list.mobile-open > div,
.nav-list.mobile-open > li {
  width: 100% !important;
  border-bottom: 1px solid rgba(201,169,110,0.12) !important;
}
.nav-list.mobile-open button,
.nav-list.mobile-open a {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 16px 0 !important; font-size: 16px !important; color: #f0ebe0 !important;
  background: none !important; border: none !important; cursor: pointer !important;
  font-family: 'Lexend', sans-serif !important; letter-spacing: 2px !important;
}
.nav-list.mobile-open .mega-menu { display: none !important; }
.nav-list .nav-item { width: 100%; border-bottom: 1px solid rgba(201,169,110,0.08); }
.nav-list .nav-link { padding: 0.875rem 0; display: block; width: 100%; }
.mega-menu { position: static !important; display: none; background: rgba(201,169,110,0.04); padding: 0.75rem 1rem; }
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { display: block; }
.mega-menu.multi { grid-template-columns: 1fr !important; }
#mobile-hamburger { display: block !important; }
#lang-dropdown { min-width: 280px; grid-template-columns: repeat(3, 1fr); padding: 0.75rem; }

.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.footer-bottom { text-align: center; }
.social-links { justify-content: center; }

.form-row { grid-template-columns: 1fr; }
.contact-form, .ct-form, .qt-form { padding: 1.5rem 1rem; }
.ct-split { grid-template-columns: 1fr; }
.form-submit { width: 100%; padding: 1rem; font-size: 0.813rem; }
input, select, textarea { font-size: 16px !important; width: 100%; }

.btn-gold, .btn-gold-fill, .btn-sb, a.btn-gold, a.btn-gold-fill { min-height: 48px; padding: 0.875rem 1.5rem; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }

.trust-bar { flex-wrap: wrap; gap: 1rem; padding: 1.5rem 1rem; }
.trust-item { flex: 1 1 40%; text-align: center; }
.showcase-inner { grid-template-columns: 1fr; }
.showcase-slider { height: auto; }
.faq-q { font-size: 0.875rem; padding: 1rem; }
.faq-a { font-size: 0.813rem; padding: 0 1rem 1rem; }
.why-grid { grid-template-columns: 1fr; }
.why-text { padding: 2.5rem 1rem; }
.newsletter-bar { flex-direction: column; gap: 0.5rem; }
.newsletter-input, .newsletter-btn { width: 100%; }
.cta-section { padding: 3rem 1rem; }
.occ-intro, .occ-scenario, .occ-scenario.reverse { grid-template-columns: 1fr; }
.occ-related { grid-template-columns: 1fr; }
.occ-rel-card { min-height: 200px; }
.about-hero-inner { padding: 5rem 1rem 2.5rem; }
.ceo-section { grid-template-columns: 1fr; }
.stat-bar { flex-wrap: wrap; gap: 1rem; }
.stat-item { flex: 1 1 40%; }
.case-scroll, .collab-scroll { -webkit-overflow-scrolling: touch; }
.collab-card { min-width: 260px; }
.rv-card { padding: 1.25rem; }
.lead-magnet, .o4o-section { grid-template-columns: 1fr; }
.hero-stat-row { flex-direction: column; gap: 0.75rem; }
.floating-cta .float-btn, .floating-cta .chat-float { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
body { padding-bottom: 5rem; }
.lightbox img { max-width: 95vw; max-height: 80vh; }
#wocs-lead-popup #popup-box { width: 92vw; max-width: 500px; padding: 2rem 1.25rem; max-height: 90vh; overflow-y: auto; }

/* ── Large Mobile (≥480px) ── */
@media (min-width: 480px) {
  .parts-grid, .steps-grid { grid-template-columns: 1fr 1fr; }
  .furn-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { flex: 1 1 40%; }
  .hero-stat-row { flex-direction: row; gap: 1.5rem; }
}

/* ── Tablet (≥768px) ── */
@media (min-width: 768px) {
  section { padding: 3rem 2rem; }
  .container { padding: 0 2rem; }
  .section-pad { padding: 3rem 2rem; }
  .header-bar { display: flex; }
  .header-main { padding: 0 1.5rem; }
  .header-logo-text { font-size: 1.125rem; letter-spacing: 4px; }
  .header-logo-sub { font-size: 7px; }
  .nav-list { display: flex !important; flex-direction: row; position: static; background: transparent; padding: 0; border-top: none; }
  .nav-list .nav-item { width: auto; border-bottom: none; }
  .nav-list .nav-link { padding: 0.5rem 1rem; }
  .mega-menu { position: absolute !important; display: none; background: rgba(9,9,11,0.96); padding: 1.25rem; }
  .mega-menu.multi { grid-template-columns: repeat(2, 1fr) !important; }
  #mobile-hamburger { display: none !important; }
  #lang-dropdown { grid-template-columns: repeat(5, 1fr); min-width: 320px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .spec-cards { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .occ-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .occ-related { grid-template-columns: repeat(2, 1fr); }
  .rv-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .furn-grid { grid-template-columns: repeat(3, 1fr); }
  .split-section { grid-template-columns: 1fr 1fr; }
  .split-section.reverse .split-img { order: 2; }
  .split-section .split-img { order: initial; }
  .split-section .split-text { order: initial; }
  .split-img img { height: auto; }
  .gallery-5 { grid-template-columns: repeat(3, 1fr); height: 450px; }
  .gallery-5 .g-main { grid-row: 1/3; grid-column: 1/2; }
  .gallery-5 img { height: 100%; }
  .page-hero { min-height: 60vh; padding: 7rem 2rem 3rem !important; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .ct-split { grid-template-columns: 1fr 1fr; }
  .showcase-inner { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-text { padding: 3rem 2rem; }
  .occ-intro, .occ-scenario { grid-template-columns: 1fr 1fr; }
  .ceo-section { grid-template-columns: 1fr 1fr; }
  body { padding-bottom: 0; }
}

/* ── Small Desktop (≥1024px) ── */
@media (min-width: 1024px) {
  section { padding: 4rem 3rem; }
  .container { padding: 0 3rem; }
  .section-pad { padding: 5rem 3rem; max-width: 1400px; margin: 0 auto; }
  .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .parts-grid, .steps-grid { grid-template-columns: repeat(4, 1fr); }
  .occ-prod-grid { grid-template-columns: repeat(3, 1fr); }
  .occ-related { grid-template-columns: repeat(3, 1fr); }
  .furn-grid { grid-template-columns: repeat(4, 1fr); }
  .occ-trend-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem; }
  .mega-menu.multi { grid-template-columns: repeat(4, 1fr) !important; }
  .gallery-5 { grid-template-columns: 1fr 1fr 1fr 1fr; height: 500px; }
  .gallery-5 .g-main { grid-row: 1/3; grid-column: 1/3; }
  .page-hero { min-height: 70vh; }
}

/* ── Large Desktop (≥1440px) ── */
@media (min-width: 1440px) {
  .section-pad { padding: 6rem 5%; max-width: 1400px; }
  section { padding: 5rem 5%; }
  .page-hero { min-height: 80vh; }
  .blog-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════
   NUCLEAR MOBILE OVERRIDE — !important 강제 적용
   인라인 style specificity를 완전히 오버라이드
   ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 모든 그리드 → 1열 강제 */
  [style*="grid-template-columns"],
  [style*="grid-template-columns:"],
  .grid-2, .grid-4,
  [style*="repeat(2"], [style*="repeat(3"], [style*="repeat(4"],
  [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* 모든 flex 가로 → 세로 + 줄바꿈 */
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  [style*="gap:40px"], [style*="gap: 40px"],
  [style*="gap:32px"], [style*="gap: 32px"],
  [style*="gap:30px"], [style*="gap: 30px"] {
    gap: 1rem !important;
  }

  /* 네비게이션 — 전체화면 오버레이 (위 모바일 기본 규칙과 통합) */
  #mobile-hamburger {
    display: block !important;
    z-index: 10001 !important;
    position: relative !important;
  }
  .header-bar {
    display: none !important;
  }

  /* 카드/아이콘 — 전체 너비 */
  .spec-card, .testimonial-card, .blog-card, .collab-card,
  .occ-trend-card, .furn-card, .rv-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 섹션 패딩 */
  section, section > div {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 이미지 */
  img {
    max-width: 100% !important;
  }

  /* inline 고정 너비 오버라이드 */
  [style*="max-width:900px"], [style*="max-width: 900px"],
  [style*="max-width:800px"], [style*="max-width: 800px"],
  [style*="max-width:1400px"], [style*="max-width: 1400px"] {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ═══════════════════════════════════════
   FINAL MOBILE OVERRIDE — 모든 페이지 적용
   이 블록이 파일 맨 끝에 있으므로 최우선 적용
   ═══════════════════════════════════════ */
#mobile-hamburger { display: none; }

@media (max-width: 767px) {
  #mobile-hamburger { display: block !important; }
  .header-bar { font-size: 10px !important; padding: 6px 3% !important; gap: 12px !important; }
  .nav-list { display: none !important; }
  .nav-list.mobile-open {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(9,9,11,0.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    z-index: 10000 !important; padding: 80px 24px 40px !important; gap: 0 !important;
    overflow-y: auto !important; align-items: stretch !important; justify-content: flex-start !important; list-style: none !important;
  }
  .nav-list.mobile-open > li, .nav-list.mobile-open > div { width: 100% !important; border-bottom: 1px solid rgba(201,169,110,0.12) !important; position: static !important; }
  .nav-list.mobile-open .nav-link, .nav-list.mobile-open > li > a, .nav-list.mobile-open > div > button {
    display: block !important; width: 100% !important; text-align: left !important; padding: 16px 0 !important;
    font-size: 16px !important; color: #f0ebe0 !important; background: none !important; border: none !important;
    cursor: pointer !important; font-family: 'Lexend', 'Noto Sans KR', sans-serif !important; letter-spacing: 2px !important; text-transform: uppercase !important;
  }
  .nav-list.mobile-open .mega-menu, .nav-list.mobile-open .mega-menu.multi {
    position: static !important; background: rgba(201,169,110,0.04) !important; border: none !important;
    border-left: 2px solid rgba(201,169,110,0.2) !important; padding: 8px 0 8px 16px !important; margin: 0 !important;
    min-width: 0 !important; width: 100% !important; display: none; flex-direction: column !important; gap: 4px !important;
    transform: none !important; animation: none !important; backdrop-filter: none !important; grid-template-columns: 1fr !important;
  }
  .nav-list.mobile-open .mega-menu[style*="display: block"], .nav-list.mobile-open .mega-menu[style*="display:block"] { display: block !important; }
  .nav-list.mobile-open .mega-menu .mega-title { font-size: 12px !important; padding: 8px 0 4px !important; }
  .nav-list.mobile-open .mega-menu .mega-link { padding: 10px 0 !important; font-size: 14px !important; border-bottom: 1px solid rgba(201,169,110,0.06) !important; }
  .nav-list.mobile-open .btn-gold, .nav-list.mobile-open .btn-gold-fill { display: block !important; width: 100% !important; text-align: center !important; margin: 16px 0 !important; padding: 14px !important; }
  .nav-list.mobile-open #lang-selector, .nav-list.mobile-open [id*="lang"] { display: none !important; }
  [style*="grid-template-columns"], [style*="gridTemplateColumns"] { grid-template-columns: 1fr !important; }
  [style*="gap: 80"], [style*="gap:80"], [style*="gap: 60"], [style*="gap:60"], [style*="gap: 40"], [style*="gap:40"] { gap: 16px !important; }
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap !important; }
  [style*="maxWidth"], [style*="max-width"] { max-width: 100% !important; }
  .grid-2, .grid-3, .grid-4, .occ-intro, .occ-scenario, .occ-scenario.reverse, .split-section, .split-section.reverse, .lead-magnet, .o4o-section, .ceo-section, .occ-why-grid, .occ-trend-grid, .occ-benefit-grid, .parts-grid, .steps-grid, .footer-grid, .core-grid { grid-template-columns: 1fr !important; }
  .occ-prod-grid, .occ-related, .furn-grid, .spec-cards { grid-template-columns: repeat(2, 1fr) !important; }
  img { max-width: 100% !important; height: auto !important; }
  .page-hero { padding: 100px 16px 40px !important; min-height: auto !important; }
  .section-pad { padding: 40px 16px !important; }
  section { padding: 40px 16px !important; overflow-x: hidden !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  input, select, textarea { font-size: 16px !important; }
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { padding-bottom: 80px !important; }
}

@media (min-width: 768px) {
  #mobile-hamburger { display: none !important; }
  .nav-list { display: flex !important; flex-direction: row !important; position: static !important; background: transparent !important; padding: 0 !important; }
}

/* mega-menu multi column → 모바일 1열 강제 */
@media (max-width: 767px) {
  .mega-menu, .mega-menu.multi {
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .mega-menu.multi > div, .mega-menu > div {
    width: 100% !important;
    min-width: 0 !important;
  }
}