/* =====================================================
   Kitchen Page Styles
   근영방수 공통 CSS 변수 활용
   !important로 공통 CSS 덮어쓰기
   ===================================================== */

/* =====================================================
   Section Override
   ===================================================== */
.section {
    padding: 6rem 2rem !important;
}

.section--gray {
    background-color: var(--light-gray) !important;
}

.section--dark {
    background-color: var(--footer-dark) !important;
    color: var(--white) !important;
}

/* Section Header */
.section__header {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto 4rem !important;
    padding: 0 !important;
}

/* Section Label */
.section__label {
    display: inline-block !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--primary-blue) !important;
    margin-bottom: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    background: rgba(0, 71, 171, 0.08) !important;
    border: 2px solid var(--primary-blue) !important;
    border-radius: 0 !important;
}

.section--gray .section__label {
    background: var(--white) !important;
}

.section--dark .section__label {
    color: var(--pantone-yellow) !important;
    background: rgba(255, 209, 0, 0.1) !important;
    border-color: var(--pantone-yellow) !important;
}

/* Section Title */
.section__title {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    color: var(--text-black) !important;
    margin-bottom: 1rem !important;
}

.section--dark .section__title {
    color: var(--white) !important;
}

/* Section Description */
.section__desc {
    font-size: 1.125rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.section--dark .section__desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* =====================================================
   Buttons Override
   ===================================================== */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1.75rem !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: none !important;
}

.btn .icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

/* Primary Button - Yellow */
.btn--primary,
.btn-primary {
    background: var(--pantone-yellow) !important;
    color: var(--text-black) !important;
    border-color: var(--pantone-yellow) !important;
}

.btn--primary:hover,
.btn-primary:hover {
    background: transparent !important;
    color: var(--pantone-yellow) !important;
}

/* Secondary Button - Blue */
.btn--secondary,
.btn-secondary {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    border-color: var(--primary-blue) !important;
}

.btn--secondary:hover,
.btn-secondary:hover {
    background: var(--primary-blue-dark) !important;
    border-color: var(--primary-blue-dark) !important;
}

/* Outline Button */
.btn--outline,
.btn-outline {
    background: transparent !important;
    color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

.btn--outline:hover,
.btn-outline:hover {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

/* Outline White Button */
.btn--outline-white,
.btn-outline-white {
    background: transparent !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
}

.btn--outline-white:hover,
.btn-outline-white:hover {
    background: var(--white) !important;
    color: var(--text-black) !important;
}

/* Outline Light Button */
.btn--outline-light,
.btn-outline-light {
    background: transparent !important;
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn--outline-light:hover,
.btn-outline-light:hover {
    background: var(--white) !important;
    color: var(--text-black) !important;
    border-color: var(--white) !important;
}

/* Large Button */
.btn--lg,
.btn-lg {
    padding: 1.125rem 2.25rem !important;
    font-size: 1.125rem !important;
}

/* Small Button */
.btn--sm,
.btn-sm {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
}

/* Block Button */
.btn--block,
.btn-block {
    width: 100% !important;
}

/* =====================================================
   Icon
   ===================================================== */
.icon {
    width: 1.25em !important;
    height: 1.25em !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* =====================================================
   Hero Section
   ===================================================== */
.hero {
    position: relative !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: var(--primary-black) !important;
    padding: 0 !important;
}

.hero__background {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}

.hero__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.5 !important;
}

.hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    /* background: linear-gradient(
        135deg,
        rgba(0, 71, 171, 0.85) 0%,
        rgba(0, 0, 0, 0.8) 100%
    ) !important; */
}

.hero__content {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    padding: 8rem 2rem !important;
    color: var(--white) !important;
}

.hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    background: transparent !important;
    border: 2px solid var(--pantone-yellow) !important;
    color: var(--pantone-yellow) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
}

.hero__badge .icon {
    width: 1rem !important;
    height: 1rem !important;
    fill: var(--pantone-yellow) !important;
}

.hero__title {
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    color: var(--white) !important;
}

.hero__title-accent {
    color: var(--pantone-yellow) !important;
}

.hero__desc {
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
    line-height: 1.9 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 3rem !important;
    max-width: 800px !important;
}

.hero__desc strong {
    color: var(--white) !important;
    font-weight: 700 !important;
}

/* Hero Stats */
.hero__stats {
    display: flex !important;
    gap: 3rem !important;
    margin-bottom: 3rem !important;
    flex-wrap: wrap !important;
}

.hero__stat {
    text-align: left !important;
    padding-left: 1.5rem !important;
    border-left: 4px solid var(--pantone-yellow) !important;
}

.hero__stat-number {
    display: block !important;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: var(--white) !important;
    line-height: 1 !important;
    margin-bottom: 0.5rem !important;
}

.hero__stat-label {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.5 !important;
}

/* Hero CTA */
.hero__cta {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

/* Hero Scroll Button */
.hero__scroll {
    position: absolute !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: color var(--transition-normal) !important;
    padding: 0 !important;
}

.hero__scroll:hover {
    color: var(--pantone-yellow) !important;
}

.hero__scroll .icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    fill: currentColor !important;
    animation: heroScrollBounce 2s ease infinite !important;
}

@keyframes heroScrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* =====================================================
   Causes Section (원인분석)
   ===================================================== */
.causes {
    background: var(--white) !important;
}

.causes__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

/* Cause Card */
.cause-card {
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: all var(--transition-normal) !important;
}

.cause-card:hover {
    border-color: var(--primary-blue) !important;
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-xl) !important;
}

.cause-card__image {
    position: relative !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: var(--light-gray) !important;
}

.cause-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--transition-slow) !important;
}

.cause-card:hover .cause-card__image img {
    transform: scale(1.05) !important;
}

.cause-card__badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0 !important;
}

.cause-card__badge--danger {
    background: var(--error) !important;
    color: var(--white) !important;
}

.cause-card__badge--warning {
    background: var(--pantone-yellow) !important;
    color: var(--text-black) !important;
}

.cause-card__badge--dark {
    background: var(--text-black) !important;
    color: var(--white) !important;
}

.cause-card__content {
    padding: 1.5rem !important;
}

.cause-card__number {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    color: var(--primary-blue) !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.5rem !important;
}

.cause-card__content h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.75rem !important;
}

.cause-card__content > p {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
}

.cause-card__result {
    padding: 0.875rem 1rem !important;
    background: var(--light-gray) !important;
    border-left: 4px solid var(--error) !important;
    font-size: 0.875rem !important;
    color: var(--text-black) !important;
}

.cause-card__result strong {
    color: var(--error) !important;
    font-weight: 700 !important;
}

/* Warning Box */
.causes__warning {
    display: flex !important;
    gap: 1.5rem !important;
    padding: 2rem !important;
    background: #FEF2F2 !important;
    border: 2px solid var(--error) !important;
    border-radius: 0 !important;
}

.causes__warning-icon {
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--error) !important;
}

.causes__warning-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: var(--white) !important;
}

.causes__warning-content {
    flex: 1 !important;
}

.causes__warning-content strong {
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: var(--error) !important;
    margin-bottom: 0.5rem !important;
}

.causes__warning-content p {
    font-size: 1rem !important;
    color: var(--text-black) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}
/* =====================================================
   Solution Section - Method Cards & Compare
   ===================================================== */

/* Methods Grid */
.solution__methods {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    margin-bottom: 4rem !important;
}

/* Method Card */
.method-card {
    position: relative !important;
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: all var(--transition-normal) !important;
}

.method-card:hover {
    border-color: var(--primary-blue) !important;
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-xl) !important;
}

.method-card--featured {
    border-color: var(--primary-blue) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Method Card Badge */
.method-card__badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    padding: 0.625rem 1.25rem !important;
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.method-card__badge--secondary {
    background: var(--dark-gray) !important;
}

/* Method Card Header */
.method-card__header {
    padding: 2rem 2rem 1.5rem !important;
    border-bottom: 1px solid var(--medium-gray) !important;
    background: var(--light-gray) !important;
}

.method-card--featured .method-card__header {
    background: rgba(0, 71, 171, 0.05) !important;
}

.method-card__label {
    display: inline-block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    color: var(--primary-blue) !important;
    margin-bottom: 0.5rem !important;
}

.method-card__title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.375rem !important;
}

.method-card__subtitle {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    margin: 0 !important;
}

/* Method Card Content */
.method-card__content {
    padding: 2rem !important;
}

.method-card__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
}

.method-card__features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 0.875rem 0 !important;
    border-bottom: 1px solid var(--light-gray) !important;
}

.method-card__features li:last-child {
    border-bottom: none !important;
}

.method-card__features li .icon {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    fill: var(--primary-green) !important;
    margin-top: 2px !important;
}

.method-card__features li div {
    flex: 1 !important;
}

.method-card__features li strong {
    display: block !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.25rem !important;
}

.method-card__features li span {
    font-size: 0.875rem !important;
    color: var(--dark-gray) !important;
}

/* Method Card Recommend */
.method-card__recommend {
    padding: 1.25rem !important;
    background: var(--light-gray) !important;
    border-left: 4px solid var(--pantone-yellow) !important;
}

.method-card--featured .method-card__recommend {
    border-left-color: var(--primary-blue) !important;
}

.method-card__recommend strong {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.375rem !important;
}

.method-card__recommend p {
    font-size: 0.875rem !important;
    color: var(--text-black) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Solution Compare Table */
.solution__compare {
    margin-bottom: 3rem !important;
}

.solution__compare-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.solution__table-wrap {
    overflow-x: auto !important;
}

.solution__table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
}

.solution__table th,
.solution__table td {
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    border-bottom: 1px solid var(--medium-gray) !important;
    font-size: 0.9375rem !important;
}

.solution__table th {
    background: var(--text-black) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
}

.solution__table th.solution__table-highlight {
    background: var(--primary-blue) !important;
}

.solution__table td:first-child {
    background: var(--light-gray) !important;
    font-weight: 600 !important;
    text-align: left !important;
    color: var(--text-black) !important;
}

.solution__table td.solution__table-highlight {
    background: rgba(0, 71, 171, 0.05) !important;
}

.solution__table td strong {
    color: var(--primary-blue) !important;
}

.solution__table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Solution Note */
.solution__note {
    display: flex !important;
    gap: 1.5rem !important;
    padding: 2rem !important;
    background: var(--white) !important;
    border: 2px solid var(--primary-blue) !important;
    border-left-width: 6px !important;
    margin-bottom: 4rem !important;
}

.solution__note-icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--primary-blue) !important;
    border-radius: 50% !important;
}

.solution__note-icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--white) !important;
}

.solution__note-content {
    flex: 1 !important;
}

.solution__note-content strong {
    display: block !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.5rem !important;
}

.solution__note-content p {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* Solution Diff */
.solution__diff {
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    padding: 3rem !important;
}

.solution__diff-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--text-black) !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
}

.solution__diff-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
}

/* Diff Item */
.diff-item {
    display: flex !important;
    gap: 1rem !important;
}

.diff-item__icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--primary-blue) !important;
}

.diff-item__icon svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--white) !important;
}

.diff-item__content {
    flex: 1 !important;
}

.diff-item__content h4 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.375rem !important;
}

.diff-item__content p {
    font-size: 0.875rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .solution__methods {
        grid-template-columns: 1fr !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .solution__diff-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .method-card__header {
        padding: 1.5rem !important;
    }
    
    .method-card__title {
        font-size: 1.25rem !important;
    }
    
    .method-card__content {
        padding: 1.5rem !important;
    }
    
    .solution__note {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }
    
    .solution__note-icon {
        margin: 0 auto !important;
    }
    
    .solution__diff {
        padding: 2rem 1.5rem !important;
    }
    
    .solution__diff-title {
        font-size: 1.25rem !important;
    }
    
    .diff-item {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .diff-item__icon {
        margin: 0 auto 0.75rem !important;
    }
    
    .solution__table th,
    .solution__table td {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}
/* =====================================================
   Process Section
   ===================================================== */

/* Keypoint Box */
.process__keypoint {
    display: flex !important;
    gap: 1.5rem !important;
    padding: 2rem !important;
    background: #FEF3C7 !important;
    border: 2px solid #F59E0B !important;
    border-left-width: 6px !important;
    margin-bottom: 3rem !important;
}

.process__keypoint-icon {
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F59E0B !important;
    border-radius: 50% !important;
}

.process__keypoint-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: var(--white) !important;
}

.process__keypoint-content {
    flex: 1 !important;
}

.process__keypoint-content strong {
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #92400E !important;
    margin-bottom: 0.5rem !important;
}

.process__keypoint-content p {
    font-size: 1rem !important;
    color: #78350F !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.process__keypoint-content p strong {
    display: inline !important;
    font-size: inherit !important;
    color: #92400E !important;
}

/* Diagram */
.process__diagram {
    text-align: center !important;
    margin-bottom: 4rem !important;
    padding: 2rem !important;
    background: var(--light-gray) !important;
    border: 2px solid var(--medium-gray) !important;
        display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.process__diagram img {
    max-width: 400px !important;
    height: auto !important;
    margin-bottom: 1rem !important;
}

.process__diagram-caption {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.process__diagram-caption strong {
    color: var(--primary-blue) !important;
}

/* Process Grid */
.process__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
}

/* Process Card */
.process-card {
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: all var(--transition-normal) !important;
}

.process-card:hover {
    border-color: var(--primary-blue) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.process-card--highlight {
    border-color: var(--primary-blue) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Process Card Image */
.process-card__image {
    position: relative !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: var(--light-gray) !important;
}

.process-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--transition-slow) !important;
}

.process-card:hover .process-card__image img {
    transform: scale(1.05) !important;
}

.process-card__number {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
    border: 3px solid var(--primary-blue) !important;
    font-size: 1.125rem !important;
    font-weight: 900 !important;
    color: var(--primary-blue) !important;
}

.process-card--highlight .process-card__number {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

.process-card__badge {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    padding: 0.375rem 0.75rem !important;
    background: var(--error) !important;
    color: var(--white) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Process Card Content */
.process-card__content {
    padding: 1.5rem !important;
}

.process-card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.process-card__header h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin: 0 !important;
}

.process-card__tag {
    flex-shrink: 0 !important;
    padding: 0.25rem 0.625rem !important;
    background: var(--light-gray) !important;
    color: var(--dark-gray) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.process-card__tag--primary {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

.process-card__tag--warning {
    background: #F59E0B !important;
    color: var(--white) !important;
}

.process-card__tag--success {
    background: var(--primary-green) !important;
    color: var(--white) !important;
}

.process-card__content > p {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.process-card__content > p strong {
    color: var(--text-black) !important;
}

/* Process Card Options (1차 방수용) */
.process-card__options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--medium-gray) !important;
}

.process-card__option {
    padding: 0.75rem !important;
    background: var(--light-gray) !important;
    text-align: center !important;
}

.process-card__option strong {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    margin-bottom: 0.25rem !important;
}

.process-card__option span {
    font-size: 0.75rem !important;
    color: var(--dark-gray) !important;
}

/* Process Card Knowhow (2차 방수용) */
.process-card__knowhow {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
    margin-top: 1rem !important;
    padding: 0.875rem !important;
    background: rgba(0, 71, 171, 0.05) !important;
    border-left: 3px solid var(--primary-blue) !important;
}

.process-card__knowhow .icon {
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    fill: var(--primary-blue) !important;
    margin-top: 2px !important;
}

.process-card__knowhow span {
    font-size: 0.8125rem !important;
    color: var(--text-black) !important;
    line-height: 1.5 !important;
}

.process-card__knowhow strong {
    color: var(--primary-blue) !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .process__grid {
        grid-template-columns: 1fr !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .process__keypoint {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }
    
    .process__keypoint-icon {
        margin: 0 auto 1rem !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .process__keypoint-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .process__keypoint-content strong {
        font-size: 1.125rem !important;
    }
    
    .process__diagram {
        padding: 1.5rem !important;
    }
    
    .process-card__content {
        padding: 1.25rem !important;
    }
    
    .process-card__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .process-card__options {
        grid-template-columns: 1fr !important;
    }
}/* =====================================================
   Process Section - 타임라인 디자인
   ===================================================== */

/* Keypoint Box */
.process__keypoint {
    display: flex !important;
    gap: 1.5rem !important;
    padding: 2rem !important;
    background: #FEF3C7 !important;
    border: 2px solid #F59E0B !important;
    border-left-width: 6px !important;
    margin-bottom: 3rem !important;
}

.process__keypoint-icon {
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F59E0B !important;
    border-radius: 50% !important;
}

.process__keypoint-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: var(--white) !important;
}

.process__keypoint-content {
    flex: 1 !important;
}

.process__keypoint-content > strong {
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: #92400E !important;
    margin-bottom: 0.5rem !important;
}

.process__keypoint-content p {
    font-size: 1rem !important;
    color: #78350F !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.process__keypoint-content p strong {
    color: #92400E !important;
}

/* Diagram */
.process__diagram {
    text-align: center !important;
    margin-bottom: 4rem !important;
    padding: 2.5rem !important;
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
}

.process__diagram img {
    max-width: 400px !important;
    height: auto !important;
    margin-bottom: 1.5rem !important;
}

.process__diagram-caption {
    font-size: 1rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.process__diagram-caption strong {
    color: var(--primary-blue) !important;
}

/* Timeline */
.process__timeline {
    position: relative !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.process__timeline::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 32px !important;
    width: 4px !important;
    height: 100% !important;
    background: var(--medium-gray) !important;
}

/* Process Step */
.process__step {
    position: relative !important;
    display: flex !important;
    gap: 2rem !important;
    padding-bottom: 2.5rem !important;
}

.process__step:last-child {
    padding-bottom: 0 !important;
}

.process__step--highlight {
    background: rgba(0, 71, 171, 0.03) !important;
    margin: 0 -1.5rem 2.5rem -1.5rem !important;
    padding: 1.5rem !important;
    border: 2px solid var(--primary-blue) !important;
    border-left-width: 6px !important;
}

.process__step--highlight:last-child {
    margin-bottom: 0 !important;
}

/* Step Marker */
.process__step-marker {
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 1 !important;
}

.process__step-number {
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--white) !important;
    border: 4px solid var(--medium-gray) !important;
    font-size: 1.125rem !important;
    font-weight: 900 !important;
    color: var(--dark-gray) !important;
    transition: all var(--transition-normal) !important;
}

.process__step:hover .process__step-number {
    border-color: var(--primary-blue) !important;
    color: var(--primary-blue) !important;
}

.process__step--highlight .process__step-number {
    border-color: var(--primary-blue) !important;
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

.process__step--final .process__step-number {
    border-color: var(--primary-green) !important;
    background: var(--primary-green) !important;
    color: var(--white) !important;
}

.process__step-badge {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    background: #F59E0B !important;
    color: var(--white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.process__step-badge--primary {
    background: var(--primary-blue) !important;
}

.process__step-badge--success {
    background: var(--primary-green) !important;
}

/* Step Content */
.process__step-content {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 1.5rem !important;
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    overflow: hidden !important;
    transition: all var(--transition-normal) !important;
    max-height:200px;
}

.process__step:hover .process__step-content {
    border-color: var(--primary-blue) !important;
    box-shadow: var(--shadow-lg) !important;
}

.process__step--highlight .process__step-content {
    border: none !important;
    box-shadow: none !important;
}

/* Step Image */
.process__step-image {
    height: 100% !important;
    min-height: 200px !important;
    overflow: hidden !important;
    background: var(--light-gray) !important;
}

.process__step-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--transition-slow) !important;
}

.process__step:hover .process__step-image img {
    transform: scale(1.05) !important;
}

/* Step Info */
.process__step-info {
    padding: 1.5rem 1.5rem 1.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.process__step-header {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.process__step-header h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin: 0 !important;
}

.process__step-tag {
    padding: 0.25rem 0.625rem !important;
    background: var(--light-gray) !important;
    color: var(--dark-gray) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.process__step-tag--primary {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
}

.process__step-tag--warning {
    background: #F59E0B !important;
    color: var(--white) !important;
}

.process__step-tag--success {
    background: var(--primary-green) !important;
    color: var(--white) !important;
}

.process__step-info > p {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.process__step-info > p strong {
    color: var(--text-black) !important;
}

/* Step Options (1차 방수용) */
.process__step-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
}

.process__step-option {
    padding: 0.75rem !important;
    background: var(--light-gray) !important;
    text-align: center !important;
}

.process__step-option strong {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    margin-bottom: 0.25rem !important;
}

.process__step-option span {
    font-size: 0.75rem !important;
    color: var(--dark-gray) !important;
}

/* Step Knowhow (2차 방수용) */
.process__step-knowhow {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
    margin-top: 1rem !important;
    padding: 0.875rem !important;
    background: rgba(0, 71, 171, 0.05) !important;
    border-left: 3px solid var(--primary-blue) !important;
}

.process__step-knowhow .icon {
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    fill: var(--primary-blue) !important;
    margin-top: 2px !important;
}

.process__step-knowhow span {
    font-size: 0.8125rem !important;
    color: var(--text-black) !important;
    line-height: 1.5 !important;
}

.process__step-knowhow strong {
    color: var(--primary-blue) !important;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .process__step-content {
        grid-template-columns: 1fr !important;
    }
    
    .process__step-image {
        min-height: 180px !important;
    }
    
    .process__step-info {
        padding: 1.5rem !important;
    }
    
    .process__step--highlight {
        margin: 0 -1rem 2rem -1rem !important;
        padding: 1rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .process__keypoint {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }
    
    .process__keypoint-icon {
        margin: 0 auto 1rem !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .process__keypoint-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .process__keypoint-content > strong {
        font-size: 1.125rem !important;
    }
    
    .process__diagram {
        padding: 1.5rem !important;
    }
    
    .process__timeline::before {
        display: none !important;
    }
    
    .process__step {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .process__step-marker {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
    }
    
    .process__step-number {
        width: 48px !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-width: 3px !important;
    }
    
    .process__step-content {
        grid-template-columns: 1fr !important;
    }
    
    .process__step-image {
        min-height: 160px !important;
    }
    
    .process__step-info {
        padding: 1.25rem !important;
    }
    
    .process__step-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .process__step-header h3 {
        font-size: 1.125rem !important;
    }
    
    .process__step-options {
        grid-template-columns: 1fr !important;
    }
    
    .process__step--highlight {
        margin: 0 0 1.5rem 0 !important;
        padding: 1rem !important;
    }
}


/* =====================================================
   Process Timeline - Mobile Refactoring
   PC 스타일 유지, 모바일만 최적화
   ===================================================== */

/* ========================================
   Tablet (1024px 이하)
   ======================================== */
@media (max-width: 1024px) {
    .process__timeline {
        max-width: 100% !important;
    }
    
    .process__timeline::before {
        left: 28px !important;
    }
    
    .process__step {
        gap: 1.5rem !important;
    }
    
    .process__step-number {
        width: 56px !important;
        height: 56px !important;
    }
    
    .process__step-content {
        grid-template-columns: 240px 1fr !important;
        max-height: none !important;
    }
    
    .process__step-image {
        min-height: 180px !important;
    }
    
    .process__step--highlight {
        margin: 0 -1rem 2rem -1rem !important;
        padding: 1rem !important;
    }
}

/* ========================================
   Mobile (768px 이하) - 주요 리팩토링
   ======================================== */
@media (max-width: 768px) {
    /* === Process Section 기본 === */
    .process.section {
        padding: 3.5rem 1.25rem !important;
    }
    
    .process .section__header {
        margin-bottom: 2.5rem !important;
    }
    
    .process .section__title {
        font-size: 1.5rem !important;
        line-height: 1.35 !important;
    }
    
    .process .section__desc {
        font-size: 0.95rem !important;
    }
    
    /* === Keypoint Box === */
    .process__keypoint {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.25rem !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .process__keypoint-icon {
        margin: 0 auto !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .process__keypoint-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .process__keypoint-content > strong {
        font-size: 1.1rem !important;
    }
    
    .process__keypoint-content p {
        font-size: 0.9rem !important;
    }
    
    /* === Diagram === */
    .process__diagram {
        padding: 1.25rem !important;
        margin-bottom: 2.5rem !important;
    }
    
    .process__diagram img {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .process__diagram-caption {
        font-size: 0.875rem !important;
    }
    
    /* === Timeline Container === */
    .process__timeline {
        position: relative !important;
        padding-left: 0 !important;
    }
    
    /* 타임라인 세로선 - 모바일에서 좌측 고정 */
    .process__timeline::before {
        display: block !important;
        left: 20px !important;
        width: 3px !important;
        background: linear-gradient(
            180deg,
            var(--primary-blue) 0%,
            var(--medium-gray) 50%,
            var(--primary-green) 100%
        ) !important;
    }
    
    /* === Process Step === */
    .process__step {
        flex-direction: column !important;
        gap: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 1.5rem !important;
        padding-left: 52px !important;
        position: relative !important;
    }
    
    .process__step:last-child {
        margin-bottom: 0 !important;
    }
    
    /* === Step Marker === */
    .process__step-marker {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.375rem !important;
        width: 40px !important;
    }
    
    .process__step-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.875rem !important;
        border-width: 3px !important;
        background: var(--white) !important;
    }
    
    .process__step--highlight .process__step-number {
        background: var(--primary-blue) !important;
    }
    
    .process__step--final .process__step-number {
        background: var(--primary-green) !important;
    }
    
    .process__step-badge {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.5rem !important;
        white-space: nowrap !important;
    }
    
    /* === Step Content Card === */
    .process__step-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    
    /* === Step Image === */
    .process__step-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        order: 1 !important;
    }
    
    .process__step-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* === Step Info === */
    .process__step-info {
        padding: 1.25rem !important;
        order: 2 !important;
    }
    
    .process__step-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    .process__step-header h3 {
        font-size: 1.1rem !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .process__step-tag {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.625rem !important;
        flex-shrink: 0 !important;
    }
    
    .process__step-info > p {
        font-size: 0.875rem !important;
        line-height: 1.7 !important;
    }
    
    /* === Step Options (1차 방수용) === */
    .process__step-options {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 0.875rem !important;
    }
    
    .process__step-option {
        padding: 0.625rem !important;
        text-align: center !important;
    }
    
    .process__step-option strong {
        font-size: 0.8rem !important;
        margin-bottom: 0.125rem !important;
    }
    
    .process__step-option span {
        font-size: 0.7rem !important;
    }
    
    /* === Step Knowhow (2차 방수용) === */
    .process__step-knowhow {
        margin-top: 0.75rem !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    .process__step-knowhow .icon {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
    
    .process__step-knowhow span {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
    }
    
    /* === Highlight Step 특별 처리 === */
    .process__step--highlight {
        margin: 0 0 1.5rem 0 !important;
        padding: 0 !important;
        padding-left: 52px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .process__step--highlight .process__step-content {
        border: 2px solid var(--primary-blue) !important;
        border-left-width: 4px !important;
        background: rgba(0, 71, 171, 0.02) !important;
    }
    
    /* === Final Step 특별 처리 === */
    .process__step--final .process__step-content {
        border-color: var(--primary-green) !important;
    }
}

/* ========================================
   Small Mobile (480px 이하)
   ======================================== */
@media (max-width: 480px) {
    .process.section {
        padding: 3rem 1rem !important;
    }
    
    .process .section__title {
        font-size: 1.35rem !important;
    }
    
    .process__keypoint {
        padding: 1rem !important;
    }
    
    .process__keypoint-content > strong {
        font-size: 1rem !important;
    }
    
    .process__keypoint-content p {
        font-size: 0.85rem !important;
    }
    
    .process__diagram {
        padding: 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    .process__diagram-caption {
        font-size: 0.8rem !important;
    }
    
    /* Timeline */
    .process__timeline::before {
        left: 16px !important;
        width: 2px !important;
    }
    
    .process__step {
        padding-left: 44px !important;
        margin-bottom: 1.25rem !important;
    }
    
    .process__step-marker {
        width: 32px !important;
    }
    
    .process__step-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
        border-width: 2px !important;
    }
    
    .process__step-badge {
        padding: 0.15rem 0.3rem !important;
        font-size: 0.45rem !important;
    }
    
    /* Content */
    .process__step-image {
        aspect-ratio: 4 / 3 !important;
    }
    
    .process__step-info {
        padding: 1rem !important;
    }
    
    .process__step-header h3 {
        font-size: 1rem !important;
    }
    
    .process__step-tag {
        font-size: 0.55rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    .process__step-info > p {
        font-size: 0.8rem !important;
    }
    
    /* Options */
    .process__step-options {
        grid-template-columns: 1fr !important;
        gap: 0.375rem !important;
    }
    
    .process__step-option {
        padding: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        text-align: left !important;
    }
    
    .process__step-option strong {
        display: inline !important;
        margin-bottom: 0 !important;
    }
    
    .process__step-option span {
        display: inline !important;
    }
    
    /* Knowhow */
    .process__step-knowhow {
        padding: 0.625rem !important;
    }
    
    .process__step-knowhow span {
        font-size: 0.7rem !important;
    }
    
    /* Highlight */
    .process__step--highlight {
        padding-left: 44px !important;
    }
}

/* ========================================
   Landscape Mode (가로 모드)
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    .process.section {
        padding: 2.5rem 1.5rem !important;
    }
    
    .process__keypoint {
        flex-direction: row !important;
        text-align: left !important;
    }
    
    .process__keypoint-icon {
        margin: 0 !important;
    }
    
    .process__diagram {
        margin-bottom: 2rem !important;
    }
    
    .process__diagram img {
        max-width: 300px !important;
    }
    
    .process__step {
        margin-bottom: 1rem !important;
    }
    
    .process__step-content {
        flex-direction: row !important;
    }
    
    .process__step-image {
        width: 40% !important;
        flex-shrink: 0 !important;
        aspect-ratio: 4 / 3 !important;
        order: 1 !important;
    }
    
    .process__step-info {
        width: 60% !important;
        order: 2 !important;
        padding: 1rem !important;
    }
    
    .process__step-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   Touch Interaction
   ======================================== */
@media (max-width: 768px) {
    .process__step-content {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    .process__step-content:active {
        transform: scale(0.99) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* 호버 효과 비활성화 */
    .process__step:hover .process__step-content {
        transform: none !important;
        box-shadow: none !important;
        border-color: var(--medium-gray) !important;
    }
    
    .process__step--highlight:hover .process__step-content,
    .process__step--highlight .process__step-content {
        border-color: var(--primary-blue) !important;
    }
    
    .process__step:hover .process__step-image img {
        transform: none !important;
    }
}

/* ========================================
   Safe Area (노치 대응)
   ======================================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .process.section {
            padding-left: max(1.25rem, env(safe-area-inset-left)) !important;
            padding-right: max(1.25rem, env(safe-area-inset-right)) !important;
        }
    }
}

/* ========================================
   Reduced Motion (접근성)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .process__step-content,
    .process__step-image img {
        transition: none !important;
    }
    
    .process__step-content:active {
        transform: none !important;
    }
}

/* =====================================================
   Cases Section (시공 사례)
   ===================================================== */
.cases {
    background: var(--light-gray) !important;
}

.cases__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

/* Case Card */
.case-card {
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: all var(--transition-normal) !important;
}

.case-card:hover {
    border-color: var(--primary-blue) !important;
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-xl) !important;
}

.case-card--featured {
    grid-column: span 2 !important;
}

.case-card__link-wrap {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.case-card__images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
}

/* 한 장짜리 이미지 */
.case-card__images--single {
    grid-template-columns: 1fr !important;
}

.case-card__before,
.case-card__after {
    position: relative !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: var(--light-gray) !important;
}

.case-card__before img,
.case-card__after img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform var(--transition-slow) !important;
}

.case-card:hover .case-card__before img,
.case-card:hover .case-card__after img {
    transform: scale(1.05) !important;
}

.case-card__label {
    position: absolute !important;
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    padding: 0.25rem 0.625rem !important;
    background: var(--text-black) !important;
    color: var(--white) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 한 장짜리 이미지 영역 */
.case-card__single {
	height: 157px;
    position: relative !important;
        
    /* aspect-ratio: 16 / 9 !important; */
    overflow: hidden !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.case-card__single img {
    max-width: 100% !important;
    /* max-height: 100% !important; */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform var(--transition-slow) !important;
}

.case-card:hover .case-card__single img {
    transform: scale(1.05) !important;
}

.case-card__single .case-card__label {
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    background: var(--primary-blue) !important;
}

.case-card__content {
    padding: 1.5rem !important;
}

.case-card__tag {
    display: inline-block !important;
    padding: 0.375rem 0.75rem !important;
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

.case-card__tag--warning {
    background: var(--pantone-yellow) !important;
    color: var(--text-black) !important;
}

.case-card__content h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.25rem !important;
}

.case-card__location {
    font-size: 0.875rem !important;
    color: var(--dark-gray) !important;
    margin-bottom: 1rem !important;
}

.case-card__challenge,
.case-card__solution {
    font-size: 0.875rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.7 !important;
    margin-bottom: 0.5rem !important;
}

.case-card__challenge:last-child,
.case-card__solution:last-child {
    margin-bottom: 0 !important;
}

.case-card__challenge strong,
.case-card__solution strong {
    color: var(--text-black) !important;
    font-weight: 700 !important;
}

.case-card__more {
    display: inline-block !important;
    margin-top: 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    transition: gap 0.3s ease !important;
}

.case-card:hover .case-card__more {
    text-decoration: underline !important;
}

/* Cases CTA */
.cases__cta {
    text-align: center !important;
}

/* =====================================================
   Trust Section (신뢰확장)
   ===================================================== */
.trust {
    background: var(--white) !important;
}

.trust__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
}

/* Trust Item */
.trust__item {
    text-align: center !important;
    padding: 2rem 1.5rem !important;
    background: var(--light-gray) !important;
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: all var(--transition-normal) !important;
}

.trust__item:hover {
    background: var(--white) !important;
    border-color: var(--primary-blue) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.trust__item-icon {
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1rem !important;
    background: var(--primary-blue) !important;
}

.trust__item-icon svg {
    width: 32px !important;
    height: 32px !important;
    fill: var(--white) !important;
}

.trust__item-content h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    margin-bottom: 0.5rem !important;
}

.trust__item-content p {
    font-size: 0.875rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Urea Box */
.trust__urea {
    background: var(--primary-blue) !important;
    padding: 3rem !important;
    text-align: center !important;
    color: var(--white) !important;
}

.trust__urea h3 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    margin-bottom: 1rem !important;
    color: var(--white) !important;
}

.trust__urea p {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    opacity: 0.9 !important;
    max-width: 600px !important;
    margin: 0 auto 1.5rem !important;
}

.trust__urea strong {
    color: var(--pantone-yellow) !important;
}

.trust__urea-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1.5rem !important;
    background: var(--pantone-yellow) !important;
    color: var(--text-black) !important;
    font-weight: 700 !important;
    border: 2px solid var(--pantone-yellow) !important;
    transition: all var(--transition-normal) !important;
}

.trust__urea-link:hover {
    background: transparent !important;
    color: var(--pantone-yellow) !important;
}

.trust__urea-link .icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    fill: currentColor !important;
}

/* =====================================================
   FAQ Section
   ===================================================== */
.faq {
    background: var(--light-gray) !important;
}

.faq__list {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* FAQ Item */
.faq__item {
    background: var(--white) !important;
    border: 2px solid var(--medium-gray) !important;
    border-radius: 0 !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
    transition: border-color var(--transition-normal) !important;
}

.faq__item:hover,
.faq__item[open] {
    border-color: var(--primary-blue) !important;
}

.faq__question {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.25rem 1.5rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    text-align: left !important;
    list-style: none !important;
    font-family: inherit !important;
}

.faq__question::-webkit-details-marker {
    display: none !important;
}

.faq__question span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-black) !important;
    flex: 1 !important;
    padding-right: 1rem !important;
}

.faq__question .icon {
    flex-shrink: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    fill: var(--dark-gray) !important;
    transition: transform var(--transition-normal), fill var(--transition-normal) !important;
}

.faq__item[open] .faq__question .icon {
    transform: rotate(180deg) !important;
    fill: var(--primary-blue) !important;
}

.faq__answer {
    padding: 0 1.5rem 1.5rem !important;
    border-top: 1px solid var(--medium-gray) !important;
    margin-top: -1px !important;
    padding-top: 1.25rem !important;
}

.faq__answer p {
    font-size: 0.9375rem !important;
    color: var(--dark-gray) !important;
    line-height: 1.8 !important;
    margin-bottom: 0.75rem !important;
}

.faq__answer p:last-child {
    margin-bottom: 0 !important;
}

.faq__answer strong {
    color: var(--text-black) !important;
    font-weight: 700 !important;
}

/* =====================================================
   CTA Section
   ===================================================== */
.cta-section {
    background: var(--footer-dark) !important;
    text-align: center !important;
    padding: 5rem 2rem !important;
}

.cta-section__content {
    max-width: 600px !important;
    margin: 0 auto !important;
}

.cta-section__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 900 !important;
    color: var(--white) !important;
    margin-bottom: 1rem !important;
}

.cta-section__desc {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.8 !important;
    margin-bottom: 2.5rem !important;
}

.cta-section__buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.5rem !important;
}

.cta-section__note {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 !important;
}

/* =====================================================
   Responsive - Tablet (1024px)
   ===================================================== */
@media (max-width: 1024px) {
    .section {
        padding: 5rem 2rem !important;
    }
    
    .causes__grid {
        grid-template-columns: 1fr !important;
    }
    
    .solution__layers-grid {
        grid-template-columns: 1fr !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .solution__diff-grid {
        grid-template-columns: 1fr !important;
    }
    
    .process__step-content {
        grid-template-columns: 1fr !important;
    }
    
    .process__step-image {
        aspect-ratio: 16 / 9 !important;
    }
    
    .cases__grid {
        grid-template-columns: 1fr !important;
    }
    
    .case-card--featured {
        grid-column: span 1 !important;
    }
    
    .trust__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
#hero > div.hero__content > div > div.hero__cta > a.btn.btn--outline.btn--lg{
	background-color:white !important;
}
/* =====================================================
   Responsive - Mobile (768px)
   ===================================================== */
@media (max-width: 768px) {
    .section {
        padding: 4rem 1.5rem !important;
    }
    
    .section__header {
        margin-bottom: 3rem !important;
    }
    
    .section__title {
        font-size: 1.75rem !important;
    }
    
    .section__label {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    /* Hero Mobile */
    .hero__content {
        padding: 6rem 1.5rem !important;
    }
    
    .hero__stats {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    .hero__stat {
        padding-left: 1rem !important;
        border-left-width: 3px !important;
    }
    
    .hero__stat-number {
        font-size: 2rem !important;
    }
    
    .hero__cta {
        flex-direction: column !important;
    }
    
    .hero__cta .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .hero__scroll {
        display: none !important;
    }
    
    /* Causes Mobile */
    .causes__warning {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
    }
    
    .causes__warning-icon {
        margin: 0 auto 1rem !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .causes__warning-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    .causes__warning-content strong {
        font-size: 1.125rem !important;
    }
    
    /* Process Mobile */
    .process__timeline::before {
        display: none !important;
    }
    
    .process__step {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .process__step-marker {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
    }
    
    .process__step-number {
        width: 48px !important;
        height: 48px !important;
        font-size: 1rem !important;
        border-width: 3px !important;
    }
    
    .process__step-content {
        grid-template-columns: 1fr !important;
    }
    
    .process__step-image {
        aspect-ratio: 16 / 9 !important;
    }
    
    .process__step-info {
        padding: 1.25rem !important;
    }
    
    /* Trust Mobile */
    .trust__grid {
        grid-template-columns: 1fr !important;
    }
    
    .trust__item {
        padding: 1.5rem !important;
    }
    
    .trust__urea {
        padding: 2rem 1.5rem !important;
    }
    
    .trust__urea h3 {
        font-size: 1.25rem !important;
    }
    
    /* FAQ Mobile */
    .faq__question {
        padding: 1rem 1.25rem !important;
    }
    
    .faq__answer {
        padding: 0 1.25rem 1.25rem !important;
        padding-top: 1rem !important;
    }
    
    /* CTA Mobile */
    .cta-section {
        padding: 4rem 1.5rem !important;
    }
    
    .cta-section__buttons {
        flex-direction: column !important;
    }
    
    .cta-section__buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* =====================================================
   Responsive - Small Mobile (480px)
   ===================================================== */
@media (max-width: 480px) {
    .section {
        padding: 3rem 1rem !important;
    }
    
    .section__title {
        font-size: 1.5rem !important;
    }
    
    .hero__content {
        padding: 5rem 1rem !important;
    }
    
    .hero__title {
        font-size: 2rem !important;
    }
    
    .hero__desc {
        font-size: 1rem !important;
    }
    
    .hero__badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .cause-card__content,
    .layer-card__content,
    .case-card__content {
        padding: 1.25rem !important;
    }
    
    .cause-card__content h3,
    .layer-card__content h4,
    .case-card__content h3 {
        font-size: 1.125rem !important;
    }
    
    .solution__diff {
        padding: 2rem 1.25rem !important;
    }
    
    .solution__diff h3 {
        font-size: 1.25rem !important;
    }
    
    .diff-item {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .diff-item__icon {
        margin: 0 auto 0.75rem !important;
    }
    
    .process__step-info h3 {
        font-size: 1.125rem !important;
    }
    
    .trust__urea-link {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .cta-section__title {
        font-size: 1.5rem !important;
    }
    
    .cta-section__desc {
        font-size: 1rem !important;
    }
}

/* =====================================================
   Animation
   ===================================================== */
.animate-on-scroll {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.animate-on-scroll.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger Animation */
.causes__grid .cause-card.animate-on-scroll:nth-child(1) { transition-delay: 0s !important; }
.causes__grid .cause-card.animate-on-scroll:nth-child(2) { transition-delay: 0.1s !important; }
.causes__grid .cause-card.animate-on-scroll:nth-child(3) { transition-delay: 0.2s !important; }
.causes__grid .cause-card.animate-on-scroll:nth-child(4) { transition-delay: 0.3s !important; }

.solution__layers-grid .layer-card.animate-on-scroll:nth-child(1) { transition-delay: 0s !important; }
.solution__layers-grid .layer-card.animate-on-scroll:nth-child(2) { transition-delay: 0.15s !important; }
.solution__layers-grid .layer-card.animate-on-scroll:nth-child(3) { transition-delay: 0.3s !important; }

.trust__grid .trust__item.animate-on-scroll:nth-child(1) { transition-delay: 0s !important; }
.trust__grid .trust__item.animate-on-scroll:nth-child(2) { transition-delay: 0.1s !important; }
.trust__grid .trust__item.animate-on-scroll:nth-child(3) { transition-delay: 0.2s !important; }
.trust__grid .trust__item.animate-on-scroll:nth-child(4) { transition-delay: 0.3s !important; }

.cases__grid .case-card.animate-on-scroll:nth-child(1) { transition-delay: 0s !important; }
.cases__grid .case-card.animate-on-scroll:nth-child(2) { transition-delay: 0.1s !important; }
.cases__grid .case-card.animate-on-scroll:nth-child(3) { transition-delay: 0.2s !important; }
.cases__grid .case-card.animate-on-scroll:nth-child(4) { transition-delay: 0.3s !important; }
.cases__grid .case-card.animate-on-scroll:nth-child(5) { transition-delay: 0.4s !important; }

/* =====================================================
   Reduced Motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .hero__scroll .icon {
        animation: none !important;
    }
}