/* ==========================================================================
   DR-VU Medical & Radiation Shielding Typography System (High-Compatibility)
   - Main / Body: Pretendard Variable + Inter (Neo-Grotesque precision & unified KR/EN baseline)
   - Sub-titles & Section Headings: Wanted Sans Variable + Pretendard (Modern tech clarity)
   - Hero Display & Slogan: Wanted Sans Variable + Pretendard (800 ExtraBold solidity, zero baseline shift)
   - Navigation & Button UI: SUIT Variable + Pretendard (Balanced B2B medical/engineering interface)
   - Technical Spec Tables & Badges: Pretendard Variable + Inter + Noto Sans KR (tabular-nums)
   ========================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
@import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;700;800&display=swap");

/* Mega Menu Backdrop Dimmer */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 47, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99998 !important;
}

body:has(.nav-item-dropdown:hover)::after,
body:has(.mega-dropdown-panel:hover)::after {
    opacity: 1;
}

/* 1. Design Tokens & Brand Color System */
:root {
    /* Recommended Medical & Radiation Shielding Brand Palette */
    --brand-deep-navy: #0A192F;
    --brand-slate-blue: #1E3A8A;
    --brand-clinical-teal: #0EA5E9;
    --brand-clinical-cyan: #06B6D4;
    --brand-neutral-bg: #F8FAFC;
    --brand-neutral-text: #334155;

    /* Monochrome & Surface Scale */
    --colors-canvas: #ffffff;
    --colors-canvas-soft: #F8FAFC;
    --colors-field: #F1F5F9;
    --colors-hairline-soft: #E2E8F0;
    --colors-hairline: #CBD5E1;
    --colors-ink: #0A192F;
    --colors-ink-soft: #1E293B;
    --colors-text-muted: #334155;
    --colors-text-faint: #64748B;

    /* Primary & Point Accents */
    --colors-accent: #1E3A8A;
    --colors-accent-soft: #EFF6FF;
    --colors-point-cyan: #0EA5E9;

    /* Geometry Tokens */
    --rounded-full: 9999px;
    --rounded-md: 24px;
    --rounded-sm: 16px;
    --radius-squircle: 30%;

    /* Role-Specific Font Stacks (Unified KR/EN Baseline & Metric Compatibility) */
    --font-sans: 'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-heading: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-display: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-ui: 'SUIT Variable', 'SUIT', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-spec: 'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif;
    --font-doc: 'Noto Sans KR', 'Pretendard', 'Inter', sans-serif;
    
    /* Transitions */
    --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Global Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--colors-canvas);
    color: var(--colors-ink);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    background-color: var(--colors-canvas);
    color: var(--brand-neutral-text);
    line-height: 1.65;
    letter-spacing: -0.012em;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Typography Role Assignments */
h1, .hero-headline, .display-slogan {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand-deep-navy);
    letter-spacing: -0.022em;
    line-height: 1.35;
}

h2, h3, .section-title, .sub-headline {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--brand-deep-navy);
    letter-spacing: -0.018em;
    line-height: 1.36;
}

h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--brand-deep-navy);
    letter-spacing: -0.015em;
    line-height: 1.4;
}

nav, .nav-links, .nav-item, .drawer-link, .top-utility-bar, .subpage-pills,
button, .btn, .btn-primary, .btn-outline, .nav-btn-store, .sku-filter-btn {
    font-family: var(--font-ui);
    letter-spacing: -0.01em;
}

table, th, td, .spec-table, .kmdia-compliance-bar, .tabular-nums, code, pre {
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
}

.stat-value, .metric-num, .badge-commercial-soft, .section-badge {
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
}

/* 3. Typography Hierarchy */
h1, h2, h3, h4, h5, h6, p, li, td, th, span, a, button {
    word-break: keep-all;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--colors-ink);
}

.section-title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 12px;
    word-break: keep-all;
}

.section-desc {
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--colors-text-muted);
    max-width: 720px;
    margin: 0 auto;
    word-break: keep-all;
}

.text-center {
    text-align: center;
}

/* 4. Layout Structure */
.container {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 84px 0;
    position: relative;
}

@media (max-width: 768px) {
    section {
        padding: 56px 0;
    }
    .container {
        padding: 0 16px;
    }
}

/* ==========================================================================
   5. Liquid Metal Button System (LiquidMetalButton Shader & 3D Pill Architecture)
   - Outer Rim: 2px Liquid Metal Iridescent Chrome Shader (border-radius: 100px)
   - Inner Core: margin 2px, linear-gradient(180deg, #202020 0%, #000000 100%)
   - 3D Perspective & Multi-layered Elevation Shadows + Click Ripple Animation
   ========================================================================== */
@property --lm-angle {
    syntax: '<angle>';
    initial-value: 45deg;
    inherits: false;
}

@keyframes lm-shader-spin {
    0% {
        --lm-angle: 0deg;
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        --lm-angle: 360deg;
        background-position: 0% 50%;
    }
}

@keyframes ripple-animation {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

.shader-container-exploded {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.shader-container-exploded canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 100px !important;
}

.cyber-button-root,
.btn-primary,
.btn-outline,
.nav-btn-store,
.product-action-btn,
.popup-action-btn-main,
.modal-submit-btn,
.drawer-cta,
.btn-pill-soft,
.cyber-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.65) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    user-select: none !important;
    outline: none !important;
    overflow: hidden !important;
    border-radius: 100px !important;
    border: none !important;
    padding: 12px 24px !important;
    min-height: 46px !important;
    background: transparent !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    transform-style: preserve-3d !important;
    box-shadow:
        0px 0px 0px 1px rgba(0, 0, 0, 0.3),
        0px 36px 14px 0px rgba(0, 0, 0, 0.02),
        0px 20px 12px 0px rgba(0, 0, 0, 0.08),
        0px 9px 9px 0px rgba(0, 0, 0, 0.12),
        0px 2px 5px 0px rgba(0, 0, 0, 0.15) !important;
    transition:
        all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    isolation: isolate;
    z-index: 1;
}

/* Outer Liquid Metal Shader Layer (u_repetition: 4, u_shiftRed: 0.3, u_shiftBlue: 0.3) */
.cyber-button-root::before,
.btn-primary::before,
.btn-outline::before,
.nav-btn-store::before,
.product-action-btn::before,
.popup-action-btn-main::before,
.modal-submit-btn::before,
.drawer-cta::before,
.btn-pill-soft::before,
.cyber-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 100px !important;
    background: conic-gradient(
        from var(--lm-angle, 45deg) at 50% 50%,
        #f8fafc 0deg,
        #94a3b8 38deg,
        #38bdf8 72deg,
        #1e293b 108deg,
        #f1f5f9 145deg,
        #f472b6 180deg,
        #475569 215deg,
        #e2e8f0 255deg,
        #60a5fa 295deg,
        #0f172a 328deg,
        #f8fafc 360deg
    ) !important;
    background-size: 200% 200% !important;
    animation: lm-shader-spin 4.5s linear infinite !important;
    z-index: -2 !important;
    pointer-events: none !important;
}

/* Inner Metallic Obsidian Pill Core (margin: 2px, #202020 -> #000000) */
.cyber-button-root::after,
.btn-primary::after,
.btn-outline::after,
.nav-btn-store::after,
.product-action-btn::after,
.popup-action-btn-main::after,
.modal-submit-btn::after,
.drawer-cta::after,
.btn-pill-soft::after,
.cyber-btn::after {
    content: '' !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 100px !important;
    background: linear-gradient(180deg, #202020 0%, #000000 100%) !important;
    transition:
        background 0.3s ease,
        box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Subtle titanium core distinction for Secondary / Outline Liquid Metal Buttons */
.btn-outline::after,
.btn-pill-soft::after {
    background: linear-gradient(180deg, #2b303b 0%, #0b0e14 100%) !important;
}

/* Hover State: Speed up liquid metal shader & tighten 3D elevation shadow */
.cyber-button-root:hover,
.btn-primary:hover,
.btn-outline:hover,
.nav-btn-store:hover,
.product-action-btn:hover,
.popup-action-btn-main:hover,
.modal-submit-btn:hover,
.drawer-cta:hover,
.btn-pill-soft:hover,
.cyber-btn:hover {
    color: #FFFFFF !important;
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow:
        0px 0px 0px 1px rgba(0, 0, 0, 0.4),
        0px 12px 6px 0px rgba(0, 0, 0, 0.05),
        0px 8px 5px 0px rgba(0, 0, 0, 0.1),
        0px 4px 4px 0px rgba(0, 0, 0, 0.15),
        0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}

.cyber-button-root:hover::before,
.btn-primary:hover::before,
.btn-outline:hover::before,
.nav-btn-store:hover::before,
.product-action-btn:hover::before,
.popup-action-btn-main:hover::before,
.modal-submit-btn:hover::before,
.drawer-cta:hover::before,
.btn-pill-soft:hover::before,
.cyber-btn:hover::before {
    animation-duration: 2.2s !important;
}

/* Pressed / Active State (isPressed) */
.cyber-button-root:active,
.btn-primary:active,
.btn-outline:active,
.nav-btn-store:active,
.product-action-btn:active,
.popup-action-btn-main:active,
.modal-submit-btn:active,
.drawer-cta:active,
.btn-pill-soft:active,
.cyber-btn:active,
.lm-pressed {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow:
        0px 0px 0px 1px rgba(0, 0, 0, 0.5),
        0px 1px 2px 0px rgba(0, 0, 0, 0.3) !important;
}

.cyber-button-root:active::after,
.btn-primary:active::after,
.btn-outline:active::after,
.nav-btn-store:active::after,
.product-action-btn:active::after,
.popup-action-btn-main:active::after,
.modal-submit-btn:active::after,
.drawer-cta:active::after,
.btn-pill-soft:active::after,
.cyber-btn:active::after,
.lm-pressed::after {
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Compact Liquid Metal Buttons inside Product Cards & Header Navigation */
.nav-btn-store {
    min-height: 40px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
}

.ecom04-card-actions .btn-primary,
.ecom04-card-actions .btn-outline {
    min-height: 40px !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
}

/* Click Ripple Element */
.lm-ripple-span {
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%) !important;
    pointer-events: none !important;
    animation: ripple-animation 0.6s ease-out forwards !important;
    z-index: 35 !important;
}

@media (max-width: 480px) {
    .cyber-button-root,
    .btn-primary,
    .btn-outline,
    .product-action-btn,
    .cyber-btn {
        white-space: normal !important;
        text-align: center !important;
    }
}

.cyber-button-root > *:not(.shader-container-exploded):not(.lm-ripple-span),
.btn-primary > *:not(.shader-container-exploded):not(.lm-ripple-span),
.btn-outline > *:not(.shader-container-exploded):not(.lm-ripple-span),
.nav-btn-store > *:not(.shader-container-exploded):not(.lm-ripple-span),
.product-action-btn > *:not(.shader-container-exploded):not(.lm-ripple-span),
.popup-action-btn-main > *:not(.shader-container-exploded):not(.lm-ripple-span),
.modal-submit-btn > *:not(.shader-container-exploded):not(.lm-ripple-span),
.cyber-btn > *:not(.shader-container-exploded):not(.lm-ripple-span) {
    position: relative;
    z-index: 30;
}

/* Disable legacy cyber decorative layers completely */
.cyber-halo,
.cyber-edge,
.cyber-edge-l,
.cyber-edge-r,
.cyber-edge-t,
.cyber-edge-b,
.cyber-texture {
    display: none !important;
}

/* Commercial Signal Badges */
.badge-commercial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--colors-accent);
    color: #ffffff;
    border-radius: var(--rounded-full);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.badge-commercial-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--colors-accent-soft);
    color: var(--colors-accent);
    border-radius: var(--rounded-full);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
}

.badge-pill-neutral {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--colors-canvas-soft);
    color: var(--colors-ink);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-full);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
}

/* Squircle Icon Wrapper */
.icon-squircle {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--colors-ink);
    flex-shrink: 0;
    transition: var(--transition-fast);
}

/* 6. Navigation Bar & Utility Bar */
.header-wrapper,
.site-header {
    position: relative !important;
    top: auto !important;
    left: 0;
    right: 0;
    z-index: 99999 !important;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0;
    pointer-events: auto;
    transition: none !important;
}

.header-wrapper.is-scrolled,
.header-wrapper.header-scrolled,
.header-wrapper.scrolled,
.site-header.scrolled {
    box-shadow: none !important;
    background-color: #ffffff !important;
}

/* Top Utility Strip (KR/EN, 견적 요청, 라드방 스토어, 조달청 벤처나라) */
.top-utility-bar {
    background-color: #0f172a;
    color: #cbd5e1;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0;
}

.top-utility-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}

.top-utility-left {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #94a3b8;
    font-size: 11.5px;
}

.top-utility-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.top-utility-link {
    color: #e2e8f0;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease;
}

.top-utility-link:hover {
    color: #38bdf8;
}

.lang-switch-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}

.lang-switch-pill a {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lang-switch-pill a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.lang-switch-pill a.active {
    background: #0066ff;
    color: #ffffff;
}

.nav-pill {
    pointer-events: auto;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
}

.nav-brand,
.brand-logo,
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-brand-logo,
.brand-logo-img,
img.brand-logo,
.logo img {
    height: 38px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

.nav-brand-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--colors-ink);
    letter-spacing: -0.03em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.nav-item {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    transition: var(--transition-fast);
    position: relative;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.nav-item:hover {
    color: #0052cc;
    background-color: #f1f5f9;
}

.nav-item.active {
    color: #0052cc;
    font-weight: 700;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-btn-store {
    background: transparent !important;
    color: #F8FAFC !important;
    border-radius: 100px !important;
    padding: 8px 18px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--font-ui) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: none !important;
    white-space: nowrap !important;
}

.nav-btn-store:hover {
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.01) !important;
}

/* Mobile & Tablet Hamburger Button */
.menu-burger,
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #0f172a;
    font-size: 18px;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.menu-burger:hover,
.mobile-menu-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Mobile & Tablet Navigation Drawer */
.mobile-drawer {
    position: fixed;
    top: 64px;
    left: 16px;
    right: 16px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 20px;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-drawer.drawer-closed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

.mobile-drawer.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.mobile-nav-item,
.drawer-link {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    padding: 12px 14px;
    border-radius: 8px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-item:hover,
.drawer-link:hover,
.drawer-link.active {
    background-color: #eff6ff;
    color: #0052cc;
}

.drawer-cta {
    margin-top: 8px;
    background: transparent !important;
    color: #F8FAFC !important;
    justify-content: center !important;
    border-bottom: none !important;
    border-radius: 100px !important;
}

/* ==========================================================================
   Responsive Header & Navigation Scaling System
   - Large Desktop (>= 1461px): Spacious luxury layout
   - MacBooks & Laptops (1101px ~ 1460px): Precision-scaled font & padding, zero clipping
   - Tablets & Smaller Screens (<= 1100px): Clean mobile drawer with hamburger button
   - Mobile Phones (<= 640px & <= 420px): Streamlined layout, zero overflow
   ========================================================================== */

/* Base Header container containment */
.site-header {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* PC & Large Displays (Desktop): Perfect 3-column symmetry (Logo Left, Menu Dead-Center, CTA Right) */
@media (min-width: 1181px) {
    .nav-pill {
        width: 100% !important;
        max-width: 1360px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 10px 20px !important;
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 12px !important;
    }

    .nav-brand,
    .brand-logo,
    .logo {
        grid-column: 1 !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex: none !important;
    }

    .nav-links {
        grid-column: 2 !important;
        justify-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        width: auto !important;
        flex: none !important;
    }

    .nav-actions {
        grid-column: 3 !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin: 0 !important;
        flex: none !important;
    }
}

/* Fallback for base styles if media queries are evaluated */
.nav-pill {
    width: 100% !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Laptop & MacBook Viewport Scaling (1181px ~ 1460px) */
@media (max-width: 1460px) and (min-width: 1181px) {
    .nav-pill {
        padding: 8px 14px !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        gap: 6px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
    }
    .nav-brand,
    .brand-logo,
    .logo {
        grid-column: 1 !important;
        justify-self: start !important;
    }
    .nav-brand-logo,
    .brand-logo-img,
    img.brand-logo,
    .logo img {
        height: 28px !important;
        max-width: 115px !important;
        width: auto !important;
    }
    .nav-links {
        grid-column: 2 !important;
        justify-self: center !important;
        gap: 1px !important;
        margin: 0 auto !important;
    }
    .nav-item-dropdown {
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    .nav-item-dropdown .nav-item {
        font-size: 11.5px !important;
        padding: 6px 6px !important;
        gap: 3px !important;
        letter-spacing: -0.025em !important;
        white-space: nowrap !important;
    }
    .nav-dropdown-arrow {
        font-size: 8px !important;
    }
    .nav-actions {
        grid-column: 3 !important;
        justify-self: end !important;
        gap: 4px !important;
        margin: 0 !important;
    }
    .nav-actions .nav-btn-store {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
        min-height: 33px !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    .top-utility-inner {
        padding: 0 16px !important;
    }
    .top-utility-left {
        font-size: 11px !important;
        gap: 6px !important;
    }
    .top-utility-right {
        font-size: 11px !important;
        gap: 8px !important;
    }
}

/* Tablet & Smaller Screens: Switch to Hamburger Menu at <= 1180px */
@media (max-width: 1180px) {
    .nav-links {
        display: none !important;
    }
    .nav-brand,
    .brand-logo,
    .logo {
        flex: 0 0 auto !important;
    }
    .nav-actions {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }
    .nav-actions .nav-btn-store {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
        min-height: 34px !important;
    }
    .menu-burger,
    .mobile-menu-btn {
        display: inline-flex !important;
    }
    .nav-pill {
        padding: 8px 16px !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .top-utility-left span:first-child {
        display: none;
    }
}

/* Mobile Screens (<= 640px) */
@media (max-width: 640px) {
    .top-utility-left {
        display: none !important;
    }
    .top-utility-inner {
        padding: 0 12px;
        justify-content: flex-end;
    }
    .nav-pill {
        padding: 8px 14px;
        gap: 8px;
    }
    .nav-brand-logo,
    .brand-logo-img,
    img.brand-logo,
    .logo img {
        height: 29px !important;
        max-width: 118px !important;
    }
    .nav-actions {
        gap: 6px;
    }
    .nav-actions .nav-btn-store {
        padding: 6px 11px !important;
        font-size: 11.5px !important;
        min-height: 33px !important;
    }
    .menu-burger,
    .mobile-menu-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* Extra Small Phones (<= 420px) */
@media (max-width: 420px) {
    .nav-pill {
        padding: 6px 10px;
    }
    .nav-brand-logo,
    .brand-logo-img,
    img.brand-logo,
    .logo img {
        height: 27px !important;
        max-width: 105px !important;
    }
    .nav-actions .nav-btn-store {
        padding: 5px 9px !important;
        font-size: 11px !important;
        min-height: 30px !important;
    }
}

/* Tiny Screens (<= 350px) */
@media (max-width: 350px) {
    .nav-actions .nav-btn-store {
        display: none !important;
    }
}

/* 7. Hero Section */
.hero-section {
    padding-top: 64px;
    padding-bottom: 72px;
    background-color: var(--colors-canvas);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-badge-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-headline {
    font-size: clamp(34px, 4.4vw, 52px);
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -0.025em;
    color: var(--colors-ink);
    margin-bottom: 22px;
    word-break: keep-all;
}

.hero-subhead {
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 300;
    line-height: 1.45;
    color: var(--colors-text-muted);
    margin-bottom: 36px;
    max-width: 580px;
    word-break: keep-all;
}

.hero-button-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Hero Gallery Media Card (Framing Products like Art) */
.hero-gallery-card {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-gallery-img {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.hero-gallery-card:hover .hero-gallery-img {
    transform: scale(1.02);
}

.hero-floating-chip {
    position: absolute;
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-full);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--colors-ink);
    box-shadow: none;
}

.hero-chip-top {
    top: 20px;
    left: 20px;
}

.hero-chip-bottom {
    bottom: 20px;
    right: 20px;
}

.chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--colors-accent);
}

/* 8. Statistics Section (Barely-Perceptible Neutral Tint Container) */
.stats-section {
    padding: 40px 0 80px;
}

.stats-container-box {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 40px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.stat-item {
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    right: 0;
    width: 1px;
    background-color: var(--colors-hairline);
}

.stat-value {
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 650;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--colors-ink);
    margin-bottom: 8px;
}

.stat-description {
    font-size: 14px;
    font-weight: 450;
    color: var(--colors-text-muted);
}

/* 9. Core Technology Section */
.tech-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.tech-card {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline-soft);
    border-radius: var(--rounded-md);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--transition-fast);
}

.tech-card:hover {
    border-color: var(--colors-hairline);
    background-color: #efefef;
}

.tech-card .icon-squircle {
    margin-bottom: 24px;
}

.tech-card h3 {
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
    margin-bottom: 12px;
    color: var(--colors-ink);
}

.tech-card p {
    font-size: 15px;
    font-weight: 450;
    line-height: 1.6;
    color: var(--colors-text-muted);
}

/* 10. Focus Sections (Pet Shield & Space Blanket) */
.focus-section {
    background-color: var(--colors-canvas);
}

.focus-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 96px;
}

.focus-row:last-child {
    margin-bottom: 0;
}

.focus-row.reversed {
    direction: rtl;
}

.focus-row.reversed > * {
    direction: ltr;
}

.focus-media-box {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.focus-media-img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.focus-media-box:hover .focus-media-img {
    transform: scale(1.02);
}

.focus-text-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.focus-title {
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 16px 0 16px;
    color: var(--colors-ink);
    word-break: keep-all;
}

.focus-body {
    font-size: 16px;
    font-weight: 450;
    line-height: 1.65;
    color: var(--colors-text-muted);
    margin-bottom: 24px;
    word-break: keep-all;
}

.focus-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    width: 100%;
}

.focus-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 450;
    color: var(--colors-ink);
}

.focus-feature-item i {
    color: var(--colors-ink);
    margin-top: 4px;
    font-size: 14px;
}

/* Space Blanket Layer Accordion (FAQ-Row Pattern) */
.layer-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 28px;
}

.layer-row {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline-soft);
    border-radius: var(--rounded-sm);
    overflow: hidden;
    transition: var(--transition-fast);
}

.layer-row.active {
    background-color: var(--colors-canvas);
    border-color: var(--colors-ink);
}

.layer-row-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.layer-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.layer-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--colors-text-muted);
    font-variant-numeric: tabular-nums;
}

.layer-row.active .layer-num {
    color: var(--colors-accent);
}

.layer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--colors-ink);
}

.layer-toggle-icon {
    font-size: 13px;
    color: var(--colors-text-muted);
    transition: var(--transition-fast);
}

.layer-row.active .layer-toggle-icon {
    transform: rotate(180deg);
    color: var(--colors-ink);
}

.layer-row-body {
    padding: 0 20px 18px 50px;
    font-size: 14px;
    font-weight: 450;
    line-height: 1.6;
    color: var(--colors-text-muted);
    display: none;
}

.layer-row.active .layer-row-body {
    display: block;
}

/* 11. Product Lineup & Segmented Control */
.products-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
}

/* 3D Infinite Image Corridor Stream (ImageStreamHero CSS Animation) */
.stream-corridor-hero {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    border-radius: var(--rounded-md);
    border: 1px solid var(--colors-hairline);
    background-color: var(--colors-canvas);
    height: 520px;
    margin: 40px 0 52px;
}

.stream-stage-3d {
    pointer-events: none;
    position: absolute;
    inset: 0;
    perspective: 30cqw;
    perspective-origin: 50% 55%;
}

.stream-rails-wrap {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.stream-card {
    position: absolute;
    overflow: hidden;
    left: 50%;
    top: 55%;
    width: 18cqw;
    height: 25cqw;
    margin-left: -9cqw;
    margin-top: -12.5cqw;
    border-radius: 0.8cqw;
    backface-visibility: hidden;
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
}

.stream-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stream-card-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(20, 20, 20, 0.85) 60%);
    color: #ffffff;
    padding: 12px 8px 6px;
    font-size: 1.1cqw;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.ish-r-card {
    animation: ish-r 18s linear infinite;
}

.ish-l-card {
    animation: ish-l 18s linear infinite;
}

@keyframes ish-r {
    0.00%{transform:translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg)}
    4.17%{transform:translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg)}
    8.33%{transform:translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg)}
    12.50%{transform:translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg)}
    16.67%{transform:translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg)}
    20.83%{transform:translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg)}
    25.00%{transform:translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg)}
    29.17%{transform:translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg)}
    33.33%{transform:translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg)}
    37.50%{transform:translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg)}
    41.67%{transform:translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg)}
    45.83%{transform:translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg)}
    50.00%{transform:translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg)}
    54.17%{transform:translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg)}
    58.33%{transform:translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg)}
    62.50%{transform:translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg)}
    66.67%{transform:translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg)}
    70.83%{transform:translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg)}
    75.00%{transform:translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg)}
    79.17%{transform:translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg)}
    83.33%{transform:translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg)}
    87.50%{transform:translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg)}
    91.67%{transform:translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg)}
    95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg)}
    100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg)}
}

@keyframes ish-l {
    0.00%{transform:translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg)}
    4.17%{transform:translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg)}
    8.33%{transform:translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg)}
    12.50%{transform:translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg)}
    16.67%{transform:translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg)}
    20.83%{transform:translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg)}
    25.00%{transform:translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg)}
    29.17%{transform:translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg)}
    33.33%{transform:translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg)}
    37.50%{transform:translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg)}
    41.67%{transform:translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg)}
    45.83%{transform:translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg)}
    50.00%{transform:translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg)}
    54.17%{transform:translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg)}
    58.33%{transform:translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg)}
    62.50%{transform:translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg)}
    66.67%{transform:translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg)}
    70.83%{transform:translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg)}
    75.00%{transform:translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg)}
    79.17%{transform:translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg)}
    83.33%{transform:translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg)}
    87.50%{transform:translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg)}
    91.67%{transform:translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg)}
    95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg)}
    100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg)}
}

@media (prefers-reduced-motion: reduce) {
    .stream-card {
        animation-play-state: paused !important;
    }
}

.stream-overlay-center {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 44px 24px;
    text-align: center;
    pointer-events: none;
}

.stream-overlay-center > * {
    pointer-events: auto;
}

.stream-overlay-title {
    font-size: clamp(24px, 3.5vw, 42px);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--colors-ink);
    margin-bottom: 12px;
}

.stream-overlay-desc {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--colors-text-muted);
    max-width: 520px;
    margin: 0 auto;
}

/* Segmented Control (Mobbin Spec: Stadium Pill Track & Moving White Pill) */
.segmented-track-container {
    display: flex;
    justify-content: center;
    margin: 40px 0 52px;
}

.segmented-track {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-full);
    padding: 4px;
    display: inline-flex;
    gap: 4px;
}

.segment-btn {
    background: transparent;
    border: none;
    border-radius: var(--rounded-full);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--colors-text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
}

.segment-btn:hover {
    color: var(--colors-ink);
}

.segment-btn.active {
    background-color: var(--colors-canvas);
    color: var(--colors-ink);
    font-weight: 650;
    border: 1px solid var(--colors-hairline);
}

/* Product Cards Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-gallery-tile {
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-fast);
}

.product-gallery-tile:hover {
    border-color: #c4c4c4;
}

.product-media-wrapper {
    background-color: var(--colors-canvas-soft);
    border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

.product-media-wrapper img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.product-gallery-tile:hover .product-media-wrapper img {
    transform: scale(1.04);
}

.product-placeholder-icon {
    font-size: 48px;
    color: var(--colors-text-faint);
}

.product-body-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-category-chip {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--colors-text-muted);
    background-color: var(--colors-canvas-soft);
    border-radius: var(--rounded-full);
    padding: 4px 10px;
    margin-bottom: 12px;
}

.product-body-content h3 {
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--colors-ink);
}

.product-body-content p {
    font-size: 14px;
    font-weight: 450;
    line-height: 1.6;
    color: var(--colors-text-muted);
    margin-bottom: 24px;
    flex-grow: 1;
}

.product-action-btn {
    align-self: flex-start;
}

/* 12. Interactive Rad-Ban Delivery Map Section */
.map-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
}

.map-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}

.map-pill-btn {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    color: var(--colors-text-muted);
    border-radius: var(--rounded-full);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.map-pill-btn:hover {
    color: var(--colors-ink);
    border-color: var(--colors-hairline-strong);
}

.map-pill-btn.active {
    background-color: var(--colors-ink);
    color: #ffffff;
    border-color: var(--colors-ink);
    font-weight: 600;
}

.map-layout-box {
    margin-top: 40px;
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 36px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: start;
}

@media (max-width: 960px) {
    .map-layout-box {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 28px;
    }
}

.map-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

.svg-map {
    width: 100%;
    max-width: 440px;
    height: auto;
    filter: drop-shadow(none);
    user-select: none;
}

/* South Korea Vector Provinces */
.map-province {
    fill: #ffffff;
    stroke: #cbd5e1;
    stroke-width: 1.2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    cursor: pointer;
    transition: fill 0.22s ease, stroke 0.22s ease, stroke-width 0.22s ease;
}

.map-province:hover {
    fill: #eff6ff;
    stroke: #0066ff;
    stroke-width: 1.8px;
}

.map-province.active {
    fill: #141414;
    stroke: #141414;
    stroke-width: 1.5px;
}

.map-province.highlight-all {
    fill: #f1f5f9;
    stroke: #94a3b8;
    stroke-width: 1.2px;
}

/* Province Regional Labels */
.map-geo-label {
    font-size: 11px;
    font-weight: 700;
    fill: #64748b;
    text-anchor: middle;
    pointer-events: none;
    transition: fill 0.2s ease;
}

.map-province.active ~ .map-labels-group .map-geo-label[data-target-region],
.map-geo-label.active {
    fill: #ffffff;
    font-weight: 800;
}

/* Map Interactive Pins & Radar Ping */
.map-pin {
    cursor: pointer;
    /* Never apply CSS transform: scale on SVG <g> as it offsets relative to SVG (0,0) canvas! */
    transform: none !important;
}

.map-pin .pin-ring,
.map-pin .pin-core {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-pin:hover .pin-ring {
    stroke-width: 2.5px;
    fill: rgba(0, 102, 255, 0.32);
    filter: drop-shadow(0 0 6px rgba(0, 102, 255, 0.45));
}

.map-pin:hover .pin-core {
    fill: #0052cc;
    r: 6px;
}

@keyframes mapPing {
    0% {
        r: 8px;
        opacity: 0.85;
    }
    100% {
        r: 20px;
        opacity: 0;
    }
}

.pin-ring-pulse {
    fill: transparent;
    stroke: #0066ff;
    stroke-width: 1.5;
    animation: mapPing 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    pointer-events: none;
}

.pin-ring {
    fill: rgba(0, 102, 255, 0.16);
    stroke: #0066ff;
    stroke-width: 1.5;
    transition: var(--transition-fast);
}

.pin-core {
    fill: #0066ff;
    transition: var(--transition-fast);
}

.pin-label-tag {
    font-size: 10px;
    font-weight: 700;
    fill: #1e293b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.map-pin:hover .pin-label-tag,
.map-pin.active .pin-label-tag {
    opacity: 1;
}

.map-pin.active .pin-ring {
    fill: rgba(0, 102, 255, 0.35);
    stroke-width: 2px;
}

.map-pin.active .pin-core {
    fill: #0066ff;
    r: 5.5px;
}

/* Map Details Card on Right Side */
.map-details-card {
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.map-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.map-card-stats {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stats-counter-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--colors-ink);
}

.stats-counter-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--colors-text-muted);
}

.map-details-title {
    font-size: 21px;
    font-weight: 650;
    color: var(--colors-ink);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.map-details-subtitle {
    font-size: 13px;
    font-weight: 450;
    color: var(--colors-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.map-hospitals-scroll-wrap {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 20px;
}

.map-hospitals-scroll-wrap::-webkit-scrollbar {
    width: 4px;
}

.map-hospitals-scroll-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.hospital-network-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.2s ease;
}

.hospital-network-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline-soft);
    border-radius: var(--rounded-sm);
    transition: var(--transition-fast);
}

.hospital-network-item:hover {
    border-color: #cbd5e1;
    background-color: #ffffff;
}

.hospital-icon-box {
    width: 32px;
    height: 32px;
    border-radius: var(--rounded-full);
    background-color: rgba(0, 102, 255, 0.08);
    color: #0066ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.hospital-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hospital-info-text strong {
    font-size: 14px;
    font-weight: 650;
    color: var(--colors-ink);
}

.hospital-info-text span {
    font-size: 12px;
    font-weight: 450;
    color: var(--colors-text-muted);
    line-height: 1.4;
}

.map-card-footer {
    padding-top: 12px;
    border-top: 1px solid var(--colors-hairline-soft);
}

/* 13. Timeline Section (History) */
.history-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
}

.timeline-track {
    margin-top: 56px;
    position: relative;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.timeline-track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    width: 1px;
    background-color: var(--colors-hairline);
}

.timeline-row {
    position: relative;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.timeline-marker {
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: var(--rounded-full);
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-marker-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--colors-ink);
}

.timeline-box {
    flex-grow: 1;
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline-soft);
    border-radius: var(--rounded-md);
    padding: 28px;
    transition: var(--transition-fast);
}

.timeline-box:hover {
    border-color: var(--colors-hairline);
    background-color: #f0f0f0;
}

.timeline-year-chip {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--colors-canvas);
    background-color: var(--colors-ink);
    border-radius: var(--rounded-full);
    padding: 4px 12px;
    margin-bottom: 12px;
}

.timeline-box h3 {
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 8px;
    color: var(--colors-ink);
}

.timeline-box p {
    font-size: 15px;
    font-weight: 450;
    line-height: 1.6;
    color: var(--colors-text-muted);
}

/* 14. Official Certifications Banner Section */
.certifications-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
    padding: 64px 0;
}

.cert-gallery-container {
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cert-gallery-header {
    margin-bottom: 24px;
}

.cert-gallery-header h3 {
    font-size: 18px;
    font-weight: 650;
    color: var(--colors-ink);
    margin-bottom: 4px;
}

.cert-gallery-header p {
    font-size: 13px;
    font-weight: 450;
    color: var(--colors-text-muted);
}

.cert-gallery-banner {
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background-color: var(--colors-canvas);
    border-radius: var(--rounded-sm);
}

.cert-gallery-banner img {
    width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

/* 15. Contact Section (Mobbin Field Inputs & Stadium Pill CTA) */
.contact-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: flex-start;
}

.contact-info-col {
    display: flex;
    flex-direction: column;
}

.contact-headline {
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    color: var(--colors-ink);
}

.contact-subhead {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--colors-text-muted);
    margin-bottom: 36px;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-detail-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-detail-card .icon-squircle {
    background-color: var(--colors-canvas-soft);
}

.contact-detail-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--colors-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.contact-detail-card p {
    font-size: 16px;
    font-weight: 500;
    color: var(--colors-ink);
}

/* Contact Form Box (Field background with 2px Ink focus ring) */
.contact-form-box {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 40px;
}

.form-field-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--colors-ink);
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    background-color: var(--colors-field);
    border: 1px solid transparent;
    border-radius: var(--rounded-sm);
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 450;
    color: var(--colors-ink);
    transition: var(--transition-fast);
    outline: none;
}

.form-input::placeholder, .form-textarea::placeholder {
    color: var(--colors-text-faint);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    background-color: var(--colors-canvas);
    border-color: var(--colors-ink);
    box-shadow: 0 0 0 1px var(--colors-ink);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit-btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    margin-top: 10px;
}

.form-status-alert {
    margin-top: 20px;
    padding: 18px 24px;
    background-color: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-sm);
    display: flex;
    align-items: center;
    gap: 14px;
}

.form-status-alert.hide {
    display: none;
}

.form-status-alert i {
    font-size: 20px;
    color: var(--colors-accent);
}

.form-status-alert h4 {
    font-size: 15px;
    font-weight: 650;
    color: var(--colors-ink);
    margin-bottom: 2px;
}

.form-status-alert p {
    font-size: 13px;
    color: var(--colors-text-muted);
}

/* 16. Polarity Inversion Footer (Mobbin Spec: Full-Bleed Ink with Rounded Top Corners) */
.footer-inverted {
    background-color: var(--colors-ink);
    color: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 80px 0 48px;
    margin-top: 40px;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    gap: 48px;
    margin-bottom: 56px;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-logo-img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-logo-text {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.footer-mission {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--colors-text-muted);
    max-width: 400px;
}

.footer-col h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 20px;
}

.footer-link-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link {
    font-size: 14px;
    font-weight: 450;
    color: var(--colors-text-muted);
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: #ffffff;
}

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

.social-squircle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-squircle);
    background-color: var(--colors-ink-soft);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transition-fast);
}

.social-squircle:hover {
    background-color: #383838;
    color: #ffffff;
    transform: translateY(-2px);
}

.footer-hairline-divider {
    height: 1px;
    background-color: var(--colors-ink-soft);
    margin-bottom: 36px;
}

.footer-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--colors-text-muted);
    line-height: 1.6;
}

.footer-bottom-row a {
    color: var(--colors-text-muted);
    text-decoration: underline;
}

.footer-bottom-row a:hover {
    color: #ffffff;
}

/* ==========================================================================
   14. Samsung Electronics Dual Shielding Section (이중차폐시스템)
   ========================================================================== */
.dual-shield-section {
    background-color: var(--colors-canvas-soft);
    border-top: 1px solid var(--colors-hairline-soft);
    border-bottom: 1px solid var(--colors-hairline-soft);
    padding: 100px 0;
}

.dual-shield-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 48px;
}

.video-player-container {
    background-color: #000000;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.video-player-container video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.video-caption-bar {
    background: rgba(20, 20, 20, 0.95);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.video-caption-bar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.timeline-milestones-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 36px 0;
}

.milestone-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-sm);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--transition-fast);
}

.milestone-card:hover {
    border-color: var(--colors-accent);
}

.milestone-date {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colors-accent);
}

.milestone-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--colors-ink);
}

.milestone-desc {
    font-size: 12px;
    color: var(--colors-text-muted);
    line-height: 1.4;
}

/* 4-Layer Cross Shielding Architecture */
.shield-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.shield-tech-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.shield-tech-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--colors-canvas-soft);
    border-radius: var(--rounded-sm);
    margin-bottom: 20px;
    padding: 12px;
}

/* Comparison Table */
.comparison-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    margin-top: 40px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.comparison-table th, .comparison-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--colors-hairline-soft);
}

.comparison-table th {
    background: var(--colors-canvas-soft);
    font-weight: 650;
    color: var(--colors-ink);
}

.comparison-table tr:hover td {
    background-color: #fafbfc;
}

.comparison-table td.highlight-col {
    background-color: rgba(0, 102, 255, 0.03);
    font-weight: 600;
    color: var(--colors-accent);
}

/* 7-Step Maintenance Grid */
.steps-7-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.step-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-sm);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--colors-accent);
}

.step-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--colors-ink);
}

.step-desc {
    font-size: 12px;
    color: var(--colors-text-muted);
    line-height: 1.4;
}

/* Industrial Partners Bar */
.industry-partners-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 36px;
}

.partner-tag-pill {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-full);
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--colors-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   15. Philosophy, CEO Greetings & Corporate Vision
   ========================================================================== */
.philosophy-section {
    background-color: var(--colors-canvas);
    border-top: 1px solid var(--colors-hairline-soft);
    padding: 100px 0;
}

.ceo-statement-box {
    background: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 48px;
    margin-top: 48px;
    position: relative;
}

.ceo-statement-quote {
    font-size: 24px;
    font-weight: 650;
    color: var(--colors-ink);
    line-height: 1.4;
    margin-bottom: 20px;
    position: relative;
    padding-left: 28px;
    border-left: 4px solid var(--colors-accent);
}

.ceo-statement-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--colors-text-muted);
    margin-bottom: 28px;
}

.ceo-sign-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--colors-hairline);
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.ceo-name-title strong {
    font-size: 16px;
    font-weight: 650;
    color: var(--colors-ink);
}

.ceo-name-title span {
    font-size: 13px;
    color: var(--colors-text-muted);
    margin-left: 8px;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.vision-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.vision-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--rounded-sm);
    background: rgba(0, 102, 255, 0.08);
    color: var(--colors-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.business-card {
    background: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline-soft);
    border-radius: var(--rounded-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==========================================================================
   16. Patents & RSM-X Disposable Mask Innovation
   ========================================================================== */
.patents-section {
    background-color: var(--colors-canvas-soft);
    border-top: 1px solid var(--colors-hairline-soft);
    padding: 100px 0;
}

.rsmx-hero-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 44px;
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.rsmx-layer-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.rsmx-layer-chip {
    background: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-full);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--colors-ink);
}

.patents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.patent-item-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.patent-number-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--colors-accent);
    background: rgba(0, 102, 255, 0.08);
    padding: 4px 10px;
    border-radius: var(--rounded-full);
    align-self: flex-start;
    margin-bottom: 12px;
}

/* ==========================================================================
   17. Warranty, IFU Manuals & UDI Tables
   ========================================================================== */
.warranty-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.ifu-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.udi-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    margin-top: 32px;
}

.udi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.udi-table th, .udi-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--colors-hairline-soft);
}

.udi-table th {
    background: var(--colors-canvas-soft);
    font-weight: 650;
    color: var(--colors-ink);
    text-align: left;
}

/* 18. Responsive Breakpoints */
@media (max-width: 1024px) {
    .dual-shield-hero-grid,
    .rsmx-hero-card {
        grid-template-columns: 1fr;
    }
    
    .timeline-milestones-row,
    .shield-tech-grid,
    .steps-7-grid,
    .vision-grid,
    .business-grid,
    .warranty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .patents-grid {
        grid-template-columns: 1fr;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hero-gallery-card {
        max-width: 600px;
        margin: 0 auto;
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .focus-row, .focus-row.reversed {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 36px;
    }

    .map-layout-box {
        grid-template-columns: 1fr;
    }

    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px) {
    .nav-links, .nav-btn-store {
        display: none;
    }

    .menu-burger {
        display: flex;
    }

    .nav-pill {
        padding: 8px 16px;
    }

    .stats-container-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
    }

    .stat-item:nth-child(2)::after {
        display: none;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-box {
        padding: 24px;
    }

    .hero-floating-chip {
        display: none;
    }
}

/* ==========================================================================
   Aceternity UI Style Floating Mega-Menu Dropdown & Sub-page Styles
   ========================================================================== */
.nav-pill {
    position: relative;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-item-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0;
}

/* .nav-item-dropdown container has no hover background */

.nav-item-dropdown .chevron-icon {
    font-size: 9px;
    transition: transform 0.2s ease;
    opacity: 0.55;
    margin-top: 1px;
}

.nav-item-dropdown:hover .chevron-icon {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* Hover bridge invisible trigger */
.nav-item-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 20px;
}

/* The Floating Mega Panel (Reference: Aceternity UI) */
.mega-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 16px 18px;
    width: 550px;
    max-width: calc(100vw - 32px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    z-index: 100000 !important;
}

/* Alignments */
.mega-dropdown-panel.align-left {
    left: 0;
}

.mega-dropdown-panel.align-center {
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.98);
    transform-origin: top center;
}

.mega-dropdown-panel.align-right {
    right: 0;
    left: auto;
}

.nav-item-dropdown:hover .mega-dropdown-panel,
.nav-item-dropdown:focus-within .mega-dropdown-panel,
.mega-dropdown-panel:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.nav-item-dropdown:hover .mega-dropdown-panel.align-center,
.mega-dropdown-panel.align-center:hover {
    transform: translateX(-50%) translateY(0) scale(1);
}

.mega-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--colors-hairline-soft);
}

.mega-panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--colors-accent);
}

.mega-panel-viewall {
    font-size: 12px;
    font-weight: 600;
    color: var(--colors-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.mega-panel-viewall:hover {
    color: #0066ff;
}

.mega-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mega-preview-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: transparent;
    text-decoration: none;
    transition: all 0.16s ease;
    border: 1px solid transparent;
    min-width: 0;
}

.mega-preview-card:hover {
    background: #f8fafc;
    border-color: rgba(0, 102, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.mega-preview-thumb {
    width: 76px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f5f9;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.mega-preview-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mega-preview-title {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--colors-ink);
    line-height: 1.25;
    margin-bottom: 3px;
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-preview-card:hover .mega-preview-title {
    color: #0066ff;
}

.mega-preview-desc {
    font-size: 11px;
    color: var(--colors-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Dedicated Page Hero Banner */
.dedicated-page-hero {
    padding: 140px 0 50px;
    background: linear-gradient(180deg, #f8faff 0%, var(--colors-canvas) 100%);
    border-bottom: 1px solid var(--colors-hairline-soft);
    text-align: center;
}

.dedicated-page-hero .section-title {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -0.022em;
    color: var(--colors-ink);
    margin: 12px 0 16px;
    line-height: 1.35;
}

.dedicated-page-hero .section-desc {
    max-width: 760px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--colors-text-muted);
}

/* Sub-page quick navigation strip */
.subpage-nav-bar {
    position: sticky;
    top: 76px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--colors-hairline);
    padding: 12px 0;
    text-align: center;
}

.subpage-pills {
    display: inline-flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    padding: 0 8px;
}

.subpage-pill-link {
    background-color: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    color: var(--colors-text-muted);
    border-radius: var(--rounded-full);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.subpage-pill-link:hover,
.subpage-pill-link.active {
    background-color: var(--colors-ink);
    color: #ffffff;
    border-color: var(--colors-ink);
}


/* Institutional Category Filter Pills */
.inst-pill-btn {
    background-color: #ffffff;
    border: 1px solid rgba(0, 102, 255, 0.25);
    color: #1e3a8a;
    border-radius: var(--rounded-full);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.inst-pill-btn:hover {
    color: #0066ff;
    border-color: #0066ff;
    background-color: rgba(0, 102, 255, 0.04);
}

.inst-pill-btn.active {
    background-color: #0066ff;
    color: #ffffff;
    border-color: #0066ff;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
}

/* ==========================================================================
   PRESS SPOTLIGHT & BREAKING NEWS RIBBON (경제뉴스TV 단독 보도)
   ========================================================================== */
.press-breaking-ribbon {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    color: #f8fafc;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 80;
}

.press-ribbon-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.press-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--rounded-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.press-badge-tag.entv {
    background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%);
}

.press-ribbon-link {
    color: #f1f5f9;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 260px;
    transition: var(--transition-fast);
}

.press-ribbon-link:hover {
    color: #38bdf8;
}

.press-ribbon-meta {
    font-size: 12px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.press-ribbon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 4px 12px;
    border-radius: var(--rounded-full);
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.press-ribbon-btn:hover {
    background: #38bdf8;
    color: #0f172a;
    border-color: #38bdf8;
}

/* Press Spotlight Section */
.press-spotlight-section {
    padding: 80px 0;
    background: var(--colors-canvas-soft);
    border-top: 1px solid var(--colors-hairline);
    border-bottom: 1px solid var(--colors-hairline);
}

.press-spotlight-card {
    background: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: 48% 52%;
    gap: 0;
}

@media (max-width: 960px) {
    .press-spotlight-card {
        grid-template-columns: 1fr;
    }
}

.press-media-column {
    padding: 36px;
    background: #f8fafc;
    border-right: 1px solid var(--colors-hairline);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 960px) {
    .press-media-column {
        border-right: none;
        border-bottom: 1px solid var(--colors-hairline);
        padding: 24px;
    }
}

.press-main-image-wrap {
    border-radius: var(--rounded-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    background: #000;
}

.press-main-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.press-main-image-wrap:hover .press-main-image {
    transform: scale(1.02);
}

.press-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    color: #ffffff;
    font-size: 12px;
    padding: 24px 16px 10px;
    line-height: 1.4;
}

.press-thumbs-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.press-thumb-item {
    border-radius: 6px;
    overflow: hidden;
    height: 64px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    background: #000;
}

.press-thumb-item:hover,
.press-thumb-item.active {
    border-color: #0066ff;
    transform: translateY(-2px);
}

.press-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.press-content-column {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 960px) {
    .press-content-column {
        padding: 24px;
    }
}

.press-source-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.press-outlet-badge {
    background: #0066ff;
    color: #ffffff;
    font-weight: 700;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.press-pub-date {
    font-size: 12.5px;
    color: var(--colors-text-muted);
}

.press-article-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--colors-ink);
    line-height: 1.35;
    margin-bottom: 14px;
}

.press-article-lead {
    font-size: 14.5px;
    color: var(--colors-ink);
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

.press-points-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.press-point-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--colors-ink);
    line-height: 1.5;
}

.press-point-item i {
    color: #0066ff;
    margin-top: 3px;
    flex-shrink: 0;
}

.press-ceo-quote-card {
    background: #f0f7ff;
    border-left: 4px solid #0066ff;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.press-ceo-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2);
    flex-shrink: 0;
}

.press-ceo-quote-text {
    font-size: 13px;
    line-height: 1.55;
    color: #1e3a8a;
}

.press-ceo-quote-author {
    font-size: 12px;
    font-weight: 650;
    color: #0f172a;
    margin-top: 4px;
    display: block;
}

.press-actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   CEO EXECUTIVE CARD (박은정 대표이사 프로필 및 메시지)
   ========================================================================== */
.ceo-executive-card {
    background: var(--colors-canvas);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: grid;
    grid-template-columns: 320px 1fr;
    margin-bottom: 48px;
}

@media (max-width: 900px) {
    .ceo-executive-card {
        grid-template-columns: 1fr;
    }
}

.ceo-portrait-column {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid var(--colors-hairline);
}

@media (max-width: 900px) {
    .ceo-portrait-column {
        border-right: none;
        border-bottom: 1px solid var(--colors-hairline);
        padding: 28px 20px;
    }
}

.ceo-photo-frame {
    width: 200px;
    height: 260px;
    border-radius: var(--rounded-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 3px solid #ffffff;
    margin-bottom: 18px;
    background: #fff;
}

.ceo-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.ceo-title-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--colors-ink);
    margin-bottom: 4px;
}

.ceo-title-en {
    font-size: 13px;
    color: var(--colors-text-muted);
    margin-bottom: 10px;
    display: block;
}

.ceo-affiliation {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--colors-hairline);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    width: 100%;
}

.ceo-content-column {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 900px) {
    .ceo-content-column {
        padding: 24px;
    }
}

.ceo-card-quote {
    font-size: 21px;
    font-weight: 650;
    color: var(--colors-ink);
    line-height: 1.45;
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 4px solid var(--colors-accent);
}

.ceo-card-body {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--colors-text-muted);
    margin-bottom: 24px;
}

.ceo-card-body strong {
    color: var(--colors-ink);
}

.ceo-interview-highlight {
    background: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 13.5px;
    color: var(--colors-ink);
    line-height: 1.6;
}

.ceo-interview-highlight i {
    color: #0066ff;
    margin-right: 6px;
}

.ceo-badges-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--colors-hairline);
    padding-top: 20px;
}

/* ==========================================================================
   PATENT FORMULA & MATHEMATICAL MODELING BOX (COMPACT & SLEEK)
   ========================================================================== */
.patents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 28px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.patent-item-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.patent-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.patent-formula-compact {
    background: #0f172a;
    color: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0 8px;
    border: 1px solid #334155;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.formula-compact-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
    margin-bottom: 8px;
    gap: 6px;
    flex-wrap: wrap;
}

.formula-compact-bar .formula-badge {
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.2px;
}

.formula-compact-bar .formula-subtitle {
    font-size: 10.5px;
    color: #94a3b8;
}

.formula-compact-eq {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    text-align: center;
    font-size: 13.5px;
    color: #f8fafc;
    line-height: 1.4;
}

.formula-details-toggle {
    margin-top: 8px;
}

.formula-details-toggle summary {
    font-size: 11px;
    font-weight: 600;
    color: #38bdf8;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.08);
    transition: background 0.15s ease, color 0.15s ease;
}

.formula-details-toggle summary:hover {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
}

.formula-details-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.formula-params-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 10px;
    font-size: 11px;
    color: #cbd5e1;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.formula-params-grid .param-item {
    line-height: 1.4;
}

.formula-params-grid strong {
    color: #38bdf8;
}

.formula-takeaway {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: #93c5fd;
    line-height: 1.45;
    background: rgba(56, 189, 248, 0.08);
    border-left: 3px solid #38bdf8;
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
}

.formula-takeaway i {
    color: #fbbf24;
    margin-top: 2px;
    flex-shrink: 0;
}

.formula-takeaway strong {
    color: #ffffff;
}


/* ==========================================================================
   Modern Global Pop-up Store & Drop Notification System (Silicon Valley Tech Spec)
   Theme: Linear/Vercel-inspired Micro-interactions, Dynamic Cursor Spotlight,
          Real-time D-Day Countdowns, VIP Digital Pass, and Live Social Alerts
   ========================================================================== */

/* 1. Dynamic Cursor Spotlight Effect */
.spotlight-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 102, 255, 0.12), transparent 45%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.spotlight-card:hover::before {
    opacity: 1;
}

/* 2. Pop-up Store & Exhibition Drop Section */
.popup-drop-section {
    position: relative;
    padding: 100px 0;
    background: #090d16;
    color: #f8fafc;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.popup-drop-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.popup-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 102, 255, 0.12);
    border: 1px solid rgba(0, 102, 255, 0.35);
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.pulse-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.popup-section-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 12px;
}

.popup-section-desc {
    font-size: 15px;
    color: #94a3b8;
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* Category Filter Chips */
.popup-filter-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.popup-filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

.popup-filter-btn.active {
    background: #0066ff;
    color: #ffffff;
    border-color: #0066ff;
    box-shadow: 0 0 16px rgba(0, 102, 255, 0.4);
}

/* Pop-up Cards Grid */
.popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    position: relative;
    z-index: 2;
}

.popup-card {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.popup-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 102, 255, 0.5);
    box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.2);
}

.popup-card-badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.popup-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Countdown Block */
.popup-countdown-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 14px;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.countdown-lbl {
    font-size: 9px;
    color: #64748b;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 600;
}

.countdown-sep {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #38bdf8;
    animation: blinkSep 1s infinite;
}

@keyframes blinkSep {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.35;
}

.popup-desc {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.55;
    margin-bottom: 20px;
}

.popup-meta-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: #cbd5e1;
    margin-bottom: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.popup-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.popup-meta-item i {
    width: 16px;
    color: #38bdf8;
    text-align: center;
}

.popup-perks-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.popup-perk-chip {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
}

.popup-action-row {
    display: flex;
    gap: 10px;
}

.popup-action-btn-main {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0066ff;
    color: #ffffff;
    border: 1px solid #0066ff;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.3);
}

.popup-action-btn-main:hover {
    background: #0052cc;
    border-color: #0052cc;
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.5);
    transform: translateY(-1px);
}

.popup-action-btn-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.popup-action-btn-sub:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

/* 3. Floating Quick Pop-up Alert Dock (Bottom-Right) */
.popup-floating-dock {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 102, 255, 0.45);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 102, 255, 0.25);
    border-radius: 9999px;
    padding: 8px 18px 8px 12px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.popup-floating-dock:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #0066ff;
    box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 102, 255, 0.45);
}

.dock-badge-pulse {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 102, 255, 0.2);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dock-title-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #f8fafc;
}

.dock-arrow-icon {
    font-size: 11px;
    color: #38bdf8;
    transition: transform 0.2s ease;
}

.popup-floating-dock:hover .dock-arrow-icon {
    transform: translateX(3px);
}

/* 4. Live Social Activity Toast (Bottom-Left) */
.live-activity-toast {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 8999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 18px;
    color: #f8fafc;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 380px;
}

.live-activity-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.toast-bell-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    flex-shrink: 0;
}

.toast-content {
    display: flex;
    flex-direction: column;
}

.toast-message {
    font-size: 12px;
    font-weight: 500;
    color: #f8fafc;
    line-height: 1.35;
}

.toast-message strong {
    color: #60a5fa;
}

.toast-time {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
}

/* 5. Modern Interactive VIP Pass & RSVP Modal */
.popup-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-modal {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 102, 255, 0.2);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #f8fafc;
}

.popup-modal-overlay.active .popup-modal {
    transform: scale(1);
}

.popup-modal-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popup-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.popup-modal-close {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.popup-modal-close:hover {
    color: #ffffff;
}

.popup-modal-body {
    padding: 24px 28px;
}

.vip-ticket-preview {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px dashed rgba(0, 102, 255, 0.4);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
    position: relative;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticket-brand {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.1em;
}

.ticket-badge {
    font-size: 10px;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.ticket-event-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.ticket-meta-row {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
}

.ticket-barcode-sim {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #64748b;
}

.modal-form-group {
    margin-bottom: 16px;
}

.modal-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.modal-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #ffffff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-input:focus {
    border-color: #0066ff;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.2);
}

.modal-submit-btn {
    width: 100%;
    background: #0066ff;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
}

.modal-submit-btn:hover {
    background: #0052cc;
    box-shadow: 0 6px 22px rgba(0, 102, 255, 0.55);
}

@media (max-width: 768px) {
    .popup-grid {
        grid-template-columns: 1fr;
    }
    .popup-section-title {
        font-size: 28px;
    }
    .popup-floating-dock {
        bottom: 16px;
        right: 16px;
        padding: 6px 14px 6px 10px;
    }
    .dock-title-text {
        display: none;
    }
    .live-activity-toast {
        left: 16px;
        right: 16px;
        bottom: 80px;
        max-width: none;
    }
}

/* ==========================================================================
   19. Modern Clean Flagship Home Bento Grid & Teaser Cards (Silicon Valley Spec)
   ========================================================================== */
.home-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.home-bento-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.home-bento-card:hover {
    transform: translateY(-4px);
    border-color: #0066ff;
    box-shadow: 0 16px 36px -10px rgba(0, 102, 255, 0.12);
}

.bento-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 102, 255, 0.08);
    color: #0066ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.bento-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0066ff;
    margin-bottom: 6px;
}

.bento-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--colors-ink);
    margin-bottom: 10px;
    line-height: 1.35;
}

.bento-desc {
    font-size: 13.5px;
    color: var(--colors-text-muted);
    line-height: 1.6;
    margin-bottom: 22px;
}

.bento-link-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 650;
    color: #0066ff;
}

.bento-link-action i {
    transition: transform 0.2s ease;
}

.home-bento-card:hover .bento-link-action i {
    transform: translateX(4px);
}

/* Flagship 3-Card Showcase */
.flagship-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.flagship-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.flagship-card:hover {
    transform: translateY(-4px);
    border-color: #0066ff;
    box-shadow: 0 16px 36px -10px rgba(0, 102, 255, 0.12);
}

.flagship-media-wrap {
    height: 220px;
    background: var(--colors-canvas-soft);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.flagship-media-wrap img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.flagship-card:hover .flagship-media-wrap img {
    transform: scale(1.04);
}

.flagship-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flagship-badge {
    font-size: 11px;
    font-weight: 700;
    color: #0066ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.flagship-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--colors-ink);
    margin-bottom: 8px;
}

.flagship-desc {
    font-size: 13px;
    color: var(--colors-text-muted);
    line-height: 1.55;
    margin-bottom: 18px;
}

.flagship-link {
    font-size: 13px;
    font-weight: 650;
    color: #0066ff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.flagship-link i {
    transition: transform 0.2s ease;
}

.flagship-card:hover .flagship-link i {
    transform: translateX(4px);
}

/* Compact Drop Spotlight Card */
.compact-drop-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(0, 102, 255, 0.35);
    border-radius: var(--rounded-md);
    padding: 36px 40px;
    color: #ffffff;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
    align-items: center;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.compact-drop-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.2), transparent 70%);
    pointer-events: none;
}

.compact-drop-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.compact-drop-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.compact-drop-desc {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 20px;
}

.compact-drop-right {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.compact-cd-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #38bdf8;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .flagship-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .compact-drop-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-bento-grid {
        grid-template-columns: 1fr;
    }
    .flagship-showcase-grid {
        grid-template-columns: 1fr;
    }
    .compact-drop-card {
        padding: 24px;
    }
}

/* ==========================================================================
   20. Standard Clean Medical Device Hero & Spacing System
   ========================================================================== */
.medical-hero-section {
    padding: 100px 0 80px;
    background: linear-gradient(180deg, #ffffff 0%, var(--colors-canvas-soft) 100%);
    border-bottom: 1px solid var(--colors-hairline);
    position: relative;
    overflow: hidden;
}

.medical-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.medical-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.medical-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 102, 255, 0.08);
    border: 1px solid rgba(0, 102, 255, 0.25);
    color: #0066ff;
    padding: 6px 14px;
    border-radius: var(--rounded-full);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

.medical-hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--colors-ink);
    margin-bottom: 18px;
}

.medical-hero-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--colors-text-muted);
    margin-bottom: 28px;
}

.medical-pills-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.medical-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 6px 14px;
    border-radius: var(--rounded-full);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--colors-ink);
}

.medical-pill i {
    color: #0066ff;
    font-size: 11px;
}

/* Medical Hero Visual Showcase Card */
.medical-hero-showcase {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-lg);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 102, 255, 0.04);
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-showcase-imgs {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    align-items: center;
    height: 300px;
}

.hero-showcase-img-box {
    background: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline-soft);
    border-radius: var(--rounded-md);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
}

.hero-showcase-img-box img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.medical-hero-showcase:hover .hero-showcase-img-box img {
    transform: scale(1.04);
}

.hero-showcase-float-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 960px) {
    .hero-showcase-float-badges {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .hero-showcase-float-badges {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.hero-float-badge {
    background: var(--colors-canvas-soft);
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hero-float-badge img {
    flex-shrink: 0;
}

.hero-float-badge div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.hero-float-badge strong {
    font-size: 12.5px;
    color: var(--colors-ink);
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.hero-float-badge span {
    font-size: 11px;
    color: var(--colors-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .medical-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .medical-hero-title {
        font-size: 34px;
    }
}

/* ==========================================================================
   21. Prestige CEO Presentation & Credentials System (about.html)
   ========================================================================== */
.ceo-prestige-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-lg);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 48px;
}

.ceo-prestige-hero-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    border-bottom: 1px solid var(--colors-hairline);
}

@media (max-width: 960px) {
    .ceo-prestige-hero-grid {
        grid-template-columns: 1fr;
    }
}

.ceo-prestige-sidebar {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-right: 1px solid var(--colors-hairline);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (max-width: 960px) {
    .ceo-prestige-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--colors-hairline);
    }
}

.ceo-portrait-prestige-frame {
    width: 240px;
    height: 310px;
    border-radius: var(--rounded-md);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    border: 4px solid #ffffff;
    margin-bottom: 22px;
    background: #ffffff;
}

.ceo-portrait-prestige-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.ceo-prestige-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--colors-ink);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.ceo-prestige-title-en {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--colors-text-muted);
    margin-bottom: 16px;
}

.ceo-prestige-affil-box {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-sm);
    padding: 12px 16px;
    font-size: 12.5px;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 18px;
    width: 100%;
}

.ceo-prestige-badges-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ceo-prestige-body-col {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .ceo-prestige-body-col {
        padding: 28px 20px;
    }
}

.ceo-prestige-quote-banner {
    font-size: 20px;
    font-weight: 700;
    color: var(--colors-ink);
    line-height: 1.5;
    margin-bottom: 24px;
    padding-left: 20px;
    border-left: 4px solid #0066ff;
}

.ceo-narrative-p {
    font-size: 15px;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 18px;
}

.ceo-narrative-p strong {
    color: var(--colors-ink);
    font-weight: 700;
}

.ceo-signature-row {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--colors-hairline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ceo-sign-text {
    font-size: 14px;
    color: var(--colors-text-muted);
}

.ceo-sign-text strong {
    font-size: 18px;
    color: var(--colors-ink);
    margin-left: 8px;
}

.ceo-official-seal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 102, 255, 0.06);
    border: 1px dashed rgba(0, 102, 255, 0.35);
    padding: 6px 14px;
    border-radius: var(--rounded-full);
    font-size: 12px;
    font-weight: 700;
    color: #0066ff;
}

/* CEO Credentials & Research Timeline Box */
.ceo-credentials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 40px;
    background: #ffffff;
    border-bottom: 1px solid var(--colors-hairline);
}

@media (max-width: 768px) {
    .ceo-credentials-grid {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }
}

.credentials-col-title {
    font-size: 16px;
    font-weight: 750;
    color: var(--colors-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066ff;
}

.credentials-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.credentials-item {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.55;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.credentials-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0066ff;
    margin-top: 8px;
    flex-shrink: 0;
}

/* Executive Photo Gallery */
.ceo-gallery-wrap {
    padding: 40px;
    background: var(--colors-canvas-soft);
}

@media (max-width: 768px) {
    .ceo-gallery-wrap {
        padding: 28px 20px;
    }
}

.ceo-gallery-title {
    font-size: 16px;
    font-weight: 750;
    color: var(--colors-ink);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ceo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .ceo-gallery-grid {
        grid-template-columns: 1fr;
    }
}

.ceo-gallery-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.ceo-gallery-photo {
    height: 220px;
    overflow: hidden;
}

.ceo-gallery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.ceo-gallery-card:hover .ceo-gallery-photo img {
    transform: scale(1.04);
}

.ceo-gallery-caption {
    padding: 14px 16px;
    font-size: 12.5px;
    color: var(--colors-ink);
    font-weight: 600;
    line-height: 1.45;
    background: #ffffff;
    border-top: 1px solid var(--colors-hairline-soft);
}

/* Responsive adjustments for Medical Hero */
@media (max-width: 640px) {
    .medical-hero-section {
        padding: 60px 0 40px;
    }
    .medical-hero-title {
        font-size: 28px;
    }
    .medical-hero-showcase {
        padding: 20px 16px;
    }
    .hero-showcase-imgs {
        height: 220px;
    }
    .hero-showcase-float-badges {
        grid-template-columns: 1fr;
    }
}

/* 22. CEO Teaser Card (index.html) */
.ceo-teaser-card {
    background: #ffffff;
    border: 1px solid var(--colors-hairline);
    border-radius: var(--rounded-md);
    padding: 36px 44px;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 36px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.ceo-teaser-avatar-wrap {
    text-align: center;
}

.ceo-teaser-avatar {
    width: 140px;
    height: 175px;
    object-fit: cover;
    object-position: top center;
    border-radius: 12px;
    border: 1px solid var(--colors-hairline);
    margin: 0 auto 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: block;
}

.ceo-teaser-name {
    font-size: 16px;
    font-weight: 750;
    color: var(--colors-ink);
    display: block;
}

.ceo-teaser-role {
    font-size: 12px;
    color: var(--colors-text-muted);
}

.ceo-teaser-content {
    display: flex;
    flex-direction: column;
}

.ceo-teaser-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--colors-ink);
    margin-bottom: 12px;
}

.ceo-teaser-quote {
    font-size: 14px;
    color: var(--colors-text-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .ceo-teaser-card {
        grid-template-columns: 1fr;
        padding: 28px 20px;
        text-align: center;
        gap: 24px;
    }
    .ceo-teaser-avatar-wrap {
        margin: 0 auto;
    }
    .ceo-teaser-content {
        align-items: center;
    }
}

/* ==========================================================================
   23. Global Feedback Overhaul Components (P0/P1/P2 Complete System)
   ========================================================================== */

/* Hide fake social proof toast and floating dock permanently */
.live-activity-toast,
#live-activity-toast,
.popup-floating-dock {
    display: none !important;
}

/* Fix Stats Grid & Stat Cards across Desktop, Tablet, Mobile */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 12px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 22px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-number {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    color: #0052cc;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.stat-desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Customer Segment Entry Path 4-Grid (Home) */
.segment-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.segment-entry-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.segment-entry-card:hover {
    transform: translateY(-3px);
    border-color: #0052cc;
    box-shadow: 0 12px 28px rgba(0, 82, 204, 0.09);
}

.segment-entry-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eff6ff;
    color: #0052cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.segment-entry-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.segment-entry-desc {
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 14px;
}

.segment-entry-meta {
    font-size: 12px;
    font-weight: 600;
    color: #0052cc;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1024px) {
    .segment-entry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .segment-entry-grid {
        grid-template-columns: 1fr;
    }
}

/* KMDIA Medical Device Ad Review Notice Badge & Compliance Box */
.kmdia-compliance-bar {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #16a34a;
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.kmdia-seal-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #166534;
    flex-shrink: 0;
}

.kmdia-notice-text {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.5;
    flex: 1;
    min-width: 240px;
}

/* Site Footer & Logo Fix (No White Box) */
.site-footer {
    background-color: #0f172a;
    color: #cbd5e1;
    padding: 64px 0 40px;
    border-top: 1px solid #1e293b;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
}

@media (max-width: 960px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-logo,
.footer-logo-img {
    height: 44px !important;
    width: auto !important;
    filter: none !important;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 14px;
}

.footer-desc {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.65;
    margin-bottom: 14px;
}

.footer-contact-info {
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.75;
}

.footer-links-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
}

.footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links-col a {
    font-size: 13px;
    color: #94a3b8;
    transition: color 0.15s ease;
}

.footer-links-col a:hover {
    color: #ffffff;
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #64748b;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: #cbd5e1;
    font-weight: 600;
    text-decoration: underline;
}

/* Multi-Attribute Product Filter Bar */
.multi-filter-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.filter-group-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-group-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    min-width: 84px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-chip-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip-btn:hover {
    border-color: #0052cc;
    color: #0052cc;
}

.filter-chip-btn.active {
    background: #0052cc;
    border-color: #0052cc;
    color: #ffffff;
}

/* Product Detail Modal (Spec Sheet, Size/Weight Chart, Downloads) */
.product-detail-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    z-index: 100005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.product-detail-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.product-detail-modal {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
    border: 1px solid #e2e8f0;
    padding: 32px;
    position: relative;
}

@media (max-width: 640px) {
    .product-detail-modal {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   Hirael E-commerce-04 (Ecommerce04) Catalog Layout & Color Swatch System
   ========================================================================== */
.ecom04-section {
    background-color: #ffffff;
    padding: 56px 0 88px;
}

.ecom04-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.ecom04-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

@media (max-width: 1024px) {
    .ecom04-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.ecom04-sidebar {
    position: sticky;
    top: 96px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px;
}

@media (max-width: 1024px) {
    .ecom04-sidebar {
        display: none;
    }
    .ecom04-sidebar.mobile-open {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 100002;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -20px 50px rgba(10, 25, 47, 0.28);
        padding: 24px;
    }
}

.ecom04-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 18px;
}

.ecom04-sidebar-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 800;
    color: #0A192F;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ecom04-clear-btn {
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.ecom04-clear-btn:hover:not(:disabled) {
    color: #0A192F;
    background: #E2E8F0;
}

.ecom04-clear-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ecom04-fieldset {
    border: none;
    padding: 18px 0;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ecom04-fieldset:first-of-type {
    padding-top: 0;
}

.ecom04-fieldset:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.ecom04-legend {
    font-family: var(--font-spec);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
    margin-bottom: 6px;
    display: block;
}

.ecom04-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    padding: 3px 0;
}

.ecom04-check-row input[type="checkbox"],
.ecom04-check-row input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #1E3A8A;
    cursor: pointer;
    flex-shrink: 0;
}

.ecom04-check-label {
    flex: 1;
    font-family: var(--font-sans);
    font-weight: 500;
    color: #0A192F;
}

.ecom04-check-count {
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    background: #E2E8F0;
    padding: 1px 7px;
    border-radius: 999px;
}

/* Colour Swatches inside FilterPanel & ProductCard */
.ecom04-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ecom04-swatch-btn {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: 1.5px solid rgba(10, 25, 47, 0.18);
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.ecom04-swatch-btn:hover {
    transform: scale(1.08);
}

.ecom04-swatch-btn.active,
.ecom04-swatch-btn[data-state="on"] {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0A192F;
    transform: scale(1.06);
}

/* Results Toolbar & Active Filter Chips */
.ecom04-results-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.ecom04-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2E8F0;
}

.ecom04-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ecom04-mobile-filter-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 700;
    color: #0A192F;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .ecom04-mobile-filter-trigger {
        display: inline-flex;
    }
}

.ecom04-result-count {
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.ecom04-sort-select {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: #0A192F;
    background: #ffffff;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 190px;
    cursor: pointer;
}

.ecom04-active-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ecom04-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 6px 0 11px;
    border-radius: 9999px;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: #0A192F;
}

.ecom04-chip-remove {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #64748B;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 11px;
}

.ecom04-chip-remove:hover {
    background: #E2E8F0;
    color: #0A192F;
}

/* Product Grid & Cards (Aspect 4/5 with Color Variant Swatches) */
.ecom04-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}

@media (max-width: 900px) {
    .ecom04-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

@media (max-width: 540px) {
    .ecom04-grid {
        grid-template-columns: 1fr;
    }
}

.ecom04-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
    isolation: isolate;
}

.ecom04-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(10, 25, 47, 0.08);
    border-color: #94A3B8;
}

.ecom04-card-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    z-index: 5;
}

.ecom04-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3.9;
    border-radius: 10px;
    border: 1px solid #F1F5F9;
    background: #F8FAFC;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1;
}

.ecom04-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
}

.ecom04-card:hover .ecom04-img-wrap img {
    transform: scale(1.04);
}

.ecom04-badge-top {
    display: inline-flex;
    align-items: center;
    background: #0A192F;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    z-index: 6;
}

.ecom04-badge-mmpb {
    display: inline-flex;
    align-items: center;
    background: #EFF6FF;
    color: #1E3A8A;
    border: 1px solid #BFDBFE;
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.3;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 6;
}

.ecom04-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ecom04-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ecom04-card-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #0A192F;
    line-height: 1.42;
    letter-spacing: -0.018em;
    word-break: keep-all;
}

.ecom04-card-spec-pill {
    flex-shrink: 0;
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 800;
    color: #0EA5E9;
    line-height: 1.35;
}

.ecom04-card-desc {
    font-family: var(--font-sans);
    font-size: 13px;
    color: #475569;
    line-height: 1.58;
    word-break: keep-all;
}

/* Inline Product Color Variant Selector inside Card */
.ecom04-variant-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin-top: 4px;
}

.ecom04-variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.ecom04-variant-label-prefix {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

.ecom04-variant-swatches {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ecom04-variant-dot {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 1.5px solid rgba(10, 25, 47, 0.22);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.ecom04-variant-dot:hover {
    transform: scale(1.12);
}

.ecom04-variant-dot.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #1E3A8A;
    transform: scale(1.08);
}

.ecom04-variant-name {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    color: #0A192F;
    line-height: 1.35;
}

.ecom04-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-spec);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: #64748B;
    padding-top: 4px;
}

.ecom04-stars {
    color: #F59E0B;
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

.ecom04-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

/* =========================================================
   Interactive Hover Links — Home · SOLUTIONS BY INSTITUTION
   (21st.dev InteractiveHoverLinks → Vanilla JS/CSS 포팅판)
   ========================================================= */
.hover-links {
    --hl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --hl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hl-accent: #0052cc;
    --hl-ink: var(--colors-ink, #0A192F);
    --hl-muted: var(--colors-text-faint, #64748B);
    --hl-faint: #94A3B8;
    --hl-hairline: var(--colors-hairline-soft, #E2E8F0);
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hl-hairline);
}
.hover-links > li { margin: 0; padding: 0; }

.hover-link {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    padding: 30px 8px;
    border-bottom: 1px solid var(--hl-hairline);
    color: inherit;
    text-decoration: none;
    outline: none;
}
/* 하단 포인트 라인: navy → cyan, 왼쪽에서 오른쪽으로 그려짐 */
.hover-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--hl-accent) 0%, var(--colors-point-cyan, #0EA5E9) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--hl-ease-out);
    z-index: 2;
}

.hover-link__index {
    position: relative;
    z-index: 1;
    align-self: start;
    padding-top: 12px;
    font-family: var(--font-spec, 'Pretendard Variable', Pretendard, sans-serif);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--hl-faint);
    transition: color 0.35s ease;
}

.hover-link__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.hover-link__title {
    margin: 0;
    font-family: var(--font-heading, 'Wanted Sans Variable', 'Pretendard Variable', sans-serif);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--hl-muted);
    transition: color 0.5s ease;
}
.hover-link__chars { display: inline-block; transition: transform 0.5s var(--hl-ease-spring); }
.hover-link__word { display: inline-block; white-space: nowrap; }
.hover-link__char { display: inline-block; transition: transform 0.45s var(--hl-ease-spring); }

.hover-link__sub {
    display: block;
    max-width: 560px;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hl-muted);
    word-break: keep-all;
    transition: color 0.5s ease;
}

.hover-link__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-ui, 'SUIT Variable', 'Pretendard Variable', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hl-muted);
    white-space: nowrap;
    transition: color 0.35s ease;
}
.hover-link__arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--colors-hairline, #CBD5E1);
    border-radius: 9999px;
    background: #ffffff;
    color: var(--hl-ink);
    font-size: 16px;
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.hover-link__arrow i {
    position: absolute;
    transition: transform 0.5s var(--hl-ease-spring), opacity 0.3s ease;
}
.hover-link__arrow i:last-child { transform: translateX(-180%); opacity: 0; }

/* 커서를 따라다니는 이미지 카드 */
.hover-link__media {
    position: absolute;
    z-index: 0;
    left: 62%;
    top: 50%;
    width: 240px;
    aspect-ratio: 4 / 3;
    pointer-events: none;
    transform: translate3d(calc(-50% + var(--hl-dx, 0px)), calc(-50% + var(--hl-dy, 0px)), 0);
    will-change: transform;
}
.hover-link__img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--hl-hairline);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 48px -16px rgba(10, 25, 47, 0.28), 0 12px 28px rgba(0, 82, 204, 0.09);
    opacity: 0;
    transform: scale(0) rotate(-8deg);
    transition: transform 0.55s var(--hl-ease-spring), opacity 0.25s ease;
}
.hover-link__img[data-fit="contain"] { object-fit: contain; padding: 10px; }

/* ---------- Hover / Keyboard focus ---------- */
.hover-link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.hover-link:is(:hover, :focus-visible) .hover-link__index { color: var(--colors-point-cyan, #0EA5E9); }
.hover-link:is(:hover, :focus-visible) .hover-link__title { color: var(--hl-ink); }
.hover-link:is(:hover, :focus-visible) .hover-link__sub { color: var(--colors-text-muted, #334155); }
.hover-link:is(:hover, :focus-visible) .hover-link__cta { color: var(--hl-accent); }
.hover-link:is(:hover, :focus-visible) .hover-link__chars { transform: translateX(-16px); }
.hover-link:is(:hover, :focus-visible) .hover-link__char {
    transform: translateX(16px);
    transition-delay: calc(120ms + var(--i, 0) * 28ms);
}
.hover-link:is(:hover, :focus-visible) .hover-link__arrow {
    background: var(--hl-ink);
    border-color: var(--hl-ink);
    color: #ffffff;
}
.hover-link:is(:hover, :focus-visible) .hover-link__arrow i:first-child { transform: translateX(180%); opacity: 0; }
.hover-link:is(:hover, :focus-visible) .hover-link__arrow i:last-child { transform: translateX(0); opacity: 1; }
.hover-link:is(:hover, :focus-visible) .hover-link__img { opacity: 1; transform: scale(1) rotate(4deg); }
.hover-link:focus-visible {
    outline: 2px solid var(--colors-point-cyan, #0EA5E9);
    outline-offset: 4px;
    border-radius: 12px;
}

/* 스크린리더 전용 원문 텍스트 */
.hl-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Touch 기기: 이미지·글자 애니메이션 끄고 기본 상태를 읽기 좋게 ---------- */
@media (hover: none), (pointer: coarse) {
    .hover-link__media { display: none; }
    .hover-link__title { color: var(--hl-ink); }
    .hover-link__sub { color: #475569; }
    .hover-link .hover-link__chars,
    .hover-link .hover-link__char { transform: none !important; transition: none !important; }
}

/* ---------- Tablet 이하: 본문·CTA와 겹치지 않도록 떠다니는 이미지 숨김 ---------- */
@media (max-width: 1080px) {
    .hover-link__media { display: none; }
}

/* ---------- Mobile: 2열(본문 | 화살표) + CTA 문구는 본문 아래로 ---------- */
@media (max-width: 768px) {
    .hover-link {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        padding: 22px 4px;
    }
    .hover-link__index { grid-column: 1 / -1; padding-top: 0; margin-bottom: 6px; }
    .hover-link__body { grid-column: 1; grid-row: 2; }
    .hover-link__title { font-size: 22px; color: var(--hl-ink); }
    .hover-link__sub { font-size: 14px; margin-top: 6px; color: #475569; }
    .hover-link__cta { display: contents; }
    .hover-link__label { grid-column: 1; grid-row: 3; margin-top: 10px; font-size: 13px; color: var(--hl-accent); }
    .hover-link__arrow { grid-column: 2; grid-row: 2; width: 40px; height: 40px; font-size: 14px; }
    .hover-link__media { display: none; }
}

/* ---------- 모션 최소화 설정 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
    .hover-link__media { display: none; }
    .hover-link::after,
    .hover-link__chars,
    .hover-link__char,
    .hover-link__arrow i { transition: none !important; }
    .hover-link .hover-link__chars,
    .hover-link .hover-link__char { transform: none !important; }
}

/* =========================================================
   Reference Wall — Home · TRUSTED BY 500+ INSTITUTIONS
   (21st.dev testimonial-v2 → Vanilla JS/CSS 포팅판, 후기 대신 실제 납품·구축·보도 데이터)
   ========================================================= */
.ref-wall {
    --ref-gap: 20px;
    --ref-height: 600px;
    --ref-accent: #0052cc;
    --ref-ink: #0F172A;
    --ref-hairline: var(--colors-hairline-soft, #E2E8F0);
    margin-bottom: 48px;
}

/* JS가 없거나 모션 최소화 설정일 때: 정적 3열 그리드 */
.ref-wall__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ref-gap);
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ref-wall__list > li,
.ref-col__group > li { margin: 0; padding: 0; }

/* JS 적용 후: 세로 무한 스크롤 컬럼 */
.ref-wall.is-enhanced .ref-wall__viewport {
    position: relative;
    max-height: var(--ref-height);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.ref-wall.is-enhanced .ref-wall__list { display: none; }

.ref-wall__cols {
    display: grid;
    grid-template-columns: repeat(var(--ref-cols, 3), minmax(0, 1fr));
    gap: var(--ref-gap);
    align-items: start;
}
.ref-col__track {
    animation: ref-wall-scroll var(--ref-duration, 40s) linear infinite;
    will-change: transform;
}
.ref-col__half,
.ref-col__group {
    display: flex;
    flex-direction: column;
    gap: var(--ref-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ref-col__half { padding-bottom: var(--ref-gap); }

@keyframes ref-wall-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}

/* 읽는 동안 멈춤: 컬럼 hover / 키보드 포커스 / 일시정지 버튼 */
.ref-col:hover .ref-col__track,
.ref-wall:focus-within .ref-col__track,
.ref-wall.is-paused .ref-col__track { animation-play-state: paused; }

/* ---------- 카드 (홈 .stat-card 와 같은 톤) ---------- */
.ref-card {
    background: #ffffff;
    border: 1px solid var(--ref-hairline);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ref-card:hover {
    transform: translateY(-3px);
    border-color: var(--ref-accent);
    box-shadow: 0 12px 28px rgba(0, 82, 204, 0.09);
}

.ref-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--colors-accent-soft, #EFF6FF);
    color: var(--colors-accent, #1E3A8A);
    font-family: var(--font-ui, 'SUIT Variable', 'Pretendard Variable', sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ref-card__stat {
    margin: 14px 0 0;
    font-family: var(--font-sans, 'Pretendard Variable', Pretendard, sans-serif);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ref-accent);
}
.ref-card__unit { margin-left: 2px; font-size: 16px; font-weight: 700; }
.ref-card__label {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ref-ink);
}
.ref-card__text {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
    word-break: keep-all;
}
.ref-card__text--headline {
    font-family: var(--font-heading, 'Wanted Sans Variable', 'Pretendard Variable', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ref-ink);
}

.ref-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ref-hairline);
}
.ref-card__chip + .ref-card__foot { margin-top: 16px; padding-top: 0; border-top: 0; }
.ref-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--colors-accent-soft, #EFF6FF);
    color: var(--ref-accent);
    font-size: 16px;
}
.ref-card__who { min-width: 0; }
.ref-card__name {
    display: block;
    font-family: var(--font-heading, 'Wanted Sans Variable', 'Pretendard Variable', sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ref-ink);
    word-break: keep-all;
}
.ref-card__meta {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--colors-text-faint, #64748B);
}
.ref-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--font-ui, 'SUIT Variable', 'Pretendard Variable', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--ref-accent);
    text-decoration: none;
}
.ref-card__link:hover { text-decoration: underline; }
.ref-card__link:focus-visible {
    outline: 2px solid var(--colors-point-cyan, #0EA5E9);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- 일시정지 버튼 ---------- */
.ref-wall__controls {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.ref-wall__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--colors-hairline, #CBD5E1);
    border-radius: 9999px;
    background: #ffffff;
    color: #475569;
    font-family: var(--font-ui, 'SUIT Variable', 'Pretendard Variable', sans-serif);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.ref-wall__toggle:hover { border-color: var(--ref-accent); color: var(--ref-accent); }
.ref-wall__toggle:focus-visible {
    outline: 2px solid var(--colors-point-cyan, #0EA5E9);
    outline-offset: 3px;
}
.ref-wall__toggle[hidden] { display: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
    .ref-wall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .ref-wall { --ref-gap: 14px; --ref-height: 520px; margin-bottom: 36px; }
    .ref-wall__list { grid-template-columns: minmax(0, 1fr); }
    .ref-card { padding: 20px 18px; }
}

/* ---------- 모션 최소화 설정 존중 (JS도 적용하지 않음) ---------- */
@media (prefers-reduced-motion: reduce) {
    .ref-col__track { animation: none; }
    .ref-card,
    .ref-card:hover { transition: none; transform: none; }
}

/* =========================================================
   14. DR-VU AI Knowledge Assistant Chatbot (All Pages)
   ========================================================= */
.drvu-ai-fab-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: var(--font-sans, 'Pretendard Variable', Pretendard, sans-serif);
}

.drvu-ai-fab-tooltip {
    background: #0A192F;
    color: #F8FAFC;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(10, 25, 47, 0.22);
    border: 1px solid rgba(14, 165, 233, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.drvu-ai-fab-tooltip:hover {
    transform: translateY(-2px);
}
.drvu-ai-fab-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.drvu-ai-fab-tooltip-close {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 12px;
    cursor: pointer;
    padding: 0 0 0 4px;
    line-height: 1;
}
.drvu-ai-fab-tooltip-close:hover {
    color: #FFFFFF;
}

.drvu-ai-fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0A192F 0%, #0052CC 100%);
    color: #FFFFFF;
    border: 2px solid rgba(56, 189, 248, 0.55);
    box-shadow: 0 12px 32px rgba(0, 82, 204, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.drvu-ai-fab-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 38px rgba(0, 82, 204, 0.48), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
.drvu-ai-fab-btn:focus-visible {
    outline: 3px solid #0EA5E9;
    outline-offset: 3px;
}
.drvu-ai-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #0EA5E9;
    color: #0A192F;
    font-family: var(--font-ui, 'SUIT Variable', sans-serif);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    border: 2px solid #FFFFFF;
    letter-spacing: 0.02em;
}

/* Chat Window Panel */
.drvu-ai-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 430px;
    max-width: calc(100vw - 32px);
    height: 650px;
    max-height: calc(100vh - 124px);
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(10, 25, 47, 0.24), 0 4px 16px rgba(10, 25, 47, 0.08);
    z-index: 9995;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: var(--font-sans, 'Pretendard Variable', Pretendard, sans-serif);
}
.drvu-ai-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header */
.drvu-ai-header {
    background: linear-gradient(135deg, #0A192F 0%, #1E3A8A 100%);
    color: #FFFFFF;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
}
.drvu-ai-header-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.drvu-ai-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38BDF8;
    font-size: 18px;
    flex-shrink: 0;
}
.drvu-ai-title-wrap h3 {
    margin: 0;
    font-family: var(--font-heading, 'Wanted Sans Variable', sans-serif);
    font-size: 15.5px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.drvu-ai-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #A7F3D0;
    background: rgba(16, 185, 129, 0.18);
    padding: 2px 7px;
    border-radius: 999px;
}
.drvu-ai-title-wrap p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: #CBD5E1;
}
.drvu-ai-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.drvu-ai-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #E2E8F0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
}
.drvu-ai-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

/* Category Filter Tabs for Quick Prompts */
.drvu-ai-topic-bar {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.drvu-ai-topic-bar::-webkit-scrollbar { display: none; }
.drvu-ai-topic-tab {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #334155;
    font-family: var(--font-ui, 'SUIT Variable', sans-serif);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}
.drvu-ai-topic-tab:hover,
.drvu-ai-topic-tab.active {
    background: #0052CC;
    border-color: #0052CC;
    color: #FFFFFF;
}

/* Messages Stream */
.drvu-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}
.drvu-ai-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 94%;
}
.drvu-ai-msg.is-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.drvu-ai-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #0A192F;
    color: #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}
.drvu-ai-msg.is-user .drvu-ai-msg-avatar {
    background: #0052CC;
    color: #FFFFFF;
}
.drvu-ai-bubble {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 4px 16px 16px 16px;
    padding: 13px 15px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #1E293B;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    word-break: keep-all;
}
.drvu-ai-msg.is-user .drvu-ai-bubble {
    background: #0052CC;
    border-color: #0052CC;
    color: #FFFFFF;
    border-radius: 16px 4px 16px 16px;
    padding: 10px 14px;
}

/* Rich Content inside Bot Bubble */
.drvu-ai-bubble h4 {
    margin: 0 0 8px;
    font-family: var(--font-heading, 'Wanted Sans Variable', sans-serif);
    font-size: 14.5px;
    font-weight: 800;
    color: #0A192F;
    display: flex;
    align-items: center;
    gap: 6px;
}
.drvu-ai-bubble p {
    margin: 0 0 8px;
}
.drvu-ai-bubble p:last-child {
    margin-bottom: 0;
}
.drvu-ai-bubble ul {
    margin: 6px 0 10px;
    padding-left: 18px;
}
.drvu-ai-bubble li {
    margin-bottom: 4px;
}
.drvu-ai-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0 10px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    overflow: hidden;
}
.drvu-ai-mini-table th {
    background: #EFF6FF;
    color: #1E3A8A;
    font-weight: 700;
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #CBD5E1;
}
.drvu-ai-mini-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #E2E8F0;
    color: #334155;
    background: #FFFFFF;
}
.drvu-ai-mini-table tr:last-child td {
    border-bottom: none;
}
.drvu-ai-source-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    padding: 3px 8px;
    border-radius: 6px;
}
.drvu-ai-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #E2E8F0;
}
.drvu-ai-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 8px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #0052CC;
    font-family: var(--font-ui, 'SUIT Variable', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.drvu-ai-action-chip:hover {
    background: #0052CC;
    border-color: #0052CC;
    color: #FFFFFF;
}

/* Suggested Follow-up Chips */
.drvu-ai-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.drvu-ai-q-chip {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #1E293B;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.drvu-ai-q-chip:hover {
    border-color: #0052CC;
    color: #0052CC;
    background: #F0F7FF;
}

/* Typing Indicator */
.drvu-ai-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
}
.drvu-ai-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0052CC;
    animation: drvu-ai-bounce 1.2s infinite ease-in-out;
}
.drvu-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.drvu-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes drvu-ai-bounce {
    0%, 80%, 100% { transform: scale(0.65); opacity: 0.45; }
    40% { transform: scale(1); opacity: 1; }
}

/* Input Bar */
.drvu-ai-input-area {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.drvu-ai-input {
    flex: 1;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    padding: 10px 15px;
    font-family: var(--font-sans, 'Pretendard Variable', sans-serif);
    font-size: 13.5px;
    color: #0F172A;
    background: #F8FAFC;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.drvu-ai-input:focus {
    border-color: #0052CC;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
}
.drvu-ai-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0052CC;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.drvu-ai-send-btn:hover {
    background: #1E3A8A;
    transform: scale(1.04);
}
.drvu-ai-send-btn:disabled {
    background: #CBD5E1;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .drvu-ai-fab-wrap {
        right: 16px;
        bottom: 16px;
    }
    .drvu-ai-panel {
        right: 12px;
        bottom: 84px;
        width: calc(100vw - 24px);
        height: calc(100vh - 110px);
        border-radius: 16px;
    }
}

/* =========================================================
   Wave Background — Full-Page Ambient Background & Hero Video Slot
   (21st.dev wave-background → 홈페이지 전체 뒷배경 + 대문 전용 비디오 슬롯)
   ========================================================= */
[data-wave-bg] {
    position: relative;
    isolation: isolate;
}
body[data-wave-bg] {
    background-color: #F0F7FF;
}
.wave-bg__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}
body[data-wave-bg] > .wave-bg__canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
}
.wave-bg__canvas.is-ready { opacity: 1; }

/* 전체 뒷배경 물결이 은은하게 비치도록 섹션 배경을 반투명 글래스 베일로 처리 */
body[data-wave-bg] > main,
body[data-wave-bg] > header,
body[data-wave-bg] > .top-utility-bar,
body[data-wave-bg] > footer {
    position: relative;
    z-index: 1;
}
body[data-wave-bg] main > section {
    background-color: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
body[data-wave-bg] main > section:nth-of-type(even) {
    background-color: rgba(248, 250, 252, 0.74) !important;
}

/* 대문(Hero) 전용 배경 비디오 슬롯 */
.medical-hero-section[data-hero-video-section] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero-video-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.hero-video-bg-wrap.is-playing {
    opacity: 1;
}
.hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 대문 비디오 활성화 시 왼쪽 카피 가독성 보호 베일 */
.medical-hero-section[data-hero-video-section]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 45%, rgba(255, 255, 255, 0.18) 78%),
        linear-gradient(180deg, rgba(248, 250, 252, 0) 75%, rgba(248, 250, 252, 0.92) 100%);
}
.medical-hero-section[data-hero-video-section] > .container {
    position: relative;
    z-index: 2;
}

@media (max-width: 1080px) {
    .medical-hero-section[data-hero-video-section]::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.68) 65%, rgba(248, 250, 252, 0.92) 100%);
    }
}

/* =========================================================
   16. CEO Message & Press Media Section (1newyear.com Style Benchmark)
   ========================================================= */
.drvu-about-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 50px;
}
.drvu-visual-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 20px 45px rgba(10, 25, 47, 0.12), 0 4px 12px rgba(10, 25, 47, 0.06);
    border: 1px solid #CBD5E1;
    background: #0A192F;
}
.drvu-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform 0.4s ease;
}
.drvu-visual-frame:hover .drvu-profile-img {
    transform: scale(1.03);
}
.drvu-visual-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(10, 25, 47, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FFFFFF;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drvu-about-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.drvu-about-subtitle {
    font-family: var(--font-heading, 'Wanted Sans Variable', sans-serif);
    font-size: 24px;
    font-weight: 800;
    color: #0A192F;
    line-height: 1.45;
    margin: 0;
    word-break: keep-all;
    letter-spacing: -0.02em;
}
.drvu-about-text {
    font-size: 15px;
    color: #334155;
    line-height: 1.8;
    margin: 0;
    word-break: keep-all;
}

.drvu-profile-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}
.drvu-bullet-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 20px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.drvu-bullet-item:hover {
    transform: translateY(-2px);
    border-color: #0052cc;
    box-shadow: 0 8px 20px rgba(0, 82, 204, 0.08);
}
.drvu-bullet-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #0052cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.drvu-bullet-item h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: #0A192F;
}
.drvu-bullet-item p {
    margin: 0;
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.55;
}

/* Director Intro Banner (Image Left, Content Right - Tight & Balanced) */
.drvu-ceo-banner {
    display: flex;
    background: linear-gradient(135deg, #0A192F 0%, #0F2342 100%);
    border-radius: 24px;
    border: 1px solid rgba(14, 165, 233, 0.25);
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 45px rgba(10, 25, 47, 0.2);
    margin-top: 36px;
    align-items: stretch;
}
.drvu-ceo-banner-visual {
    width: 44%;
    position: relative;
    min-height: 400px;
    background: #0A192F;
    overflow: hidden;
    flex-shrink: 0;
}
.drvu-ceo-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.4s ease;
}
.drvu-ceo-banner:hover .drvu-ceo-banner-img {
    transform: scale(1.02);
}
.drvu-ceo-banner-visual::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 120px;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, #0A192F 100%);
    z-index: 2;
    pointer-events: none;
}
.drvu-ceo-banner-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 50px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.drvu-ceo-banner-content {
    width: 56%;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 3;
    gap: 16px;
}
.drvu-ceo-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    color: #38BDF8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.drvu-ceo-quote {
    font-family: var(--font-heading, 'Wanted Sans Variable', sans-serif);
    font-size: 21px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
    letter-spacing: -0.02em;
}
.drvu-ceo-desc {
    font-size: 14px;
    color: #CBD5E1;
    line-height: 1.75;
    margin: 0;
    word-break: keep-all;
}
.drvu-ceo-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
.drvu-ceo-pill-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 5px 11px;
    border-radius: 6px;
}
.drvu-ceo-pill-item i {
    color: #38BDF8;
    font-size: 11px;
}
.drvu-ceo-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.drvu-ceo-author-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.drvu-ceo-author-name {
    font-size: 15px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}
.drvu-ceo-author-title {
    font-size: 12px;
    color: #94A3B8;
}
.drvu-ceo-press-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0052cc;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.drvu-ceo-press-btn:hover {
    background: #0040a3;
    transform: translateY(-1px);
    color: #FFFFFF;
}

/* Press Media Section */
.drvu-press-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 50px;
    align-items: start;
}
.drvu-newspaper-mockup {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(10, 25, 47, 0.12);
    border: 1px solid #CBD5E1;
    background-color: #FFFFFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.drvu-newspaper-mockup:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 55px rgba(10, 25, 47, 0.16);
}
.drvu-newspaper-mockup img {
    width: 100%;
    height: auto;
    display: block;
}
.drvu-newspaper-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: #0052cc;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.drvu-news-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.drvu-news-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.drvu-news-item:hover {
    transform: translateY(-2px);
    border-color: #0052cc;
    box-shadow: 0 10px 24px rgba(0, 82, 204, 0.08);
}
.drvu-news-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.drvu-news-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui, 'SUIT Variable', sans-serif);
    font-size: 11.5px;
    font-weight: 800;
    color: #0052cc;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 4px 10px;
    border-radius: 6px;
}
.drvu-news-date {
    font-size: 12.5px;
    color: #64748B;
    font-weight: 600;
}
.drvu-news-headline {
    font-family: var(--font-heading, 'Wanted Sans Variable', sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: #0A192F;
    line-height: 1.45;
    margin: 0 0 8px;
}
.drvu-news-summary {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.65;
    margin: 0 0 14px;
    word-break: keep-all;
}
.drvu-news-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0052cc;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.drvu-news-link-btn:hover {
    gap: 9px;
    text-decoration: underline;
}

.drvu-academic-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.drvu-acad-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.drvu-acad-item i {
    font-size: 20px;
    color: #0052cc;
    margin-top: 2px;
    flex-shrink: 0;
}
.drvu-acad-item h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    color: #0A192F;
}
.drvu-acad-item p {
    margin: 0;
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
    .drvu-about-grid, .drvu-press-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .drvu-visual-frame {
        max-width: 440px;
        margin: 0 auto;
    }
    .drvu-ceo-banner {
        flex-direction: column;
    }
    .drvu-ceo-banner-visual {
        width: 100%;
        min-height: 320px;
        height: 320px;
    }
    .drvu-ceo-banner-visual::after {
        width: 100%;
        height: 100px;
        top: auto;
        bottom: -1px;
        right: 0;
        background: linear-gradient(180deg, transparent 0%, #0A192F 100%);
    }
    .drvu-ceo-banner-content {
        width: 100%;
        padding: 32px 24px;
    }
    .drvu-ceo-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .drvu-ceo-press-btn {
        width: 100%;
        justify-content: center;
    }
    .drvu-academic-stats {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Hero 3D · 무납 2중차폐 시스템 (레퍼런스: Agentic Factory 3D 구성)
   ========================================================= */
.shield3d {
    --s3-cyan: var(--colors-point-cyan, #0EA5E9);
    --s3-ink: #E2E8F0;
    --s3-muted: #94A3B8;
    --s3-faint: #64748B;
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: radial-gradient(120% 95% at 50% 32%, #1B2A42 0%, #0F1A2C 42%, #070C16 100%);
    box-shadow: 0 30px 60px -24px rgba(10, 25, 47, 0.55), 0 12px 28px rgba(0, 82, 204, 0.08);
    color: var(--s3-ink);
    font-family: var(--font-ui, 'SUIT Variable', 'Pretendard Variable', sans-serif);
}
.shield3d__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
}
/* 레퍼런스와 같은 가장자리 비네팅 */
.shield3d__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(3, 7, 14, 0.18) 66%, rgba(3, 7, 14, 0.62) 100%);
}
.shield3d__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: pan-y;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.shield3d.is-3d .shield3d__canvas { opacity: 1; }
.shield3d__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.shield3d.no-webgl .shield3d__fallback {
    display: block;
    opacity: 1;
}
.shield3d.is-3d .shield3d__fallback { display: none !important; }

/* 통과 시연 진행 표시 */
.shield3d__journey {
    position: absolute;
    top: 16px;
    left: 18px;
    right: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.shield3d.is-order .shield3d__journey { opacity: 1; transform: none; }
.shield3d__journey-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7DD3FC;
    font-size: 11px;
}
.shield3d__journey-text strong { display: block; font-size: 12px; font-weight: 600; color: var(--s3-ink); }
.shield3d__journey-text small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--s3-muted); }
.shield3d__journey-track { flex: 1; height: 2px; background: rgba(148, 163, 184, 0.18); }
.shield3d__journey-track i { display: block; width: 0; height: 100%; background: var(--s3-cyan); }

/* 구성 모드 라벨 */
.shield3d__labels {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.shield3d__label {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 7px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(11, 20, 36, 0.88);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, border-color 0.2s ease;
}
.shield3d.show-labels .shield3d__label { opacity: 1; }
.shield3d__label.is-hot { border-color: var(--s3-cyan); }
.shield3d__label-no { font-size: 10px; font-weight: 700; color: var(--s3-cyan); }
.shield3d__label-name { font-size: 11.5px; font-weight: 600; color: var(--s3-ink); }
.shield3d__label-meta { grid-column: 2; margin-top: 2px; font-size: 10px; color: var(--s3-muted); }

/* hover 툴팁 */
.shield3d__tooltip {
    position: absolute;
    z-index: 5;
    max-width: 240px;
    padding: 10px 13px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.shield3d__tooltip.is-visible { opacity: 1; }
.shield3d__tooltip strong { font-size: 12px; font-weight: 600; color: var(--s3-ink); }
.shield3d__tooltip strong span { margin-right: 7px; font-size: 10px; color: var(--s3-cyan); }
.shield3d__tooltip p { margin: 5px 0 0; font-size: 11px; line-height: 1.55; color: var(--s3-muted); word-break: keep-all; }

/* 하단 컨트롤: 모드 바 + 카메라 줄 */
.shield3d__controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.shield3d.is-3d .shield3d__controls { display: flex; }
.shield3d__modes,
.shield3d__cams { pointer-events: auto; }
.shield3d__modes {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.84);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.shield3d__mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #A8B3C4;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.shield3d__mode i { font-size: 11px; }
.shield3d__mode:hover { background: rgba(148, 163, 184, 0.12); color: #FFFFFF; }
.shield3d__mode[aria-pressed="true"] { background: var(--s3-cyan); color: #04111F; }
.shield3d__cams {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.shield3d__cams-caption { margin-right: 6px; font-size: 9px; letter-spacing: 0.14em; color: var(--s3-faint); }
.shield3d__cam {
    position: relative;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #7C889A;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.shield3d__cam:hover,
.shield3d__cam[aria-pressed="true"] { color: #FFFFFF; }
.shield3d__cam[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--s3-cyan);
    transform: translateX(-50%);
}
.shield3d__pause[aria-pressed="true"]::after { display: none; }
.shield3d__divider { width: 1px; height: 12px; margin: 0 4px; background: rgba(148, 163, 184, 0.25); }
.shield3d__mode:focus-visible,
.shield3d__cam:focus-visible {
    outline: 2px solid #7DD3FC;
    outline-offset: 2px;
    border-radius: 8px;
}

.shield3d.is-compact .shield3d__label { padding: 5px 8px; column-gap: 5px; }
.shield3d.is-compact .shield3d__label-name { font-size: 11px; }
.shield3d.is-compact .shield3d__label-meta { display: none; }

/* 히어로 오른쪽 흰 카드 안에 들어갈 때: 바깥 카드 여백을 없애고 3D 카드가 그 자리를 채움 */
.medical-hero-showcase:has(.shield3d) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
@media (max-width: 1024px) {
    .shield3d { max-width: 720px; margin-inline: auto; width: 100%; }
}

@media (max-width: 768px) {
    .shield3d__stage { aspect-ratio: 1 / 1; min-height: 280px; }
    .shield3d__controls { bottom: 8px; left: 8px; right: 8px; gap: 6px; }
    .shield3d__modes { padding: 3px; gap: 2px; }
    .shield3d__mode { padding: 6px 8px; font-size: 11px; }
    .shield3d__mode i { display: none; }
    .shield3d__cams-caption { display: none; }
    .shield3d__cam { padding: 3px 5px; font-size: 10.5px; }
    .shield3d__label {
        padding: 4px 6px;
        column-gap: 5px;
        border-radius: 6px;
        max-width: 125px;
        white-space: normal;
    }
    .shield3d__label-no { font-size: 9px; }
    .shield3d__label-name { font-size: 10px; line-height: 1.2; }
    .shield3d__label-meta { display: none !important; }
}

@media (max-width: 480px) {
    .shield3d__stage { aspect-ratio: 4 / 3; min-height: 250px; }
    .shield3d__modes { max-width: 100%; justify-content: center; }
    .shield3d__mode { padding: 5px 6px; font-size: 10px; }
    .shield3d__cams { flex-wrap: wrap; justify-content: center; }
    .shield3d__cams .shield3d__divider { display: none; }
    .shield3d__cam { padding: 2px 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .shield3d *, .shield3d__canvas { transition: none !important; }
}





/* ==========================================================================
   Interactive Map System: Korea Delivery Map + World Export Map + Naver Map
   ========================================================================== */
.map-view-switcher {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.map-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.map-view-tab:hover {
    border-color: #0052cc;
    color: #0052cc;
    transform: translateY(-1px);
}

.map-view-tab.active {
    background: #0052cc;
    border-color: #0052cc;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 82, 204, 0.28);
}

.map-view-panel {
    display: none;
    animation: fadeInMap 0.35s ease;
}

.map-view-panel.active {
    display: block;
}

@keyframes fadeInMap {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Korea SVG Map Styles */
.svg-korea-map {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.svg-korea-map .map-province {
    fill: #f8fafc;
    stroke: #cbd5e1;
    stroke-width: 1.5px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.svg-korea-map .map-province:hover {
    fill: #dbeafe;
    stroke: #0052cc;
    stroke-width: 2px;
}

.svg-korea-map .map-province.active {
    fill: #0f172a;
    stroke: #0052cc;
    stroke-width: 2.2px;
}

.svg-korea-map .map-pin {
    cursor: pointer;
}

.svg-korea-map .map-pin .pin-ring-pulse {
    stroke: #0052cc;
    stroke-width: 1.5;
    animation: mapPing 2.2s infinite ease-out;
}

.svg-korea-map .map-pin .pin-ring {
    fill: rgba(0, 82, 204, 0.15);
    stroke: #0052cc;
    stroke-width: 1.5;
}

.svg-korea-map .map-pin .pin-core {
    fill: #0052cc;
}

.svg-korea-map .map-pin:hover .pin-core,
.svg-korea-map .map-pin.active .pin-core {
    fill: #2563eb;
    r: 6px;
}

.svg-korea-map .map-pin:hover .pin-badge-bg,
.svg-korea-map .map-pin.active .pin-badge-bg {
    fill: #0052cc !important;
}

/* World SVG Map Styles */
.svg-world-map {
    width: 100%;
    max-width: 820px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.world-continent {
    transition: fill 0.25s ease;
}

.world-continent:hover {
    fill: #cbd5e1;
}

.world-continent-europe {
    cursor: pointer;
}

.world-arc {
    stroke-dashoffset: 0;
    animation: arcDash 20s linear infinite;
}

@keyframes arcDash {
    to { stroke-dashoffset: -100; }
}

.world-beacon-group {
    cursor: pointer;
}

.world-beacon-group .beacon-pulse {
    animation: beaconPulseAnim 2.4s infinite ease-out;
}

@keyframes beaconPulseAnim {
    0% { r: 6px; opacity: 0.9; }
    100% { r: 24px; opacity: 0; }
}

.world-beacon-group:hover .beacon-dot,
.world-beacon-group.active .beacon-dot {
    fill: #38bdf8;
    r: 6px;
}

.world-beacon-group:hover rect,
.world-beacon-group.active rect {
    stroke: #38bdf8;
    stroke-width: 2px;
}

/* Global Stats Banner */
.global-stats-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .global-stats-banner {
        grid-template-columns: repeat(2, 1fr);
    }
}

.global-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.global-stat-num {
    font-size: 26px;
    font-weight: 800;
    color: #0052cc;
    line-height: 1.2;
}

.global-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
}

.global-stat-desc {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}

/* Naver Map Section Styles */
.company-location-section {
    position: relative;
}

.location-layout-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .location-layout-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.naver-map-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
}

.naver-map-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.naver-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #03C75A;
}

.naver-n-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #03C75A;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 900;
    font-size: 13px;
}

.naver-search-mockup {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: #334155;
    flex: 1;
    max-width: 380px;
}

.naver-map-viewport {
    position: relative;
    height: 380px;
    background: #f1f5f9;
    overflow: hidden;
}

.naver-map-actions {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-naver-map {
    background: #03C75A;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-naver-map:hover {
    background: #02b350;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-naver-route {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-naver-route:hover {
    background: #1e293b;
    color: #ffffff;
}

.btn-copy-address {
    background: #eff6ff;
    color: #0052cc;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-address:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.location-details-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.location-facility-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    transition: border-color 0.2s ease;
}

.location-facility-card:hover {
    border-color: #0052cc;
}

.location-facility-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #0052cc;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 3px 9px;
    border-radius: 9999px;
    margin-bottom: 8px;
}

.location-facility-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}

.location-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
}

.location-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.location-info-list li i {
    color: #0052cc;
    margin-top: 3px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.location-notice-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}

/* Toast Notification */
.company-toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #0f172a;
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999999;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.company-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   21st.dev Dotted World Map & High-Precision South Korea Vector Styles
   ========================================================================== */
.dotted-world-map {
    width: 100%;
    max-width: 860px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(7, 13, 25, 0.45);
}

.animated-flight-beam {
    stroke-dasharray: 6, 4;
    animation: flightBeamDash 24s linear infinite;
}

@keyframes flightBeamDash {
    to { stroke-dashoffset: -100; }
}

.detailed-korea-map {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.detailed-korea-map .map-province {
    fill: #ffffff;
    stroke: #94a3b8;
    stroke-width: 0.9px;
    cursor: pointer;
    transition: fill 0.22s ease, stroke 0.22s ease, stroke-width 0.22s ease, filter 0.22s ease;
}

.detailed-korea-map .map-province:hover {
    fill: #dbeafe;
    stroke: #0052cc;
    stroke-width: 1.8px;
    filter: drop-shadow(0 0 6px rgba(0, 82, 204, 0.25));
}

.detailed-korea-map .map-province.active {
    fill: #0f172a;
    stroke: #0052cc;
    stroke-width: 2px;
}

.detailed-korea-map .map-pin {
    cursor: pointer;
}

.detailed-korea-map .map-pin .pin-ring-pulse {
    stroke: #0052cc;
    stroke-width: 1.5;
    animation: mapPing 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.detailed-korea-map .map-pin .pin-ring {
    fill: rgba(0, 82, 204, 0.16);
    stroke: #0052cc;
    stroke-width: 1.5;
}

.detailed-korea-map .map-pin .pin-core {
    fill: #0052cc;
    transition: all 0.2s ease;
}

.detailed-korea-map .map-pin:hover .pin-core,
.detailed-korea-map .map-pin.active .pin-core {
    fill: #2563eb;
    r: 6px;
}

.detailed-korea-map .map-pin:hover .pin-badge-bg,
.detailed-korea-map .map-pin.active .pin-badge-bg {
    fill: #0052cc !important;
}

.detailed-korea-map .map-geo-label {
    font-size: 11px;
    font-weight: 700;
    fill: #64748b;
    text-anchor: middle;
    transition: fill 0.2s ease;
}

.detailed-korea-map .map-geo-label.active {
    fill: #0052cc;
    font-weight: 800;
}

/* ==========================================================================
   Mobile Compatibility & Fluid Typography Scaling
   ========================================================================== */
@media (max-width: 768px) {
    .map-view-switcher {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .map-view-tab {
        width: 100%;
        justify-content: center;
        font-size: 13.5px;
        padding: 10px 16px;
    }
    .map-layout-box {
        padding: 16px;
        gap: 20px;
    }
    .map-details-card {
        padding: 18px;
    }
    .map-details-title {
        font-size: 17px;
    }
    .map-details-subtitle {
        font-size: 12.5px;
        margin-bottom: 14px;
    }
    .hospital-network-item {
        padding: 8px 10px;
        gap: 10px;
    }
    .hospital-info-text strong {
        font-size: 13px;
    }
    .hospital-info-text span {
        font-size: 11.5px;
    }
    .naver-map-viewport {
        height: 280px;
    }
    .naver-map-actions {
        flex-direction: column;
    }
    .btn-naver-map,
    .btn-naver-route,
    .btn-copy-address {
        width: 100%;
        justify-content: center;
    }
    .location-facility-card {
        padding: 18px;
    }
    .location-facility-title {
        font-size: 16px;
    }
    .location-info-list {
        font-size: 12.5px;
    }
}

/* ==========================================================================
   Navigation Dropdown Sub-Menu System (Click & Hover Support)
   ========================================================================== */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    flex-shrink: 1;
}

.nav-item-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-item-dropdown .nav-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-item-dropdown:hover .nav-item,
.nav-item-dropdown.is-open .nav-item {
    color: #0052cc;
    background-color: #eff6ff;
}

.nav-dropdown-arrow {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-item-dropdown:hover .nav-dropdown-arrow,
.nav-item-dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
    color: #0052cc;
}

/* Dropdown Menu Container */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 290px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    z-index: 100000;
}

/* Prevent edge dropdown menus from overflowing left or right of the screen */
.nav-links > .nav-item-dropdown:first-child .dropdown-menu {
    left: 0 !important;
    transform: translateY(8px) !important;
}
.nav-links > .nav-item-dropdown:first-child:hover .dropdown-menu,
.nav-links > .nav-item-dropdown:first-child.is-open .dropdown-menu {
    transform: translateY(0) !important;
}

.nav-links > .nav-item-dropdown:last-child .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateY(8px) !important;
}
.nav-links > .nav-item-dropdown:last-child:hover .dropdown-menu,
.nav-links > .nav-item-dropdown:last-child.is-open .dropdown-menu {
    transform: translateY(0) !important;
}

/* Invisible bridge so mouse doesn't drop between nav-item and menu */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-links > .nav-item-dropdown:first-child:hover .dropdown-menu,
.nav-links > .nav-item-dropdown:first-child.is-open .dropdown-menu {
    transform: translateY(0) !important;
}

.nav-links > .nav-item-dropdown:last-child:hover .dropdown-menu,
.nav-links > .nav-item-dropdown:last-child.is-open .dropdown-menu {
    transform: translateY(0) !important;
}

/* Dropdown Items */
.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #334155;
    transition: all 0.18s ease;
}

.dropdown-item:hover {
    background-color: #f8fafc;
    color: #0052cc;
    transform: translateX(3px);
}

.dropdown-item i {
    font-size: 14px;
    color: #0052cc;
    margin-top: 3px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.dropdown-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-item strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.dropdown-item span {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.3;
}

.dropdown-item:hover strong {
    color: #0052cc;
}

/* ==========================================================================
   Comprehensive Cross-Device Responsive Overrides (MacBook, Tablet, Mobile)
   ========================================================================== */
@media (max-width: 1024px) {
    .flagship-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .medical-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .map-layout-box {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .flagship-showcase-grid {
        grid-template-columns: 1fr !important;
    }
    .map-layout-box {
        padding: 14px !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   PRODUCTS 8-CATEGORY TAB & DETAIL SYSTEM (디알뷰 협의안 Option C)
   ========================================================================== */

/* 1. 8 Category Tiles Grid (Step 1) */
.products-cat-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.cat-tile-btn {
    background: #ffffff;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(10, 25, 47, 0.03);
    width: 100%;
}

.cat-tile-btn:hover {
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 82, 204, 0.08);
}

.cat-tile-btn.active {
    border-color: #0052cc;
    background: #EFF6FF;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2), 0 12px 28px rgba(0, 82, 204, 0.12);
}

.cat-tile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-tile-num {
    font-family: var(--font-spec, monospace);
    font-size: 12.5px;
    font-weight: 800;
    color: #0052cc;
    background: #DBEAFE;
    padding: 3px 9px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cat-tile-btn.active .cat-tile-num {
    background: #0052cc;
    color: #ffffff;
}

.cat-tile-badge {
    font-size: 11px;
    color: #64748B;
    font-weight: 600;
}

.cat-tile-btn.active .cat-tile-badge {
    color: #1E40AF;
    font-weight: 700;
}

.cat-tile-title {
    font-size: 17px;
    font-weight: 800;
    color: #0A192F;
    margin: 2px 0 0;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.cat-tile-btn.active .cat-tile-title {
    color: #0052cc;
}

.cat-tile-sub {
    font-size: 12px;
    color: #64748B;
    margin: 0;
    line-height: 1.4;
}

.cat-tile-btn.active .cat-tile-sub {
    color: #334155;
}

/* Active bottom triangle marker */
.cat-tile-btn.active::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #0052cc;
    z-index: 2;
}

/* 2. Category View Container (Step 2) */
.cat-view-panel {
    display: none;
    animation: catFadeIn 0.25s ease-out;
}

.cat-view-panel.active {
    display: block;
}

@keyframes catFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.cat-panel-header {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cat-panel-header-left h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0A192F;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cat-panel-header-left p {
    font-size: 14px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

.cat-panel-badge {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* 3. Compact Product Cards Grid */
.compact-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.compact-cards-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.compact-cards-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.compact-cards-grid.cols-1 {
    grid-template-columns: 1fr;
    max-width: 450px;
}

.compact-card {
    background: #ffffff;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.compact-card:hover {
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 82, 204, 0.08);
}

.compact-card.active {
    border-color: #0052cc;
    background: #FAFDFE;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.25), 0 10px 24px rgba(0, 82, 204, 0.1);
}

.compact-card.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0052cc;
}

.compact-card-img-wrap {
    height: 160px;
    background: #F8FAFC;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.compact-card-img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.compact-card:hover .compact-card-img-wrap img {
    transform: scale(1.03);
}

.compact-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0A192F;
    margin: 0 0 6px;
    line-height: 1.35;
}

.compact-card.active .compact-card-title {
    color: #0052cc;
}

.compact-card-mmpb {
    font-size: 12px;
    font-weight: 700;
    color: #0284C7;
    background: #E0F2FE;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin: 0 auto 6px;
}

.compact-card-click-hint {
    font-size: 11.5px;
    color: #64748B;
    font-weight: 600;
    margin-top: auto;
    padding-top: 6px;
}

.compact-card.active .compact-card-click-hint {
    color: #0052cc;
    font-weight: 700;
}

/* 4. Expanded Detail Panel (Step 3) */
.prod-detail-panel {
    background: #ffffff;
    border: 1.5px solid #CBD5E1;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 12px 36px rgba(10, 25, 47, 0.06);
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 36px;
    align-items: center;
    animation: detailFadeIn 0.22s ease-out;
}

@keyframes detailFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.prod-detail-visual {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prod-detail-visual img {
    max-height: 280px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 14px;
    transition: opacity 0.2s ease;
}

.prod-detail-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prod-detail-title-wrap {
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 14px;
}

.prod-detail-badge {
    display: inline-block;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #0052cc;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.prod-detail-title {
    font-size: 24px;
    font-weight: 800;
    color: #0A192F;
    margin: 0 0 6px;
    line-height: 1.3;
}

.prod-detail-desc {
    font-size: 14.5px;
    color: #334155;
    line-height: 1.7;
    margin: 0;
}

/* Swatches inside detail panel */
.detail-swatch-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
}

.detail-swatch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.detail-swatch-title {
    font-weight: 700;
    color: #0A192F;
}

.detail-swatch-current {
    font-weight: 700;
    color: #0052cc;
}

.detail-swatches-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.detail-swatch-dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1.5px #CBD5E1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.detail-swatch-dot:hover {
    transform: scale(1.15);
}

.detail-swatch-dot.active {
    box-shadow: 0 0 0 2.5px #0052cc;
    transform: scale(1.12);
}

/* Spec highlights grid */
.detail-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.detail-spec-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

.detail-spec-label {
    display: block;
    font-size: 11.5px;
    color: #64748B;
    margin-bottom: 2px;
}

.detail-spec-val {
    font-weight: 700;
    color: #0A192F;
}

.detail-actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* 5. UDI Spec Accordion */
.udi-accordion-wrap {
    margin-top: 48px;
    margin-bottom: 36px;
}

.udi-accordion-toggle {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #CBD5E1;
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(10, 25, 47, 0.04);
}

.udi-accordion-toggle:hover {
    border-color: #0052cc;
    background: #F8FAFC;
}

.udi-accordion-title {
    font-size: 17px;
    font-weight: 800;
    color: #0A192F;
    display: flex;
    align-items: center;
    gap: 10px;
}

.udi-accordion-btn-label {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #0052cc;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.udi-accordion-toggle:hover .udi-accordion-btn-label {
    background: #0052cc;
    color: #ffffff;
}

.udi-accordion-content {
    display: none;
    margin-top: 14px;
    animation: catFadeIn 0.25s ease-out;
}

.udi-accordion-content.is-open {
    display: block;
}

/* 6. REACH Dental Distribution Goods Strip */
.dental-dist-wrap {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 32px 36px;
    margin-top: 36px;
    margin-bottom: 20px;
}

.dental-dist-header {
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.dental-dist-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dental-dist-card {
    background: #ffffff;
    border: 1px solid #CBD5E1;
    border-radius: 16px;
    padding: 20px;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 20px;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .products-cat-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .compact-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .prod-detail-panel {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
    .dental-dist-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .products-cat-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .cat-tile-btn {
        padding: 14px 12px;
    }
    .cat-tile-title {
        font-size: 15px;
    }
    .cat-tile-sub {
        font-size: 11px;
    }
    .compact-cards-grid {
        grid-template-columns: 1fr;
    }
    .detail-specs-grid {
        grid-template-columns: 1fr;
    }
    .dental-dist-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


/* ==========================================================================
   ULTIMATE MOBILE & TABLET RESPONSIVE ENGINE (전체 메뉴 반응형 최적화)
   ========================================================================== */

/* 1. Global Overflow & Box Model Protection */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

img, video, canvas, svg {
    max-width: 100% !important;
    height: auto;
}

/* 2. TABLET RESPONSIVE RULES (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100% !important;
    }

    /* 4-Column Grids -> 2-Column on Tablets */
    [style*="repeat(4"],
    .flagship-showcase-grid[style*="repeat(4"],
    .segment-entry-grid[style*="repeat(4"],
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* 3-Column Grids -> 2-Column on Tablets */
    [style*="repeat(3"],
    .flagship-showcase-grid[style*="repeat(3"],
    .other-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    /* Asymmetric 2-Column Grids -> Balanced */
    [style*="1.35fr"],
    [style*="1.15fr"],
    [style*="0.95fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }

    /* Hero section on tablet */
    .medical-hero-section {
        padding: 44px 0 36px !important;
    }
    .medical-hero-grid,
    [style*="1.15fr 0.85fr"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .hero-media-wrap,
    .shield3d {
        height: 320px !important;
        max-width: 100% !important;
    }

    /* Section titles & headings */
    .section-title {
        font-size: 28px !important;
    }
    .medical-hero-title,
    .hero-title-main {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
}

/* 3. MOBILE SMARTPHONE RESPONSIVE RULES (<= 768px) */
@media (max-width: 768px) {
    /* Container & Spacing */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    section {
        padding: 40px 0 !important;
    }

    /* Force ALL Grids to Single Column on Mobile */
    [class*="grid"],
    [style*="display:grid"],
    [style*="display: grid"],
    .flagship-showcase-grid,
    .segment-entry-grid,
    .medical-hero-grid,
    .patents-grid,
    .products-grid,
    .legacy-prod-grid,
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Metrics: 1 column on mobile for optimal clarity */
    .metrics-grid,
    .stats-container-box,
    [style*="repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Override Fixed Width Inlines */
    [style*="width: 6"],
    [style*="width: 7"],
    [style*="width: 8"],
    [style*="width: 9"],
    [style*="width:6"],
    [style*="width:7"],
    [style*="width:8"],
    [style*="width:9"],
    [style*="max-width: 6"],
    [style*="max-width: 7"],
    [style*="max-width: 8"],
    [style*="max-width: 9"],
    [style*="max-width:6"],
    [style*="max-width:7"],
    [style*="max-width:8"],
    [style*="max-width:9"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Mobile Typography Optimization */
    .medical-hero-title,
    .hero-title-main {
        font-size: 24px !important;
        line-height: 1.35 !important;
        word-break: keep-all;
    }

    .section-title {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    .section-desc,
    .hero-desc-main {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Mobile Hero Layout */
    .medical-hero-section {
        padding: 32px 0 28px !important;
    }

    .hero-media-wrap,
    .shield3d {
        height: 240px !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    .hero-btn-group,
    .hero-actions-flex {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .btn-primary,
    .btn-outline,
    .btn-action-main {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 12px 18px !important;
        font-size: 14.5px !important;
    }

    /* History Timeline on about.html */
    [style*="grid-template-columns: 160px 1fr"],
    [style*="grid-template-columns:160px 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Top Utility Bar on Mobile */
    .top-utility-bar {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    .top-utility-left span:first-child {
        display: none !important;
    }
    .top-utility-inner {
        justify-content: space-between !important;
    }

    /* Mobile Navigation Pill */
    .nav-pill {
        padding: 8px 14px !important;
    }
    .brand-logo-img {
        height: 26px !important;
        width: auto !important;
    }
    .nav-btn-store {
        display: none !important;
    }

    /* Mobile Drawer */
    .mobile-drawer {
        width: 85vw !important;
        max-width: 320px !important;
        padding: 20px 16px !important;
    }
    .drawer-link {
        padding: 12px 14px !important;
        font-size: 15px !important;
    }

    /* Map Section on Mobile */
    #company-naver-map,
    .naver-map-canvas,
    [id*="map"] {
        height: 280px !important;
        width: 100% !important;
    }

    /* Card Padding & Radius on Mobile */
    .location-facility-card,
    .location-notice-box,
    .stat-card,
    .flagship-card,
    .hover-link-card,
    [style*="border-radius:18px"],
    [style*="border-radius:16px"],
    [style*="border-radius: 18px"],
    [style*="border-radius: 16px"] {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    /* Modal Dialogs on Mobile */
    .product-detail-modal,
    .legacy-lightbox-content,
    [id*="modal"] > div {
        width: 95% !important;
        max-width: 95% !important;
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    /* Tables on Mobile */
    table {
        font-size: 12px !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    th, td {
        padding: 8px 6px !important;
        white-space: nowrap !important;
    }
}

/* 4. EXTRA SMALL PHONES (<= 420px) */
@media (max-width: 420px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .medical-hero-title,
    .hero-title-main {
        font-size: 21px !important;
    }
    .section-title {
        font-size: 19px !important;
    }
    .stat-number {
        font-size: 26px !important;
    }
    .btn-primary,
    .btn-outline {
        font-size: 13.5px !important;
        padding: 11px 14px !important;
    }
}


/* ==========================================================================
   ADVANCED MOBILE & TABLET SCALE OPTIMIZATION (배율 왜곡 및 반응형 완벽 보정)
   ========================================================================== */

/* 1. iOS Safari Auto-Zoom Prevention (인풋 포커스 시 화면 강제 확대 방지) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* 2. Global Touch & Scroll Tuning for Mobile */
@media (max-width: 768px) {
    /* Prevent 3D WebGL Canvas from trapping touch gestures */
    .shield3d,
    .shield3d canvas,
    .hero-media-wrap {
        touch-action: pan-y !important;
    }

    /* Floating Pill Header on Mobile */
    .site-header {
        top: 8px !important;
        padding: 0 10px !important;
    }
    .nav-pill {
        padding: 6px 14px !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    }
    .brand-logo-img {
        height: 24px !important;
    }
    .mobile-menu-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* Mobile Drawer Full Screen Overlay */
    .mobile-drawer {
        top: 56px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 18px !important;
        padding: 16px 14px !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
    }
    .drawer-link {
        padding: 11px 12px !important;
        font-size: 14.5px !important;
    }

    /* Section 2: Segment Cards on Mobile */
    .hover-link-card,
    .segment-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .hover-link__title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    .hover-link__sub {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
    .hover-link__label {
        font-size: 12px !important;
        margin-top: 8px !important;
    }

    /* Section 3: Flagship Products Mobile Ratio */
    .flagship-card {
        border-radius: 16px !important;
    }
    .flagship-media-wrap {
        height: 170px !important;
        padding: 12px !important;
    }
    .flagship-content {
        padding: 16px !important;
    }
    .flagship-title {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }
    .flagship-desc {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Section 4: Metrics (2x2 Grid on Mobile for Great Ratio) */
    .metrics-grid,
    .stats-container-box {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card,
    .stat-item {
        padding: 14px 10px !important;
        text-align: center !important;
    }
    .stat-number {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .stat-label {
        font-size: 12px !important;
        margin-top: 2px !important;
    }

    /* Section 5: Samsung Industrial Case Study */
    .industrial-case-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    /* Section 7: Map Section on Mobile */
    .location-facility-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }
    .location-facility-title {
        font-size: 17px !important;
        margin-bottom: 12px !important;
    }
    .location-info-list li {
        font-size: 13px !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Products.html Tab List: Horizontal Scroll on Mobile */
    .mfds-tabs-list {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory;
        gap: 8px !important;
        padding-bottom: 8px !important;
    }
    .mfds-tab-btn {
        flex: 0 0 200px !important;
        scroll-snap-align: start;
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
    .mfds-tab-name {
        font-size: 14px !important;
    }

    /* Products.html Product Cards: 2 Columns on Mobile */
    .legacy-prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .legacy-prod-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .legacy-prod-img-wrap {
        height: 130px !important;
        padding: 8px !important;
    }
    .legacy-prod-name {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
    }

    /* Drops.html Event Cards on Mobile */
    #event-1-busan-kimes,
    #event-3-cdc-osco,
    [id*="event-"] {
        padding: 18px 16px !important;
        border-radius: 16px !important;
    }

    /* Footer Mobile Optimization */
    .site-footer {
        padding: 40px 0 24px !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .footer-legal-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 14px !important;
    }
}

/* 3. TABLET SPECIFIC RATIO OPTIMIZATION (769px ~ 1180px) */
@media (min-width: 769px) and (max-width: 1180px) {
    /* Tablet Navigation Pill */
    .nav-pill {
        padding: 8px 20px !important;
    }
    .brand-logo-img {
        height: 28px !important;
    }

    /* Products Grid: 3 columns on Tablet */
    .legacy-prod-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    .legacy-prod-img-wrap {
        height: 170px !important;
    }

    /* Tabs on Tablet: 2x4 Grid */
    .mfds-tabs-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Metrics Grid on Tablet: 2x2 */
    .metrics-grid,
    .stats-container-box {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* Flagship Products on Tablet */
    .flagship-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    /* Footer on Tablet: 2 Columns */
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
}


/* ==========================================================================
   DR-VU ULTRA RESPONSIVE ENGINE (MOBILE & TABLET PRECISION SCALING)
   Build: 20261113_m2
   ========================================================================== */

/* 1. GLOBAL SAFETY & OVERFLOW PREVENTION (ALL SCREENS) */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
}
img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
}

/* 2. TABLET PRECISION SCALING (769px <= viewport <= 1180px) */
@media (min-width: 769px) and (max-width: 1180px) {
    /* Header & Navigation */
    .site-header {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .nav-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .brand-logo-img {
        height: 32px !important;
        width: auto !important;
    }
    .nav-links {
        display: none !important;
    }
    .mobile-menu-btn {
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Container Spacing for Tablet */
    .container {
        max-width: 100% !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        box-sizing: border-box !important;
    }
    section {
        padding: 48px 0 !important;
    }

    /* All 4-column inline grids become 2x2 grids on Tablet */
    div[style*="repeat(4, 1fr)"],
    div[style*="repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    /* All 3-column inline grids on Tablet */
    div[style*="repeat(3, 1fr)"],
    div[style*="repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Asymmetric Hero grids on Tablet */
    div[style*="1.15fr 0.85fr"],
    div[style*="1.35fr 0.85fr"],
    div[style*="0.95fr 1.25fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }

    /* Timeline in About page on Tablet */
    div[style*="160px 1fr"] {
        grid-template-columns: 120px 1fr !important;
        gap: 16px !important;
    }

    /* Products Grid on Tablet: 3 columns */
    .legacy-prod-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    .legacy-prod-img-wrap {
        height: 180px !important;
    }

    /* 8 Categories Tab on Tablet */
    .mfds-tabs-list {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
}

/* 3. MOBILE PRECISION SCALING (viewport <= 768px) */
@media (max-width: 768px) {
    /* Prevent iOS Safari 150% auto-zoom on input tap */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Floating Header on Mobile */
    .site-header {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
        background: #ffffff !important;
    }
    .nav-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .brand-logo-img {
        height: 28px !important;
        width: auto !important;
    }
    .nav-links {
        display: none !important;
    }
    .mobile-menu-btn {
        display: inline-flex !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    .nav-btn-store {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }

    /* Mobile Container Spacing */
    .container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    section {
        padding: 36px 0 !important;
    }

    /* Typography Scaling for Mobile */
    h1, .hero-title, [class*="hero-title"] {
        font-size: 26px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.02em !important;
    }
    h2, .section-title, [class*="section-title"] {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }
    h3 {
        font-size: 18px !important;
    }
    p, .section-desc, .hero-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Force ALL Multi-column Inline Grids to Single Column on Mobile */
    div[style*="repeat(4, 1fr)"],
    div[style*="repeat(4,1fr)"],
    div[style*="repeat(3, 1fr)"],
    div[style*="repeat(3,1fr)"],
    div[style*="1.15fr 0.85fr"],
    div[style*="1.35fr 0.85fr"],
    div[style*="0.95fr 1.25fr"],
    div[style*="1.1fr 0.9fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* 2-column inline grids on Mobile: make 1 column */
    div[style*="display:grid; grid-template-columns:1fr 1fr"],
    div[style*="display:grid; grid-template-columns: 1fr 1fr"],
    div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Timeline in About page on Mobile */
    div[style*="160px 1fr"] {
        grid-template-columns: 75px 1fr !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
    }

    /* Products.html: 8 Tabs Horizontal Swipe Bar */
    .mfds-tabs-list {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 4px 2px 10px 2px !important;
        scrollbar-width: none !important;
    }
    .mfds-tabs-list::-webkit-scrollbar {
        display: none !important;
    }
    .mfds-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 9px 15px !important;
        font-size: 13.5px !important;
        border-radius: 999px !important;
    }

    /* Products.html Product Cards: 2 Columns on Mobile */
    .legacy-prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .legacy-prod-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .legacy-prod-img-wrap {
        height: 125px !important;
        padding: 6px !important;
    }
    .legacy-prod-name {
        font-size: 13px !important;
        line-height: 1.3 !important;
        height: auto !important;
    }

    /* Drops.html Action Buttons on Mobile */
    .drops-cta-group,
    div:has(> a[href*="smartstore"]) {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .drops-cta-group a,
    div:has(> a[href*="smartstore"]) > a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Contact.html Form on Mobile */
    .contact-layout,
    form {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3D WebGL Canvas Protection */
    .shield3d,
    .shield3d canvas,
    .hero-media-wrap {
        touch-action: pan-y !important;
        max-height: 280px !important;
    }

    /* General Touch Padding Adjustments */
    .btn, button, .action-btn {
        min-height: 44px !important;
    }
}

/* 4. TABLE RESPONSIVE SCROLLBAR & STYLING (FOR ALL DEVICES) */
.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 24px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}
.table-responsive table {
    width: 100% !important;
    min-width: 580px !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}
.table-responsive table th,
.table-responsive table td {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
}
.table-responsive table td:nth-child(2) {
    white-space: normal !important;
}


/* ==========================================================================
   MAGAZINE & NEWSROOM RESPONSIVE STYLES
   ========================================================================== */
@media (max-width: 1024px) {
    .drvu-press-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}
@media (max-width: 768px) {
    .drvu-newspaper-mockup img {
        max-height: 360px !important;
    }
    .drvu-newspaper-mockup [style*="grid-template-columns:1fr 1fr"],
    .drvu-newspaper-mockup [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .drvu-article-expandable [style*="grid-template-columns:1fr 1fr"],
    .drvu-article-expandable [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .drvu-article-expandable [style*="grid-template-columns:repeat(6, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    #magazine-modal .mag-thumb {
        width: 36px !important;
        height: 50px !important;
    }
    #mag-current-img {
        max-height: 60vh !important;
    }
}


/* ==========================================================================
   SUB-MENU & PILL NAVIGATION RE-ALIGNMENT ENGINE (MOBILE & TABLET)
   Build: 20261113_subnav
   ========================================================================== */

/* Subpage Navigation Strip (Sticky Top) */
.subpage-nav-bar {
    position: sticky !important;
    top: 56px !important;
    z-index: 99 !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.subpage-nav-bar .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Horizontal Scroll Container for Subpage Pills */
.subpage-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 2px 6px 2px !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
}
.subpage-pills::-webkit-scrollbar {
    display: none !important;
}

/* Individual Pill Links: NEVER CRUSH VERTICALLY */
.subpage-pill-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important; /* CRITICAL: Prevent word wrapping */
    flex-shrink: 0 !important;       /* CRITICAL: Prevent width squeezing */
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.subpage-pill-link i {
    font-size: 13px !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
}

/* Active & Hover States */
.subpage-pill-link.active,
.subpage-pill-link:hover {
    background: #0052cc !important;
    color: #ffffff !important;
    border-color: #0052cc !important;
    box-shadow: 0 3px 10px rgba(0, 82, 204, 0.28) !important;
}

.subpage-pill-link.active i,
.subpage-pill-link:hover i {
    color: #ffffff !important;
}

/* Mobile Specific Optimizations (<= 768px) */
@media (max-width: 768px) {
    .subpage-nav-bar {
        top: 48px !important;
        padding: 8px 0 !important;
    }
    .subpage-pill-link {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    /* Hero Actions Button Stacks on Mobile */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .hero-actions .btn,
    .hero-actions .btn-primary,
    .hero-actions .btn-outline,
    .hero-actions a {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }
}