/* /Components/Pages/About/About.razor.rz.scp.css */
/* =========================================
   About.razor.css – Scoped Component Styles
   ========================================= */

/* --- Hero --- */

/* --- Mission Section --- */
.mission-title[b-g68el5wvtr] {
    line-height: 1.25;
}

/* --- Core Value Cards --- */
[b-g68el5wvtr] .core-value-card {
    border-radius: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

    [b-g68el5wvtr] .core-value-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25) !important;
    }

/* Icon circle */
.icon-circle[b-g68el5wvtr] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--bs-primary);
    transition: transform 0.3s ease;
}

    [b-g68el5wvtr] .core-value-card:hover .icon-circle {
        transform: rotate(8deg) scale(1.1);
    }

/* Card gradient backgrounds */
.value-bg-1[b-g68el5wvtr] {
    background: linear-gradient(135deg, #0052D4, #4364F7, #6FB1FC);
}

.value-bg-2[b-g68el5wvtr] {
    background: linear-gradient(135deg, #00b09b, #96c93d);
}

.value-bg-3[b-g68el5wvtr] {
    background: linear-gradient(135deg, #4b6cb7, #182848);
}

/* Value card bottom sub-text */
.val-sub-desc[b-g68el5wvtr] {
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding-top: 1rem;
}

/* --- Joint Venture Partner Images --- */
.partner-img[b-g68el5wvtr] {
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.45s ease;
    will-change: transform;
}

    .partner-img:hover[b-g68el5wvtr] {
        transform: scale(1.03);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    }

/* --- History CTA Banner --- */
.history-cta-banner[b-g68el5wvtr] {
    background: linear-gradient(135deg, #003366 0%, #005cbf 50%, #0073e6 100%);
    padding: 3.5rem 3rem;
}

.history-cta-btn[b-g68el5wvtr] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #003366;
    font-weight: 700;
}

    .history-cta-btn:hover[b-g68el5wvtr] {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
    }

/* Decorative blobs */
.history-cta-decor[b-g68el5wvtr] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 0;
}

.history-cta-decor-1[b-g68el5wvtr] {
    width: 380px;
    height: 380px;
    top: -40%;
    right: -5%;
}

.history-cta-decor-2[b-g68el5wvtr] {
    width: 220px;
    height: 220px;
    bottom: -50%;
    left: 5%;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .history-cta-banner[b-g68el5wvtr] {
        text-align: center;
        padding: 2.5rem 1.5rem;
    }

    .history-cta-btn[b-g68el5wvtr] {
        margin-top: 1rem;
    }
}
/* /Components/Pages/About/Ci.razor.rz.scp.css */

/* --- 섹션 타이틀 스타일 --- */
.section-title[b-5g8amm75l3] {
    font-weight: 800;
    border-left: 5px solid #003366; /* POSCO Blue */
    padding-left: 1.5rem;
    color: #333;
}

/* --- 로고 컨셉 카드 --- */
.concept-card[b-5g8amm75l3] {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.05);
}

    .concept-card:hover[b-5g8amm75l3] {
        transform: translateY(-5px);
    }

    .concept-card img[b-5g8amm75l3] {
        transition: transform 0.6s ease;
    }

    .concept-card:hover img[b-5g8amm75l3] {
        transform: scale(1.03);
    }

/* --- 심볼 항목 --- */
.symbol-item[b-5g8amm75l3] {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 1rem;
    height: 100%;
    transition: all 0.3s ease;
}

    .symbol-item:hover[b-5g8amm75l3] {
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

.step-num[b-5g8amm75l3] {
    display: block;
    font-size: 1.7rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    line-height: 1;
}

/* --- 컬러 카드 --- */
.color-card[b-5g8amm75l3] {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: 100%;
}

    .color-card:hover[b-5g8amm75l3] {
        transform: translateY(-12px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    }

.color-swatch[b-5g8amm75l3] {
    height: 150px; /* 높이를 명시적으로 설정 */
    width: 100%;
    display: block; /* 영역 확보 */
}

.color-card:hover .color-swatch[b-5g8amm75l3] {
    opacity: 0.9;
}

/* --- 다운로드 배너 --- */
[b-5g8amm75l3] .download-banner-custom {
    background-color: #f8f9fa !important; /* 연한 회색 배경 */
    border: 1px solid #dee2e6;
    border-top: 5px solid #05507D !important; /* 상단 포인트 선 */
}

    /* 배너 내 텍스트 색상 강제 지정 */
    [b-5g8amm75l3] .download-banner-custom h3 {
        color: #05507D !important; /* POSCO Blue */
    }

    [b-5g8amm75l3] .download-banner-custom p {
        color: #495057 !important; /* 짙은 회색 */
    }

/* 브랜드 전용 버튼 스타일 */
[b-5g8amm75l3] .btn-posco {
    background-color: #05507D !important;
    color: white !important;
    border: none;
}

    [b-5g8amm75l3] .btn-posco:hover {
        background-color: #003366 !important;
    }

[b-5g8amm75l3] .btn-outline-posco {
    border: 2px solid #05507D !important;
    color: #05507D !important;
    background-color: transparent !important;
}

    [b-5g8amm75l3] .btn-outline-posco:hover {
        background-color: #05507D !important;
        color: white !important;
    }

/* --- 반응형 최적화 --- */
@media (max-width: 991px) {
    .section-title[b-5g8amm75l3] {
        font-size: 1.8rem;
        border-left-width: 4px;
    }

    .page-hero[b-5g8amm75l3] {
        height: 70vh; /* 모바일에서는 높이 축소 */
    }
}

/* /Components/Pages/About/Contact.razor.rz.scp.css */
.location-img-placeholder[b-89iytam27r] {
    transition: transform 0.3s ease;
    background: #f0f0f0 linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 50%, #e0e0e0 50%, #e0e0e0 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}

.map-container iframe[b-89iytam27r] {
    filter: grayscale(10%) contrast(1.1);
}

.mb-7[b-89iytam27r] {
    margin-bottom: 6rem;
}

.contact-info-list h6[b-89iytam27r] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* /Components/Pages/About/History.razor.rz.scp.css */
/* --- History 전용 스타일 --- */

.history-intro[b-1ackd674jm] {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
}

.timeline-container[b-1ackd674jm] {
    position: relative;
    padding: 2rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

    /* 중앙 수직선 */
    .timeline-container[b-1ackd674jm]::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
        transform: translateX(-50%);
        z-index: 1;
    }

.timeline-row[b-1ackd674jm] {
    position: relative;
    width: 50%;
    margin-bottom: 4rem;
    z-index: 2;
}

    .timeline-row.left[b-1ackd674jm] {
        padding-right: 50px;
        text-align: right;
        margin-left: 0;
    }

    .timeline-row.right[b-1ackd674jm] {
        padding-left: 50px;
        text-align: left;
        margin-left: 50%;
    }

/* 중앙 점 */
.node[b-1ackd674jm] {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 4px solid #ced4da;
    border-radius: 50%;
    top: 32px;
    z-index: 3;
}

.left .node[b-1ackd674jm] {
    right: -9px;
}

.right .node[b-1ackd674jm] {
    left: -9px;
}

/* 카드 디자인 */
.card[b-1ackd674jm] {
    background: #fff;
    padding: 1.8rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border-top: 5px solid #dee2e6;
}

    .card:hover[b-1ackd674jm] {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }

.badge[b-1ackd674jm] {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    background: #f8f9fa;
    color: #495057;
    font-weight: 800;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

.title[b-1ackd674jm] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #212529;
}

.desc[b-1ackd674jm] {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Era 구분선 */
.era-divider[b-1ackd674jm] {
    position: relative;
    text-align: center;
    margin: 5rem 0;
    z-index: 4;
}

.era-label[b-1ackd674jm] {
    display: inline-block;
    background: #6c757d;
    color: white;
    padding: 0.6rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 브랜드 테마 (::deep) --- */
[b-1ackd674jm] .theme-posco.era-label {
    background-color: #05507D !important;
}

[b-1ackd674jm] .theme-posco.node {
    border-color: #05507D !important;
}

[b-1ackd674jm] .theme-posco.card {
    border-top-color: #05507D !important;
}

[b-1ackd674jm] .theme-synergy.era-label {
    background-color: #00A5E5 !important;
}

[b-1ackd674jm] .theme-synergy.node {
    border-color: #00A5E5 !important;
}

[b-1ackd674jm] .theme-synergy.card {
    border-top-color: #00A5E5 !important;
}

/* --- 반응형 --- */
@media (max-width: 767.98px) {
    .timeline-container[b-1ackd674jm]::before {
        left: 20px;
        transform: none;
    }

    .timeline-row[b-1ackd674jm] {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 50px !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .node[b-1ackd674jm] {
        left: 11px !important;
        top: 28px;
    }

    .era-divider[b-1ackd674jm] {
        text-align: left;
        margin: 3rem 0;
    }

    .era-label[b-1ackd674jm] {
        padding: 0.4rem 1.5rem;
    }
}
/* /Components/Pages/About/Mcompany.razor.rz.scp.css */


.divider[b-a8n8ij9a9u] {
    width: 60px;
    height: 4px;
    background-color: #00d2ff;
    border-radius: 2px;
}

.max-w-800[b-a8n8ij9a9u] {
    max-width: 800px;
}

/* Content Sections */
.py-7[b-a8n8ij9a9u] {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.brand-tag[b-a8n8ij9a9u] {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: #eef6ff;
    color: #004d99;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    letter-spacing: 0.05em;
}

.tag-yamato[b-a8n8ij9a9u] {
    background: #e9f7e7;
    color: #43b02a;
}

.stat-item[b-a8n8ij9a9u] {
    border-left: 3px solid #dee2e6;
    padding-left: 1.5rem;
}

.img-wrapper[b-a8n8ij9a9u] {
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

.hover-zoom[b-a8n8ij9a9u] {
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.img-wrapper:hover .hover-zoom[b-a8n8ij9a9u] {
    transform: scale(1.05);
}

/* Buttons */
.btn-posco[b-a8n8ij9a9u] {
    background-color: #003366;
    color: white;
    border: none;
    transition: all 0.3s;
}

    .btn-posco:hover[b-a8n8ij9a9u] {
        background-color: #001f40;
        color: #00d2ff;
        transform: translateY(-2px);
    }

.btn-yamato[b-a8n8ij9a9u] {
    background-color: #43b02a;
    color: white;
    border: none;
    transition: all 0.3s;
}

    .btn-yamato:hover[b-a8n8ij9a9u] {
        background-color: #348a21;
        color: white;
        transform: translateY(-2px);
    }

/* Synergy Cards */
.synergy-card[b-a8n8ij9a9u] {
    transition: all 0.3s;
}

    .synergy-card:hover[b-a8n8ij9a9u] {
        border-color: #003366 !important;
        background: #fcfdfe;
        transform: translateY(-5px);
    }

/* Responsive */
@media (max-width: 991px) {
    .py-7[b-a8n8ij9a9u] {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .text-lg-start[b-a8n8ij9a9u] {
        text-align: center !important;
    }
}
/* /Components/Pages/Hr/Jobcategories.razor.rz.scp.css */
/* ==========================================================================
   추천: 매거진 스타일 비대칭 Dynamic Masonry 레이아웃 
   ========================================================================== */

.job-careers-container[b-u3sygj5w17] {
    background-color: #ffffff;
    padding-top: 40px;
    position: relative;
}

/* 3열 기준의 반응형 엇갈림 그리드 */
.magazine-grid[b-u3sygj5w17] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.magazine-card[b-u3sygj5w17] {
    position: relative;
    width: 100%;
    cursor: pointer;
}

/* 추천 동적 세로 사이즈 클래스 */
.size-short[b-u3sygj5w17] {
    height: 280px;
}

.size-medium[b-u3sygj5w17] {
    height: 360px;
}

.size-tall[b-u3sygj5w17] {
    height: 440px;
}

.card-inner-frame[b-u3sygj5w17] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background-color: #1e293b;
    transition: all 0.45s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.card-bg-img[b-u3sygj5w17] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.card-gradient-mask[b-u3sygj5w17] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(0, 32, 91, 0.9) 100%);
    z-index: 1;
}

.card-info-content[b-u3sygj5w17] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
    color: #ffffff;
}

.card-tag[b-u3sygj5w17] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #38bdf8;
    margin-bottom: 8px;
}

.card-main-title[b-u3sygj5w17] {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.03em;
}

.card-brief-desc[b-u3sygj5w17] {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
    margin-bottom: 0;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-action-btn[b-u3sygj5w17] {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 2;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

    .card-action-btn i[b-u3sygj5w17] {
        font-size: 1.1rem;
    }

.magazine-card:hover .card-inner-frame[b-u3sygj5w17] {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 32, 91, 0.15);
}

.magazine-card:hover .card-bg-img[b-u3sygj5w17] {
    transform: scale(1.06);
}

.magazine-card:hover .card-action-btn[b-u3sygj5w17] {
    opacity: 1;
    transform: scale(1);
    background-color: #004da0;
}


/* ==========================================================================
   🎯 모달(Modal) 팝업창 전용 스타일링 (배경 흐림 및 레이어 최상단 고정)
   ========================================================================== */
.job-popup-overlay[b-u3sygj5w17] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.7); /* 어두운 투명 배경 처리 */
    backdrop-filter: blur(8px); /* 뒷배경 흐림 효과 처리 */
    z-index: 3500; /* GNB 네비바를 완벽히 덮을 수 있도록 레이어 랭크 상향 조정 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeInModal-b-u3sygj5w17 0.25s ease-out forwards;
}

.job-popup-content[b-u3sygj5w17] {
    background-color: #ffffff;
    width: 100%;
    max-width: 1200px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    animation: slideUpModal-b-u3sygj5w17 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.popup-grid-layout[b-u3sygj5w17] {
    display: flex;
    min-height: 500px;
}

/* 팝업 좌측 이미지 파트 */
.popup-visual[b-u3sygj5w17] {
    flex: 0 0 38%;
    position: relative;
    background-color: #00205b;
}

    .popup-visual img[b-u3sygj5w17] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
    }

.popup-visual-overlay[b-u3sygj5w17] {
    position: absolute;
    bottom: 40px;
    left: 30px;
    z-index: 2;
    right: 20px;
}

.popup-sub[b-u3sygj5w17] {
    font-size: 0.75rem;
    color: #38bdf8;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

/* 팝업 우측 상세 정보 기술서 파트 */
.popup-info-body[b-u3sygj5w17] {
    flex: 1;
    padding: 45px;
    background-color: #ffffff;
    overflow-y: auto;
    max-height: 85vh;
}

.text-dark-blue[b-u3sygj5w17] {
    color: #00205b;
}

.job-desc-text[b-u3sygj5w17] {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #475569;
}

.task-bullet-list[b-u3sygj5w17] {
    padding-left: 20px;
    margin-bottom: 0;
}

    .task-bullet-list li[b-u3sygj5w17] {
        font-size: 0.95rem;
        color: #334155;
        margin-bottom: 8px;
        line-height: 1.5;
    }

.req-box[b-u3sygj5w17] {
    background-color: #f8fafc;
    border-left: 4px solid #004da0;
    padding: 15px;
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    color: #334155;
}

/* 우측 상단 모달 닫기 버튼 */
.btn-popup-close[b-u3sygj5w17] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

    .btn-popup-close:hover[b-u3sygj5w17] {
        transform: scale(1.1);
        background-color: #ffffff;
        color: #004da0;
    }

/* 애니메이션 동작 */
@keyframes fadeInModal-b-u3sygj5w17 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpModal-b-u3sygj5w17 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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


/* ==========================================================================
   반응형 대응 브레이크포인트
   ========================================================================== */
@media (max-width: 1024px) {
    .magazine-grid[b-u3sygj5w17] {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }

    .size-tall[b-u3sygj5w17], .size-medium[b-u3sygj5w17], .size-short[b-u3sygj5w17] {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .magazine-grid[b-u3sygj5w17] {
        grid-template-columns: 1fr;
    }

    .size-tall[b-u3sygj5w17], .size-medium[b-u3sygj5w17], .size-short[b-u3sygj5w17] {
        height: 240px;
    }

    .popup-grid-layout[b-u3sygj5w17] {
        flex-direction: column;
    }

    .popup-visual[b-u3sygj5w17] {
        height: 160px;
    }

    .popup-visual-overlay[b-u3sygj5w17] {
        bottom: 20px;
        left: 20px;
    }

    .popup-info-body[b-u3sygj5w17] {
        padding: 30px 20px;
    }
}
/* /Components/Pages/Hr/Jobinterview.razor.rz.scp.css */
/* POSCO YAMATO VINA Premium Job Interview Layout */

/* 100% 화면 전체 사용을 위한 정밀 분할 설정 */
.interview-wrapper-row[b-8rc9551y8e] {
    display: flex;
    flex-wrap: nowrap;
    min-height: 100vh;
}

.interview-sidebar-30[b-8rc9551y8e] {
    width: 30% !important;
    flex: 0 0 30%;
    max-width: 30%;
}

.interview-content-70[b-8rc9551y8e] {
    width: 70% !important;
    flex: 0 0 70%;
    max-width: 70%;
}

/* 바둑판 타일 버튼화 (완전 수평 밀착 및 테두리 초기화) */
.grid-thumb-tile[b-8rc9551y8e] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
    cursor: pointer;
    overflow: hidden;
}

/* ★ 1:1.73 초장형 세로 포스터 고정 비율 설계 ★ */
.tile-img-container[b-8rc9551y8e] {
    width: 100%;
    aspect-ratio: 1 / 1.73; /* 스마트폰 세로 또는 영화 포스터 최적화 장형 비율 */
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease-in-out;
}

.tile-img[b-8rc9551y8e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%); /* 비활성 카드는 차분하게 한 톤 감춤 */
    transition: all 0.3s ease;
}

/* 마우스 호버 및 선택 시 본래 색상으로 선명하게 복구 */
.grid-thumb-tile.active .tile-img[b-8rc9551y8e],
.grid-thumb-tile:hover .tile-img[b-8rc9551y8e] {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* 활성 카드 안쪽 테두리 강조 표시 (POSCO 심층 네이비 브랜딩) */
.grid-thumb-tile.active .tile-img-container[b-8rc9551y8e] {
    outline: 5px solid #003366;
    outline-offset: -5px;
}

/* 타일 하단 가독성 블랙 그라데이션 커버 */
.tile-hover-overlay[b-8rc9551y8e] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent 10%, rgba(0, 0, 0, 0.85) 90%);
    padding: 15px 4px 8px 4px;
    text-align: center;
    color: #ffffff;
}

.tile-name[b-8rc9551y8e] {
    font-size: 0.85rem;
    font-weight: bold;
}

.tile-dept[b-8rc9551y8e] {
    font-size: 0.65rem;
    color: #cbd5e1;
}

/* 우측 화이트 테마 및 단독 와이드 배경 이미지 데코레이션 */
.interview-detail-hero[b-8rc9551y8e] {
    background-size: contain; /* 세로 깨짐 없이 우측 공간에 원본 비율로 배치 */
    background-position: right top; /* 인물을 글자 영역과 겹치지 않게 우측 우회 배치 */
    background-repeat: no-repeat;
    background-color: #ffffff; /* 좌측 투명 그라데이션과 혼합되는 순백 바탕색 */
}

.detail-content-overlay[b-8rc9551y8e] {
    background-attachment: local;
    min-height: 100vh;
}

/* 포인트 컬러 세팅 */
.text-navy[b-8rc9551y8e] {
    color: #003366;
}

.italic-quote[b-8rc9551y8e] {
    font-style: italic;
}

.border-light-dark[b-8rc9551y8e] {
    border-left-color: #dee2e6 !important;
}

.bg-navy[b-8rc9551y8e] {
    background-color: #003366 !important;
}

/* 부드러운 인물 전환 실시간 페이드인 */
.animate-fade-in[b-8rc9551y8e] {
    animation: fadeInOverlay-b-8rc9551y8e 0.35s ease-out forwards;
}

@keyframes fadeInOverlay-b-8rc9551y8e {
    from {
        opacity: 0;
        transform: scale(0.99);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 반응형 스마트폰 및 태블릿 분할 해제 */
@media (max-width: 991px) {
    .interview-wrapper-row[b-8rc9551y8e] {
        flex-direction: column;
    }

    .interview-sidebar-30[b-8rc9551y8e],
    .interview-content-70[b-8rc9551y8e] {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }
}
/* /Components/Pages/Hr/Process.razor.rz.scp.css */
/* 공통 레이아웃 */
.hr-scroll-container[b-11i9r1vkth] {
    background-color: #f8f9fa;
}

/* 제목 라인 */
.process-title-area .title-line[b-11i9r1vkth] {
    width: 50px;
    height: 3px;
    background-color: #004da0; /* 포스코 블루 */
    margin: 20px auto;
}

/* 프로세스 컨테이너 (수평 정렬) */
.recruit-steps-container[b-11i9r1vkth] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* 연결선 */
.recruit-steps-container[b-11i9r1vkth]::before {
    content: '';
    position: absolute;
    top: 90px; /* 원 중앙 위치 */
    left: 5%;
    right: 5%;
    height: 1px;
    border-top: 2px dashed #dee2e6;
    z-index: 1;
}

/* 개별 스텝 */
.step-item[b-11i9r1vkth] {
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
}

.step-circle[b-11i9r1vkth] {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 3px solid #dee2e6;
    border-radius: 50%;
    margin: 0 auto 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.step-item:hover .step-circle[b-11i9r1vkth] {
    border-color: #004da0;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 77, 160, 0.1);
}

.step-label[b-11i9r1vkth] {
    font-size: 11px;
    color: #adb5bd;
    font-weight: 600;
}

.step-num[b-11i9r1vkth] {
    font-size: 24px;
    font-weight: 800;
    color: #343a40;
}

/* 최종 합격 강조 */
.step-circle.highlight[b-11i9r1vkth] {
    border-color: #004da0;
    background-color: #004da0;
    color: #fff;
}

.step-circle.highlight .step-label[b-11i9r1vkth] {
    color: rgba(255, 255, 255, 0.8);
}

/* 텍스트 영역 */
.step-text h4[b-11i9r1vkth] {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.step-text p[b-11i9r1vkth] {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}


.recruitment-poster[b-11i9r1vkth] {
    position: relative;
    width: 100%;
    height: 41.6vw; /* [중요] 원본 비율(1920:800 = 1:0.416)을 유지하기 위한 높이 설정 */
    min-height: 380px; /* 모바일 등에서 최소 높이 보장 */
    /* 배경 이미지 설정 (가져오신 이미지 파일명으로 변경하세요) */
    background-image: url('/images/hr/apply.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* 세로 가운데 정렬 */
    justify-content: center; /* 가로 왼쪽 정렬 */
    overflow: hidden;
}
/* 반응형: 모니터가 아주 커질 때 이미지 원본 높이(800px)를 넘지 않도록 제한 */
@media (min-width: 1920px) {
    .recruitment-banner[b-11i9r1vkth] {
        height: 800px;
    }
}

/* 반응형: 스마트폰 등 모바일 화면에서는 글자가 너무 작아지므로 최소 높이 지정 */
@media (max-width: 768px) {
    .recruitment-banner[b-11i9r1vkth] {
        height: 300px; /* 모바일에서 보기 적당한 높이로 고정 */
        background-position: 35% center; /* 글자가 있는 왼쪽 위주로 배경 중심 이동 */
    }
}

/* 이미지 위에 어두운 톤을 살짝 깔아 글자 가독성 높이기 */
.recruitment-poster[b-11i9r1vkth]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25); /* 어두운 오버레이 레이어 */
    z-index: 1;
}

/* 텍스트 컨텐츠 전체 박스 */
.poster-content[b-11i9r1vkth] {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;

    margin-left: 0;
    margin-right: auto;
    text-align: left;

    padding-left: 20%;

    color: #ffffff;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* 글자가 돋보이는 텍스트 그림자 */
}

/* 대타이틀: Come Grow with Us */
.poster-title[b-11i9r1vkth] {
    font-size: clamp(32px, 5vw, 68px); /* 화면 크기에 맞게 폰트 크기 자동 조절 */
    font-weight: 800;
    margin-bottom: 45px;
    letter-spacing: -0.5px;
    animation: fadeInUp-b-11i9r1vkth 0.8s ease-out; /* 부드럽게 나타나는 효과 */
}

/* 본문 설명 글귀 */
.poster-desc[b-11i9r1vkth] {
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 55px;
    word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
}

/* 하단 지원문의 */
.poster-contact[b-11i9r1vkth] {
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
}

    .poster-contact a[b-11i9r1vkth] {
        color: #ffffff;
        text-decoration: none;
        border-bottom: 2px solid dotted;
        transition: color 0.3s;
    }
        /* 이메일에 마우스를 올렸을 때 하이라이트 효과 */
        .poster-contact a:hover[b-11i9r1vkth] {
            color: #4ae3d4;
        }

/* 애니메이션 효과 */
@keyframes fadeInUp-b-11i9r1vkth {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* 모바일 대응 (세로 정렬로 변경) */
@media (max-width: 991px) {
    .recruit-steps-container[b-11i9r1vkth] {
        flex-direction: column;
        padding-left: 50px;
    }
    .recruit-steps-container[b-11i9r1vkth]::before {
        left: 100px;
        top: 0;
        bottom: 0;
        width: 1px;
        height: auto;
        border-left: 2px dashed #dee2e6;
        border-top: none;
    }
    .step-item[b-11i9r1vkth] {
        display: flex;
        text-align: left;
        margin-bottom: 40px;
        align-items: center;
    }
    .step-circle[b-11i9r1vkth] {
        margin: 0 30px 0 0;
        flex-shrink: 0;
    }
}
/* /Components/Pages/Hr/Talent.razor.rz.scp.css */
/* =======================================================
   [핵심가치 카드] 마우스 호버 효과 및 디자인 커스텀
   ::deep을 붙여 Blazor 격리 버그를 완벽히 우회합니다.
======================================================= */

/* 1. 카드가 위로 부드럽게 떠오르는 호버 이펙트 */
[b-pussfx31bn] .transition-hover {
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease !important;
}

    [b-pussfx31bn] .transition-hover:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08) !important;
    }

/* 2. 카드 내부 제목 및 텍스트 미세 조정 */
[b-pussfx31bn] .fw-black {
    font-weight: 900 !important;
}

/* 3. 하단 행동강령 요약 박스 */
[b-pussfx31bn] .behavior-summary-box {
    margin-top: 48px !important;
}

/* 4. 카드 설명 글꼴 스타일 */
[b-pussfx31bn] .core-value-card-desc {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
}
/* /Components/Pages/Products/Customers.razor.rz.scp.css */
/* Hero & Nav */
.product-hero[b-kkjiqyzxjc] {
    height: 35vh;
    min-height: 250px;
    background-size: cover;
    background-position: center;
}

.py-7[b-kkjiqyzxjc] {
    padding: 6rem 0;
}

.max-w-800[b-kkjiqyzxjc] {
    max-width: 800px;
    margin: 0 auto;
}

.line-height-125[b-kkjiqyzxjc] {
    line-height: 1.25;
}

/* Industry Cards */
.industry-card[b-kkjiqyzxjc] {
    transition: all 0.3s ease;
    border: 1px solid transparent !important;
}

    .industry-card:hover[b-kkjiqyzxjc] {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
    }

.icon-circle[b-kkjiqyzxjc] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-primary-light[b-kkjiqyzxjc] {
    background-color: rgba(0, 51, 102, 0.1);
}

.bg-success-light[b-kkjiqyzxjc] {
    background-color: rgba(25, 135, 84, 0.1);
}

.bg-info-light[b-kkjiqyzxjc] {
    background-color: rgba(13, 202, 240, 0.1);
}

/* Region Badge */
.badge[b-kkjiqyzxjc] {
    width: 100px;
    padding: 0.6rem 0;
    font-weight: 600;
}

/* Sub-Nav deep link override if necessary */
.product-sub-nav[b-kkjiqyzxjc]  .nav-link.active {
    background-color: #003366 !important;
    color: white !important;
}

/* Industry Card Hover Effect */
.industry-card[b-kkjiqyzxjc] {
    transition: all 0.3s ease;
    border: 1px solid #eee !important;
}

    .industry-card:hover[b-kkjiqyzxjc] {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.1) !important;
        border-color: var(--bs-primary) !important;
    }

.icon-circle[b-kkjiqyzxjc] {
    width: 80px;
    height: 80px;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.industry-card:hover .icon-circle[b-kkjiqyzxjc] {
    background-color: var(--bs-primary);
}

    .industry-card:hover .icon-circle i[b-kkjiqyzxjc] {
        color: white !important;
    }

/* Region Badge */
.region-info .badge[b-kkjiqyzxjc] {
    width: 90px;
    height: 30px;
    font-size: 0.8rem;
}

/* Sub-Nav Active Style */
.product-sub-nav .nav-link[b-kkjiqyzxjc] {
    color: #555;
    font-size: 0.95rem;
}

    .product-sub-nav .nav-link.active[b-kkjiqyzxjc] {
        background-color: #003366 !important;
        color: white !important;
        font-weight: 600;
    }
/* /Components/Pages/Products/Process.razor.rz.scp.css */
/* 생산 공정 페이지만을 위한 전용 스타일 */

.process-page-container[b-b89xxswgba] {
    font-family: 'Noto Sans KR', sans-serif;
    overflow-x: hidden;
    background-color: #fcfcfc;
}

/* 타이틀 언더라인 효과 */
.process-title[b-b89xxswgba] {
    color: #222;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

    .process-title[b-b89xxswgba]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background-color: #0056b3; /* 메인 테마 블루 */
        border-radius: 2px;
    }

/* 공정 리스트 감싸는 영역 */
.process-list[b-b89xxswgba] {
    display: flex;
    flex-direction: column;
    gap: 60px; /* 카드와 카드 사이의 여백 */
    margin-top: 5px;
}

/* 개별 공정 카드 (기본 flex 설정) */
.process-card-item[b-b89xxswgba] {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .process-card-item:hover[b-b89xxswgba] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }

/* 큼지막한 이미지 박스 (50% 너비 차지) */
.process-image-box[b-b89xxswgba] {
    position: relative;
    width: 50%;
    height: 380px; /* 고정 높이 제공으로 시각적 균형 유지 */
    overflow: hidden;
}

    .process-image-box img[b-b89xxswgba] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 박스에 꽉 차도록 설정 */
        transition: transform 0.5s ease;
    }

.process-card-item:hover .process-image-box img[b-b89xxswgba] {
    transform: scale(1.05); /* 마우스 호버 시 이미지 미세 확대 */
}

/* 제강 / 연주 / 압연 카테고리 배지 */
.process-badge[b-b89xxswgba] {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(33, 37, 41, 0.85);
    color: #fff;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 30px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* 홀수/짝수 반전시 배지 위치 고정 유지 (선택사항) */
.flex-row-reverse .process-badge[b-b89xxswgba] {
    left: auto;
    right: 20px;
}

/* 설명 컨텐츠 박스 (50% 너비 차지) */
.process-content-box[b-b89xxswgba] {
    width: 50%;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 큰 공정 순서 번호 표시 */
.process-number[b-b89xxswgba] {
    font-size: 3rem;
    font-weight: 800;
    color: #e9ecef;
    line-height: 1;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

/* 공정 제목 */
.process-step-title[b-b89xxswgba] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
}

/* 공정 설명 텍스트 */
.process-description[b-b89xxswgba] {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 0;
    word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
}

/* 반응형 웹 디자인: 테블릿 및 모바일 기기 대응 */
@media screen and (max-width: 991px) {
    .process-list[b-b89xxswgba] {
        gap: 40px;
    }

    .process-card-item[b-b89xxswgba],
    .process-card-item.flex-row-reverse[b-b89xxswgba] {
        flex-direction: column; /* 세로 나열로 변경 */
    }

    .process-image-box[b-b89xxswgba],
    .process-content-box[b-b89xxswgba] {
        width: 100%; /* 너비를 100%로 확장 */
    }

    .process-image-box[b-b89xxswgba] {
        height: 260px; /* 모바일에서는 이미지 높이 축소 */
    }

    .process-content-box[b-b89xxswgba] {
        padding: 30px 25px;
    }

    .process-number[b-b89xxswgba] {
        font-size: 2.5rem;
    }

    .process-step-title[b-b89xxswgba] {
        font-size: 1.3rem;
    }
}
/* /Components/Pages/Products/Products.razor.rz.scp.css */


/* 제품군 전환 서브 내비게이션 바 */
.product-sub-nav[b-hijiaso4zb] {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.3rem 0; /* 전체적인 두께를 슬림하게 유지 */
    position: sticky;
    top: 0;
    z-index: 1020;
}

    /* 개별 메뉴 링크의 높이와 간격 조절 */
    .product-sub-nav[b-hijiaso4zb]  .nav-link {
        color: #495057;
        font-size: 0.9rem; /* 슬림한 디자인을 위한 글자 크기 [cite: 338] */
        padding: 0.5rem 1.2rem; /* 상하 패딩을 줄여 두께 조정  */
        margin: 0 0.2rem; /* 메뉴 사이 간격 살짝 추가 */
        border-radius: 4px; /* 배경색 적용 시 모서리를 살짝 둥글게 하면 더 세련되어 보임 */
        border-bottom: none !important; /* 기존 바닥 보더 제거 */
        transition: all 0.2s ease-in-out;
    }

        /* 마우스 오버 효과 (높이 감소에 맞춰 최적화) */
        .product-sub-nav[b-hijiaso4zb]  .nav-link:hover {
            background-color: #e9ecef; /* 마우스 올렸을 때 연한 회색 배경 */
            color: #003366;
            border-bottom: none !important;
        }

        /* 활성화된 메뉴 (현재 페이지) */
        .product-sub-nav[b-hijiaso4zb]  .nav-link.active {
            background-color: #003366 !important; /* 진한 파란색 배경으로 전체 변경 */
            color: #ffffff !important; /* 글자색은 흰색으로 반전 */
            font-weight: 600;
            border-bottom: none !important;
        }

/* 여백 및 공통 요소 */
.py-7[b-hijiaso4zb] {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.img-box[b-hijiaso4zb] {
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.spec-divider[b-hijiaso4zb] {
    width: 50px;
    height: 3px;
    background-color: #003366;
}

@media (max-width: 768px) {
    .product-sub-nav[b-hijiaso4zb]  .nav-link {
        font-size: 0.8rem;
        padding: 0.8rem 0;
    }
}
/* /Components/Pages/Quality/Certificates.razor.rz.scp.css */

.cert-card[b-pjbogy15la] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
    overflow: hidden;
}

    .cert-card:hover[b-pjbogy15la] {
        transform: translateY(-8px);
        box-shadow: 0 1rem 2rem rgba(0, 51, 102, 0.15) !important;
    }

.cert-img-container[b-pjbogy15la] {
    height: 220px;
    overflow: hidden;
}

.cert-thumbnail[b-pjbogy15la] {
    max-height: 100%;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.cert-card:hover .cert-thumbnail[b-pjbogy15la] {
    transform: scale(1.05);
}

.cert-title[b-pjbogy15la] {
    font-size: 0.95rem;
    line-height: 1.4;
    height: 2.8rem; /* 2줄 고정 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bg-primary-soft[b-pjbogy15la] {
    background-color: rgba(0, 51, 102, 0.08);
}

.py-6[b-pjbogy15la] {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
/* /Components/Pages/Quality/QualityManagement.razor.rz.scp.css */

.max-w-800[b-ldt2njte91] {
    max-width: 800px;
}

/* 공통 아이콘 서클 */
.icon-circle[b-ldt2njte91] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

/* 전략 카드 호버 효과 */
.strategy-card[b-ldt2njte91] {
    transition: all 0.3s ease;
    border-top: 4px solid transparent !important;
}

    .strategy-card:hover[b-ldt2njte91] {
        transform: translateY(-10px);
        border-top: 4px solid #003366 !important;
        box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
    }

/* 품질 방침 이탈릭 강조 */
.italic[b-ldt2njte91] {
    font-style: italic;
}

.py-6[b-ldt2njte91] {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
/* /Components/Pages/Support/Contactus.razor.rz.scp.css */
.pr-scroll-container[b-3zwoe17t4b] {
    background-color: #f8f9fa;
}

/* 좌측 정보 사이드바 */
.contact-info-sidebar[b-3zwoe17t4b] {
    position: sticky;
    top: 100px;
}

.info-card[b-3zwoe17t4b] {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #eee;
}

/* 폼 커스텀 스타일 (Application 페이지 스타일 계승) */
.form-card[b-3zwoe17t4b] {
    border: 1px solid #f1f3f5;
}

.custom-input[b-3zwoe17t4b] {
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #fdfdfd;
}

.custom-input:focus[b-3zwoe17t4b] {
    border-color: #004da0;
    box-shadow: 0 0 0 0.25rem rgba(0, 77, 160, 0.05);
}

.form-label[b-3zwoe17t4b] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

/* 라디오 버튼 (문의 유형) 커스텀 */
.btn-outline-primary[b-3zwoe17t4b] {
    border-color: #dee2e6;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
}

.btn-check:checked + .btn-outline-primary[b-3zwoe17t4b] {
    background-color: #004da0;
    border-color: #004da0;
    color: #fff;
}

/* 버튼 애니메이션 */
.btn-primary[b-3zwoe17t4b] {
    background-color: #004da0;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover[b-3zwoe17t4b] {
    background-color: #00336a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 77, 160, 0.2);
}

/* 모바일 대응 */
@media (max-width: 991px) {
    .contact-info-sidebar[b-3zwoe17t4b] {
        position: static;
    }
}
/* /Components/Pages/Support/Media.razor.rz.scp.css */
/* 페이지 배경 레이아웃 최적화 */
.media-page-bg[b-jildf4yk6u] {
    width: 100%;
    max-width: 100vw;
    /* [기존 overflow-x 수정 및 Y축 스크롤 제어] */
    overflow-x: hidden;
    overflow-y: auto; /* 내부 스크롤 활성화 */
    /* 뷰포트 높이를 100vh 고정하여 컨테이너 자체가 스크롤 베이스가 되도록 설정 */
    height: 100vh;
    /* 스크롤 스냅 컨테이너 선언 (y축 방향으로 엄격하게 적용) */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /* 스크롤 이동 시 부드럽게 처리 */

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

/* 스크롤 시 탁탁 걸리게 만들 개별 세션 스타일 */
.snap-section[b-jildf4yk6u] {
    /* 스크롤이 멈출 기준점을 정합니다. (맨 위 상단 기준) */
    scroll-snap-align: start;
    /* 패딩이나 마진 때문에 타이틀이 너무 바짝 붙는 것을 방지하는 정렬 보정 offset */
    scroll-margin-top: 2rem;
    /* 각 영역이 화면에서 충분한 공간을 차지하도록 최소 높이 지정 (선택사항) */
    min-height: auto;
}

.text-navy[b-jildf4yk6u] {
    color: #004da0;
}


/* 메인 영상 카드 */
.video-featured-card[b-jildf4yk6u] {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    background: #000;
}

.video-placeholder[b-jildf4yk6u] {
    cursor: pointer;
}

.video-img[b-jildf4yk6u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay[b-jildf4yk6u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.3s ease;
}

    .play-overlay i[b-jildf4yk6u] {
        font-size: 5rem;
        color: rgba(255, 255, 255, 0.9);
        transition: transform 0.3s ease, color 0.3s ease;
    }

.video-featured-card:hover .play-overlay[b-jildf4yk6u] {
    background: rgba(0, 0, 0, 0.5);
}

.video-featured-card:hover i[b-jildf4yk6u] {
    transform: scale(1.1);
    color: #fff;
}

/* 브로셔 PDF 뷰어 스타일 */
.brochure-viewer-container[b-jildf4yk6u] {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.pdf-wrapper[b-jildf4yk6u] {
    background-color: #525659; /* PDF 로딩 전 백그라운드 색상 */
}

/* 모바일 대응 분기 */
@media (max-width: 768px) {
    .video-featured-card .ratio[b-jildf4yk6u],
    .pdf-wrapper[b-jildf4yk6u] {
        --bs-aspect-ratio: 56.25% !important; /* 모바일 환경에서는 최적의 가독성을 위해 16:9 비율 고정 */
    }

    .play-overlay i[b-jildf4yk6u] {
        font-size: 3.5rem;
    }

    .play-overlay h4[b-jildf4yk6u] {
        font-size: 1.1rem;
    }

    .nav-pills .nav-link[b-jildf4yk6u] {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}
/* /Components/Pages/Support/NewsDetail.razor.rz.scp.css */
/* 1. 기본적으로 모든 언어 섹션은 숨김 처리 (deep 필수) */
[b-yyelo3s73m] .lang-section {
    display: none !important;
}

/* 2. 부모의 언어 클래스(ko, en, vi)에 매칭되는 자식 섹션만 노출 */
.ko[b-yyelo3s73m]  .lang-section[lang="ko"] {
    display: block !important;
}

.en[b-yyelo3s73m]  .lang-section[lang="en"] {
    display: block !important;
}

.vi[b-yyelo3s73m]  .lang-section[lang="vi"] {
    display: block !important;
}
/* /Components/Pages/Support/Newsroom.razor.rz.scp.css */
/* ── Hero Carousel (전체 영역 꽉 채우기) ────────────────── */
.newsroom-hero-section[b-xtvzu4aj8x] {
    position: relative;
    overflow: hidden;
    /* 이미지 좌우 여백을 채워줄 깔끔한 단색 그라데이션 베이스 */
    background: linear-gradient(135deg, #0d1b2a 0%, #1b4f72 100%);
}

    /* ── 캐러셀 전체 및 아이템 높이 절대 고정 ── */
    .carousel-inner[b-xtvzu4aj8x],
    .newsroom-hero-section .carousel-item[b-xtvzu4aj8x] {
        height: 250px; 
        position: relative;
        background-color: #0d1b2a; /* 이미지가 contain되어 남는 좌우 여백을 채워줄 기본 배경색 */
    }

/* ── 배경 이미지 비율 무시하고 1200px 폭으로 강제 스트레치 ── */
.carousel-background-layer[b-xtvzu4aj8x] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 1200px 너비 상태에서 화면 정중앙 배치 */

    width: 100%;
    max-width: 1600px; /* 최대 폭을 딱 1200px로 제한 */
    height: 100%;
    background-repeat: no-repeat;
    background-position: left center;
    /* 비율을 유지하면서 가로/세로 중 작은 쪽에 맞춘 후, 넘치는 영역은 자동으로 잘라냄 */
    background-size: cover;
    background-blend-mode: overlay;
    z-index: 1;
}
    .carousel-background-layer[b-xtvzu4aj8x]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 1. 글자가 잘 보이도록 아래로 갈수록 더 어두워지는 짙은 그라데이션 */
        background: linear-gradient(to bottom, rgba(13, 27, 42, 0.6) 0%, rgba(13, 27, 42, 0.85) 100%);
        /* 2. 뒷배경 이미지를 은은하게 흐리게 만드는 블러 효과 (숫자가 높을수록 더 흐려짐) */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px); /* 사파리 브라우저 호환용 */
    }

/* ── 텍스트 콘텐츠 레이어 (이미지 위에 배치) ──────────────── */
.carousel-caption-custom[b-xtvzu4aj8x] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    text-align: center;
    color: #fff;
    padding: 0 24px;
    box-sizing: border-box;
    z-index: 10;
}

    /* ── 타이틀 및 본문 텍스트 높이 제어 (와따가따 방지 핵심) ── */
    .carousel-caption-custom h3[b-xtvzu4aj8x] {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 타이틀이 너무 길어지면 최대 2줄까지만 허용하고 말줄임 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
    }

    /* 요약문 스타일 */
    .carousel-caption-custom .style-brief[b-xtvzu4aj8x] {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 3줄에서 2줄로 줄여 높이를 더 콤팩트하게 변경 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 3rem; /* 2줄 크기로 높이를 정확히 고정하여 변화 차단 */
        font-size: 1rem;
        color: #b0c4d8;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }


/* 카드 기본 상태 및 호버 애니메이션 추가 */
.news-card-link[b-xtvzu4aj8x] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    /* 마우스 호버 시 카드 효과 */
    .news-card-link:hover[b-xtvzu4aj8x] {
        transform: translateY(-5px); /* 카드가 위로 5px 살짝 들림 */
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* 그림자가 더 짙어짐 */
    }
/* 1. 이미지 기본 상태 설정 (부드러운 애니메이션 전환 효과) */
.news-thumb[b-xtvzu4aj8x] {
    transition: transform 0.3s ease-in-out;
}

/* 2. 카드가 호버(@media hover 및 카드 클래스 연동)될 때 내부 이미지 확대 */
.news-card-link:hover .news-thumb[b-xtvzu4aj8x] {
    transform: scale(1.08); /* 1.08배 확대 (원하는 크기에 따라 숫자를 조절하세요) */
}
/* /Components/Pages/Support/Resources.razor.rz.scp.css */
.pr-scroll-container[b-fhlaynu7oq] {
    background-color: #f8f9fa;
}

/* 자료 아이템 카드 */
.download-item-card[b-fhlaynu7oq] {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;
}

.download-item-card:hover[b-fhlaynu7oq] {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    border-color: #004da0;
}

/* 아이콘 박스 */
.item-icon-box[b-fhlaynu7oq] {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 1.8rem;
    transition: background 0.3s ease;
}

.download-item-card:hover .item-icon-box[b-fhlaynu7oq] {
    background: rgba(0, 77, 160, 0.05);
}

/* 정보 영역 */
.item-info .badge[b-fhlaynu7oq] {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.item-info h5[b-fhlaynu7oq] {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
    min-height: 3rem;
}

/* 다운로드 버튼 */
.btn-download[b-fhlaynu7oq] {
    width: 40px;
    height: 40px;
    background: #f1f3f5;
    color: #495057;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-download:hover[b-fhlaynu7oq] {
    background: #004da0;
    color: #fff;
}

/* 탭 버튼 스타일 커스텀 */
.btn-outline-primary[b-fhlaynu7oq] {
    border-color: #dee2e6;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-outline-primary:hover[b-fhlaynu7oq], 
.btn-outline-primary.active[b-fhlaynu7oq] {
    background-color: #004da0;
    border-color: #004da0;
    color: #fff;
}
/* /Components/Pages/Sustainability/Environment.razor.rz.scp.css */
.env-scroll-container[b-qsonwxr1qr] {
    background-color: #ffffff;
}

/* =========================================
   공통 V-Section 및 Overlay 스타일
========================================= */
.v-section[b-qsonwxr1qr] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
    overflow: hidden; /* 배경 이미지 넘침 방지 */
}

/* 텍스트 가독성을 위한 어두운 오버레이 */
.overlay[b-qsonwxr1qr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.overlay.d-dark[b-qsonwxr1qr] {
    background-color: rgba(0, 0, 0, 0.65);
}

/* 컨텐츠가 오버레이 위로 올라오도록 설정 */
.v-section .container.content[b-qsonwxr1qr] {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Scroll Down 인디케이터 */
.scroll-down-indicator[b-qsonwxr1qr] {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    z-index: 10;
    animation: bounce-b-qsonwxr1qr 2s infinite;
    cursor: pointer;
}

/* =========================================
   Section 2: 환경경영 섹션 CSS
========================================= */
.env-management-section[b-qsonwxr1qr] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Noto Sans KR', Arial, sans-serif;
    color: #333;
}

.env-header[b-qsonwxr1qr] {
    text-align: center;
    margin-bottom: 50px;
}

.env-header h2[b-qsonwxr1qr] {
    font-size: 32px;
    color: #1a365d;
    margin-bottom: 15px;
    font-weight: 700;
}

.env-header p[b-qsonwxr1qr] {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* 하이라이트: EPD 인증 */
.epd-highlight[b-qsonwxr1qr] {
    padding: 50px;
    background: #73f58fc0;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
}

.epd-cert-container[b-qsonwxr1qr] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 50px;
}

.cert-split-view[b-qsonwxr1qr] {
    flex: 1;
}

.cert-item-box[b-qsonwxr1qr] {
    flex: 1;
}

.cert-item-box img[b-qsonwxr1qr] {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.cert-item-box img:hover[b-qsonwxr1qr] {
    transform: translateY(-8px);
}

.download-footer[b-qsonwxr1qr] {
    margin-top: 20px;    
    padding-top: 30px;
    border-top: 1px dashed #e0e0e0;
}

.download-text[b-qsonwxr1qr] {
    font-size: 15px;
    color: #444;
    margin-bottom: 20px;
}

.btn-download-main[b-qsonwxr1qr] {
    display: inline-flex;
    align-items: center;
    padding: 15px 35px;
    background-color: #1a365d;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-download-main:hover[b-qsonwxr1qr] {
    background-color: #2c5282;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(26, 54, 93, 0.3);
}

.btn-download-main .icon[b-qsonwxr1qr] {
    margin-right: 10px;
    font-size: 18px;
}

.epd-content[b-qsonwxr1qr] {
    flex: 1;
}

.epd-badge[b-qsonwxr1qr] {
    display: inline-block;
    background-color: #16a34a;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
}

.epd-content h3[b-qsonwxr1qr] {
    font-size: 24px;
    color: #166534;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.epd-content p[b-qsonwxr1qr] {
    color: #15803d;
    line-height: 1.6;
    margin: 0;
}

/* 글로벌 & 로컬 인증 그리드 */
.cert-grid[b-qsonwxr1qr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cert-card[b-qsonwxr1qr] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.cert-card h3[b-qsonwxr1qr] {
    font-size: 20px;
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
}

.cert-list[b-qsonwxr1qr] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cert-list li[b-qsonwxr1qr] {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.cert-list li[b-qsonwxr1qr]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: bold;
}

.cert-name[b-qsonwxr1qr] {
    font-weight: 700;
    font-size: 16px;
    color: #111827;
    display: block;
    margin-bottom: 5px;
}

.cert-desc[b-qsonwxr1qr] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* =========================================
   Section 3: Smart Monitoring
========================================= */
.bg-smart-monitor[b-qsonwxr1qr] {
    background-color: #0f172a;
    background-image: url('/images/Sustainability/monitor_bg.webp'); /* 필요 시 실제 이미지 경로 지정 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* 모니터링 박스 (네온 스타일) */
.monitor-box[b-qsonwxr1qr] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 50px;
    border-radius: 30px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.monitor-box:hover[b-qsonwxr1qr] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Section 4: Performance Report
========================================= */
.report-list .report-item[b-qsonwxr1qr] {
    transition: all 0.3s ease;
    background-color: #fff;
    border: 1px solid #eaeaea;
}

.report-list .report-item:hover[b-qsonwxr1qr] {
    transform: translateX(10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    border-color: #ccc;
}

.report-preview-img[b-qsonwxr1qr] {
    overflow: hidden;
    border-radius: 1rem;
}

.report-preview-img img[b-qsonwxr1qr] {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.report-preview-img:hover img[b-qsonwxr1qr] {
    transform: scale(1.05);
}

/* =========================================
   Section 5: Emergency Response
========================================= */
.bg-emergency[b-qsonwxr1qr] {
    background-color: #1e293b;
    background-image: url('/images/Sustainability/emergency_bg.webp'); /* 필요 시 실제 이미지 경로 지정 */
    background-size: cover;
    background-position: center;
}

/* 비상 대응 스테퍼 */
.emergency-step-card[b-qsonwxr1qr] {
    padding: 40px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.emergency-step-card:hover[b-qsonwxr1qr] {
    transform: translateY(-10px);
    border-color: #ffc107;
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.15);
}

.step-num[b-qsonwxr1qr] {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}


/* =========================================
   Section Add : Carbon
========================================= */

.bg-dark-blue[b-qsonwxr1qr] {
    background-color: #1a365d !important;
}

.text-dark-blue[b-qsonwxr1qr] {
    color: #1a365d !important;
}

.bg-light-gray[b-qsonwxr1qr] {
    background-color: #f8fafc !important;
}

/* 타임라인 컴포넌트 그래픽 스타일 */
.roadmap-timeline-wrapper[b-qsonwxr1qr] {
    position: relative;
    z-index: 2;
}

.roadmap-progress-bar[b-qsonwxr1qr] {
    position: absolute;
    top: 22px; /* 사각형 두께 중심축에 맞춰 살짝 위로 조정 */
    left: 10%;
    right: 10%;
    height: 3px;
    background: #e2e8f0;
    z-index: 0;
}

.timeline-node[b-qsonwxr1qr] {
    position: relative;
    z-index: 1;
}

.node-rect-badge[b-qsonwxr1qr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 85px; /* 컴팩트하고 균형 잡힌 가로폭 */
    height: 38px; /* 세련된 직사각형 비율 */
    border-radius: 6px; /* 너무 딱딱하지 않게 준 부드러운 라운드 값 */
    font-weight: 700;
    font-size: 15px;
    color: #ffffff !important;
    border: 3px solid #ffffff; /* 라인과 겹칠 때 구분을 위한 흰색 테두리 */
    position: relative;
    z-index: 1;
    letter-spacing: 0.5px;
}

/* 연도별 고유 컬러 제어 (가중치 확보) */
.bg-secondary[b-qsonwxr1qr] {
    background-color: #64748b !important;
}
/* 2020 */
.bg-success[b-qsonwxr1qr] {
    background-color: #10b981 !important;
}
/* 2025 실적 달성 */
.bg-primary[b-qsonwxr1qr] {
    background-color: #3b82f6 !important;
}
/* 2027, 2030 목표 */
.bg-dark-blue[b-qsonwxr1qr] {
    background-color: #1a365d !important;
}
/* 2050 넷제로 */

/* 텍스트 폰트 디테일 추가 */
.node-value[b-qsonwxr1qr] {
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.5px;
}

.node-label[b-qsonwxr1qr] {
    font-size: 12px !important;
    margin-top: 4px;
}

/* 탄소 로드맵 전용 카드 기본 상태 정의 */
.carbon-strat-card[b-qsonwxr1qr] {
    position: relative;
    top: 0;
    /* 1. 크롬에서 버그를 유발할 수 있는 !important는 기본 상태에서 제거합니다. */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* 2. 크롬 브라우저에게 하드웨어 가속(GPU)을 사용하도록 명시합니다. */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, box-shadow;
}

    /* 마우스 호버(Hover) 시 트리거 스타일 - 가중치 강제 부여 */
    .carbon-strat-card:hover[b-qsonwxr1qr] {
        /* 3. 단순 translateY 대신 3D 요소를 가미한무 변형을 주어 크롬 렌더러를 강제 구동합니다. */
        transform: translateY(-8px) translateZ(0);
        box-shadow: 0 12px 24px rgba(26, 54, 93, 0.15);
        border-color: #1a365d;
        cursor: pointer;
    }




/* =========================================
   반응형 및 애니메이션
========================================= */
@media (max-width: 768px) {
    .cert-grid[b-qsonwxr1qr] {
        grid-template-columns: 1fr;
    }
    .epd-highlight[b-qsonwxr1qr] {
        flex-direction: column;
        padding: 25px;
    }
    .epd-cert-container[b-qsonwxr1qr] {
        flex-direction: column;
        align-items: center;
    }
    .roadmap-progress-bar[b-qsonwxr1qr] {
        display: none; /* 모바일 그리드 카드 배치 시 타임라인 가로 막대 제거 */
    }
    .node-rect-badge[b-qsonwxr1qr] {
        width: 100%; /* 모바일에서는 카드가 가득 차도록 유연하게 확장 */
        max-width: 140px;
    }
    .w-100-mobile[b-qsonwxr1qr] {
        grid-column: span 2; /* 2050 넷제로는 모바일에서 강조 처리 */
    }
}

@keyframes bounce-b-qsonwxr1qr {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-10px) translateX(-50%);
    }

    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}
/* /Components/Pages/Sustainability/Ethic.razor.rz.scp.css */
/* 타이틀 프레임 */
.ethic-banner-box[b-ivfbgl04wy] {
    width: 100%;
    max-width: 1100px;
    padding: 2.5rem 3.5rem;
    margin: 0 auto;
}

.ethic-main-title[b-ivfbgl04wy] {
    color: #005A9C;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 3.5rem;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: -0.04em;
    word-break: keep-all;
    margin: 0;
}

.quote-mark[b-ivfbgl04wy] {
    font-family: 'Georgia', serif;
    font-size: 8.5rem;
    color: #dbdbdb;
    position: absolute;
    line-height: 1;
    user-select: none;
}

.q-left[b-ivfbgl04wy] {
    top: 0;
    left: 0;
}

.q-right[b-ivfbgl04wy] {
    bottom: -10px;
    right: 0;
}

.ethic-sub-desc[b-ivfbgl04wy] {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.8;
    letter-spacing: -0.01em;
    word-break: keep-all;
    padding-top: 0.5rem;
}

/* 핵심가치 레이아웃 공간 제어 */
.ethic-circle-row[b-ivfbgl04wy] {
    width: 100%;
    max-width: 1200px;
    gap: 80px; /* 원하는 만큼 넉넉하게 지정한 서클 간 격차 */
}

/* 원형 버튼 공통 기본 스타일 */
.ethic-circle-btn[b-ivfbgl04wy] {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-color: #005A9C; /* 평소 기본 파란색 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

    .ethic-circle-btn:hover[b-ivfbgl04wy] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

.circle-inner[b-ivfbgl04wy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.value-icon-img[b-ivfbgl04wy] {
    width: 95%;
    height: 95%;
    object-fit: contain;
}

/* ---------------------------------------------------------------- */
/* 💡 마법의 구역: 라디오 버튼 체크 상태에 따른 CSS 동적 토글 인터랙션 */
/* ---------------------------------------------------------------- */

/* 1. 클릭된 정원 버튼만 녹색으로 배경색 스위칭 */
#tab-integrity:checked ~ .ethic-circle-row .btn-integrity[b-ivfbgl04wy],
#tab-respect:checked ~ .ethic-circle-row .btn-respect[b-ivfbgl04wy],
#tab-empathy:checked ~ .ethic-circle-row .btn-empathy[b-ivfbgl04wy] {
    background-color: #438A29; /* 활성화 시 녹색 */
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(67, 138, 41, 0.25);
}

/* 2. 회색 패널 본문 영역 기본 숨김 처리 */
.ethic-speech-bubble[b-ivfbgl04wy] {
    display: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
}

/* 3. 활성화된 라디오 탭에 해당하는 패널만 선별적으로 노출 */
#tab-integrity:checked ~ .ethic-speech-bubble-wrapper .content-integrity[b-ivfbgl04wy],
#tab-respect:checked ~ .ethic-speech-bubble-wrapper .content-respect[b-ivfbgl04wy],
#tab-empathy:checked ~ .ethic-speech-bubble-wrapper .content-empathy[b-ivfbgl04wy] {
    display: block;
}

/* 4. 말풍선 꼭지점(삼각형) 공통 스타일 선언 */
.ethic-speech-bubble-wrapper[b-ivfbgl04wy]::before {
    content: '';
    position: absolute;
    top: -12px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #f5f5f5;
    z-index: 10;
    transition: left 0.3s ease;
}

/* 5. 활성화된 탭에 맞춰 꼭지점 좌표를 물리적으로 강제 대입 (버튼 간격 넓이에 맞춰 정렬됨) */
#tab-integrity:checked ~ .ethic-speech-bubble-wrapper[b-ivfbgl04wy]::before {
    left: calc(50% - 170px - 80px); /* 중앙 기준 정원 반지름 + 간격 역산 */
}

#tab-respect:checked ~ .ethic-speech-bubble-wrapper[b-ivfbgl04wy]::before {
    left: calc(50% - 12px); /* 한가운데 정렬 */
}

#tab-empathy:checked ~ .ethic-speech-bubble-wrapper[b-ivfbgl04wy]::before {
    left: calc(50% + 170px + 80px - 24px); /* 우측 정렬 */
}

/* ---------------------------------------------------------------- */

.ethic-speech-bubble-wrapper[b-ivfbgl04wy] {
    max-width: 1000px;
}


/* 비윤리 신고안내 파트 커스텀 타이틀 장식 */
.report-sub-title[b-ivfbgl04wy] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #212529;
    letter-spacing: -0.5px;
}

    /* 제목 왼쪽 파란색 포인트 세로 막대 배치 */
    .report-sub-title[b-ivfbgl04wy]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        width: 4px;
        height: 20px;
        background-color: #005a9c;
        border-radius: 2px;
    }

/* 설명 세션 내부 리스트 항목 줄간 간격 조정 */
.report-intro-text[b-ivfbgl04wy] {
    font-size: 1.05rem;
}

    .report-intro-text p[b-ivfbgl04wy] {
        margin-bottom: 0.5rem;
    }

        .report-intro-text p:last-child[b-ivfbgl04wy] {
            margin-bottom: 0;
        }

.bg-report-zone[b-ivfbgl04wy] {
    background-color: #fcfdfe !important; /* 미세하게 푸른빛이 도는 깨끗한 대기업 대관 페이지용 미색 */
}

/* 반응형 모바일 브레이크 포인트 보정 */
@media (max-width: 768px) {
    .ethic-circle-row[b-ivfbgl04wy] {
        flex-direction: column;
        gap: 20px;
    }

    .ethic-circle-btn[b-ivfbgl04wy] {
        width: 130px;
        height: 130px;
    }

    .ethic-main-title[b-ivfbgl04wy] {
        font-size: 1.8rem;
    }

    .quote-mark[b-ivfbgl04wy] {
        font-size: 3.5rem;
    }

    .ethic-speech-bubble-wrapper[b-ivfbgl04wy]::before {
        display: none; /* 모바일 세로 레이아웃에서는 복잡한 꼭지점 제거 */
    }
}


.btn-download-hover[b-ivfbgl04wy] {
    transition: all 0.2s ease-in-out;
}

    .btn-download-hover:hover[b-ivfbgl04wy] {
        background-color: #e6f0fa !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
    }

/* 6대 기본요건 카드 호버 효과 통합 */
.transition-transform[b-ivfbgl04wy] {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .transition-transform:hover[b-ivfbgl04wy] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
        border-color: #005A9C !important;
    }
/* /Components/Pages/Sustainability/Safety.razor.rz.scp.css */
/* --- 2. Vision & Strategy Section --- */
.v-section[b-qlh3uci1lm] {
    position: relative;
}

.brand-tag[b-qlh3uci1lm] {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.divider[b-qlh3uci1lm] {
    width: 60px;
    height: 4px;
    background: #0d6efd;
    border-radius: 2px;
}

/* Goal Card Style */
.goal-card[b-qlh3uci1lm] {
    background: #fff;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.goal-card:hover[b-qlh3uci1lm] {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

.goal-card i[b-qlh3uci1lm] {
    transition: transform 0.3s ease;
}

.goal-card:hover i[b-qlh3uci1lm] {
    transform: scale(1.1) rotate(5deg);
}


/* --- 3. Safety Golden Rules Section --- */
.golden-rule-section[b-qlh3uci1lm] {
    /*background: linear-gradient(135deg, #f4f7fc 0%, #eef3fb 50%, #e3edf9 100%) !important;*/
    background: linear-gradient(135deg, #e2e8f0 0%, #dbeafe 50%, #d0e1fd 100%) !important;
    position: relative;
    overflow: hidden;
}
/* 배경에 은은한 포인트 (선택 사항: 더욱 세련된 느낌을 줍니다) */
    .golden-rule-section[b-qlh3uci1lm]::before {
        content: "";
        position: absolute;
        top: -10%;
        right: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(13, 110, 253, 0.22) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 1;
    }

/* 타이틀 텍스트 강조 (골든룰 테마에 맞춘 골드 포인트) */
.golden-rule-title[b-qlh3uci1lm] {
    color: #003399 !important; /* 선명하고 신뢰감을 주는 프리미엄 딥 블루 */
    text-shadow: 0 2px 4px rgba(0, 51, 153, 0.1); /* 은은한 푸른빛 음영 */
    font-weight: 800;
}

.golden-rule-sub[b-qlh3uci1lm] {
    color: #334155 !important; /* 가독성이 높은 진한 슬레이트 그레이 */
    font-weight: 500;
}

/* 수칙 카드 기본 스타일 */
.safety-rule-card[b-qlh3uci1lm] {
    position: relative;
    padding: 2.2rem 1.2rem;
    height: 100%;
    border-radius: 20px;
    /* 눈이 편안하고 화사한 파스텔 민트/그린 톤 적용 */
    background: #e8f5e9;
    /* 은은한 초록빛 테두리로 경계선 명학화 */
    border: 1px solid rgba(46, 125, 50, 0.15);
    /* 밝은 카드에 어울리는 부드러운 그림자 */
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.08);
    text-align: center;
    color: #1b5e20; /* 짙은 포레스트 그린 텍스트로 가독성 확보 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    z-index: 2;
}

.icon-circle[b-qlh3uci1lm] {
    width: 65px;
    height: 65px;
    margin: 0 auto 1.5rem auto;
    background: #ffffff; /* 흰색 원형으로 깨끗한 느낌 */
    border: 1px solid rgba(46, 125, 50, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #2e7d32; /* 안전을 상징하는 선명한 초록색 아이콘 */
    transition: all 0.3s ease;
}

/* 수칙 제목 폰트 스타일 보정 */
.safety-rule-card h6[b-qlh3uci1lm] {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #1b5e20; /* 짙은 초록색 */
    line-height: 1.4;
}

/* 카드 Hover 시 상세 설명 노출 */
.rule-hover-text[b-qlh3uci1lm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 뒷면 설명은 신뢰감 있고 묵직한 안전 그린 그라데이션으로 반전 효과 */
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    color: #ffffff; /* 마우스 올렸을 때 설명 글씨는 흰색 */

    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
    z-index: 3;
}

.safety-rule-card:hover .rule-hover-text[b-qlh3uci1lm] {
    opacity: 1;
    visibility: visible;
}

.safety-rule-card:hover[b-qlh3uci1lm] {
    transform: translateY(-8px);
    background: #c8e6c9; /* 조금 더 짙은 파스텔 그린으로 변경 */
    border-color: #2e7d32;
    box-shadow: 0 15px 30px rgba(46, 125, 50, 0.18);
}

    /* 호버 시 아이콘 활성화 효과 */
    .safety-rule-card:hover .icon-circle[b-qlh3uci1lm] {
        background: #2e7d32;
        color: #ffffff;
        border-color: #2e7d32;
        transform: scale(1.05);
    }


/* --- 4. System & Task Section --- */
/* 어두운 bg-dark 배경을 보완하는 세련된 라이트 그레이 테마 */
.v-section.bg-dark[b-qlh3uci1lm] {
    background-color: #f8fafc !important; /* 부드럽고 깨끗한 오프화이트/라이트 그레이 */
    color: #1e293b !important; /* 전체 기본 텍스트를 짙은 색으로 변경 */
}

    /* 제목 텍스트 (짙은 다크 네이비) */
    .v-section.bg-dark h3.display-5[b-qlh3uci1lm] {
        color: #0f172a !important;
        font-weight: 800;
    }

    /* 서브 설명글 가독성 확보 */
    .v-section.bg-dark .text-white-50[b-qlh3uci1lm] {
        color: #475569 !important; /* 미디움 슬레이트 그레이로 변경 */
        font-weight: 500;
    }

/* 시스템 리스트 항목 내부의 제목들 */
.system-list h5[b-qlh3uci1lm] {
    color: #0f172a !important;
    font-weight: 700;
}

/* 태그 디자인 (밝은 배경에 어울리는 스카이 블루 틴트) */
.tag-blue[b-qlh3uci1lm] {
    background: rgba(13, 110, 253, 0.08) !important;
    color: #0d6efd !important; /* 선명한 메인 블루 */
    border: 1px solid rgba(13, 110, 253, 0.15);
}

/* 아이콘 박스 (밝은 배경 위에 포인트가 되도록 드롭 섀도우 및 대비 강화) */
.system-list .bi[b-qlh3uci1lm] {
    background: #ffffff !important; /* 흰색 사각 베이스 */
    color: #d97706 !important; /* 가독성 높은 딥 웜 옐로우/오렌지 */
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12); /* 은은한 옐로우 빛 음영 */
    border: 1px solid rgba(217, 119, 6, 0.15);
    display: inline-block;
}

/* 이미지 레이어 레이아웃 보정 */
.img-fluid.rounded-5[b-qlh3uci1lm] {
    border-radius: 30px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important; /* 밝은 배경에 맞는 부드러운 그림자 */
}

/* 뒤쪽 이미지 (서브 이미지) 테두리 보정 */
.position-absolute.d-none.d-md-block[b-qlh3uci1lm] {
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.12)) !important;
    border: 4px solid #ffffff !important; /* 기존 어두운 테두리를 화이트로 변경 */
    transition: all 0.5s ease;
}

.position-relative:hover .position-absolute[b-qlh3uci1lm] {
    transform: translate(-10px, -10px) scale(1.05);
}


/* --- 5. CTA Banner --- */
.safety-cta-banner[b-qlh3uci1lm] {
    background: linear-gradient(90deg, #0d6efd 0%, #0042a5 100%);
    position: relative;
    overflow: hidden;
}

.safety-cta-banner[b-qlh3uci1lm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66-3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-43c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm58 18c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.3;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
    .display-5[b-qlh3uci1lm] { font-size: 2.2rem; }
    .py-7[b-qlh3uci1lm] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}
/* /Components/Pages/Sustainability/Social.razor.rz.scp.css */
/* 공통 레이아웃 */
.scroll-container[b-ep4j7fytv8] {
    background-color: #ffffff;
}

.v-section[b-ep4j7fytv8] {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
    overflow: hidden;
}

.overlay[b-ep4j7fytv8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.v-section .container.content[b-ep4j7fytv8] {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* 카드 애니메이션 */
.hover-up[b-ep4j7fytv8] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-up:hover[b-ep4j7fytv8] {
    transform: translateY(-15px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.icon-box[b-ep4j7fytv8] {
    width: 80px;
    height: 80px;
    background: rgba(13, 110, 253, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 다크 섹션 배경 이미지 (필요시 추가) */
.bg-dark[b-ep4j7fytv8] {
    background-image: url('/images/Sustainability/sr_footer_bg.webp');
    background-size: cover;
    background-position: center;
}

/* 텍스트 가독성 */
.max-w-600[b-ep4j7fytv8] {
    max-width: 600px;
}

.tracking-wider[b-ep4j7fytv8] {
    letter-spacing: 2px;
}

.text-center[b-ep4j7fytv8] {
    text-align: center;
}