:root {
    --primary-background: #0b120e;
    --primary-text: #f1f5f9;
    --secondary-background: #121a14;
    --secondary-text: #9db8a8;
    --card-surface: #16241b;
    --card-border: #24382a;
    --accent-primary: #34d399;
    --accent-secondary: #a3e635;
    --accent-text: #ffffff;
    --status-info: #059669;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    background-color: var(--primary-background);
    color: var(--primary-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: inherit;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 1.875rem);
    }

    h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    }

    h4 {
        font-size: 1.125rem;
    }

    h5 {
        font-size: 1rem;
    }

    .text-break-mobile {
        word-break: break-all;
    }
}

/* ===== header ===== */
.site-header {
    overflow: visible;
}

.nav-anchor-link {
    transition: color 0.2s ease-in-out;
}

.nav-anchor-link:hover {
    color: var(--accent-primary) !important;
}

.header-cta-btn {
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: none;
}

.header-cta-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #0b120e !important;
}

.mobile-menu-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    top: 100%;
}

.mobile-menu-wrapper.open {
    max-height: 380px;
}

/* ===== hero ===== */
#hero.lumosync-hero {
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-color: var(--primary-background, #0b120e);
    padding-top: 4.5rem;
    padding-bottom: 4.5rem
}

.lumosync-hero-bg-wrapper {
    z-index: 1
}

.lumosync-hero-bg-img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.lumosync-hero-overlay {
    background: linear-gradient(180deg, rgba(11, 18, 14, 0.82) 0%, rgba(11, 18, 14, 0.95) 100%);
    z-index: 2
}

#hero .container {
    z-index: 3;
    width: 100%
}

.lumosync-badge {
    background-color: var(--card-surface, #16241b);
    color: var(--accent-primary, #34d399);
    border: 1px solid var(--card-border, #24382a);
    font-size: 0.875rem;
    padding: 0.45rem 0.85rem;
    border-radius: 2rem;
    display: inline-flex;
    align-items: center
}

.lumosync-badge i {
    color: var(--accent-primary, #34d399)
}

.lumosync-hero-title {
    color: var(--primary-text, #f1f5f9);
    font-size: 2.5rem;
    line-height: 1.25;
    hyphens: auto
}

.lumosync-hero-subtitle {
    color: var(--secondary-text, #9db8a8);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 720px;
    hyphens: auto
}

.lumosync-btn-primary {
    background-color: var(--accent-primary, #34d399);
    color: #0b120e;
    border: 1px solid var(--accent-primary, #34d399);
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease
}

.lumosync-btn-primary:hover {
    background-color: var(--accent-secondary, #a3e635);
    border-color: var(--accent-secondary, #a3e635);
    color: var(--accent-text, #ffffff)
}

.lumosync-btn-outline {
    background-color: rgba(22, 36, 27, 0.7);
    color: var(--primary-text, #f1f5f9);
    border: 1px solid var(--card-border, #24382a);
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease
}

.lumosync-btn-outline:hover {
    background-color: var(--card-surface, #16241b);
    border-color: var(--accent-primary, #34d399);
    color: var(--accent-primary, #34d399)
}

.lumosync-hero-stat-card {
    background-color: rgba(22, 36, 27, 0.85);
    border: 1px solid var(--card-border, #24382a);
    backdrop-filter: blur(6px)
}

.lumosync-hero-stat-card .text-info {
    color: var(--accent-primary, #34d399) !important
}

.text-info {
    color: var(--accent-primary, #34d399) !important
}

.lumosync-stat-desc {
    color: var(--secondary-text, #9db8a8)
}

@media(max-width:767.98px) {
    .lumosync-hero-title {
        font-size: 1.125rem !important;
        line-height: 1.2 !important
    }

    .lumosync-hero-subtitle {
        font-size: 0.875rem !important;
        line-height: 1.35 !important
    }

    .lumosync-hero-stat-card h3 {
        font-size: 0.875rem !important
    }

    .lumosync-hero {
        min-height: auto;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem
    }

    .lumosync-badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem
    }

    .lumosync-btn-primary,
    .lumosync-btn-outline {
        width: 100%;
        justify-content: center
    }
}

/* ===== main_article ===== */
#main-article {
    position: relative;
    width: 100%;
}

#main-article .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#main-article .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
}

#mainArticleModal .modal-content {
    max-height: 90vh;
}

#mainArticleModal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) var(--secondary-background);
}

#mainArticleModal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#mainArticleModal .modal-body::-webkit-scrollbar-track {
    background: var(--secondary-background);
}

#mainArticleModal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--card-border);
    border-radius: 4px;
}

@media (max-width: 767.98px) {
    #main-article h2 {
        font-size: 1.125rem !important;
        line-height: 1.25 !important;
    }

    #main-article h3 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    #mainArticleModal h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    #mainArticleModal h3 {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    #mainArticleModal .modal-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ===== interactive_system_map ===== */
#system-map {
    width: 100%;
}

#system-map .js-system-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
}

#system-map .js-system-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary) !important;
    box-shadow: 0 10px 25px -5px rgba(52, 211, 153, 0.15);
}

#system-map .js-system-card.is-active {
    border-color: var(--accent-primary) !important;
    background-color: rgba(52, 211, 153, 0.05) !important;
    box-shadow: 0 0 0 1px var(--accent-primary);
}

/* ===== timeline_history ===== */
#timeline-history {
    overflow: hidden;
}

#timeline-history .card {
    transition: transform 0.25s ease, border-color 0.25s ease;
}

#timeline-history .card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary) !important;
}

@media (max-width: 767px) {
    #timeline-history h2 {
        font-size: 1rem !important;
        line-height: 1.25;
        hyphens: auto;
    }

    #timeline-history h3 {
        font-size: 0.875rem !important;
        line-height: 1.2;
        hyphens: auto;
    }
}

/* ===== sensor_system ===== */
#sensor-system {
    overflow: hidden;
    width: 100%;
}

#sensor-system .table {
    --bs-table-bg: transparent;
}

#sensor-system .sensor-table-body tr {
    transition: background-color 0.2s ease;
}

#sensor-system .sensor-table-body tr:hover {
    background-color: rgba(52, 211, 153, 0.05);
}

#sensor-system .js-sensor-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

#sensor-system .js-sensor-card:hover {
    transform: translateY(-2px);
    border-color: #34d399;
}

@media (max-width: 767.98px) {
    #sensor-system h2 {
        font-size: 1rem;
        line-height: 1.2;
        hyphens: auto;
    }

    #sensor-system h3 {
        font-size: 0.875rem;
        line-height: 1.2;
        hyphens: auto;
    }
}

/* ===== mechanics_vs_electronics ===== */
#mechanics-vs-electronics {
    width: 100%;
    hyphens: auto;
}

@media (max-width: 767.98px) {
    #mechanics-vs-electronics h2 {
        font-size: 1rem !important;
        line-height: 1.25;
    }

    #mechanics-vs-electronics h3 {
        font-size: 0.875rem !important;
        line-height: 1.2;
    }

    #mechanics-vs-electronics .p-4 {
        padding: 1rem !important;
    }
}

/* ===== tech_breakdown_articles ===== */
#tech-breakdown {
    overflow: hidden;
    background-color: var(--primary-background);
    color: var(--primary-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

#tech-breakdown .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#tech-breakdown .card:hover {
    transform: translateY(-4px);
    border-color: rgba(52, 211, 153, 0.4) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

#tech-breakdown .js-modal-trigger {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#tech-breakdown .js-modal-trigger:hover {
    background-color: #6ee7b7 !important;
    color: #0b120e !important;
}

#tech-breakdown .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

@media (max-width: 767.98px) {
    #tech-breakdown h2 {
        font-size: 1rem !important;
        line-height: 1.25;
        hyphens: auto;
    }

    #tech-breakdown h3 {
        font-size: 0.875rem !important;
        line-height: 1.2;
        hyphens: auto;
    }

    #tech-breakdown .modal-title {
        font-size: 0.95rem !important;
        line-height: 1.25;
    }
}

/* ===== development_factors ===== */
#development-factors {
    width: 100%;
    box-sizing: border-box;
}

#development-factors .js-factor-card {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#development-factors .js-factor-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767.98px) {
    #development-factors h2 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        hyphens: auto;
    }

    #development-factors h3 {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
        hyphens: auto;
    }

    #development-factors .js-factor-card {
        padding: 1.25rem !important;
    }
}

/* ===== digital_cockpit ===== */
#digital-cockpit {
    overflow: hidden;
    width: 100%;
}

#digital-cockpit .card {
    border: 1px solid var(--card-border) !important;
}

#digital-cockpit .card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary) !important;
}

@media (max-width: 767.98px) {
    #digital-cockpit h2 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        hyphens: auto;
    }

    #digital-cockpit h3 {
        font-size: 0.875rem !important;
        line-height: 1.25 !important;
        hyphens: auto;
    }
}

/* ===== engineering_challenges ===== */
#engineering-challenges {
    hyphens: auto;
    word-break: keep-all;
}

@media (max-width: 767.98px) {
    #engineering-challenges h2 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    #engineering-challenges h3 {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
    }

    #engineering-challenges p {
        font-size: 0.8125rem !important;
    }
}

/* ===== future_perspectives ===== */
#future-perspectives {
    overflow: hidden;
    background-color: var(--primary-background);
    color: var(--primary-text);
    font-family: inherit
}

#future-perspectives .future-tag {
    background-color: rgba(52, 211, 153, 0.12);
    color: var(--accent-primary);
    border: 1px solid rgba(52, 211, 153, 0.25);
    font-size: 0.8125rem;
    letter-spacing: 0.04em
}

#future-perspectives .section-main-title {
    color: var(--primary-text);
    letter-spacing: -0.02em;
    hyphens: auto
}

#future-perspectives .section-subtitle {
    color: var(--secondary-text);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

#future-perspectives .vector-card {
    background-color: var(--card-surface);
    border: 1px solid var(--card-border);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease
}

#future-perspectives .vector-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: 0 12px 24px -10px rgba(52, 211, 153, 0.15)
}

#future-perspectives .icon-box {
    width: 52px;
    height: 52px;
    background-color: rgba(52, 211, 153, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(52, 211, 153, 0.2)
}

#future-perspectives .vector-title {
    color: var(--primary-text);
    hyphens: auto
}

#future-perspectives .vector-desc {
    color: var(--secondary-text);
    font-size: 0.9375rem;
    line-height: 1.6
}

#future-perspectives .article-card {
    background: linear-gradient(180deg, var(--card-surface) 0%, var(--secondary-background) 100%);
    border: 1px solid var(--card-border);
    transition: border-color 0.25s ease, box-shadow 0.25s ease
}

#future-perspectives .article-card:hover {
    border-color: var(--accent-secondary);
    box-shadow: 0 14px 28px -10px rgba(163, 230, 53, 0.2)
}

#future-perspectives .article-badge {
    background-color: rgba(163, 230, 53, 0.15);
    color: var(--accent-secondary);
    border: 1px solid rgba(163, 230, 53, 0.3);
    font-size: 0.75rem
}

#future-perspectives .article-title {
    color: var(--primary-text);
    line-height: 1.4;
    hyphens: auto
}

#future-perspectives .article-snippet {
    color: var(--secondary-text);
    font-size: 0.9375rem;
    line-height: 1.6
}

#future-perspectives .modal-trigger-btn {
    background-color: var(--secondary-background);
    border: 1px solid var(--card-border);
    color: var(--accent-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease
}

#future-perspectives .modal-trigger-btn:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--primary-background)
}

#future-perspectives .custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 18, 14, 0.82);
    backdrop-filter: blur(6px);
    z-index: 1050;
    padding: 1.25rem;
    overflow-y: auto;
    align-items: center;
    justify-content: center
}

#future-perspectives .custom-modal-overlay.is-active {
    display: flex
}

#future-perspectives .custom-modal-dialog {
    max-width: 760px;
    width: 100%;
    margin: auto
}

#future-perspectives .custom-modal-content {
    background-color: var(--card-surface);
    border: 1px solid var(--card-border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5)
}

#future-perspectives .modal-header-icon {
    color: var(--accent-primary)
}

#future-perspectives .modal-main-title {
    color: var(--primary-text);
    line-height: 1.35;
    hyphens: auto
}

#future-perspectives .btn-close-modal {
    background: transparent;
    border: none;
    color: var(--secondary-text);
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease
}

#future-perspectives .btn-close-modal:hover {
    color: var(--primary-text)
}

#future-perspectives .modal-text-body p {
    color: var(--secondary-text);
    font-size: 0.975rem;
    line-height: 1.75;
    margin-bottom: 1.1rem
}

#future-perspectives .modal-text-body p:last-child {
    margin-bottom: 0
}

#future-perspectives .modal-confirm-btn {
    background-color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    color: var(--primary-background);
    transition: opacity 0.2s ease
}

#future-perspectives .modal-confirm-btn:hover {
    opacity: 0.9
}

#future-perspectives .border-bottom,
#future-perspectives .border-top {
    border-color: var(--card-border) !important
}

@media(max-width:767.98px) {
    #future-perspectives .section-main-title {
        font-size: 1rem;
        line-height: 1.25
    }

    #future-perspectives .vector-title,
    #future-perspectives .article-title {
        font-size: 0.875rem;
        line-height: 1.2
    }

    #future-perspectives .modal-main-title {
        font-size: 0.9375rem;
        line-height: 1.25
    }

    #future-perspectives .section-subtitle {
        font-size: 0.875rem
    }

    #future-perspectives .custom-modal-content {
        padding: 1.25rem !important
    }
}

/* ===== newsletter_contacts ===== */
#newsletter-contact {
    width: 100%;
    overflow: hidden;
}

#newsletter-contact .form-control::placeholder {
    color: #9db8a8;
}

#newsletter-contact .js-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

#newsletter-contact .js-submit-btn:active {
    transform: translateY(0);
}

#newsletter-contact a:hover {
    text-decoration: underline !important;
}

@media (max-width: 767.98px) {
    #newsletter-contact h2 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        hyphens: auto;
    }

    #newsletter-contact h3 {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
        hyphens: auto;
    }
}

/* ===== footer ===== */
#footer.lumosync-footer {
    background-color: var(--secondary-background);
    border-top: 1px solid var(--card-border);
    color: var(--secondary-text);
    font-size: 0.9375rem;
    line-height: 1.6;
}

#footer .lumosync-logo {
    max-width: 48px;
    height: auto;
    object-fit: contain;
}

#footer .lumosync-brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

#footer .lumosync-domain {
    font-size: 0.75rem;
    color: var(--accent-primary);
    line-height: 1.2;
}

#footer .lumosync-desc {
    color: var(--secondary-text);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    word-break: keep-all;
}

#footer .lumosync-update-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background-color: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--accent-primary);
}

#footer .lumosync-update-tag i {
    font-size: 0.875rem;
    color: var(--accent-primary);
}

#footer .lumosync-nav-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary-text);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

#footer .lumosync-nav-list {
    padding-left: 0;
}

#footer .lumosync-nav-link {
    color: var(--secondary-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

#footer .lumosync-nav-link:hover,
#footer .lumosync-nav-link:focus {
    color: var(--accent-primary);
    transform: translateX(2px);
}

#footer .lumosync-divider {
    border-color: var(--card-border);
    opacity: 0.6;
}

#footer .lumosync-copy {
    font-size: 0.8125rem;
    color: var(--secondary-text);
}

#footer .lumosync-notice {
    font-size: 0.75rem;
    color: var(--secondary-text);
    opacity: 0.85;
}

@media(max-width:767.98px) {
    #footer .lumosync-brand-name {
        font-size: 0.8rem;
    }

    #footer .lumosync-nav-title {
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }

    #footer .lumosync-desc {
        font-size: 0.8125rem;
    }
}