/* ============================================================
   SNS랩 브랜드 (2026-10-25) — LUMEX 패밀리 톤
   style.css 위에 덮어쓰는 토큰 + 로고·내비·푸터·메인(lx-*) 컴포넌트
   ============================================================ */
:root {
    --primary: #7c3aed;
    --primary-light: #a78bfa;
    --primary-dark: #5b21b6;
    --accent: #8b5cf6;
    --accent-light: #c4b5fd;

    --bg-primary: #0a0a10;
    --bg-secondary: #0f0f18;
    --bg-card: rgba(20, 20, 30, 0.82);
    --bg-card-hover: rgba(30, 28, 44, 0.92);
    --bg-input: rgba(24, 24, 36, 0.92);
    --bg-navbar: rgba(10, 10, 16, 0.86);

    --border-color: rgba(255, 255, 255, 0.07);
    --border-light: rgba(255, 255, 255, 0.11);
    --text-primary: #f4f3f8;
    --text-secondary: #a6a3b8;
    --text-muted: #6f6c82;

    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --gradient-hero: radial-gradient(1200px 600px at 70% -10%, rgba(124, 58, 237, .28), transparent 60%), #0a0a10;
    --gradient-card: linear-gradient(135deg, rgba(124, 58, 237, .06) 0%, rgba(168, 85, 247, .04) 100%);
    --shadow-glow: 0 0 24px rgba(124, 58, 237, .22);

    --lx-ink: #0a0a10;
    --lx-line: rgba(255, 255, 255, .08);
}

body { font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -0.01em; }

/* ── 로고 ── */
.brand-mark { position: relative; display: inline-block; width: 32px; height: 32px; border-radius: 9px; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.35); flex: none; }
/* 루멕스 공식 M 마크 (assets/images/lumex-mark.png, 원본: 바탕화면 루멕스 로고자료) — 검정 타일 + 흰 마크 (2026-11-03) */
.brand-mark::before { content: ''; position: absolute; inset: 7px; background: url(../images/lumex-mark.png?v=2) center / contain no-repeat; }
.brand-name { font-weight: 800; letter-spacing: -0.03em; }
.brand-by { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--text-muted); border: 1px solid var(--lx-line); border-radius: 999px; padding: 2px 7px; margin-left: 2px; }
.nav-logo { gap: 9px !important; }

/* ── 버튼 톤 ── */
.btn-primary { background: var(--gradient-primary) !important; box-shadow: 0 6px 18px rgba(124, 58, 237, .28); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(124, 58, 237, .4); }

/* ── 플로팅 버튼: AI 상담 ── */
.ai-float { background: var(--gradient-primary) !important; }

/* ── 푸터 패밀리 사이트 ── */
.lx-family { border-top: 1px solid var(--lx-line); margin-top: 26px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--text-muted); }
.lx-family b { color: var(--text-secondary); font-weight: 700; letter-spacing: .08em; font-size: 11px; }
.lx-family a { color: var(--text-secondary); }
.lx-family a:hover { color: #fff; }

/* ============================================================
   메인 (index.php)
   ============================================================ */
.lx-container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.lx-narrow { max-width: 820px; }
.lx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: transform .15s, box-shadow .15s, background .15s; }
.lx-btn-primary { background: var(--gradient-primary); color: #fff !important; box-shadow: 0 8px 24px rgba(124, 58, 237, .35); }
.lx-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(124, 58, 237, .45); }
.lx-btn-ghost { border: 1px solid var(--border-light); color: var(--text-primary) !important; background: rgba(255, 255, 255, .03); }
.lx-btn-ghost:hover { background: rgba(255, 255, 255, .07); }

.lx-hero { position: relative; overflow: hidden; padding: 72px 0 64px; background: var(--gradient-hero); border-bottom: 1px solid var(--lx-line); }
.lx-hero-glow { position: absolute; inset: auto -10% -40% auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, .18), transparent 65%); pointer-events: none; }
.lx-hero-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.lx-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--accent-light); background: rgba(124, 58, 237, .14); border: 1px solid rgba(124, 58, 237, .3); padding: 6px 12px; border-radius: 999px; }
.lx-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.12; font-weight: 900; letter-spacing: -0.045em; margin: 20px 0 16px; }
.lx-hero h1 em { font-style: normal; background: linear-gradient(90deg, #c4b5fd, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-hero p { color: var(--text-secondary); font-size: 17px; line-height: 1.7; max-width: 540px; }
.lx-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.lx-hero-facts { list-style: none; display: flex; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.lx-hero-facts li { display: flex; flex-direction: column; }
.lx-hero-facts b { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.lx-hero-facts span { font-size: 13px; color: var(--text-muted); }

.lx-hero-card { background: rgba(18, 18, 28, .85); border: 1px solid var(--lx-line); border-radius: 20px; padding: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(124, 58, 237, .08); }
.lx-mock-head { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--lx-line); margin-bottom: 6px; }
.lx-mock-head span { width: 9px; height: 9px; border-radius: 50%; background: #2c2b3a; }
.lx-mock-head b { margin-left: 8px; font-size: 13px; color: var(--text-secondary); }
.lx-mock-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--lx-line); }
.lx-mock-row > i { font-size: 22px; text-align: center; }
.lx-mock-row b { display: block; font-size: 14px; }
.lx-mock-row small { color: var(--text-muted); font-size: 12px; }
.lx-mock-row em { font-style: normal; font-weight: 800; font-size: 14px; color: var(--accent-light); }
.lx-mock-row em.ok { color: #4ade80; }
.lx-bar { height: 5px; background: rgba(255, 255, 255, .06); border-radius: 9px; margin-top: 7px; overflow: hidden; }
.lx-bar i { display: block; height: 100%; background: var(--gradient-primary); border-radius: 9px; }
.lx-mock-ai { margin-top: 12px; font-size: 13px; color: #e9e3ff; background: rgba(124, 58, 237, .14); border: 1px solid rgba(124, 58, 237, .28); border-radius: 12px; padding: 11px 13px; }
.lx-mock-ai i { color: var(--accent-light); margin-right: 4px; }

.lx-section { padding: 84px 0; }
.lx-alt { background: var(--bg-secondary); border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.lx-head { text-align: center; margin-bottom: 36px; }
.lx-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 850; letter-spacing: -0.04em; }
.lx-head p { color: var(--text-secondary); margin-top: 8px; }
.lx-more { text-align: center; margin-top: 22px; font-weight: 600; }

.lx-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lx-pf { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 20px 18px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--lx-line); color: var(--text-primary) !important; transition: border-color .15s, transform .15s; }
.lx-pf:hover { border-color: color-mix(in srgb, var(--pc) 60%, transparent); transform: translateY(-2px); }
.lx-pf > i { font-size: 26px; color: var(--pc); width: 30px; text-align: center; margin-top: 2px; }
.lx-pf b { display: block; font-size: 16px; }
.lx-pf small { display: block; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
.lx-pf span { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.lx-kr { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 22px 24px; border-radius: 16px; background: linear-gradient(90deg, rgba(124, 58, 237, .16), rgba(124, 58, 237, .04)); border: 1px solid rgba(124, 58, 237, .28); }
.lx-kr b { font-size: 18px; }
.lx-kr p { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }
.lx-flag { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: #fff; color: #5b21b6; margin-right: 8px; vertical-align: 2px; }

.lx-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: s; }
.lx-steps li { position: relative; padding: 24px 20px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--lx-line); counter-increment: s; }
.lx-steps li::before { content: counter(s); position: absolute; top: 16px; right: 18px; font-size: 32px; font-weight: 900; color: rgba(167, 139, 250, .14); }
.lx-steps i { font-size: 20px; color: var(--accent-light); }
.lx-steps b { display: block; font-size: 17px; margin-top: 14px; }
.lx-steps p { color: var(--text-secondary); font-size: 14px; margin-top: 6px; line-height: 1.6; }

.lx-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lx-feats > div { padding: 24px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--lx-line); }
.lx-feats i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(124, 58, 237, .15); color: var(--accent-light); font-size: 17px; }
.lx-feats b { display: block; font-size: 17px; margin-top: 14px; }
.lx-feats p { color: var(--text-secondary); font-size: 14px; line-height: 1.65; margin-top: 6px; }

.lx-faq details { border-bottom: 1px solid var(--lx-line); }
.lx-faq summary { list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; gap: 12px; }
.lx-faq summary::after { content: '+'; color: var(--text-muted); font-weight: 400; font-size: 20px; line-height: 1; }
.lx-faq details[open] summary::after { content: '−'; }
.lx-faq details > div { padding: 0 4px 18px; color: var(--text-secondary); line-height: 1.75; }
.lx-faq details > div a { text-decoration: underline; }

.lx-cta { padding: 80px 0; text-align: center; background: radial-gradient(700px 300px at 50% 0%, rgba(124, 58, 237, .22), transparent 70%); }
.lx-cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 850; letter-spacing: -0.04em; }
.lx-cta p { color: var(--text-secondary); margin-top: 10px; }

@media (max-width: 960px) {
    .lx-hero-in { grid-template-columns: 1fr; }
    .lx-hero-card { display: none; }
    .lx-platforms { grid-template-columns: repeat(2, 1fr); }
    .lx-steps { grid-template-columns: repeat(2, 1fr); }
    .lx-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .lx-container { padding: 0 16px; }
    .lx-hero { padding: 48px 0 44px; }
    .lx-hero p { font-size: 15.5px; }
    .lx-hero-cta .lx-btn { flex: 1; justify-content: center; }
    .lx-hero-facts { gap: 18px; }
    .lx-section { padding: 60px 0; }
    .lx-steps, .lx-feats { grid-template-columns: 1fr; }
    .lx-platforms { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lx-pf { padding: 14px 12px; flex-direction: column; gap: 8px; }
    .lx-pf small { font-size: 11.5px; }
    .lx-pf span { top: 12px; right: 10px; }
    .brand-by { display: none; }
}

/* 메인은 푸터 앞 여백 없이 */
body:has(.lx-hero) .main-content, body:has(.lx-hero) main { padding-bottom: 0 !important; min-height: 0 !important; }

/* 실시간 주문 현황 카드 */
.lx-live .lx-mock-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-muted); }
.lx-live-dot { width: 8px !important; height: 8px !important; background: #4ade80 !important; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: lxPulse 1.8s infinite; }
@keyframes lxPulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
#liveList { list-style: none; min-height: 230px; }
#liveList li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--lx-line); animation: lxIn .4s both; }
#liveList li > i { font-size: 19px; text-align: center; }
#liveList b { display: block; font-size: 14px; }
#liveList small { color: var(--text-muted); font-size: 12px; }
#liveList em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-light); background: rgba(124, 58, 237, .14); padding: 3px 9px; border-radius: 999px; }
#liveList em.ok { color: #4ade80; background: rgba(74, 222, 128, .12); }
#liveList .lx-live-empty { display: block; text-align: center; color: var(--text-secondary); padding: 60px 10px; border: 0; line-height: 1.8; }
@keyframes lxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 한국인 + 글로벌 */
.lx-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.lx-dual .lx-kr { margin-top: 0; color: var(--text-primary) !important; flex-wrap: nowrap; }
.lx-dual .lx-kr > i { color: var(--accent-light); }
.lx-dual .lx-kr:hover { border-color: rgba(167, 139, 250, .6); }
.lx-gl { background: linear-gradient(90deg, rgba(56, 189, 248, .12), rgba(56, 189, 248, .03)) !important; border-color: rgba(56, 189, 248, .28) !important; }
.lx-gl > i { color: #7dd3fc !important; }
.lx-flag-gl { background: #e0f2fe !important; color: #0369a1 !important; }
@media (max-width: 960px) { .lx-hero-card.lx-live { display: block; margin-top: 8px; } .lx-dual { grid-template-columns: 1fr; } }

/* 주문 현황: 끊김 없이 위로 흐르는 목록 */
#liveList.rolling { height: 300px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
#liveList.rolling .lx-roll { animation: lxRoll calc(var(--n) * 3.2s) linear infinite; }
#liveList.rolling:hover .lx-roll { animation-play-state: paused; }
#liveList .lx-roll li { animation: none; }
@keyframes lxRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
#liveList li.fresh { background: linear-gradient(90deg, rgba(74, 222, 128, .14), transparent); border-radius: 10px; }
.lx-toast { position: fixed; left: 20px; bottom: 24px; z-index: 900; display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 40px); padding: 12px 16px; border-radius: 14px; background: rgba(20, 20, 30, .96); border: 1px solid rgba(167, 139, 250, .35); color: var(--text-primary); font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); transform: translateY(140%); opacity: 0; transition: transform .35s, opacity .35s; pointer-events: none; }
.lx-toast.show { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #liveList.rolling .lx-roll { animation: none; } #liveList.rolling { overflow-y: auto; } }

/* 상단 메뉴: 로고 줄바꿈 금지 + 노트북 폭에서 메뉴 간격 압축 (로그인 시 메뉴가 많아 로고가 두 줄로 깨지던 문제) */
.nav-logo { white-space: nowrap; flex-shrink: 0; }
.nav-container { gap: 12px; }
.nav-links { min-width: 0; }
.nav-link { white-space: nowrap; }
@media (max-width: 1360px) {
    .brand-by { display: none; }
    .nav-links .nav-link { padding-left: 9px; padding-right: 9px; font-size: .86rem; }
}
@media (max-width: 1180px) {
    .nav-links .nav-link i { display: none; }
    .nav-links .nav-link { padding-left: 8px; padding-right: 8px; }
}