/* ==========================================================================
   DEXWEAVER — Override Skin: "Aurora Indigo Glass" (오로라 인디고 글래스)
   DARK premium glassmorphism — deep indigo-violet base, frosted translucent
   surfaces (backdrop-blur), dual glow CYAN #22d3ee + VIOLET #8b5cf6.
   전체 사이트(사이드바·ABOUT·통계 포함)를 다크 인디고 글래스로 통일.
   load order: styles.redesign.css → styles.redesign3.css → THIS (wins last).
   레이아웃/HTML 불변 — 색·표면·폰트·라디우스·글로우·보더만 리스킨.
   ========================================================================== */
/* 폰트 @import 제거(BMAD QA): 실렌더는 Inter/Noto이며 HTML <head>의 Google Fonts <link>로 이미 로드됨.
   Pretendard·Space Grotesk는 아래 body*{font-family …!important}에 덮여 미사용 → 다운로드 낭비·렌더블로킹 제거. */

/* ==========================================================================
   TOKENS — 깊은 인디고-바이올렛 + 듀얼 시안/바이올렛 글로우
   ========================================================================== */
:root {
    /* "라이트" 표면 역할은 모두 다크 글래스로 전환 */
    --bg: #121032;             /* 사이트 베이스 — 깊은 인디고 */
    --bg-soft: #171538;        /* 살짝 밝은 글래스 패널 */
    --bg-soft-2: #15123040;    /* 더 깊은 와시 */
    --ink: #f3f2ff;            /* 헤드라인 — 거의 흰 라일락 */
    --text: rgba(232, 230, 255, 0.82);
    --muted: rgba(214, 216, 242, 0.82);  /* 대비 상향 확정값(중복 정의 통합) */
    --line: rgba(160, 150, 255, 0.14);   /* 글래스 헤어라인(라이트 보더 대체) */

    /* 듀얼 액센트 — 바이올렛(주) + 시안(보조 글로우) */
    --accent: #8b5cf6;
    --accent-ink: #b9a6ff;     /* 다크 위 밝은 바이올렛 텍스트 */
    --accent-soft: rgba(139, 92, 246, 0.14);
    --cyan: #22d3ee;

    /* 다크 섹션 — 인디고 글래스 계층 */
    --navy: #100d35;
    --navy-1: #141139;
    --navy-2: #1a174a;
    --navy-card: rgba(34, 32, 78, 0.55);  /* 반투명 프로스트 글래스 */

    /* 라디우스 — 더 크고 부드럽게 */
    --r-sm: 11px;
    --r: 16px;
    --r-lg: 26px;
    --r-pill: 999px;

    /* 섀도우 + 듀얼 글로우 */
    --shadow-sm: 0 1px 2px rgba(4, 2, 20, 0.5), 0 4px 18px rgba(4, 2, 20, 0.4);
    --shadow: 0 18px 48px rgba(4, 2, 20, 0.55);
    --shadow-lg: 0 36px 90px rgba(4, 2, 20, 0.7);
    --glow: 0 0 14px rgba(34, 211, 238, 0.16), 0 4px 14px rgba(4, 2, 20, 0.45);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 전역 베이스 — 인디고 그라데이션 + 오로라 글로우(은은) */
body {
    font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif;
    color: var(--text);
    background:
        radial-gradient(120% 70% at 80% -10%, rgba(34, 211, 238, 0.07), transparent 55%),
        radial-gradient(120% 80% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
        var(--bg);
}

/* ==========================================================================
   TYPOGRAPHY — 본문/헤드라인은 Pretendard(한글 안전), 라틴 라벨만 Space Grotesk
   ========================================================================== */
.main-title, .tech-main-title, .about-main-title, .identity-title,
.hero-content .main-title, .ps-title, .sc-name {
    font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.022em;
    font-weight: 800;
    color: var(--ink);
}

/* 로고 — 라틴 전용, 기하학 산세리프 */
.logo {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
}
/* 사이드바 로고 — CI 워드마크 이미지 */
.logo img {
    height: 19px;
    width: auto;
    display: block;
}
.mobile-bar .logo img { height: 16px; }

/* 라벨/아이브로우 — 라틴 대문자, 넓은 트래킹 (한글 섞이지 않는 영문 토큰 전용) */
.section-label, .eyebrow, .badge-tech, .feature-num, .arch-tag, .rm-tag,
.mh-tag, .collab-badge, .sig-live, .ps-idx, .td-title, .td-status {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}
.section-label {
    color: var(--accent-ink);
    border-left-color: var(--accent);
}
.section-label.neon-blue { color: var(--cyan); border-left-color: var(--cyan); }
/* ==========================================================================
   섹션 큰 제목 제거(index5) 이후 간격 재정비
   — 큰 제목이 없어진 만큼 라벨이 섹션 구분자 역할을 대신한다
   ========================================================================== */
/* 라벨 → 콘텐츠 간격 (제목이 끼어 있을 때 기준인 22/40px는 너무 좁음) */
.section-label + .stat-grid,
.section-label + .phm-grid,
.section-label + figure,
.section-label + .roadmap,
.section-label + .tech-sub-copy,
.section-label + .mirror-grid,
.section-label + .applied-fig { margin-top: 32px; }
/* tech-content-wrap 으로 감싸인 경우는 내부 첫 요소에 */
.section-label + .tech-content-wrap > *:first-child:not(.tech-main-title) { margin-top: 32px; }

/* 한 섹션 안에 라벨 블록이 둘 이상 있을 때 — 두 번째 이후 라벨은 위를 크게 띄워 경계를 만듦
   (세로 막대 border-left 가 있는 요소라 border-top 은 쓰지 않고 여백으로만 구분) */
.identity-stack + .section-label,
.mirror-grid + .section-label,
.stat-grid + .section-label { margin-top: clamp(72px, 9vw, 116px); }

/* ==========================================================================
   검증 파트너 로고 스트립
   — 원본 CI 색을 유지하되, 다크 배경에서 로고가 묻히지 않도록 밝은 카드 위에 배치
   ========================================================================== */
.partner-strip {
    margin-top: 34px; text-align: center;
    padding: 28px 24px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r);
}
.partner-strip-label {
    display: block; margin-bottom: 20px;
    font-size: .74rem; font-weight: 700; letter-spacing: .16em;
    color: var(--muted); text-transform: uppercase;
}
.partner-logos {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
/* 카드 없이 심볼 + 텍스트만 — 각 CI의 원본 색이 포인트가 됨 */
.partner-logos li {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 4px 8px;
}
/* 심볼마다 종횡비가 달라(원형/가로형) 높이만 맞추면 시각적 크기가 어긋남 → 개별 보정 */
.partner-logos img { height: 38px; width: auto; object-fit: contain; }
.partner-logos img[src*="sym-knu"] { height: 52px; }
.partner-logos img[src*="sym-remplir"] { height: 34px; }
/* 심볼 높이가 달라도 이름 줄이 나란히 오도록 */
.partner-logos li { min-height: 0; }
.partner-logos .sym-box { height: 56px; display: flex; align-items: center; justify-content: center; }
.partner-logos b { font-size: .92rem; font-weight: 600; color: var(--ink); }
.partner-logos span { font-size: .78rem; letter-spacing: .02em; color: var(--muted); }
@media (max-width: 760px) {
    .partner-logos { grid-template-columns: 1fr; }
}

/* 섹션 도입 문단 중앙 정렬 */
.tech-sub-copy.is-centered { text-align: center; margin-left: auto; margin-right: auto; max-width: 78ch; }
/* OUR IDENTITY — 좌측에 제목이 없어져 2열을 세로 스택으로 */
.identity-stack .section-label { margin-bottom: 26px; }
.identity-stack .identity-desc { max-width: 74ch; }
.identity-stack .identity-closer { margin-top: 26px; }
.blue-text { color: var(--accent-ink); }

/* ==========================================================================
   SIDEBAR — 라이트 → 다크 인디고 글래스로 전환
   ========================================================================== */
.sidebar {
    background:
        linear-gradient(180deg, rgba(27, 24, 64, 0.92), rgba(16, 13, 53, 0.94));
    border-right: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.nav-link { color: var(--muted); letter-spacing: 0.1em; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::before { background: linear-gradient(180deg, var(--cyan), var(--accent)); box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); }

.demo-btn {
    color: var(--accent-ink) !important;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: var(--r-sm);
    background: rgba(139, 92, 246, 0.06);
}
.demo-btn:hover {
    background: linear-gradient(135deg, var(--accent), #6d4ee0);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.4);
}

.sidebar-footer { border-top: 1px solid var(--line); color: var(--muted); }
.biz-name { color: var(--ink); }
.biz-info p { color: var(--muted); }
.biz-name-en { font-weight: 500; opacity: 0.66; letter-spacing: 0.02em; }
.biz-addr-en { font-size: 0.68rem; opacity: 0.62; letter-spacing: 0.01em; margin-top: 2px; }
.biz-mail { margin-top: 8px; }
.biz-mail a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.biz-mail a:hover { border-bottom-color: var(--accent-ink); }
.copyright { color: rgba(196, 197, 232, 0.4); }

/* 모바일 상단바 — 다크 글래스 */
.mobile-bar {
    background: rgba(18, 16, 50, 0.82) !important;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line) !important;
}
.mobile-bar .logo { color: var(--ink); }
.nav-toggle { color: var(--ink) !important; }
.nav-backdrop { background: rgba(4, 2, 20, 0.6) !important; }

/* 페이지 베이스(라이트였던 곳) → 다크로 */
.sub-page { background: transparent; }

/* ==========================================================================
   BUTTONS — 바이올렛 그라데이션 프라이머리 + 글래스 세컨더리
   ========================================================================== */
.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #6d4ee0 100%);
    color: #fff;
    border-radius: var(--r-sm);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.35);
}
.btn-primary:hover { box-shadow: 0 6px 14px rgba(88, 52, 180, 0.4); }
.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover { border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.08); }

.btn-cyan {
    color: #04121a;
    background: linear-gradient(135deg, var(--cyan), #38e0f5);
    border-radius: var(--r-sm);
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(34, 211, 238, 0.28);
}
.btn-cyan:hover { box-shadow: 0 16px 38px rgba(34, 211, 238, 0.42); }
.btn-outline-cyan {
    color: var(--cyan);
    border: 1px solid rgba(34, 211, 238, 0.5);
    border-radius: var(--r-sm);
    background: rgba(34, 211, 238, 0.05);
}
.btn-outline-cyan:hover { background: rgba(34, 211, 238, 0.12); }

.submit-btn {
    background: linear-gradient(135deg, var(--accent), #6d4ee0);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.4);
}
.submit-btn:hover { background: linear-gradient(135deg, #9d70ff, var(--accent)); }

/* ==========================================================================
   HOME HERO — full-bleed dark → 인디고 글래스 + 바이올렛→시안 글로우
   (styles.redesign3.css 의 hero 규칙 위에 덮어씀)
   ========================================================================== */
.hero-layout {
    background:
        radial-gradient(90% 120% at 0% 50%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(80% 120% at 100% 50%, rgba(34, 211, 238, 0.10), transparent 60%),
        #0e0d2f;
}
.hero-layout .badge-tech {
    color: #cbbaff;
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.5);
}
.hero-content .main-title { color: #fff; }
.hero-content .description { color: #dcdaf5; }

.hero-layout .btn-primary {
    background: linear-gradient(135deg, var(--accent), #6d4ee0);
    color: #fff;
    box-shadow: 0 3px 8px rgba(88, 52, 180, 0.3);
}
.hero-layout .btn-primary:hover { background: linear-gradient(135deg, #9d70ff, var(--accent)); transform: translateY(-3px); }
.hero-layout .btn-secondary { color: #fff; border-color: rgba(199, 196, 255, 0.45); background: rgba(255, 255, 255, 0.055); }
.hero-layout .btn-secondary:hover { border-color: rgba(34, 211, 238, 0.6); background: rgba(34, 211, 238, 0.08); }

.hero-layout .hero-keywords .kw {
    color: #e8e6ff;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(160, 150, 255, 0.3);
    animation: kwGlowAi 5s ease-in-out infinite;
}
.hero-layout .hero-keywords .kw:nth-child(1) { animation-delay: 0s; }
.hero-layout .hero-keywords .kw:nth-child(3) { animation-delay: 1.2s; }
.hero-layout .hero-keywords .kw:nth-child(5) { animation-delay: 2.4s; }
.hero-layout .hero-keywords .kw.lead {
    color: #04121a;
    background: linear-gradient(135deg, var(--cyan), #38e0f5);
    border-color: transparent;
    animation: kwGlowLeadAi 5s ease-in-out infinite;
}
.hero-layout .hero-keywords .arrow { color: rgba(199, 196, 255, 0.4); }
@keyframes kwGlowAi {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); border-color: rgba(160, 150, 255, 0.3); }
    50% { box-shadow: none; border-color: rgba(139, 92, 246, 0.5); }
}
@keyframes kwGlowLeadAi {
    0%, 100% { box-shadow: 0 2px 5px rgba(12, 90, 105, 0.35); }
    50% { box-shadow: 0 3px 9px rgba(12, 90, 105, 0.45); }
}

/* 이미지 좌측 엣지 블렌딩 — 인디고/바이올렛 톤으로 재배색 */
.hero-image-box::before {
    background: linear-gradient(90deg, #0e0d2f 0%, rgba(20, 14, 58, 0.45) 16%, rgba(20, 14, 58, 0) 42%);
}
@media (max-width: 768px) {
    .hero-image-box::before { background: linear-gradient(0deg, #0e0d2f 0%, rgba(20, 14, 58, 0) 34%); }
}

/* ==========================================================================
   DARK SECTIONS — 인디고 베이스 + 오로라 듀얼 글로우
   ========================================================================== */
.autonomy-section,
.solution-page {
    background:
        radial-gradient(80% 70% at 12% -6%, rgba(139, 92, 246, 0.13), transparent 56%),
        radial-gradient(80% 70% at 90% 4%, rgba(34, 211, 238, 0.09), transparent 56%),
        radial-gradient(120% 90% at 50% 0%, var(--navy-1) 0%, var(--navy) 72%);
    color: var(--ink);
}
.dark-tech-bg {
    background:
        radial-gradient(70% 50% at 85% -4%, rgba(34, 211, 238, 0.07), transparent 55%),
        radial-gradient(70% 60% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
        var(--navy);
}
.grey-tech-bg {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(139, 92, 246, 0.08), transparent 60%),
        var(--navy-1);
}
.roadmap-tech-bg {
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(34, 211, 238, 0.06), transparent 58%),
        #0d0930;
}

/* ABOUT 라이트 섹션 → 다크 인디고로 전환 */
.about-info-section,
.about-impact-bridge {
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(34, 211, 238, 0.06), transparent 55%),
        radial-gradient(90% 70% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
        var(--bg);
    /* 파트너 섹션 제거로 ABOUT 마지막 콘텐츠 블록이 됨 — 하단 여백 축소 */
    padding-bottom: clamp(48px, 6vw, 80px);
}
.about-collaboration {
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(139, 92, 246, 0.10), transparent 60%),
        var(--navy);
}
.about-footer { background: var(--bg); }

/* ABOUT 히어로 오버레이 그라데이션 — 인디고 톤 */
.about-hero::after {
    background: linear-gradient(180deg, rgba(16, 13, 53, 0.25) 0%, rgba(16, 13, 53, 0.78) 100%);
}
/* 새 ABOUT 히어로(img-about-hero.png)는 원본이 이미 다크 → 기본 brightness(0.6)은 과함.
   완화해 로봇 화이트 셸·시안 글로우를 살림. 좌측은 원래 near-black이라 흰 헤드라인 가독은 유지. */
.about-full-img { filter: brightness(1.06) contrast(1.02); }
.about-main-title, .about-sub-label.white { color: #fff; }
/* TECHNOLOGY는 히어로 없이 첫 섹션으로 시작 — 상단 여백을 페이지 도입부답게 */
.dark-tech-bg > .tech-section:first-child { padding-top: clamp(72px, 8vw, 92px); }

/* 라이트였던 본문 텍스트 → 라이트 잉크 */
.identity-title, .main-title { color: var(--ink); }
/* 3줄 제목이라 기본 1.35는 답답 — 살짝만 확보(다른 제목 1.25~1.32와 크게 어긋나지 않게) */
.identity-title { line-height: 1.42; }
/* 페이지 히어로 → 첫 콘텐츠 섹션 사이 여백 축소 (50+64=114px는 과함) */
/* 제목이 1줄로 짧아진(index5) 만큼 히어로 상단도 함께 조임 */
.sol-section.hero { padding: clamp(72px, 8vw, 92px) 0 0; }
.sol-section.hero + .sol-section { padding-top: 34px; }
/* 히어로 제목 아래 설명문 간격 */
.sol-section.hero .tech-main-title { margin-bottom: 16px; }

/* 적용 현장 구분 — 두 제품 구간의 배경을 나눠 스크롤 중 경계가 보이게 */
.app-block { position: relative; }
.app-slam { background: linear-gradient(180deg, rgba(139,92,246,.05), rgba(139,92,246,.02)); }
.app-aqua { background: linear-gradient(180deg, rgba(34,211,238,.05), rgba(34,211,238,.02)); }
.app-fms { background: linear-gradient(180deg, rgba(139,92,246,.07), rgba(34,211,238,.03)); }
/* 구간 첫 섹션(섹션 라벨이 있는 섹션) 위에 경계선 */
.app-block:has(.section-label) { border-top: 1px solid var(--line); padding-top: 56px; }
.app-block.is-app-end { padding-bottom: 72px; }
.identity-desc { color: var(--text); }
.identity-desc strong, .mirror-head h4, .mirror-item h5 { color: var(--ink); }
/* 정체성 마무리 한 줄 — 결론으로 읽히도록 굵기만 살짝 */
.identity-closer { display: block; margin-top: 24px; color: var(--ink); font-weight: 600; }
.tech-item h5 { color: var(--ink); }
.tech-item p { color: var(--muted); }
.stat-desc { color: var(--muted); }
.stat-source { color: rgba(196, 197, 232, 0.42); }
.outro-minimal { color: rgba(196, 197, 232, 0.5) !important; }
.outro-minimal strong { color: var(--accent-ink) !important; }

/* ABOUT 테크 아이템 아이콘 */
.tech-item h4 { color: var(--accent-ink); letter-spacing: 0.14em; text-transform: uppercase; }
.tech-icon-circle { background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--r); }
.tech-item.hover-card:hover { background: rgba(255, 255, 255, 0.04); box-shadow: var(--shadow); }

/* ==========================================================================
   LIGHT-SURFACE CARDS → DARK INDIGO GLASS
   ABOUT 통계·거울카드 등 라이트 표면을 글래스로 전환
   ========================================================================== */
.stat-text-box {
    background: var(--navy-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.stat-num {
    color: var(--cyan);
    text-shadow: 0 0 28px rgba(34, 211, 238, 0.35);
}

/* ABOUT 거울 구조 카드 — 글래스 */
.mirror-col {
    background: var(--navy-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.mirror-col.world { border-top: 2px solid var(--accent); }
.mirror-col.self {
    border-top: 2px solid var(--cyan);
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.07), var(--navy-card));
}
.mirror-head { border-bottom: 1px solid var(--line); }
.mirror-item { border-bottom: 1px solid var(--line); }
.mirror-col.world .mirror-head i { color: var(--accent-ink); background: var(--accent-soft); }
.mirror-col.self .mirror-head i { color: var(--cyan); background: rgba(34, 211, 238, 0.12); }
.mh-tag { color: var(--muted); }
.mirror-item h5 span { color: var(--accent-ink); }
.mirror-col.self .mirror-item h5 span { color: var(--cyan); }
.mirror-item p { color: var(--muted); }
.mirror-note {
    color: #9fe9f5;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: var(--r-sm);
}

/* ==========================================================================
   DARK CARDS / SURFACES — 프로스트 인디고 글래스 통일
   ========================================================================== */
.spectrum-card, .phm-step, .problem-card-new, .benefit-card-new,
.rm-card, .phm-card, .arch-layer, .roi-chip, .metric-card {
    background: var(--navy-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.metric-card {
    background: rgba(34, 32, 78, 0.5);
    border-color: rgba(34, 211, 238, 0.2);
}

.spectrum-card:hover, .phm-step:hover, .problem-card-new:hover,
.rm-card:hover, .phm-card:hover, .arch-layer:hover, .roi-chip:hover,
.metric-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: var(--shadow), 0 0 16px rgba(139, 92, 246, 0.14);
}

/* 강조 카드 — 듀얼 글로우(시안 보더 + 바이올렛 와시) */
.spectrum-card.is-dex,
.phm-step.is-core,
.arch-layer.is-device,
.roi-cause {
    border: 1px solid rgba(34, 211, 238, 0.5);
    box-shadow: 0 6px 20px rgba(4, 2, 20, 0.5), 0 0 12px rgba(34, 211, 238, 0.14);
    background:
        linear-gradient(160deg, rgba(34, 211, 238, 0.09), rgba(139, 92, 246, 0.06)),
        var(--navy-card);
}

/* phm-card 그라데이션 재정의 */
.phm-card {
    background:
        linear-gradient(150deg, rgba(36, 32, 78, 0.6) 0%, rgba(23, 20, 60, 0.6) 100%);
}

/* 헤어라인 디바이더 */
.phm-header { border-bottom: 1px solid var(--line); }
.sc-closer { border-top: 1px solid var(--line); }

/* 강조 패널 — 글래스 헤어라인 통일 */
.verdict-bar, .verification-info-bar, .phm-roi-bar, .collab-item {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line);
    border-radius: var(--r);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.fms-handoff {
    background: linear-gradient(150deg, rgba(36, 32, 78, 0.55), rgba(23, 20, 60, 0.55));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.collab-item:hover { border-color: rgba(34, 211, 238, 0.4); background: rgba(255, 255, 255, 0.055); }
.blue-bar { background: linear-gradient(180deg, var(--cyan), var(--accent)); }

/* ==========================================================================
   DARK ACCENTS — 듀얼 컬러 배정: 시안=신호/라이브, 바이올렛=구조/강조
   ========================================================================== */
/* 시안 계열 — 라이브/신호/메트릭/자기진단 */
.feature-num, .ps-idx, .info-tag, .sig-live,
.problem-icon, .phm-icon, .ps-icon, .roi-cause-icon, .roi-chip > i,
.loop-nodes .ln.self, .vb-opt.is-self,
.problem-card-new li::before, .benefit-card-new li::before, .sol-list li::before,
.metric-value, .phm-body p.phm-desc strong,
.is-dex .sc-idx, .is-dex .sc-closer b, .is-dex .loop-nodes .lk,
.roi-cause-tag, .fh-text .fh-tag { color: var(--cyan); }
.metric-value { text-shadow: 0 0 26px rgba(34, 211, 238, 0.4); }
.phm-icon, .ps-icon, .roi-cause-icon { background: rgba(34, 211, 238, 0.12); border-radius: var(--r); }
.is-dex .loop-arc path { stroke: var(--cyan); }
.is-dex .loop-nodes .lk, .loop-nodes .ln.self { border-color: rgba(34, 211, 238, 0.5); }
.loop-nodes .ln.self { background: rgba(34, 211, 238, 0.1); }

/* 바이올렛 계열 — 아키텍처 태그/연결/방향/로드맵 구조 */
.arch-tag, .arch-conn, .roi-arrow { color: var(--accent-ink); }
.rm-phase.is-now .rm-tag { color: var(--cyan); }

/* 강조 텍스트 */
.vb-q b, .roi-chip b, .verdict-bar .vb-q b { color: var(--cyan); }
.sc-name, .ps-title, .arch-body h4, .benefit-card-new h4,
.problem-card-new h4, .phm-header h4, .rm-card h4, .fh-text h4 { color: var(--ink); }

/* 본문 흐린 텍스트 일관화 */
.sc-desc, .ps-desc, .tech-sub-copy, .arch-body p, .rm-card p,
.roi-cause p, .fh-text p, .problem-card-new li, .benefit-card-new li,
.sol-feature-item p, .phm-body p.phm-desc, .info-item p { color: var(--muted); }
.tech-main-title.white, .main-title.white { color: var(--ink); }

/* 솔루션 이미지 */
.sol-img {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 28px 60px rgba(4, 2, 20, 0.6), 0 0 48px rgba(34, 211, 238, 0.22), 0 0 80px rgba(139, 92, 246, 0.16);
}
.sol-feature-item { border-left: 2px solid var(--accent); }

/* PHM 라이브 도트 */
.sig-live .dot { background: var(--cyan); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); }

/* 로드맵 타임라인 */
.roadmap::before { background: linear-gradient(90deg, var(--cyan), rgba(139, 92, 246, 0.6) 60%, rgba(139, 92, 246, 0.12)); }
.rm-dot { background: var(--navy); border-color: rgba(160, 150, 255, 0.3); }
.rm-phase.is-now .rm-dot { border-color: var(--cyan); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12); }
/* 로드맵 카드 3장 높이 정렬 — 본문 줄 수가 달라도 같은 높이 */
.roadmap { align-items: stretch; }
.roadmap .rm-phase { display: flex; flex-direction: column; }
.roadmap .rm-card { flex: 1 1 auto; }

/* 아키텍처 연결선 */
.arch-conn { color: rgba(139, 92, 246, 0.6); }
.roi-arrow { color: rgba(34, 211, 238, 0.55); }
.arch-caption { color: var(--muted); }

/* ==========================================================================
   TRUST LABELS — PoC / 확인필요
   ========================================================================== */
.poc-badge {
    color: var(--cyan);
    background: rgba(34, 211, 238, 0.1);
    border-color: rgba(34, 211, 238, 0.35);
}
.poc-badge--ink {
    color: var(--accent-ink);
    background: var(--accent-soft);
    border-color: rgba(139, 92, 246, 0.35);
}
.pending {
    color: #f0c96a;
    background: rgba(240, 201, 106, 0.08);
    border: 1px dashed rgba(240, 201, 106, 0.45);
}
.pending--ink { color: #f0c96a; background: rgba(240, 201, 106, 0.07); border-color: rgba(240, 201, 106, 0.4); }

/* ==========================================================================
   IMAGE FIGURES (redesign3) — 글래스 보더 + 인디고 섀도우
   ========================================================================== */
.applied-fig img {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: 0 30px 64px rgba(4, 2, 20, 0.6);
}
.applied-fig.on-light img {
    border-color: var(--line);
    box-shadow: 0 26px 60px rgba(4, 2, 20, 0.55), 0 0 50px rgba(139, 92, 246, 0.12);
}
.fig-cap { color: var(--muted); }
.applied-fig.on-light .fig-cap { color: var(--muted); }
.phm-card-img {
    border-radius: var(--r);
    border: 1px solid var(--line);
}

/* ==========================================================================
   TWIN DASHBOARD (토큰 기반 — 대부분 자동, 듀얼 글로우 보정)
   ========================================================================== */
.twin-dash {
    background: var(--navy-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 64px rgba(4, 2, 20, 0.6), 0 0 48px rgba(34, 211, 238, 0.22), 0 0 80px rgba(139, 92, 246, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.td-bar { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.td-map { border-right: 1px solid var(--line); }
.td-svg, .td-side, .td-dot, .td-status, .td-v.ok { color: var(--cyan); }
.td-batt > span { background: var(--cyan); }

/* ==========================================================================
   MODAL / FORM — 다크 글래스 모달, 바이올렛 포커스
   ========================================================================== */
.modal { background: rgba(4, 2, 20, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-content {
    background: linear-gradient(180deg, rgba(30, 28, 71, 0.96), rgba(21, 18, 57, 0.96));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg), 0 0 80px rgba(139, 92, 246, 0.18);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.modal h2 { color: var(--ink); }
.modal > .modal-content > p { color: var(--muted); }
.close-btn { color: var(--muted); }
.close-btn:hover { color: var(--ink); }
.form-group input, .form-group textarea {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(196, 197, 232, 0.45); }
.form-group input:focus, .form-group textarea:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}
.form-success p { color: var(--muted); }
.form-success i { color: #34d399; }

/* ==========================================================================
   FOCUS RING — 바이올렛
   ========================================================================== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   글꼴 통일 — 현재(redesign3) 기준 'Inter' + 'Noto Sans KR' 로 일원화
   (타입페이스만 통일, 자간·크기·굵기 등 디자인 처리는 유지. 아이콘 remixicon 보존)
   이 블록은 파일 맨 끝에 위치해 위의 모든 font-family 선언을 덮어씁니다.
   ========================================================================== */
body, body * {
    font-family: 'Inter', 'Noto Sans KR', sans-serif !important;
}
[class^="ri-"], [class*=" ri-"],
[class^="ri-"]::before, [class*=" ri-"]::before {
    font-family: 'remixicon' !important;
}

/* ==========================================================================
   v2 — VALUE LADDER · SYSTEM OVERVIEW (제품→시스템→에이전트, 2026-07-02)
   신규 클래스만 추가(기존 클래스 무영향). 오로라 토큰 재사용.
   ========================================================================== */
/* 히어로(#0e0d2f) → '덱스위버의 3단계' → '1단계·제품'을 하나의 흐름으로 연결('붕뜸' 제거).
   ① 3단계 블록: 상단은 히어로 다크에서 내려오는 페이드, 하단은 오토노미 베이스 navy로 끝냄.
   ② 바로 아래 제품 섹션: 상단을 '순수 navy'로 시작(글로우는 섹션 중앙으로) → 두 블록이 navy→navy로 이음새 없이 이어짐. */
.ladder-rail-section {
    padding: 52px 0 clamp(56px, 7vw, 88px);
    background: linear-gradient(180deg, #0e0d2f 0%, #0f0d34 42%, var(--navy) 100%);
}
/* 3단계 헤더 — 중앙 정렬 finale 스타일을 섹션 상단에 배치 */
.ladder-rail-head { text-align: center; margin-bottom: clamp(28px, 3.5vw, 44px); }
.ladder-rail-head .section-label { border-left: 0; padding-left: 0; margin-bottom: 14px; letter-spacing: 0.22em; }
.ladder-rail-head .tech-main-title { margin-bottom: 18px; }
.ladder-rail-head .tech-sub-copy { margin-left: auto; margin-right: auto; }
/* 3단계 마무리 — 카드 아래 CTA로 닫음 */
.ladder-outro {
    margin-top: clamp(36px, 4.5vw, 52px);
    padding-top: clamp(28px, 3.5vw, 40px);
    border-top: 1px solid var(--line);
    text-align: center;
}
.ladder-rail-section + .autonomy-section {
    background:
        radial-gradient(92% 55% at 15% 48%, rgba(139, 92, 246, 0.12), transparent 62%),
        radial-gradient(92% 55% at 88% 64%, rgba(34, 211, 238, 0.08), transparent 62%),
        var(--navy);
}
.ladder-rail-lead { margin: 10px 0 0; font-size: .95rem; color: var(--muted); }
.ladder-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; align-items: stretch; }
.ladder-rail .rung {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 16px; padding: 30px 26px 26px;
    border-radius: var(--r); background: var(--navy-card); border: 1px solid var(--line);
    text-decoration: none; color: inherit;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
/* 카드 상단 액센트 라인 — 단계별로 색이 진해짐 */
.ladder-rail .rung::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, rgba(139,92,246,.7), rgba(34,211,238,.25));
}
.ladder-rail .rung.is-apex::before { background: linear-gradient(90deg, rgba(34,211,238,.9), rgba(139,92,246,.5)); }
.ladder-rail .rung:hover { border-color: rgba(34,211,238,.35); transform: translateY(-2px); }
.ladder-rail .rung-head { display: flex; align-items: baseline; gap: 12px; }
.ladder-rail .rung-head b { font-size: .82rem; color: var(--muted); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; flex: 1 1 auto; min-width: 0; }
.ladder-rail .rung-idx { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--accent-ink); flex: 0 0 auto; }
/* 단계의 시간축 배지 — 지금 / 확장 / 방향 */
.ladder-rail .rung-state {
    flex: 0 0 auto; align-self: center;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    color: var(--accent-ink); background: rgba(139,92,246,.14);
    border: 1px solid rgba(139,92,246,.32); border-radius: var(--r-pill);
    padding: 3px 11px;
}
.ladder-rail .rung-text { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; min-width: 0; }
.ladder-rail .rung-lede { font-size: 1.16rem; color: var(--ink); font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.ladder-rail .rung-text span { font-size: .86rem; color: var(--muted); line-height: 1.65; }
.ladder-rail .rung-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.ladder-rail .rung-tags span {
    font-size: .74rem; color: var(--muted); letter-spacing: .01em;
    border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px;
}
.ladder-rail .rung-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 14px; padding: 11px 16px;
    font-size: .88rem; font-weight: 600; text-decoration: none;
    color: var(--cyan); border: 1px solid rgba(34,211,238,.35);
    border-radius: var(--r-pill); background: rgba(34,211,238,.06);
    transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ladder-rail .rung-btn i { font-size: 1rem; transition: transform .3s var(--ease); }
.ladder-rail .rung-btn:hover { background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.6); }
.ladder-rail .rung-btn:hover i { transform: translateX(4px); }
.ladder-rail .rung.is-apex { border-color: rgba(34,211,238,.4); background: linear-gradient(120deg, rgba(34,211,238,.10), rgba(139,92,246,.12)), var(--navy-card); }
.ladder-rail .rung.is-apex .rung-idx { color: var(--cyan); }
.ladder-rail .rung.is-apex .rung-tags span { border-color: rgba(34,211,238,.35); color: var(--cyan); }
.ladder-rail .rung-btn.is-apex-btn { background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.55); color: #d8faff; }
.ladder-rail .rung-btn.is-apex-btn:hover { background: rgba(34,211,238,.26); border-color: rgba(34,211,238,.8); }
@media (max-width: 900px) { .ladder-rail { grid-template-columns: 1fr; } }

.new-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--cyan); border: 1px solid rgba(34,211,238,.5); border-radius: var(--r-pill); padding: 2px 9px; margin-left: 8px; vertical-align: middle; }

.phm-steps.tri { grid-template-columns: repeat(3, 1fr); }

.ladder-close-section { padding: 54px 0 62px; text-align: center; }
/* 가운데 정렬 섹션에서 라벨의 좌측 바(border-left)가 텍스트와 떨어져 '|  ⋯  텍스트'로
   보이던 문제 해결: inline-block이면 바가 텍스트에 붙은 채 통째로 중앙정렬됨.
   좌측정렬 섹션에는 시각적 변화 없음. */
.section-label { display: inline-block; }
.ladder-close-section .tech-sub-copy { margin-left: auto; margin-right: auto; }
.ladder-verdict { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 22px 0 26px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--navy-card); border: 1px solid var(--line); font-size: .95rem; color: var(--text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ladder-verdict .lv-item b { color: var(--cyan); font-weight: 800; }
.ladder-verdict .lv-sep { color: rgba(160,150,255,.4); }

.phm-grid.sys-grid { grid-template-columns: repeat(3, 1fr); }
/* 제품 카드 3종(로봇 2 + FMS)을 한 줄에 — 3열 폭에 맞춰 요소 축소 */
.phm-grid.product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-grid .phm-card { display: flex; flex-direction: column; padding: 26px 24px; }
.product-grid .phm-header {
    display: block; padding-bottom: 16px; margin-bottom: 18px;
    min-height: 104px;                 /* 아이콘 + 제목 2줄 기준으로 이미지 시작선 정렬 */
}
.product-grid .phm-icon { width: 42px; height: 42px; font-size: 1.35rem; border-radius: 12px; margin-bottom: 12px; }
.product-grid .phm-header h4 { font-size: 1.16rem; line-height: 1.45; }
.product-grid .pc-sub { display: block; margin-top: 3px; font-size: .84rem; font-weight: 500; color: var(--muted); }
.product-grid .phm-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* 카드 이미지 3장 높이 정렬 (본문 없이 태그만 이어짐) */
.product-grid .phm-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 20px; }
/* 태그 줄 수가 카드마다 달라도(1~2줄) 시작 높이를 맞춤 */
.product-grid .tech-tag-box { margin-top: auto; align-content: flex-start; min-height: 60px; gap: 6px; }
.product-grid .tech-tag-box span { font-size: .72rem; padding: 4px 9px; }
@media (max-width: 760px) {
    .product-grid .tech-tag-box { min-height: 0; }
}

/* FMS 관제 화면 미리보기(개념) */
.fms-preview { margin: 26px 0 30px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--navy-card); box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.fmsp-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); }
.fmsp-chrome .fmsp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(160,150,255,.28); }
.fmsp-chrome .fmsp-title { margin-left: 8px; font-size: .8rem; font-weight: 600; color: var(--text); }
.fmsp-chrome .fmsp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--cyan); }
.fmsp-chrome .fmsp-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.2); }
.fmsp-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1px; background: var(--line); }
.fmsp-map { position: relative; min-height: 264px; background-color: #121032; background-image: radial-gradient(90% 90% at 25% 15%, rgba(34,211,238,.12), transparent 55%), radial-gradient(90% 90% at 82% 82%, rgba(139,92,246,.12), transparent 55%), linear-gradient(rgba(139,92,246,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,.12) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 34px 34px, 34px 34px; }
.fmsp-map-tag { position: absolute; top: 12px; left: 14px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.fmsp-keepout { position: absolute; right: 16%; top: 20%; width: 26%; height: 34%; border: 1.5px dashed rgba(240,201,106,.5); border-radius: 8px; background: rgba(240,201,106,.06); }
.fmsp-path { position: absolute; left: 12%; bottom: 22%; width: 58%; height: 38%; border-left: 2px solid rgba(34,211,238,.4); border-bottom: 2px solid rgba(34,211,238,.4); border-radius: 0 0 0 10px; }
.fmsp-robot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,211,238,.18), 0 0 12px rgba(34,211,238,.7); }
.fmsp-robot.r1 { left: 16%; bottom: 28%; }
.fmsp-robot.r2 { left: 44%; bottom: 58%; background: var(--accent); box-shadow: 0 0 0 4px rgba(139,92,246,.18), 0 0 12px rgba(139,92,246,.6); }
.fmsp-robot.r3 { left: 60%; top: 66%; background: #f0c96a; box-shadow: 0 0 0 4px rgba(240,201,106,.18), 0 0 12px rgba(240,201,106,.6); }
.fmsp-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted); }
.fmsp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fmsp-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fmsp-legend i.c { background: var(--cyan); } .fmsp-legend i.v { background: var(--accent); } .fmsp-legend i.a { background: #f0c96a; }
.fmsp-dock { position: absolute; left: 12%; bottom: 15%; color: var(--muted); font-size: .95rem; }
.fmsp-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: rgba(20, 17, 53, .6); }
.fmsp-tile { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.fmsp-tile .fmsp-k { font-size: .76rem; color: var(--muted); }
.fmsp-tile .fmsp-v { font-size: 1rem; font-weight: 700; color: var(--ink); }
.fmsp-tile .fmsp-v em { font-size: .72rem; font-weight: 500; color: var(--muted); font-style: normal; }
.fmsp-tile.ok .fmsp-v { color: #34d399; }
.fmsp-list { margin-top: 2px; display: flex; flex-direction: column; gap: 7px; }
.fmsp-row { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text); padding: 7px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.025); }
.fmsp-row i { color: var(--cyan); }
.fmsp-row i.ok { color: #34d399; }
.fmsp-row i.warn { color: #f0c96a; }

/* 비활성 버튼(공개 예정) 룩 — 죽은 링크 방지 */
.btn-outline-cyan[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* 태그 칩은 어느 폭에서도 안전 래핑 */
.tech-tag-box { flex-wrap: wrap; }

@media (max-width: 1100px) {
    .phm-grid.product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid .phm-header { min-height: 0; }
}
@media (max-width: 980px) {
    .phm-grid.sys-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    .ladder-rail { grid-template-columns: 1fr; }
    .phm-steps.tri { grid-template-columns: 1fr; }
    .fmsp-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .phm-grid.sys-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .phm-grid.product-grid { grid-template-columns: 1fr; }
}
/* design-review safe fixes 2026-07-03 (P1-1 contrast / P1-2 ladder gutter / P2-6 / P2-10 / P2-11) */
/* (중복 --muted 정의 제거: 위 :root 토큰 블록으로 통합) */
.copyright{ color: rgba(196,197,232,0.68); }
.stat-source{ color: rgba(196,197,232,0.68); }
.ladder-rail-section{ padding-left: clamp(24px,7vw,96px); padding-right: clamp(24px,7vw,96px); }
.ladder-close-section{ padding-left: clamp(24px,7vw,96px); padding-right: clamp(24px,7vw,96px); }
@media (max-width:980px){
  .metrics-grid,.spectrum-grid{ grid-template-columns: repeat(2,1fr); }
  .side-nav ul{ gap: 8px; }
  .nav-link{ display:flex; align-items:center; min-height:44px; padding:10px 6px; }
}
@media (max-width:760px){
  .metrics-grid,.spectrum-grid{ grid-template-columns: 1fr; }
}
/* closing-block-fix-2026-07-03: HOME 마무리 라벨 붕뜸 개선 */
.autonomy-section:has(+ .ladder-close-section){ padding-bottom: clamp(28px,3.5vw,48px); }
.ladder-close-section{ padding-top: clamp(16px,2.5vw,32px); }
.ladder-close-head{ margin-bottom: 22px; }
.ladder-close-head .section-label{ margin-bottom: 12px; }
.ladder-close-head .tech-main-title{ margin-bottom: 0; }
/* closing-block-left-2026-07-03: 마무리 블록 전체 좌측 정렬(다른 섹션과 통일) */
.ladder-close-section{ text-align: left; }
.ladder-close-section .tech-sub-copy{ margin-left: 0; margin-right: 0; }
/* closing-block-final-2026-07-03: 중앙 finale 복원 + 클린 eyebrow(세로바 제거) + 섹션 여백 통일 */
.autonomy-section:has(+ .ladder-close-section){ padding-bottom: clamp(80px,11vw,140px); }
.ladder-close-section{ text-align: center; padding-top: clamp(40px,6vw,88px); }
.ladder-close-section .tech-sub-copy{ margin-left: auto; margin-right: auto; }
.ladder-close-section .section-label{ border-left: 0; padding-left: 0; margin-bottom: 14px; letter-spacing: 0.22em; }
/* ==========================================================================
   BMAD QA 수정 (2026-07-14) — 대비/반응형
   ========================================================================== */
/* 저대비 카피 상향(WCAG AA) — 하드코딩 rgba가 대비 토큰을 못 받던 지점 */
.sc-closer { color: rgba(214, 216, 242, 0.78); }
.autonomy-foot .note { color: rgba(214, 216, 242, 0.74); }

/* 히어로 반응형 정합: 모바일 내비 전환(≤980)과 같은 지점에서 히어로도 '완전 스택'으로.
   기존 redesign.css(≤980 부분 컬럼) + redesign3.css(≤768 풀스택)이 769~980에서 섞이던 문제 해결. */
@media (max-width: 980px) {
    .hero-layout { flex-direction: column; padding: 0; gap: 0; justify-content: center; text-align: center; }
    .hero-content { order: 2; flex: none; max-width: none; padding: 40px 24px 26px; align-items: center; }
    .hero-image-box { order: 1; flex: none; width: 100%; height: 44vh; justify-content: center; }
    .hero-image-box .home-robot-img { height: 100%; }
}

/* ==========================================================================
   BMAD QA (2026-07-14) — 한글 카드 줄바꿈 가독성
   어절 보존(keep-all) 전역 + 카드/본문에 긴 라틴 토큰 넘침 방지(overflow-wrap).
   (flowSentences는 넓은 인트로 .flow-lines에만 적용 — 좁은 카드의 문장 inline-block 빈칸 제거)
   ========================================================================== */
body, body * { word-break: keep-all; }
.phm-desc, .ps-desc, .sc-desc, .sc-closer, .sol-list li,
.ladder-rail .rung-head b, .ladder-rail .rung-text span, .ps-title,
.phm-header h4, .fh-text h4, .sol-feature-item h4,
.tech-sub-copy, .mirror-item p, .arch-body p, .rm-card p {
    overflow-wrap: anywhere;
}

/* -- 카드 태그칩 하단 정렬 통일 (2026-07-14) -- */
.phm-card{display:flex;flex-direction:column;}
.phm-body{display:flex;flex-direction:column;flex:1 1 auto;}
.phm-body .tech-tag-box{margin-top:auto;}

/* -- 로드맵 타임라인: 천천히 흐르는 빛 (2026-07-14) -- */
.roadmap::before{
  background:
    linear-gradient(90deg, transparent 0%, rgba(180,245,255,0.7) 38%, rgba(255,255,255,0.97) 50%, rgba(180,245,255,0.7) 62%, transparent 100%),
    linear-gradient(90deg, var(--cyan), rgba(139,92,246,0.6) 60%, rgba(139,92,246,0.12));
  background-size:50% 100%, 100% 100%;
  background-repeat:repeat-x, no-repeat;
  animation:rmFlow 3.5s linear infinite;
}
@keyframes rmFlow{
  0%{background-position:0% 0, 0 0;}
  
  100%{background-position:100% 0, 0 0;}
}
@media (prefers-reduced-motion: reduce){
  .roadmap::before{animation:none;
    background:linear-gradient(90deg, var(--cyan), rgba(139,92,246,0.6) 60%, rgba(139,92,246,0.12));}
}

/* -- FMS 미리보기 캡션 라운드 모서리 잘림 방지 (2026-07-14) -- */
.fms-preview .fig-cap { padding: 12px 16px 16px; }