/* ============================================================
   LogCenter 제품 랜딩 전용 스타일 (products/logcenter.html)
   색은 전부 theme.css 토큰 참조 — hex 하드코딩 없음(원클릭 재테마 유지).
============================================================ */
:root{ --lc-maxw:1160px; }

.lc{
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6;
}
.lc *{box-sizing:border-box}
.lc img{max-width:100%; display:block}
.lc a{color:inherit; text-decoration:none}
.lc .wrap{max-width:var(--lc-maxw); margin:0 auto; padding:0 28px}
.lc .mono{font-family:"IBM Plex Mono",monospace}

@keyframes lc-grid{0%{background-position:0 0}100%{background-position:0 -46px}}
@keyframes lc-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* 공통 섹션 헤더 */
.lc .eb{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.08em; font-weight:600; color:var(--accent); margin:0 0 12px}
.lc-sec{padding:88px 0}
.lc-sec h2{margin:0 0 14px; font-size:34px; font-weight:800; letter-spacing:-.025em; line-height:1.18}
.lc-sec .sd{margin:0 auto 44px; font-size:17px; line-height:1.7; color:var(--muted); max-width:660px}
.lc-sec.center{text-align:center}
.lc-sec.soft{background:var(--soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}

/* 버튼 */
.lc-btns{display:flex; gap:13px; flex-wrap:wrap}
/* .lc a{color:inherit}(0,1,1)보다 명시도를 높여(0,2,x) 버튼 색이 항상 이기도록 .lc 로 스코프 */
.lc .lc-b1{font-size:15.5px; font-weight:700; color:#fff; background:var(--accent); padding:14px 24px; border-radius:11px; box-shadow:0 12px 26px -12px rgb(from var(--accent) r g b / .5); transition:transform .15s, box-shadow .15s}
.lc .lc-b1:hover{transform:translateY(-2px); box-shadow:0 16px 32px -12px rgb(from var(--accent) r g b / .6)}
.lc .lc-b2{font-size:15.5px; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border); padding:14px 24px; border-radius:11px; transition:border-color .15s}
.lc .lc-b2:hover{border-color:var(--accent)}
.lc .lc-b1.on-dark{color:#0B1526; background:#fff; box-shadow:none}
.lc .lc-b2.on-dark{color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22)}
.lc .lc-b2.on-dark:hover{border-color:rgba(255,255,255,.45)}

/* ── 1. HERO (dark) ── */
.lc-hero{position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 100% at 82% -10%, #16305F 0%, #0B1526 55%, #070E1B 100%)}
.lc-hero .grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px; animation:lc-grid 8s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 92%); mask-image:linear-gradient(to bottom,#000 0%,transparent 92%)}
.lc-hero .glow{position:absolute; top:-160px; right:-120px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgb(from var(--accent) r g b / .42), transparent 65%); filter:blur(24px)}
.lc-hero .inner{position:relative; max-width:var(--lc-maxw); margin:0 auto; padding:92px 28px 84px}
.lc-eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.05em; font-weight:600; color:#9FE7C6; background:rgb(from var(--accent) r g b / .14); border:1px solid rgb(from var(--accent) r g b / .38); padding:7px 14px; border-radius:999px; margin-bottom:22px}
.lc-eyebrow .dt{width:7px; height:7px; border-radius:50%; background:#33E39F; animation:lc-dot 1.6s ease-in-out infinite}
.lc-hero h1{margin:0 0 14px; font-size:58px; font-weight:800; letter-spacing:-.03em; line-height:1.06}
.lc-hero .headline{margin:0 0 20px; font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1.35; max-width:760px}
.lc-hero .headline .g{background:linear-gradient(100deg,#7DDCAF,#C6ECD9); -webkit-background-clip:text; background-clip:text; color:transparent}
.lc-hero p{margin:0; font-size:18px; line-height:1.7; color:#B7C3D8; max-width:620px}
.lc-hero .lc-btns{margin-top:34px}
.lc-hero .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; padding-top:30px; border-top:1px solid rgba(150,175,220,.16)}
.lc-hero .stats .n{font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:600; color:#fff; letter-spacing:-.01em}
.lc-hero .stats .l{font-size:12.5px; color:#8394AE; margin-top:4px; line-height:1.45}

/* ── 2. TRUST 스트립 ── */
.lc-trust{background:var(--soft); border-bottom:1px solid var(--border)}
.lc-trust .inner{max-width:var(--lc-maxw); margin:0 auto; padding:22px 28px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center}
.lc-trust .lbl{font-size:13px; color:var(--muted); font-weight:600}
.lc-trust .chip{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink); background:var(--bg); border:1px solid var(--border); padding:8px 16px; border-radius:10px}
.lc-trust .chip .mono{font-size:12px; color:var(--muted); font-weight:500}

/* ── 3. FEATURES 그리드 ── */
.lc-features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:left}
.lc-feat{position:relative; border:1px solid var(--border); border-radius:16px; padding:26px; background:linear-gradient(180deg,var(--bg),var(--panel2)); transition:box-shadow .2s, transform .2s, border-color .2s}
.lc-feat:hover{border-color:rgb(from var(--accent) r g b / .4); box-shadow:0 18px 44px -24px rgb(from var(--accent) r g b / .35); transform:translateY(-3px)}
.lc-feat .ic{width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.lc-feat h3{margin:0 0 7px; font-size:17.5px; font-weight:800; letter-spacing:-.01em}
.lc-feat p{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted)}

/* ── 4. ARCHITECTURE / DATA FLOW ── */
.lc-flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap; text-align:left}
.lc-flow .st{flex:1; min-width:150px; background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:22px 20px}
.lc-flow .st .n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); font-weight:600; margin-bottom:9px}
.lc-flow .st h4{margin:0 0 6px; font-size:16px; font-weight:800}
.lc-flow .st p{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted)}
.lc-flow .ar{display:flex; align-items:center; padding:0 10px; color:var(--accent); font-size:22px; font-weight:700}
.lc-arch-note{margin:22px auto 0; max-width:760px; text-align:center; font-size:14px; color:var(--muted)}
.lc-arch-note b{color:var(--ink)}

/* ── 5. DEEP-DIVE (텍스트+스크린샷) ── */
.lc-deep .row{display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; padding:34px 0}
.lc-deep .row+.row{border-top:1px solid var(--border)}
.lc-deep .row.rev{grid-template-columns:1.15fr 1fr}
.lc-deep .row.rev .txt{order:2}
.lc-deep .tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:5px 11px; border-radius:999px; margin-bottom:14px}
.lc-deep h3{margin:0 0 12px; font-size:25px; font-weight:800; letter-spacing:-.02em; line-height:1.3}
.lc-deep p{margin:0 0 16px; font-size:15.5px; line-height:1.72; color:var(--muted)}
.lc-deep ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.lc-deep ul li{position:relative; padding-left:26px; font-size:14.5px; color:var(--ink)}
.lc-deep ul li::before{content:""; position:absolute; left:0; top:6px; width:15px; height:15px; border-radius:50%; background:var(--accent-soft);
  background-image:linear-gradient(var(--accent),var(--accent)); -webkit-mask:none}
.lc-deep ul li svg{position:absolute; left:0; top:3px}
.lc-shot{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--bg); box-shadow:0 26px 60px -34px rgba(20,50,90,.5)}
.lc-shot .bar{display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--border); background:var(--soft)}
.lc-shot .bar .d{width:11px; height:11px; border-radius:50%}
.lc-shot .bar .cap{margin-left:8px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.lc-shot img{width:100%; background:#0d1117}

/* ── 6. DATA SOURCES ── */
.lc-src{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left}
.lc-src .s{display:flex; gap:14px; align-items:flex-start; border:1px solid var(--border); border-radius:14px; padding:20px; background:var(--bg)}
.lc-src .s .ic{flex:none; width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center}
.lc-src .s h4{margin:0 0 4px; font-size:15.5px; font-weight:800}
.lc-src .s p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}

/* ── 7. METRICS (dark) ── */
.lc-metrics{background:radial-gradient(120% 130% at 15% 0%, #16305F, #0B1526 62%); color:#fff}
.lc-metrics .inner{max-width:var(--lc-maxw); margin:0 auto; padding:72px 28px; text-align:center}
.lc-metrics .eb{color:#9FE7C6}
.lc-metrics h2{color:#fff; margin:0 0 40px; font-size:30px; font-weight:800; letter-spacing:-.02em}
.lc-mgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.lc-metric{border:1px solid rgba(150,175,220,.2); border-radius:16px; padding:28px 18px; background:rgba(255,255,255,.03)}
.lc-metric .n{font-family:"IBM Plex Mono",monospace; font-size:38px; font-weight:600; line-height:1; background:linear-gradient(100deg,#7DDCAF,#C6ECD9); -webkit-background-clip:text; background-clip:text; color:transparent}
.lc-metric .u{font-size:14px; color:#9FE7C6; margin-top:4px; font-weight:700}
.lc-metric .l{font-size:13.5px; color:#8394AE; margin-top:8px; line-height:1.5}
.lc-note{font-size:12px; color:#66748C; margin-top:26px}

/* ── 8. USE CASES ── */
.lc-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:left}
.lc-case{position:relative; border:1px solid var(--border); border-radius:16px; padding:26px; background:var(--bg); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s}
.lc-case::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent)}
.lc-case:hover{border-color:rgb(from var(--accent) r g b / .4); transform:translateY(-3px); box-shadow:0 18px 44px -26px rgb(from var(--accent) r g b / .34)}
.lc-case .who{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); margin-bottom:10px}
.lc-case h3{margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:-.01em}
.lc-case p{margin:0; font-size:14px; line-height:1.6; color:var(--muted)}

/* ── 9. WHY (차별점) ── */
.lc-why{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; text-align:left; max-width:900px; margin:0 auto}
.lc-why .w{display:flex; gap:15px; align-items:flex-start; border:1px solid var(--border); border-radius:14px; padding:22px; background:var(--bg)}
.lc-why .w .k{flex:none; width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff; font-family:"IBM Plex Mono",monospace; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px}
.lc-why .w h4{margin:0 0 5px; font-size:16px; font-weight:800}
.lc-why .w p{margin:0; font-size:14px; color:var(--muted); line-height:1.6}

/* ── 10. COMPLIANCE ── */
.lc-comp{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 auto 20px; max-width:820px}
.lc-comp .badge{display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--ink); background:var(--bg); border:1px solid var(--border); padding:12px 18px; border-radius:12px}
.lc-comp .badge .ic{color:var(--accent)}
.lc-comp-note{max-width:720px; margin:0 auto; text-align:center; font-size:14.5px; line-height:1.7; color:var(--muted)}

/* ── 11. COMPARISON TABLE ── */
.lc-tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:16px; max-width:940px; margin:0 auto}
.lc-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px}
.lc-table th,.lc-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
.lc-table thead th{background:var(--soft); font-size:13px; font-weight:800; letter-spacing:-.01em}
.lc-table thead th.us{color:var(--accent)}
.lc-table td:first-child,.lc-table th:first-child{font-weight:700; white-space:nowrap; color:var(--ink)}
.lc-table tbody tr:last-child td{border-bottom:none}
.lc-table .us-col{background:rgb(from var(--accent) r g b / .05)}
.lc-table .yes{color:var(--accent); font-weight:700}
.lc-table .no{color:var(--muted)}
.lc-table td .mono{font-size:12.5px; color:var(--muted); display:block; margin-top:2px; font-weight:400}

/* ── 12. RESOURCES ── */
.lc-res{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:left}
.lc-rc{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; padding:24px; background:var(--bg); transition:border-color .2s, transform .2s, box-shadow .2s}
.lc-rc:hover{border-color:rgb(from var(--accent) r g b / .4); transform:translateY(-3px); box-shadow:0 16px 40px -26px rgb(from var(--accent) r g b / .3)}
.lc-rc .kx{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); margin-bottom:10px}
.lc-rc h3{margin:0 0 6px; font-size:16.5px; font-weight:800}
.lc-rc p{margin:0 0 16px; font-size:13.5px; color:var(--muted); line-height:1.6}
.lc-rc .go{margin-top:auto; font-size:13.5px; font-weight:700; color:var(--accent)}

/* ── 13. FINAL CTA (dark) ── */
.lc-final{background:radial-gradient(120% 120% at 20% 0%, #1B366B, #0B1526 60%); color:#fff}
.lc-final .inner{max-width:900px; margin:0 auto; padding:82px 28px; text-align:center}
.lc-final h2{margin:0 0 16px; font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.2}
.lc-final p{margin:0 auto 30px; font-size:17px; line-height:1.7; color:#B7C3D8; max-width:540px}
.lc-final .lc-btns{justify-content:center}

/* ── 반응형 ── */
@media(max-width:900px){
  .lc-hero h1{font-size:42px}
  .lc-hero .headline{font-size:22px}
  .lc-features,.lc-src,.lc-cases,.lc-res,.lc-why{grid-template-columns:1fr 1fr}
  .lc-mgrid{grid-template-columns:1fr 1fr}
  .lc-deep .row,.lc-deep .row.rev{grid-template-columns:1fr; gap:24px}
  .lc-deep .row.rev .txt{order:0}
  .lc-flow .ar{transform:rotate(90deg); padding:6px 0; width:100%; justify-content:center}
}
@media(max-width:560px){
  .lc-sec{padding:60px 0}
  .lc-sec h2{font-size:27px}
  .lc-hero h1{font-size:34px}
  .lc-features,.lc-src,.lc-cases,.lc-res,.lc-why,.lc-mgrid{grid-template-columns:1fr}
  .lc-hero .stats{gap:14px}
}

/* ============================================================
   시각 임팩트 요소 (실제 제품 데이터 기반) — 무의존 CSS/SVG/JS
   전부 theme.css 토큰 참조. prefers-reduced-motion 대응(파일 하단).
============================================================ */

/* ── HERO 2-컬럼(텍스트 + 라이브 로그 스트림) ── */
.lc-hero.has-visual .inner{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.lc-hero.has-visual .hero-copy{min-width:0}
@media(max-width:940px){
  .lc-hero.has-visual .inner{grid-template-columns:1fr; gap:36px}
}

/* ── 라이브 로그 스트림(터미널) ── */
.lc-stream{border:1px solid rgba(150,175,220,.22); border-radius:14px; overflow:hidden;
  background:#0A0F1A; box-shadow:0 34px 70px -34px rgba(0,0,0,.65)}
.lc-stream .sb{display:flex; align-items:center; gap:7px; padding:10px 14px;
  border-bottom:1px solid rgba(150,175,220,.16); background:rgba(255,255,255,.03)}
.lc-stream .sb .d{width:10px; height:10px; border-radius:50%}
.lc-stream .sb .cap{margin-left:6px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:#7C8DA8}
.lc-stream .sb .live{margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:#33E39F; font-weight:600}
.lc-stream .sb .live .dt{width:7px; height:7px; border-radius:50%; background:#33E39F; animation:lc-dot 1.5s ease-in-out infinite}
.lc-stream .rows{padding:13px 15px; height:300px; overflow:hidden;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; line-height:1.85; color:#8EA0BC}
.lc-logrow{display:flex; gap:9px; white-space:nowrap; opacity:0; transform:translateY(6px); animation:lc-login .35s ease forwards}
.lc-logrow .ts{color:#5B6E8C}
.lc-logrow .kk{color:#5B6E8C}
.lc-logrow .src{color:#7FB2E8}
.lc-logrow .dst{color:#E8A87F}
.lc-logrow .pr{font-weight:700}
.lc-logrow .pr.tcp{color:#4FC3F7} .lc-logrow .pr.udp{color:#B39DEB} .lc-logrow .pr.icmp{color:#E0A93E}
.lc-logrow .seal{margin-left:auto; display:inline-flex; align-items:center; gap:5px; color:#33E39F; font-size:10.5px; font-weight:600;
  opacity:0; animation:lc-seal .4s ease .25s forwards}
/* SIEM 모드: 탐지·상관분석 피드(심각도·MITRE·룰·대응) */
.lc-logrow .sev{font-weight:700}
.lc-logrow .sev.high{color:#EF6B6B} .lc-logrow .sev.med{color:#E0A93E} .lc-logrow .sev.low{color:#4FC3F7}
.lc-logrow .tid{color:#9FE7C6; font-weight:600}
.lc-logrow .dsc{color:#B7C6DE; overflow:hidden; text-overflow:ellipsis}
.lc-logrow .act{margin-left:auto; padding-left:10px; font-size:10.5px; font-weight:700; opacity:0; animation:lc-seal .4s ease .2s forwards}
.lc-logrow .act.alert{color:#EF6B6B} .lc-logrow .act.ticket{color:#33E39F} .lc-logrow .act.mitre{color:#7FB2E8} .lc-logrow .act.watch{color:#8FA2BE}
@keyframes lc-login{to{opacity:1; transform:none}}
@keyframes lc-seal{from{opacity:0; transform:translateX(4px)} to{opacity:.9; transform:none}}
@media(max-width:940px){ .lc-stream .rows{height:240px} }

/* ── 메트릭 카운트업(기존 .lc-metric 재사용, 값만 JS로) ── */
.lc-metric .n[data-to]{font-variant-numeric:tabular-nums}

/* ── MITRE ATT&CK 커버리지 히트맵 ── */
.lc-heat{max-width:var(--lc-maxw); margin:0 auto; text-align:left}
.lc-heat .htop{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.lc-heat .hleg{display:flex; gap:16px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.lc-heat .hleg i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.lc-heatcols{display:grid; grid-template-columns:repeat(14,1fr); gap:6px}
.lc-heatcol{min-width:0}
.lc-heatcol .th{font-family:"IBM Plex Mono",monospace; font-size:9px; color:var(--muted); text-align:center;
  height:30px; line-height:1.15; overflow:hidden; margin-bottom:6px}
.lc-heatcol .th b{display:block; font-size:13px; color:var(--ink); font-weight:800}
.lc-heatcells{display:flex; flex-direction:column; gap:6px}
.lc-cell{aspect-ratio:1; border-radius:4px; background:var(--border); opacity:0; transform:scale(.6)}
.lc-cell.on{opacity:1; transform:scale(1); transition:opacity .4s, transform .4s, background .5s}
.lc-heat-note{margin:20px auto 0; max-width:760px; text-align:center; font-size:13.5px; color:var(--muted)}
@media(max-width:900px){
  .lc-heatcols{grid-template-columns:repeat(14,minmax(34px,1fr)); overflow-x:auto; padding-bottom:8px}
}

/* ── 글로벌 위협 인텔리전스 패널(CTI) ── */
.lc-threat{max-width:var(--lc-maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid rgba(150,175,220,.2); border-radius:18px; overflow:hidden; text-align:left;
  background:radial-gradient(120% 130% at 15% 0%, #16305F, #0B1526 62%)}
.lc-threat .tcol{padding:32px 30px}
.lc-threat .tcol+.tcol{border-left:1px solid rgba(150,175,220,.18)}
.lc-threat .tcap{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:#9FE7C6; font-weight:700; margin-bottom:16px}
.lc-threat .tbar{display:grid; grid-template-columns:46px 1fr 68px; align-items:center; gap:11px; margin:10px 0; font-size:13px}
.lc-threat .tbar .cc{font-family:"IBM Plex Mono",monospace; color:#B7C3D8; font-weight:700}
.lc-threat .tbar .track{height:8px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden}
.lc-threat .tbar .fill{height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--accent),#33E39F); transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.lc-threat .tbar .vv{text-align:right; font-family:"IBM Plex Mono",monospace; color:#B7C3D8; font-variant-numeric:tabular-nums}
.lc-threat .talert{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:#9FE7C6}
.lc-threat .talert .dt{width:7px; height:7px; border-radius:50%; background:#33E39F; animation:lc-dot 1.5s ease-in-out infinite}
.lc-threat .tbig{font-family:"IBM Plex Mono",monospace; font-size:40px; font-weight:600; line-height:1; letter-spacing:-.01em;
  background:linear-gradient(100deg,#7DDCAF,#C6ECD9); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums}
.lc-threat .tsub{font-size:12.5px; color:#8394AE; margin-top:8px}
.lc-threat .spark{width:100%; height:78px; margin-top:18px; display:block}
@media(max-width:760px){
  .lc-threat{grid-template-columns:1fr}
  .lc-threat .tcol+.tcol{border-left:none; border-top:1px solid rgba(150,175,220,.18)}
}

/* ── 스포트라이트(마우스 추종) + 스크롤 리빌 ── */
.lc-feat,.lc-case,.lc-rc,.lc-why .w{overflow:hidden}
.lc-feat::after,.lc-case::after,.lc-rc::after,.lc-why .w::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; z-index:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgb(from var(--accent) r g b / .13), transparent 60%)}
.lc-feat:hover::after,.lc-case:hover::after,.lc-rc:hover::after,.lc-why .w:hover::after{opacity:1}
.lc-feat>*,.lc-case>*,.lc-rc>*,.lc-why .w>*{position:relative; z-index:1}
/* .lc-why .w 는 position 미지정 → 스포트라이트 위해 relative 부여 */
.lc-why .w{position:relative}

/* JS 있을 때만 숨김(no-JS 폴백: 그냥 보임) */
.lc-reveal{opacity:0; transform:translateY(20px)}
.lc-reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* ── 데이터 플로우 파이프라인(순차 점등: 패킷이 단계를 통과) ── */
.lc-flow .st{transition:border-color .4s ease, box-shadow .4s ease, background .4s ease}
.lc-flow .st.hot{border-color:rgb(from var(--accent) r g b / .7);
  box-shadow:0 0 0 1px rgb(from var(--accent) r g b / .3), 0 18px 44px -22px rgb(from var(--accent) r g b / .55);
  background:linear-gradient(180deg, var(--bg), var(--accent-soft))}
.lc-flow .st.hot .n{color:var(--accent-strong)}

@media (prefers-reduced-motion: reduce){
  .lc-flow .st{transition:none}
  .lc-logrow,.lc-cell,.lc-stream .sb .live .dt,.lc-threat .talert .dt{animation:none !important}
  /* 등장 애니메이션이 꺼져도 행·봉인 라벨은 보이도록 최종 상태로 고정 */
  .lc-logrow{opacity:1 !important; transform:none !important}
  .lc-logrow .seal,.lc-logrow .act{opacity:.9 !important; transform:none !important}
  .lc-reveal{opacity:1 !important; transform:none !important}
  .lc-cell{opacity:1 !important; transform:none !important}
  .lc-threat .tbar .fill{transition:none !important}
}