/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    overflow-x: hidden;
}

/* Line Break Utilities */
.pc-br {
    display: block;
}

.mo-br {
    display: none;
}

/* Header Styles */
#main-header {
    position: fixed;
    /* Sticky typically means fixed to top in this context */
    top: 0;
    left: 0;
    width: 100%;
    /* Reverting floating effect to full width */
    z-index: 1000;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 27px 0;
    border-radius: 0;
}

.header-inner {
    max-width: 1200px;
    /* Or whatever the container width is */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    display: block;
    position: relative;
    width: 170px;
    height: 48px;
}

.logo img {
    position: absolute;
    top: 0;
    left: 0;
    height: 48px;
    transition: opacity 0.3s ease;
}

.logo-white {
    opacity: 1;
    z-index: 2;
}

.logo-color {
    opacity: 0;
    z-index: 1;
}

/* GNB Styles */
.gnb-list {
    display: flex;
    list-style: none;
    gap: 38px;
}

.gnb-list li a {
    text-decoration: none;
    color: #222;
    /* Initial Black for bright bg */
    font-weight: 500;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.gnb-list li a:hover {
    opacity: 0.8;
    color: #0066ff;
}

/* Header Sticky/Scrolled State */
#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#main-header .logo-white {
    opacity: 0;
    /* Hide white logo initially */
}

#main-header .logo-color {
    opacity: 1;
    /* Show color logo initially */
}

#main-header.scrolled .gnb-list li a {
    color: #222;
}



/* Visual Section (Bright & Clean Design) */
.visual-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
    /* Bright Background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    /* Space for fixed header */
}

.visual-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 40px;
}

/* Visual Text Group (Left Aligned) */
.visual-text-group {
    flex: 1;
    text-align: left;
    max-width: 800px;
    z-index: 2;
}

.visual-counter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.counter-number-wrap {
    justify-content: flex-start;
}

.visual-btn-group {
    justify-content: flex-start;
}

.sub-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #666;
    /* Match counter-desc color */
    margin-bottom: 20px;
    display: block;
    animation: fadeInUp 0.8s ease-out both;
}

.main-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.3;
    color: #222;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.highlight-text {
    color: #0066ff;
    /* Brand Blue */
    display: inline-block;
}

/* Cursor Animation */
.cursor {
    display: inline-block;
    width: 4px;
    background-color: #222;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 5px;
    height: 1em;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Counter Style (Emphasized Number) */
.visual-counter-group {
    margin-bottom: 50px;
    animation: fadeInUp 0.8s ease-out 0.4s both;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    border-left: none;
}

.counter-desc {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    /* Darker Label */
    margin-bottom: 0;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.counter-number-wrap {
    display: flex;
    align-items: baseline;
    font-weight: 800;
    color: #0066ff;
    /* Brand Blue */
    line-height: 1.1;
    justify-content: flex-start;
}

.counter-val {
    font-size: 5.5rem;
    /* Larger Impact */
    letter-spacing: -0.04em;
    color: #0066ff;
    /* Brand Blue Emphasis */
}

.counter-plus {
    font-size: 3.5rem;
    color: #0066ff;
    /* Brand Blue Emphasis */
    margin-left: 5px;
    font-weight: 600;
    vertical-align: top;
    transform: translateY(-8px);
}

.counter-unit {
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    margin-left: 10px;
}

/* Buttons */
.visual-btn-group {
    display: flex;
    gap: 15px;
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.btn-visual {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Base Button Style */
    /* background-color & color removed for specific classes */
}

/* Secondary Button (Company Intro) - Light Style */
/* Secondary Button (Company Intro) - Outline Grey Style */
.btn-secondary {
    background-color: #fff;
    color: #444;
    border: 1px solid #bbb;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    background-color: #fff;
    color: #0066ff;
    border-color: #0066ff;
    box-shadow: 0 5px 15px rgba(0, 102, 255, 0.15);
    transform: translateY(-2px);
}

/* Primary Button (1:1 Inquiry) - Solid Brand Color */
/* Primary Button (1:1 Inquiry) - Outline Brand Color */
.btn-primary {
    background-color: #fff;
    color: #0066ff;
    border: 1px solid #0066ff;
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.1);
}

.btn-primary:hover {
    background-color: #0066ff;
    border-color: #0066ff;
    color: #fff;
    box-shadow: 0 6px 15px rgba(0, 102, 255, 0.3);
    transform: translateY(-2px);
}

.btn-visual .arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-visual:hover .arrow {
    transform: translateX(4px);
}


/* Right Column: Custom 3D Card */
.visual-image-group {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: fadeInRight 1s ease-out 0.4s both;
    perspective: 1000px;
    /* Enable 3D perspective */
}

/* Floating Icon Cards */
.floating-icon-card {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
    z-index: 10;
}

.floating-icon-card svg {
    width: 60px;
    height: 60px;
    /* stroke: #0066ff; Removed stroke for gradient fill */
}



.icon-left {
    left: 15%;
    /* Moved right to overlap */
    /* Adjust horizontal position */
    top: 25%;
    /* Adjust vertical position (Speech Bubble - Top Left) */
    animation: floatIcon 5s ease-in-out infinite alternate;
}

.icon-right {
    right: 14%;
    /* Moved left to overlap */
    /* Adjust horizontal position */
    bottom: 25%;
    /* Adjust vertical position (User - Bottom Right) */
    animation: floatIcon 5.5s ease-in-out infinite alternate-reverse;
    /* Different timing */
}

/* Specific adjustment for Speech Bubble Icon */
.icon-right svg {
    margin-top: 5px;
}

@keyframes floatIcon {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-15px);
    }
}

/* Mobile Dashboard Style Floating Card */
.floating-card.mobile-dashboard {
    position: relative;
    width: 300px;
    height: 460px;
    background: #f5f7fa;
    /* Light App Background */
    border-radius: 44px;
    /* Matches iPhone rounded corners */
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 64, 153, 0.05);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    transform: rotateY(-10deg) rotateX(5deg);
    transform-style: preserve-3d;
    animation: floatCard 6s ease-in-out infinite;
    border: 12px solid #e2e8f0;
    overflow: hidden;
}

/* Home Indicator */
.floating-card.mobile-dashboard::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background-color: #000;
    border-radius: 100px;
    opacity: 0.2;
    z-index: 10;
}

/* Status Bar */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 4px;
    color: #999;
    font-size: 0.9rem;
    font-weight: 600;
}

.status-icons {
    display: flex;
    gap: 6px;
}

.status-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5px;
}

/* Dashboard Content */
.dashboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically centered */
    gap: 16px;
    padding-bottom: 30px;
}

/* KPI Item as Card */
.kpi-item {
    display: flex;
    align-items: center;
    padding: 24px 20px;
    gap: 16px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.kpi-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 64, 153, 0.08);
    /* Hint of blue shadow */
}

.kpi-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: #ecf5ff;
    /* Lighter blue */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0066ff;
    /* Brand Blue */
    flex-shrink: 0;
}

/* Color Variations */
.kpi-item:nth-child(1) .kpi-icon-box {
    background-color: rgba(0, 102, 255, 0.1);
    color: #0066ff;
}

.kpi-item:nth-child(1) .kpi-count {
    color: #0066ff;
}

.kpi-item:nth-child(3) .kpi-icon-box {
    background-color: rgba(0, 153, 224, 0.1);
    color: #0099e0;
}

.kpi-item:nth-child(3) .kpi-count {
    color: #0099e0;
}

.kpi-item:nth-child(5) .kpi-icon-box {
    background-color: rgba(0, 160, 189, 0.1);
    color: #00a0bd;
}

.kpi-item:nth-child(5) .kpi-count {
    color: #00a0bd;
}

.kpi-icon-box svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.5;
}

.kpi-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.kpi-label {
    font-size: 0.9rem;
    color: #777;
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.kpi-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.kpi-count {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    /* Darker for better contrast on white card */
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.kpi-unit {
    font-size: 1rem;
    font-weight: 700;
    color: #888;
}

/* Hide Divider */
.kpi-divider {
    display: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .visual-container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 100px;
    }

    .visual-text-group {
        text-align: center;
        max-width: 100%;
        margin-bottom: 40px;
    }

    .visual-text-group .main-title br {
        display: none;
        /* Unwrap on mobile if needed, or keep */
    }

    .visual-counter-group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .visual-btn-group {
        justify-content: center;
    }

    .visual-image-group {
        margin-top: 50px;
        perspective: none;
        /* Disable 3D on mobile/tablet for simpler view */
        transform: none;
    }

    .floating-card {
        transform: none;
        /* Remove tilt on small screens */
        animation: floatCardMobile 6s ease-in-out infinite;
    }

    @keyframes floatCardMobile {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-15px);
        }
    }
}

@media (max-width: 768px) {
    .main-title {
        font-size: 2.2rem;
    }

    .kpi-count {
        font-size: 3rem;
    }

    .btn-visual {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* Company Intro Section */
#company-intro-section {
    scroll-margin-top: 110px;
}

.company-intro-section {
    position: relative;
    padding: 95px 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.intro-inner {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.intro-header {
    margin-bottom: 50px;
}

.intro-sub-title {
    color: #0066ff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.intro-main-title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    letter-spacing: -0.03em;
}

.intro-main-title .highlight {
    color: #222;
    /* Brand vivid blue */
    font-weight: 800;
}

/* Card Grid */
.card-grid {
    display: flex;
    gap: 28px;
    justify-content: space-between;
}

.intro-card {
    position: relative;
    flex: 1;
    aspect-ratio: 1 / 1.2;
    /* Adjusted from 1 / 1.3 */
    min-height: 430px;
    /* Reduced to 450px */
    background-color: #fff;
    /* Default white background for multiply to show image normally */
    overflow: hidden;
    border-radius: 4px;
    /* Applied from core-banner */
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    z-index: 1;
    /* Establish stacking context */
}

/* Background Image Layer (::after) */
.intro-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* Behind content and overlay */
    opacity: 1;
    mix-blend-mode: multiply;
    /* Blends with parent background color */
    transition: opacity 0.4s ease;
}

/* Dark Overlay Layer (::before) - unchanged logic, just verified z-index */
.intro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark semi-transparent layer for default state */
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
    /* Above image, below content */
    transition: opacity 0.4s ease;
}

/* Re-adjust z-indices for safety */
.card-content,
.card-hover-content {
    z-index: 2;
}

.intro-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    /* z-index upgrade to float above siblings if needed */
    z-index: 10;
}

.intro-card:hover::before {
    opacity: 0;
}

.intro-card:hover::after {
    opacity: 0.45;
    /* Requested Modification */
}

/* Specific Hover Colors with Multiply Blend Mode */
.intro-card.card-consulting:hover {
    background-color: #004099;
    /* Deep Blue */
}

.intro-card.card-marketing:hover {
    background-color: #0099e0;
    /* Bright Cyan/Blue */
}

.intro-card.card-service:hover {
    background-color: #00a0bd;
    /* Requested Cyan/Teal */
}

/* Icons */
.hover-icon img {
    display: block;
    height: 60px;
    width: auto;
    margin: 0 auto;
}

/* Default Content (Bottom) */
.card-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: calc(100% - 80px);
    z-index: 3;
    color: #fff;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arrow-icon {
    font-size: 1.2rem;
    background: #fff;
    color: #000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* During hover, strict interpretation of design: "Card center description appears".
   Does the bottom title disappear? 
   Image 03_section-2.png shows the title is still there but maybe moved or just the description is central.
   Actually, usually in these designs, the title moves up or stays, and description fades in.
   Let's check the request: "Card center description text appears". 
   And "Title ... at bottom initially".
   Let's hide the bottom title on hover and show the center content, or have the center content include the title.
   Let's look at the Hover HTML structure I made:
   It has `.card-hover-content` which contains the Icon, Title, and Desc.
   So I will hide `.card-content` on hover, and show `.card-hover-content`.
*/

.intro-card:hover .card-content {
    opacity: 0;
    transform: translateY(20px);
}

/* Hover Content (Center) */
.card-hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centering */
    width: 80%;
    z-index: 4;
    color: #fff;
    text-align: left;
    /* Text alignment logic: description looks left aligned in typical lists */
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
    /* Slight delay */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align items to left */
}

.intro-card:hover .card-hover-content {
    opacity: 1;
}

.card-hover-content .hover-icon {
    margin-bottom: 20px;
}

.card-hover-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 15px;
}

.card-hover-content .card-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 300;
    opacity: 0.95;
    /* Increased opacity slightly for readability with larger text */
}

@media (max-width: 1024px) {
    .card-grid {
        flex-direction: column;
    }

    .intro-card {
        height: 400px;
    }
}


/* Shared Container for Contact and Footer */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contact Section */
#contact {
    scroll-margin-top: 110px;
}

.contact-section {
    background-color: #030a16;
    color: #fff;
    padding: 100px 0;
    /* Increase padding for better spacing */
}

.contact-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* Stretch to equal height */
    gap: 75px;
}

/* Left Column: Info */
.contact-info {
    flex: 1;
    display: flex;
    /* Flex column to control vertical spacing */
    flex-direction: column;
}

.contact-title {
    font-size: 2.7rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: -0.02em;
}

.contact-desc {
    font-size: 1.1rem;
    color: #999;
    margin-bottom: 50px;
    line-height: 1.6;
}

.info-list {
    list-style: none;
}

.info-list li {
    margin-bottom: 25px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.info-list li strong {
    display: inline-block;
    width: 100px;
    color: #36a4ff;
    /* Using Brand Sky Blue */
    font-weight: 700;
    font-size: 0.9rem;
}

/* Map Image Styles */
.contact-map {
    margin-top: 30px;
    width: 100%;
    flex: 1;
    /* Fill remaining vertical space */
    position: relative;
    overflow: hidden;
    /* Ensure image zoom stays within bounds */
    border-radius: 4px;
    /* Apply radius to container for overflow hidden to work */
}

.contact-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* border-radius: 10px; Managed by container now */
    border: none;
    transition: transform 0.5s ease;
}

.contact-map:hover img {
    transform: scale(1.1);
}

/* Right Column: Form */
.contact-form-wrap {
    flex: 1;
    display: flex;
    /* Flex column */
    flex-direction: column;
}

.contact-form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px;
    background-color: #0b1624;
    /* Dark Navy matching theme */
    border: 1px solid #1f3a5a;
    /* Subtle Blue-Grey Border */
    border-radius: 4px;
    /* Unify corner radius */
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #36a4ff;
    /* Brand Blue focus */
    background-color: #0f1e33;
    /* Slightly lighter navy on focus */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #555;
}

.contact-form textarea {
    height: 120px;
    resize: none;
}

.submit-btn {
    width: 100%;
    padding: 20px;
    background-color: #1a5cc7;
    /* Toned Down Blue */
    color: #fff;
    /* White text */
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Smooth transition for all properties */
    margin-top: auto;
    /* Push to bottom */
    border-radius: 4px;
    /* Match site radius */
}

.submit-btn:hover {
    background-color: #004aa6;
    /* Slightly Darker Blue */
    transform: translateY(-3px);
    /* Slight lift */
    box-shadow: 0 10px 20px rgba(26, 92, 199, 0.3);
    /* Glow/Shadow */
}

/* Responsive */
@media (max-width: 900px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 50px;
    }
}

/* Contact Form Rows */
.form-group.row {
    display: flex;
    gap: 20px;
}

.col-half {
    flex: 1;
}

/* Privacy Policy Box */
.privacy-agreement {
    margin-bottom: 20px;
    text-align: left;
}

.privacy-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.privacy-box {
    width: 100%;
    height: 100px;
    background-color: #0b1624;
    /* Dark Navy */
    border: 1px solid #1f3a5a;
    /* Subtle Blue-Grey Border */
    border-radius: 4px;
    /* Unify corner radius */
    padding: 15px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #ccc;
    overflow-y: scroll;
    white-space: pre-line;
    /* Preserves line breaks in the text */
    margin-bottom: 15px;
}

.privacy-box::-webkit-scrollbar {
    width: 8px;
}

.privacy-box::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

.privacy-box::-webkit-scrollbar-track {
    background-color: #222;
}

.agreement-question {
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 10px;
}

.agreement-options {
    display: flex;
    gap: 20px;
}

.agreement-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 400;
}

.agreement-options input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background-color: #1a1a1a;
    border: 1px solid #555;
    accent-color: #36a4ff;
    /* Supports modern browsers */
    margin: 0;
    /* Reset default margin */
}


/* Footer Styles (Basic Dark Theme) */
#footer {
    background-color: #111;
    color: #888;
    padding: 50px 0;
    border-top: 1px solid #222;
    font-size: 0.9rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid #222;
}

.footer-logo {
    height: 30px;
    opacity: 0.8;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    margin-left: 30px;
    transition: color 0.3s;
}

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

.footer-bottom {
    line-height: 1.6;
}


/* --- New Core Values Section --- */
.core-values-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
    /* For animations */
}

.core-values-section .container {
    max-width: 1200px;
    /* Match global container/intro-inner */
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}






/* Visual Banner (Parallax) */
.core-banner {
    width: 100%;
    height: 240px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
    /* Essential for parallax content clipping */
    border-radius: 4px;
}

.parallax-bg {
    width: 150%;
    height: 150%;
    /* Taller than container for movement */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: -10%;
    /* Start slightly above */
    left: 0;
    /* 
       Optimized Parallax:
       Using fixed attachment is simple but can be jittery or not work on mobile.
       Better approach given constraints: 'transform' based parallax or simple fixed.
       Request asked for "transform: scale(1.1)" and parallax.
       Let's stick to simple fixed attachment if possible, or use a basic animation.
       Actually, standard fixed background is the most robust CSS-only parallax.
    */
    background-attachment: fixed;
    /* transform: scale(1.1); Removed to ensure background-attachment: fixed works */
    /* transition: transform 0.5s ease-out; Removed */
}

/* Mobile support for fixed background is tricky, often disabled. 
   Fallback to scroll for mobile is cleaner. */
@media (hover: none) {
    .parallax-bg {
        background-attachment: scroll;
    }
}


/* Corporate Vision Section */
.vision-section {
    padding: 120px 0;
    background-color: #f9fcff;
    /* Light Brand Blue/Gray */
    overflow: hidden;
}

.vision-section .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.vision-section .intro-main-title {
    font-weight: 800;
}

/* Vision Grid Layout */
.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

/* Vision Card Style */
.vision-item {
    background-color: #fff;
    padding: 50px 30px;
    border-radius: 4px;
    /* Updated to 4px */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.vision-grid .vision-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    /* Slightly lighter shadow for white card but similar depth */
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    /* Force speed match */
    z-index: 10;
}

/* Head: Icon + Title */
.vision-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

.vision-section .icon-box {
    /* Default fallback */
    background-color: #0066ff;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Apply Brand Colors from Intro Section */
/* 1. Deep Blue (#004099) */
.vision-item:nth-child(1) .icon-box {
    background-color: #004099;
    box-shadow: 0 5px 15px rgba(0, 64, 153, 0.3);
}

/* 2. Bright Cyan/Blue (#0099e0) */
.vision-item:nth-child(2) .icon-box {
    background-color: #0099e0;
    box-shadow: 0 5px 15px rgba(0, 153, 224, 0.3);
}

/* 3. Teal (#00a0bd) */
.vision-item:nth-child(3) .icon-box {
    background-color: #00a0bd;
    box-shadow: 0 5px 15px rgba(0, 160, 189, 0.3);
}

.vision-section .icon-box i {
    width: 30px;
    height: 30px;
}

.vision-item:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

.vision-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* Description */
.vision-desc {
    padding: 0;
    width: 100%;
}

.vision-desc p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666;
    font-weight: 400;
    word-break: keep-all;
}

/* Responsive for Vision Grid */
@media (max-width: 1024px) {
    .vision-item {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .vision-grid {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 20px;
        max-width: 400px;
        /* Limit width on mobile for better look */
        margin: 20px auto 0;
    }

    .vision-item {
        padding: 40px 25px;
    }
}


/* Values List */
.core-values-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #222;
    /* Strong top border */
}

.value-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 0;
    border-bottom: 1px solid #ddd;
    /* Divider */
    transition: background-color 0.3s ease;
}

/* Left Side: Icon + Title */
.value-head {
    flex: 0 0 25%;
    /* Reduced from 35% */
    /* Fixed width for title area */
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Override .arrow-icon for this section */
.core-values-list .arrow-icon {
    background-color: #0066ff;
    /* Brand Blue */
    color: #fff;
    /* White Arrow */
    width: 24px;
    /* Reduced from 30px */
    height: 24px;
    /* Reduced from 30px */
    font-size: 0.9rem;
    /* Reduced from 1.2rem */
    /* Ensure no unwanted hover effects if any */
}

.value-name {
    font-size: 1.2rem;
    /* Reduced from 1.35rem */
    font-weight: 700;
    color: #0066ff;
    /* Brand Blue */
    margin: 0;
}

/* Right Side: Description */
.value-desc {
    flex: 1;
    padding-left: 10px;
    /* Reduced from 20px */
}

.value-desc p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    font-weight: 400;
    margin: 0;
    word-break: keep-all;
    text-align: justify;
}

/* Animation Classes (reuse or add) */
.is-revealing {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.is-revealing.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

/* New System Info Block */
.core-system-info {
    text-align: left;
    /* Keep left alignment */
    margin-bottom: 30px;
    padding-bottom: 0;
}

.highlight-text {
    color: #0066ff;
    /* Brand Blue */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    display: inline-block;
}

.system-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.system-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    font-weight: 400;
    word-break: keep-all;
}


/* Responsive */
@media (max-width: 768px) {
    .value-item {
        flex-direction: column;
        gap: 15px;
        padding: 30px 0;
    }

    .value-head {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 10px;
    }

    .value-desc {
        padding-left: 0;
        /* Reset indentation */
    }

    .core-title {
        font-size: 1.5rem;
    }

    .core-banner {
        height: 120px;
        /* Smaller banner on mobile */
        overflow: hidden !important;
        /* Fix protruding image */
    }

    .core-system-info {
        margin-top: -20px;
        /* Pull the system info block up toward the banner */
        position: relative;
        z-index: 2;
    }
}

/* CEO Message Section */
.ceo-section {
    background-color: #F8F9FA;
    padding: 100px 0 40px 0;
    /* Reduced bottom padding to minimum */
    overflow: hidden;
}

.contact-section {
    position: relative;
    z-index: 10;
}

.ceo-wrapper {
    /* Reverted to standard block display for left alignment */
    text-align: left;
    display: inline-block;
    /* Shrink to fit text width */
    width: fit-content;
}

.ceo-text {
    width: 100%;
    /* Ensure child takes full width of shrink-wrapped parent */
}

.ceo-header {
    margin-bottom: 40px;
}

.ceo-subtitle {
    display: block;
    color: #666;
    /* Light Gray */
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.ceo-title {
    font-size: 1.75rem;
    /* Approx 28px */
    font-weight: 800;
    color: #222;
    line-height: 1.4;
}

.ceo-greeting {
    font-weight: 700;
}

.ceo-name-highlight {
    color: #0066ff;
}

.ceo-body p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 20px;
    word-break: keep-all;
    /* Ensure Korean text breaks nicely */
}

.ceo-body .closing {
    margin-top: 5px;
    font-weight: 600;
    margin-bottom: 0;
}

.ceo-sign {
    margin-top: 0;
    /* Reset margin */
    position: relative;
    top: -50px;
    /* Force move up significantly */
    right: -120px;
    /* Move right relative to container edge (negative pulls it out) */
    display: flex;
    justify-content: flex-end;
    /* Reverted to right align */
    align-items: center;
    gap: 5px;
    z-index: 5;
    /* Ensure on top */
}

.sign-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.ceo-sign img {
    width: 100px;
    /* Slightly adjusted */
    transform: translateY(-8px);
}

/* Scroll Reveal Animation */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive for CEO Section */
@media (max-width: 900px) {
    .ceo-wrapper {
        padding: 0 20px;
    }

    .ceo-sign {
        flex-direction: column;
        /* Stack name and signature on small screens if prefered, or keep row */
        gap: 10px;
    }
}

/* Process Section */
.process-section {
    position: relative;
    padding: 120px 0;
    color: #fff;
    /* Default text white due to dark overlay */
    overflow: hidden;
}

.process-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark Navy Background with Image Overlay */
    background-image: url("images/10327.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax Effect */
    z-index: 1;
}

.process-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Black Overlay (Like Intro Cards) */
    z-index: 1;
}

.process-section .container {
    position: relative;
    z-index: 2;
}

.process-header {
    text-align: left;
    margin-bottom: 60px;
}

.process-section .intro-sub-title {
    color: #36a4ff;
    /* Bright Blue */
    margin-bottom: 20px;
    display: inline-block;
}

.process-section .intro-main-title {
    color: #fff;
    font-weight: 800;
    margin-bottom: 30px;
}

.process-main-desc {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.5;
}

.process-sub-desc {
    font-size: 1rem;
    font-weight: 400;
    color: #ccc;
    line-height: 1.6;
}

/* Process Grid */
.process-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
}

.process-item {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.05);
    /* Glass feel */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 30px;
    border-radius: 4px;
    transition: transform 0.4s ease, background-color 0.4s ease;
}

.process-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-10px);
}

.step-num {
    font-size: 0.9rem;
    font-weight: 800;
    color: #36a4ff;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.step-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.step-desc {
    font-size: 1rem;
    color: #ddd;
    line-height: 1.6;
    font-weight: 300;
    word-break: keep-all;
}

/* Responsive Process */
@media (max-width: 1024px) {
    .process-grid {
        flex-wrap: wrap;
    }

    .process-item {
        flex: 0 0 48%;
        /* 2 cols */
    }
}

@media (max-width: 768px) {
    .process-item {
        flex: 0 0 100%;
        /* 1 col */
        margin-bottom: 20px;
    }
}

/* Marketing Section (Light Theme Modifier) */
.marketing-section {
    background-color: #f8f9fa;
    /* Light Gray Background */
    color: #222;
    /* Dark Text */
    padding-top: 100px;
    /* Adjust padding if needed to separate from previous section */
}

/* Hide Dark Theme Elements */
.marketing-section .process-bg-image,
.marketing-section .process-overlay {
    display: none;
}

/* Override Text Colors */
.marketing-section .intro-main-title {
    color: #222;
}

.marketing-section .process-sub-desc {
    color: #666;
}

/* Marketing Items (Light Cards) */
.marketing-section .process-item {
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.marketing-section .process-item:hover {
    background-color: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-10px);
}

.marketing-section .step-title {
    color: #222;
    border-bottom: 1px solid #eee;
}

.marketing-section .step-desc {
    color: #555;
    font-weight: 400;


}

/* Service Section (All-in-One) */
.service-section {
    padding: 120px 0;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    /* Subtle separator */
}

.service-section .intro-main-title {
    font-weight: 800;
    margin-bottom: 30px;
}

.service-intro-desc {
    margin-top: 0;
    margin-bottom: 50px;
}

.service-main-desc {
    font-size: 1.35rem;
    line-height: 1.5;
    color: #222;
    font-weight: 600;
    margin-bottom: 15px;
}

.service-sub-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    font-weight: 400;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    position: relative;
    /* Added for absolute positioning of number */
    background-color: #fff;
    border-radius: 4px;
    /* Consistent radius */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.service-number {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background-color: #0066ff;
    /* Brand Blue */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    border-bottom-right-radius: 20px;
    /* Modern touch */
    z-index: 5;
    /* box-shadow provided by specific rules below */
}

/* Service Number Colors matching Vision Section */
.service-card:nth-child(1) .service-number {
    background-color: #004099;
    box-shadow: 5px 5px 15px rgba(0, 64, 153, 0.3);
}

.service-card:nth-child(2) .service-number {
    background-color: #0099e0;
    box-shadow: 5px 5px 15px rgba(0, 153, 224, 0.3);
}

.service-card:nth-child(3) .service-number {
    background-color: #00a0bd;
    box-shadow: 5px 5px 15px rgba(0, 160, 189, 0.3);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.service-img-box {
    width: 100%;
    height: 240px;
    /* Fixed height for consistency */
    overflow: hidden;
    position: relative;
}

.service-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .service-img-box img {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

.service-content {
    padding: 35px 30px;
    flex: 1;
    /* Match heights */
    display: flex;
    flex-direction: column;
}

.service-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.service-desc {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}

/* Responsive Service Section */
@media (max-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card:last-child {
        grid-column: span 2;
        /* Center last item or make it wide */
    }

    .service-card:last-child .service-img-box {
        height: 300px;
        /* Taller image for wide card */
    }
}

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

    .service-card:last-child {
        grid-column: auto;
    }

    .service-card:last-child .service-img-box {
        height: 240px;
        /* Reset height */
    }
}

/* Global Menu Button (Hidden on Desktop) */
.mobile-menu-btn {
    display: none;
}

/* Mobile Responsiveness Updates */
#company-intro-section,
#contact {
    scroll-margin-top: 130px;
    /* Move lower to center visually */
    padding-top: 60px;
    padding-bottom: 60px;
    /* Compact section to fit button */
}

@media screen and (max-width: 768px) {

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2000;
        /* Highest z-index */
        padding: 10px;
        margin-left: auto;
        /* Push to right */
    }

    .mobile-menu-btn span {
        display: block;
        width: 21px;
        height: 2px;
        background-color: #333;
        /* Default dark */
        margin: 5px 0;
        transition: 0.3s;
    }

    /* Mobile Menu Active State (X Icon) */
    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 5px);
        background-color: #333 !important;
        /* Force visible color */
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -5px);
        background-color: #333 !important;
        /* Force visible color */
    }

    /* Mobile Menu Button - Visibility Fix (Always dark on mobile) */
    .mobile-menu-btn span {
        background-color: #333 !important;
        /* Force dark color even on transparent header */
    }

    #main-header:not(.scrolled) .mobile-menu-btn span {
        background-color: #333 !important;
        /* Override white default */
    }

    /* 1. Global Layout & Grids */
    .card-grid,
    .vision-grid,
    .process-grid,
    .service-grid {
        grid-template-columns: 1fr !important;
    }

    .container,
    .header-inner,
    .intro-inner,
    .visual-content {
        padding-left: 30px !important;
        /* Increased padding */
        padding-right: 30px !important;
    }

    /* 2. Typography */
    .main-title {
        font-size: 36px !important;
        line-height: 1.3;
        word-break: keep-all;
    }

    .main-title br {
        display: block !important;
    }

    .intro-main-title {
        font-size: 18px !important;
        line-height: 1.4;
        word-break: keep-all;
    }

    .visual-content {
        margin-top: -120px;
    }

    .sub-title {
        font-size: 1.43rem;
    }

    /* 5. Header & Logo - Visibility Fix */
    #main-header {
        z-index: 9999 !important;
        /* Ensure header is on top */
    }

    .logo {
        z-index: 10000 !important;
        position: relative;
    }

    .logo a {
        width: 140px;
        height: 38px;
        display: block;
        /* Ensure block */
        position: relative;
    }

    .logo img {
        height: 38px;
        position: absolute;
        /* Ensure overlap */
        top: 0;
        left: 0;
        transition: opacity 0.3s;
    }

    /* Force Color Logo Visible on Mobile (White background) */
    #main-header .logo-white {
        /* Hide white logo */
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
        /* Remove from flow to be safe */
    }

    #main-header .logo-color {
        /* Show color logo */
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        z-index: 10001 !important;
        position: relative !important;
        /* Reset absolute to ensure it takes space if needed, or keep absolute if overlapping */
        /* Actually, if we hide white with display:none, we can just let color be static or relative */
    }

    /* Smartphone UI - Left Alignment */
    .kpi-text {
        align-items: flex-start !important;
        /* Force left align */
        text-align: left !important;
    }

    .kpi-value-wrap {
        justify-content: flex-start !important;
    }
}

/* =========================================
   MOBILE OPTIMIZATION (2026-02-19)
   Target: Max-width 768px
   ========================================= */
@media (max-width: 768px) {

    /* 1. Visual Section Optimization */
    .visual-section {
        height: auto;
        min-height: 100vh;
        padding-top: 60px !important;
        /* Reduced from 100px to 60px to shift up */
        padding-bottom: 60px;
        display: flex;
        align-items: center;
    }

    .visual-container {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px;
        text-align: center;
        padding-left: 30px !important;
        /* Sync with global padding increase */
        padding-right: 30px !important;
    }

    .visual-text-group {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 20px;
        padding: 0;
        /* Remove extra padding as container handles it */
    }

    .visual-text-group .sub-title {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .visual-text-group .main-title {
        font-size: 1.8rem !important;
        line-height: 1.35;
        word-break: keep-all;
        margin-bottom: 30px;
    }

    .visual-text-group .main-title br {
        display: block !important;
    }

    .visual-btn-group {
        justify-content: center;
        width: 100%;
        gap: 10px;
    }

    .visual-image-group {
        width: 100%;
        margin-top: 20px;
        perspective: none;
        position: relative;
    }

    /* Floating Icons */
    .floating-icon-card {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }

    .floating-icon-card svg {
        width: 40px;
        height: 40px;
    }

    .icon-left {
        left: 5%;
        /* Move out slightly */
        top: 20%;
        z-index: 5;
    }

    .icon-right {
        right: 5%;
        /* Move out slightly */
        bottom: 20%;
        z-index: 5;
    }

    /* Smartphone Card - Reproportioned (Height Reduced & Icons Spaced) */
    .floating-card.mobile-dashboard {
        width: 70% !important;
        max-width: 250px !important;
        margin: 0 auto;
        transform: none !important;
        height: auto;
        min-height: 400px !important;
        border-width: 8px;
        padding: 12px 12px 15px 12px;
        /* Reduced Top Padding (15px -> 12px) */
        z-index: 1;
    }

    /* Internal Content Spacing Restore */
    .dashboard-content {
        gap: 8px !important;
        padding-bottom: 5px !important;
    }

    /* Smartphone Content Alignment Fix */
    .kpi-text {
        align-items: flex-start !important;
        /* Left Align */
        text-align: left !important;
    }

    .kpi-value-wrap {
        justify-content: flex-start !important;
    }

    .status-bar {
        margin-bottom: 8px;
        /* Reduced from 15px to 8px */
        font-size: 0.85rem;
    }

    .kpi-item {
        padding: 22px 14px;
        /* Significantly increased padding for vertical stretch */
        gap: 10px;
    }

    .kpi-icon-box {
        width: 40px;
        /* Increased size */
        height: 40px;
    }

    .kpi-icon-box svg {
        width: 20px;
        /* Increased icon */
        height: 20px;
    }

    .kpi-count {
        font-size: 1.6rem !important;
        /* Larger font */
    }

    .kpi-label {
        font-size: 0.85rem;
        /* Larger font */
    }

    .kpi-unit {
        font-size: 1rem;
        /* Larger font */
    }

    /* 2. Grid System */
    .card-grid,
    .process-grid {
        display: flex;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .vision-grid,
    .service-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .intro-card,
    .process-item,
    .vision-item,
    .service-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* 3. Fonts & Padding Adjustments */
    .container,
    .intro-inner,
    .header-inner {
        padding-left: 30px !important;
        /* Increased padding */
        padding-right: 30px !important;
    }

    /* Uniform Section Padding for Mobile */
    .company-intro-section,
    .ceo-section,
    .core-values-section,
    .vision-section,
    .process-section,
    .service-section,
    .contact-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .intro-main-title,
    .process-main-desc,
    .service-main-desc {
        font-size: 1.25rem !important;
        /* Slightly increased from 1.1rem */
        line-height: 1.4;
        word-break: keep-all;
    }

    .intro-main-title br {
        display: block !important;
    }

    /* Line Break Utilities for Mobile */
    .pc-br {
        display: none !important;
    }

    .mo-br {
        display: block !important;
    }

    /* 4. CEO Section Fixes */
    .ceo-section {
        background-color: #121212 !important;
        /* Match desktop dark background */
    }

    .ceo-wrapper {
        flex-direction: column !important;
        width: 100%;
        padding: 0 40px 0 0 !important;
        /* Remove left padding to align but add 40px right padding to preserve original width and line breaks */
    }

    .contact-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .ceo-text {
        padding-top: 30px;
        text-align: left !important;
        width: 100% !important;
    }

    .ceo-header {
        text-align: left;
    }

    .ceo-title {
        color: #ffffff !important;
    }

    .ceo-subtitle {
        color: #a0a0a0 !important;
    }

    .ceo-body p,
    .ceo-body .closing {
        color: #c0c0c0 !important;
    }

    .ceo-body {
        text-align: left !important;
        /* Left align for better spacing */
    }

    .ceo-sign {
        top: 0;
        right: 0;
        margin-top: 20px;
        margin-right: -20px;
        /* Pull the signature slightly to the right */
        justify-content: flex-end;
        flex-direction: row !important;
        /* Name left, Sig right */
        align-items: center;
        gap: 10px;
    }

    .sign-name {
        color: #ffffff !important;
    }

    .ceo-sign img {
        max-width: 70px !important;
        /* Reduced size */
        height: auto;
        transform: translateY(-5px);
        /* Slight lift */
        filter: brightness(0) invert(1) !important;
        /* Make signature white */
    }

    /* 5. Header & Navigation */
    .mobile-menu-btn {
        display: block !important;
    }

    /* Ensure visibility of menu button lines */
    .mobile-menu-btn span {
        background-color: #333 !important;
        /* Always dark */
    }

    .main-nav .gnb-list {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1500;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        display: flex !important;
    }

    .main-nav .gnb-list.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Logo Visibility & Size Fix */
    .logo a {
        width: auto;
    }

    .logo img {
        height: 38px !important;
    }

    /* Force Color Logo Visible (Fix White-on-White) using display */
    #main-header .logo-white {
        display: none !important;
    }

    #main-header .logo-color {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 6. Image Optimization */
    img,
    .contact-map img,
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    .contact-map {
        margin-top: 20px;
        width: 100%;
    }

    .contact-info,
    .contact-form-wrap {
        width: 100%;
    }

    .col-half {
        width: 100%;
        flex: auto;
    }

    .form-group.row {
        flex-direction: column;
        gap: 15px;
    }

    /* 7. Footer & Contact Alignment */
    .footer-top {
        text-align: left !important;
        /* Force left align */
        padding-bottom: 20px;
    }

    .footer-logo {
        height: 38px !important;
        /* Match header logo size */
        width: auto !important;
    }

    /* Contact Info Alignment */
    /* Contact Info Alignment */
    .info-list li {
        display: flex !important;
        align-items: flex-start;
        gap: 8px !important;
        /* Reduced horizontal gap */
        text-align: left;
        font-size: 0.9rem !important;
        /* Reduced font size */
        line-height: 1.35 !important;
        /* Tighter line height */
        margin-bottom: 4px !important;
        /* Tighter vertical spacing */
    }

    .info-list li strong {
        display: inline-block;
        min-width: 65px !important;
        /* Slightly reduced width */
        flex-shrink: 0;
        font-weight: 500 !important;
        /* Reduced font weight */
    }

    /* 8. Card Hover Content Optimization */
    .intro-card .card-hover-content {
        width: calc(100% - 80px) !important;
        left: 40px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        /* Left align instead of center */
    }

    .intro-card .card-hover-content .hover-icon {
        margin-bottom: 15px !important;
    }

    .intro-card .card-hover-content .hover-icon img {
        height: 60px !important;
        /* Increased icon size */
    }

    .intro-card .card-hover-content h3 {
        font-size: 1.55rem !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
    }

    .intro-card .card-hover-content .card-desc {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        word-break: keep-all !important;
        /* Prevent awkward breaks */
        text-align: left !important;
    }

    /* Fix for 2nd Card's Long Word Break */
    .intro-card:nth-child(2) .card-hover-content .card-desc {
        word-break: normal !important;
        /* Allow long compound words to break naturally */
    }

    /* 9. Mobile Horizontal Card Slider */
    .card-grid {
        display: flex;
        flex-direction: row !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 20px !important;
        padding-top: 20px;
        /* Space for top hover lift */
        padding-bottom: 50px;
        /* Increased space for bottom shadow */
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        /* Offset container padding */
        width: calc(100% + 40px);
        /* Full width to edges */
    }

    .card-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar */
    }

    .intro-card {
        flex: 0 0 75vw !important;
        /* Reduced width to show next card */
        width: 75vw !important;
        max-width: 380px;
        scroll-snap-align: center;
        margin-bottom: 0 !important;
    }

    /* Responsive Line Breaks */
    .mo-br {
        display: block !important;
    }

    .pc-br {
        display: none !important;
    }

    /* 10. Company Intro Layout Adjustment */
    .company-intro-section {
        padding: 50px 0 !important;
        /* Default is 95px */
    }

    .intro-header {
        margin-bottom: 30px !important;
        /* Default is 50px, moves cards up */
    }

    /* 11. Core Values Refinement */
    /* 11. Core Values Refinement */
    .parallax-bg {
        background-attachment: fixed !important;
        /* Force parallax on mobile */
        background-position: center !important;
        background-size: cover !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        /* Fix broken frame by resetting size/pos */
    }

    .system-title {
        font-size: 1.25rem !important;
        /* Match intro-main-title */
    }

    .value-desc p {
        text-align: left !important;
        /* Left align for readability */
    }
}

/* Desktop Defaults for Br */
.mo-br {
    display: none;
}

.pc-br {
    display: inline;
}

/* --------------------------------------------------------------------------
   Desktop Refinement: CEO Section (50/50 Layout - Image & Dark Background)
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {

    /* 1. Reset base section for Container Layout */
    .ceo-section {
        background-color: #121212;
        padding: 0;
        position: relative;
        display: block;
        /* Removed flex from section to allow container centering */
    }

    /* 2. Text Area container aligned with global layout grid */
    .ceo-section .container {
        display: flex;
        justify-content: flex-start;
        /* Align with standard left edge */
        max-width: 1200px;
        /* Match header grid */
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
        /* Text sits above background elements */
    }

    .ceo-wrapper {
        background-color: transparent;
        padding: 130px 40px 130px 0;
        /* Padding for the text block. No left padding inside wrapper to maintain grid alignment */
        box-shadow: none;
        border: none;
        border-radius: 0;
        max-width: 600px;
        /* Constrain text width naturally to the left */
        width: 100%;
        margin: 0;
    }

    /* Remove the quote watermark */
    .ceo-wrapper::before {
        display: none;
    }

    /* 3. Right Side: Shifted Absolute Image (using ::after on the section) */
    .ceo-section::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 45vw;
        /* Absolute width anchored to the right, freeing up more left space */
        height: 100%;
        background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('images/19_1687.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
        /* Below the text container */
    }

    /* 4. Text Content Adjustments for Dark Background */
    .ceo-header {
        margin-bottom: 45px;
        position: relative;
        padding-bottom: 0;
        border-bottom: none;
    }

    .ceo-title {
        color: #ffffff;
        /* White title for high contrast */
    }

    /* Do NOT change .ceo-subtitle and .ceo-title font families/sizes, inheritance is handled */

    .ceo-subtitle {
        color: #a0a0a0;
        /* Subtle grey for subtitle */
    }

    .ceo-body p {
        color: #c0c0c0;
        /* Light grey body text */
        font-weight: 400;
        /* Regular weight for easy reading on dark bg */
        font-size: 1.05rem;
        /* Slight size reduction to match formal look */
        line-height: 1.7;
        /* Increased line-height for breathability */
    }

    /* 5. Signature area aligned elegantly */
    .ceo-sign {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 50px;
        padding-top: 0;
        justify-content: flex-start;
        /* Align Left */
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .sign-name {
        color: #ffffff;
        font-weight: 500;
        font-size: 1.1rem;
    }

    .ceo-sign img {
        max-width: 110px;
        /* crisp signature */
        transform: none;
        filter: brightness(0) invert(1);
        /* Make signature white to match dark bg */
        opacity: 0.8;
    }
}