/* =========================================================
   VISER ESG MANAGEMENT
   1 Page / 5 Bookmark Tabs
   별도 CSS : esg.css
   ========================================================= */

.esg-page{
    --brand:#0E7E6A;
    --brand-deep:#075D50;
    --brand-dark:#173D37;
    --mint:#EAF6F2;
    --mint-soft:#F4FAF8;
    --green:#287D5B;
    --orange:#E66E2F;
    --navy:#253746;
    --text:#202B33;
    --text-soft:#65717A;
    --line:#DCE5E1;
    --surface:#F7F9F8;
    --white:#FFFFFF;
    --max:1860px;

    color:var(--text);
    background:#fff;
    word-break:keep-all;
}

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

.esg-page a{color:inherit;text-decoration:none;}
.esg-page button{font:inherit;}

/* =========================================================
   5개 탭 메뉴
   첨부 이미지처럼 동일 너비 / 사각 라인 / 활성 하단 녹색선
   ========================================================= */
.esg-tab-wrap{
    width:100%;
    max-width:none;
    margin:60px auto 0;
    padding:0;
}

.esg-tabbar{
    display:flex;
    width:100%;
    border-top:1px solid #d8d8d8;
    border-left:1px solid #d8d8d8;
    background:#fff;
}

.esg-tabbar .tab-btn{
    position:relative;
    display:flex;
    flex:1 1 20%;
    align-items:center;
    justify-content:center;
    min-width:0;
    height:52px;
    padding:0 12px;
    border-right:1px solid #d8d8d8;
    border-bottom:1px solid #d8d8d8;
    background:#fff;
    color:#111;
    font-size:17px;
    font-weight:600;
    line-height:1;
    text-align:center;
    white-space:nowrap;
    transition:color .2s ease, background-color .2s ease;
}

.esg-tabbar .tab-btn::after{
    content:"";
    position:absolute;
    left:-1px;
    right:-1px;
    bottom:-1px;
    height:3px;
    background:transparent;
}

.esg-tabbar .tab-btn:hover{
    color:var(--brand);
    background:#fbfdfc;
}

.esg-tabbar .tab-btn.active{
    color:var(--brand);
    font-weight:700;
}

.esg-tabbar .tab-btn.active::after{
    background:var(--brand);
}

.esg-tabbar .tab-btn:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:-3px;
}

/* =========================================================
   콘텐츠 공통
   ========================================================= */
.esg-content{
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:70px 0 110px;
}

.esg-page .panel{
    display:none;
    animation:esgFade .32s ease;
}

.esg-page .panel.active{display:block;}

@keyframes esgFade{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
}

.esg-page .eyebrow{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:12px;
    font-weight:700;
}

/* 경영방침 선언 영역 */
.esg-page .declaration{
    position:relative;
    display:flex;
    gap:42px;
    align-items:center;
    background:linear-gradient(135deg,#F5FAF8 0%,#EDF7F3 100%);
    border-radius:22px;
    padding:46px 48px;
    margin-bottom:58px;
    overflow:hidden;
}

.esg-page .declaration::after{
    content:"";
    position:absolute;
    right:-54px;
    top:-74px;
    width:210px;
    height:210px;
    border-radius:50%;
    border:1px solid rgba(14,126,106,.10);
}

.esg-page .declaration > div:first-child{
    position:relative;
    z-index:2;
    flex:1;
}

.esg-page .declaration .subtitle{
    font-size:13px;
    font-weight:800;
    color:var(--accent,var(--brand));
    letter-spacing:.04em;
    margin:0 0 11px;
}

.esg-page .declaration h2{
    font-size:30px;
    line-height:1.35;
    margin:0 0 20px;
    font-weight:800;
    color:#193F39;
    letter-spacing:-.025em;
}

.esg-page .declaration p{
    font-size:18px;
    line-height:1.95;
    color:#40524D;
    margin:0 0 20px;
    white-space:pre-line;
}

.esg-page .declaration .signee{
    font-size:14px;
    color:#73827E;
    font-weight:500;
}

.esg-page .declaration .mark{
    position:relative;
    z-index:2;
    flex:0 0 118px;
    width:118px;
    height:118px;
    border-radius:32px;
    background:#fff;
    border:1px solid rgba(14,126,106,.11);
    box-shadow:0 14px 32px rgba(22,84,68,.08);
    display:flex;
    align-items:center;
    justify-content:center;
}

.esg-page .declaration .mark svg{
    width:45px;
    height:45px;
    stroke:var(--accent,var(--brand));
}

/* 섹션 제목 */
.esg-page .section-label{
    position:relative;
    font-size:26px;
    font-weight:800;
    color:#213C37;
    margin:0 0 28px;
    letter-spacing:-.03em;
    padding-top:12px;
}

.esg-page .section-label::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:34px;
    height:3px;
    border-radius:5px;
    background:var(--accent,var(--brand));
}

/* 일반 카드 */
.esg-page .grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:0 0 58px;
}

.esg-page .grid.cols-3{grid-template-columns:repeat(3,1fr);}

.esg-page .g-card{
    position:relative;
    background:#fff;
    border:1px solid #E0E8E4;
    border-radius:18px;
    padding:30px 28px 28px;
    transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
    overflow:hidden;
    min-height:145px;
}

.esg-page .g-card::after{
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    border-radius:50%;
    right:-28px;
    bottom:-28px;
    background:rgba(14,126,106,.055);
}

.esg-page .g-card:hover{
    border-color:rgba(14,126,106,.35);
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(24,71,59,.09);
}

.esg-page .g-card .num{
    display:block;
    font-weight:800;
    color:var(--accent,var(--brand));
    font-size:14px;
    margin-bottom:14px;
}

.esg-page .g-card h3{
    font-size:17px;
    margin:0 0 10px;
    color:#243D38;
    font-weight:800;
    letter-spacing:-.02em;
}

.esg-page .g-card p{
    font-size:14px;
    line-height:1.8;
    color:#697771;
    margin:0;
    white-space:pre-line;
}

.esg-page .g-card .card-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    background:#F2F8F6;
    border:1px solid #DFEEE9;
    position:relative;
    z-index:2;
}

.esg-page .g-card .card-icon svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:var(--accent,var(--brand));
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* 아코디언 */
.esg-page .accordion{
    border-top:2px solid #29453F;
    margin-bottom:58px;
}

.esg-page .acc-item{border-bottom:1px solid #DFE7E3;}

.esg-page .acc-head{
    width:100%;
    display:flex;
    align-items:center;
    gap:17px;
    background:#fff;
    border:0;
    padding:22px 6px;
    cursor:pointer;
    text-align:left;
}

.esg-page .acc-head:hover{background:#FAFCFB;}

.esg-page .acc-num{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--accent,var(--brand));
    color:#fff;
    font-size:12.5px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

.esg-page .acc-title{
    flex:1;
    font-size:16px;
    font-weight:700;
    color:#2A403B;
}

.esg-page .acc-chevron{
    width:19px;
    height:19px;
    stroke:#7B8883;
    transition:transform .25s ease;
    flex:0 0 auto;
}

.esg-page .acc-item.open .acc-chevron{transform:rotate(180deg);}

.esg-page .acc-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.esg-page .acc-body-inner{
    padding:0 8px 25px 57px;
    font-size:14.5px;
    line-height:1.9;
    color:#68766F;
}

/* 환경 목표 */
.esg-page .goal-banner{
    background:
        radial-gradient(420px 180px at 90% 0%,rgba(255,255,255,.14),transparent 65%),
        linear-gradient(115deg,#0C6958 0%,#0E7E6A 48%,#359370 100%);
    border-radius:24px;
    padding:60px 46px;
    text-align:left;
    margin-bottom:62px;
    position:relative;
    overflow:hidden;
}

.esg-page .goal-banner::after{
    content:"2050";
    position:absolute;
    right:34px;
    bottom:-38px;
    font-size:150px;
    line-height:1;
    font-weight:800;
    color:rgba(255,255,255,.07);
    letter-spacing:-.08em;
}

.esg-page .goal-banner .eyebrow{color:#B8E7D8;}

.esg-page .goal-banner h2{
    color:#fff;
    font-size:32px;
    line-height:1.55;
    font-weight:800;
    margin:12px 0 0;
    position:relative;
    z-index:2;
    max-width:880px;
    letter-spacing:-.035em;
}

.esg-page .goal-banner .yr{
    color:#FFD0AE;
    font-weight:800;
}

/* 탄소중립 로드맵 */
.esg-page .roadmap-wrap{
    background:#EAF5EE;
    padding:56px 54px 50px;
    margin-bottom:62px;
}

.esg-page .roadmap{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:72px;
    margin:0;
    position:relative;
}

.esg-page .rm-step{
    position:relative;
    min-width:0;
    background:transparent;
    border:0;
    padding:0;
    text-align:center;
}

.esg-page .rm-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:91px;
    right:-47px;
    width:18px;
    height:18px;
    border-top:2px solid #299B70;
    border-right:2px solid #299B70;
    transform:rotate(45deg);
}

.esg-page .rm-step .rm-icon{
    width:188px;
    height:188px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 34px;
}

.esg-page .rm-step .rm-icon svg{
    width:92px;
    height:92px;
    fill:none;
    stroke:#353A37;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.esg-page .rm-step .rm-icon .accent-fill{fill:#37B77C;stroke:#353A37;}
.esg-page .rm-step .rm-icon .accent-soft{fill:#BFE9D7;stroke:none;}
.esg-page .rm-step .rm-icon .accent-stroke{stroke:#239968;}

.esg-page .rm-step .period{
    font-weight:800;
    font-size:14px;
    line-height:1.3;
    color:#279D6C;
    letter-spacing:.02em;
    margin:0 0 8px;
}

.esg-page .rm-step h4{
    font-size:23px;
    line-height:1.35;
    margin:0 0 20px;
    color:#131816;
    font-weight:800;
    letter-spacing:-.035em;
}

.esg-page .rm-step h4 .rm-year{
    display:block;
    margin-top:5px;
    color:#5F6B65;
    font-size:14px;
    font-weight:600;
    letter-spacing:0;
}

.esg-page .rm-step ul{
    display:inline-block;
    max-width:100%;
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
    vertical-align:top;
}

.esg-page .rm-step li{
    position:relative;
    padding-left:13px;
    font-size:14.5px;
    line-height:1.8;
    color:#27302C;
}

.esg-page .rm-step li::before{
    content:"·";
    position:absolute;
    left:0;
    top:0;
    font-weight:800;
    color:#1A2520;
}

.esg-page .rm-step li + li{margin-top:2px;}

/* 신고 채널 */
.esg-page .report-box{
    background:#F4F8F6;
    border:1px solid #E0E8E4;
    border-radius:18px;
    padding:30px 34px;
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:10px;
}

.esg-page .report-box svg{
    width:34px;
    height:34px;
    stroke:var(--accent,var(--brand));
    flex:0 0 auto;
}

.esg-page .report-box .lines{
    font-size:14.5px;
    line-height:1.9;
    color:#41534E;
}

.esg-page .report-box a.mail{
    color:var(--accent,var(--brand));
    font-weight:800;
    border-bottom:1px solid currentColor;
}

.esg-page .report-box .note{
    font-size:12.5px;
    color:#7D8984;
    margin-top:7px;
}

/* PDF 다운로드 */
.esg-page .pdf-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:58px;
    padding-top:30px;
    border-top:1px solid #E3EAE7;
}

.esg-page .pdf-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:13px 21px;
    border-radius:10px;
    border:1px solid #C8DAD3;
    color:var(--accent,var(--brand));
    background:#fff;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    transition:background .18s ease,color .18s ease,border-color .18s ease;
}

.esg-page .pdf-btn svg{
    width:16px;
    height:16px;
    stroke:currentColor;
}

.esg-page .pdf-btn:hover{
    background:#F1F8F5;
    border-color:var(--accent,var(--brand));
}

.esg-page .pdf-btn.solid{
    background:var(--accent,var(--brand));
    color:#fff;
    border-color:var(--accent,var(--brand));
}

.esg-page .placeholder-note{
    font-size:12.5px;
    color:#805D34;
    background:#FFF8EC;
    border:1px solid #F0D8AF;
    padding:13px 17px;
    border-radius:10px;
    margin-bottom:30px;
}

/* KPI */
.esg-page .kpi-section{margin:0 0 58px;}

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

.esg-page .kpi-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.esg-page .kpi-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.esg-page .kpi-grid.cols-5{grid-template-columns:repeat(5,1fr);}

.esg-page .kpi-card{
    min-height:390px;
    border:1px solid #D7DEDA;
    background:#fff;
    padding:34px 28px 30px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.esg-page .kpi-card:hover{
    transform:translateY(-4px);
    border-color:rgba(14,126,106,.38);
    box-shadow:0 14px 34px rgba(28,72,60,.08);
}

.esg-page .kpi-card .kpi-title{
    font-size:28px;
    line-height:1.2;
    font-weight:800;
    color:#181A19;
    letter-spacing:-.04em;
    margin-bottom:34px;
}

.esg-page .kpi-card .kpi-icon{
    width:104px;
    height:104px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
}

.esg-page .kpi-card .kpi-icon svg{
    width:92px;
    height:92px;
    fill:none;
    stroke:#333;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.esg-page .kpi-card .kpi-icon svg .accent-fill{
    fill:#39B778;
    stroke:#333;
}

.esg-page .kpi-card .kpi-icon svg .accent-stroke{stroke:#239968;}

.esg-page .kpi-card .kpi-value{
    color:#279D6C;
    font-size:48px;
    line-height:1;
    font-weight:700;
    letter-spacing:-.05em;
    margin:2px 0 22px;
    white-space:nowrap;
}

.esg-page .kpi-card .kpi-value .unit{
    font-size:20px;
    font-weight:700;
    letter-spacing:-.03em;
    margin-left:4px;
}

.esg-page .kpi-card .kpi-main{
    font-size:17px;
    line-height:1.5;
    font-weight:800;
    color:#232725;
    margin-bottom:7px;
}

.esg-page .kpi-card .kpi-sub{
    font-size:14.5px;
    line-height:1.65;
    color:#747B77;
}

/* 환경경영 목표 지표 */
.esg-page .goal-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin:0 0 58px;
}

.esg-page .goal-stat-card{
    border:1px solid #D7DEDA;
    background:#F7FAF8;
    border-radius:4px;
    padding:26px 20px 22px;
    text-align:center;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.esg-page .goal-stat-card:hover{
    transform:translateY(-4px);
    border-color:rgba(14,126,106,.38);
    box-shadow:0 14px 34px rgba(28,72,60,.08);
}

.esg-page .goal-stat-card .gs-value{
    color:#279D6C;
    font-size:38px;
    line-height:1;
    font-weight:700;
    letter-spacing:-.04em;
    margin-bottom:12px;
}

.esg-page .goal-stat-card .gs-main{
    font-size:15px;
    line-height:1.5;
    font-weight:800;
    color:#232725;
    margin-bottom:6px;
}

.esg-page .goal-stat-card .gs-sub{
    font-size:12.5px;
    line-height:1.6;
    color:#747B77;
}

/* =========================================================
   반응형
   ========================================================= */
@media(max-width:1100px){
    .esg-page .goal-stats{grid-template-columns:repeat(2,1fr);}
    .esg-page .kpi-grid.cols-4,
    .esg-page .kpi-grid.cols-5{grid-template-columns:repeat(2,1fr);}
    .esg-page .grid.cols-3{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:860px){
    .esg-tab-wrap{
        margin-top:38px;
        padding:0 18px;
        overflow:visible;
    }

    .esg-tabbar{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        width:100%;
        overflow:visible;
        border-top:1px solid #d8d8d8;
        border-left:1px solid #d8d8d8;
    }

    .esg-tabbar .tab-btn{
        width:100%;
        min-width:0;
        height:50px;
        padding:0 10px;
        border-right:1px solid #d8d8d8;
        border-bottom:1px solid #d8d8d8;
        font-size:14px;
        white-space:normal;
        line-height:1.25;
    }

    .esg-content{padding:48px 18px 78px;}

    .esg-page .declaration{
        flex-direction:column;
        align-items:flex-start;
        padding:32px 28px;
    }

    .esg-page .declaration .mark{
        order:-1;
        width:88px;
        height:88px;
        flex-basis:88px;
        border-radius:24px;
    }

    .esg-page .declaration h2{font-size:25px;}

    .esg-page .grid,
    .esg-page .grid.cols-3{grid-template-columns:1fr;}

    .esg-page .roadmap-wrap{padding:38px 24px 36px;}

    .esg-page .roadmap{
        grid-template-columns:1fr;
        gap:42px;
    }

    .esg-page .rm-step:not(:last-child)::after{
        top:auto;
        right:auto;
        left:50%;
        bottom:-25px;
        width:14px;
        height:14px;
        transform:translateX(-50%) rotate(135deg);
    }

    .esg-page .rm-step .rm-icon{
        width:150px;
        height:150px;
        margin-bottom:24px;
    }

    .esg-page .rm-step .rm-icon svg{
        width:78px;
        height:78px;
    }

    .esg-page .rm-step h4{font-size:21px;}

    .esg-page .goal-banner{padding:44px 28px;}
    .esg-page .goal-banner h2{font-size:26px;}
    .esg-page .goal-banner::after{font-size:95px;right:18px;}
}

@media(max-width:760px){
    .esg-page .goal-stats{grid-template-columns:1fr;}

    .esg-page .kpi-grid,
    .esg-page .kpi-grid.cols-2,
    .esg-page .kpi-grid.cols-4,
    .esg-page .kpi-grid.cols-5{grid-template-columns:1fr;}

    .esg-page .kpi-card{
        min-height:auto;
        padding:30px 22px 28px;
    }

    .esg-page .kpi-card .kpi-title{
        font-size:24px;
        margin-bottom:25px;
    }

    .esg-page .kpi-card .kpi-value{font-size:42px;}
    .esg-page .goal-stat-card .gs-value{font-size:34px;}
}

@media(max-width:520px){
    .esg-tab-wrap{
        margin-top:30px;
        padding:0 15px;
    }

    .esg-tabbar .tab-btn{
        width:100%;
        height:48px;
        padding:0 8px;
        font-size:13px;
    }

    .esg-content{padding:40px 15px 65px;}

    .esg-page .section-label{font-size:23px;}

    .esg-page .declaration{padding:28px 22px;}
    .esg-page .declaration p{font-size:15px;}

    .esg-page .goal-banner{padding:36px 22px;}
    .esg-page .goal-banner h2{font-size:23px;}

    .esg-page .g-card{padding:25px 22px;}

    .esg-page .report-box{
        align-items:flex-start;
        padding:25px 22px;
    }

    .esg-page .pdf-row{display:grid;}

    .esg-page .pdf-btn{
        width:100%;
        justify-content:center;
        text-align:center;
    }
}


/* =========================================================
   ESG CONTENT-MANAGER FULL WIDTH
   관리자 내용관리 본문 안에서도 상위 폭 제한을 벗어나
   1920px 기준 최대 1860px 사용
   ========================================================= */
#esg-page-wrap{
    position:relative;
    left:50%;
    width:100vw;
    max-width:none;
    margin-left:-50vw;
    margin-right:0;
    background:#fff;
    overflow-x:clip;
}

#esg-container{
    width:calc(100% - 60px);
    max-width:1860px;
    margin:0 auto;
    padding:0;
}

#esg-container .esg-page{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

#esg-container .esg-tab-wrap,
#esg-container .esg-content{
    width:100%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:1500px){
    #esg-container{width:calc(100% - 48px);}
}

@media(max-width:1024px){
    #esg-container{width:calc(100% - 32px);}
}

@media(max-width:700px){
    #esg-container{width:calc(100% - 28px);}
}

/* 환경경영 목표 타이틀 : 2050년 탄소중립 달성 문구 줄바꿈 방지 */
.goal-banner .goal-nowrap{
    white-space:nowrap;
}

/* 환경경영 목표 타이틀
   PC에서는 전체 문구를 한 줄로 표시 */
@media (min-width:1025px){
    .goal-banner h2{
        white-space:nowrap;
        font-size:34px;
        letter-spacing:-1.5px;
    }
}

/* 태블릿/모바일에서는 화면 폭에 맞춰 자연스럽게 줄바꿈 */
@media (max-width:1024px){
    .goal-banner h2{
        white-space:normal;
    }
    .goal-banner .goal-nowrap{
        white-space:normal;
    }
}

/* =========================================================
   ESG 내용관리 인라인 스타일 분리
   ========================================================= */
.esg-page .panel.esg-accent-brand{
    --accent:#0E7E6A;
}

.esg-page .section-label.section-label-spaced{
    margin-top:40px;
}

/* =========================================================
   ESG 탭 전환 동작 보정
   - 탭메뉴는 그대로 유지
   - 아래 패널 내용만 변경
   - 상단 고정메뉴와 탭메뉴 사이 20px 좌표는 esg.js에서 처리
   ========================================================= */
.esg-tab-wrap{
    position:relative;
    z-index:5;
}

.esg-content{
    position:relative;
}

.esg-page .panel{
    width:100%;
}

.esg-page .panel:not(.active){
    display:none;
}

.esg-page .panel.active{
    display:block;
}



/* =========================================================
   HUMAN RIGHTS - KPI 하단 문구 확대 / 8대 실천 카드 재구성
   - KPI 하단 제목·설명 크기 확대
   - 8대 실천 항목은 특허 카드형처럼 아이콘 좌측 / 내용 우측
   - 아이콘은 VISER Green + Black 2톤
   ========================================================= */

/* 핵심 ESG 지표 하단 제목 / 설명 */
#human-rights .kpi-card .kpi-main{
    margin-bottom:12px;
    font-size:32px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.035em;
    color:#171A19;
}

#human-rights .kpi-card .kpi-sub{
    max-width:92%;
    font-size:24px;
    line-height:1.55;
    font-weight:500;
    letter-spacing:-.03em;
    color:#5F6965;
}

#human-rights .kpi-card{
    min-height:440px;
}

/* 8대 실천 항목 : 3번째 참고 이미지와 같은 가로 카드형 */
#human-rights .hr-practice-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    margin-bottom:58px;
}

#human-rights .hr-practice-grid .g-card{
    position:relative;
    display:grid;
    grid-template-columns:150px minmax(0, 1fr);
    grid-template-rows:auto auto 1fr;
    column-gap:34px;
    row-gap:0;
    align-items:center;
    min-height:290px;
    padding:38px 40px;
    border:1px solid #D7DEDA;
    border-radius:18px;
    background:#fff;
    overflow:hidden;
}

#human-rights .hr-practice-grid .g-card::after{
    display:none;
}

#human-rights .hr-practice-grid .g-card .card-icon{
    grid-column:1;
    grid-row:1 / 4;
    align-self:center;
    width:150px;
    height:150px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
}

#human-rights .hr-practice-grid .g-card .card-icon svg{
    display:block;
    width:132px;
    height:132px;
    overflow:visible;
    fill:none;
    stroke:#0E7E6A;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* 아이콘 기본은 녹색, 마지막 디테일은 검정 포인트 */
#human-rights .hr-practice-grid .g-card .card-icon svg path,
#human-rights .hr-practice-grid .g-card .card-icon svg circle,
#human-rights .hr-practice-grid .g-card .card-icon svg rect,
#human-rights .hr-practice-grid .g-card .card-icon svg line,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline{
    stroke:#0E7E6A;
}

#human-rights .hr-practice-grid .g-card .card-icon svg path:last-child,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline:last-child,
#human-rights .hr-practice-grid .g-card .card-icon svg line:last-child{
    stroke:#161A19;
}

#human-rights .hr-practice-grid .g-card .card-icon svg .accent-fill{
    fill:#0E7E6A;
    stroke:#161A19;
}

#human-rights .hr-practice-grid .g-card .card-icon svg .accent-stroke{
    stroke:#161A19;
}

#human-rights .hr-practice-grid .g-card .num{
    grid-column:2;
    grid-row:1;
    display:block;
    margin:0 0 12px;
    font-size:36px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
    color:#0E7E6A;
}

#human-rights .hr-practice-grid .g-card h3{
    grid-column:2;
    grid-row:2;
    margin:0 0 20px;
    font-size:28px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.035em;
    color:#101312;
}

#human-rights .hr-practice-grid .g-card p{
    grid-column:2;
    grid-row:3;
    margin:0;
    font-size:19px;
    line-height:1.65;
    font-weight:500;
    letter-spacing:-.025em;
    color:#525C58;
    white-space:normal;
}

/* 중형 화면 */
@media(max-width:1400px){
    #human-rights .kpi-card .kpi-main{font-size:28px;}
    #human-rights .kpi-card .kpi-sub{font-size:20px;}
    #human-rights .kpi-card{min-height:420px;}

    #human-rights .hr-practice-grid .g-card{
        grid-template-columns:120px minmax(0, 1fr);
        column-gap:26px;
        min-height:250px;
        padding:32px 30px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon{
        width:120px;
        height:120px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:106px;
        height:106px;
    }

    #human-rights .hr-practice-grid .g-card .num{font-size:31px;}
    #human-rights .hr-practice-grid .g-card h3{font-size:24px;}
    #human-rights .hr-practice-grid .g-card p{font-size:17px;}
}

/* 태블릿 : 카드 1열, 카드 내부는 가로형 유지 */
@media(max-width:860px){
    #human-rights .kpi-card .kpi-main{font-size:24px;}
    #human-rights .kpi-card .kpi-sub{max-width:100%;font-size:18px;}
    #human-rights .kpi-card{min-height:auto;}

    #human-rights .hr-practice-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    #human-rights .hr-practice-grid .g-card{
        grid-template-columns:100px minmax(0, 1fr);
        column-gap:22px;
        min-height:210px;
        padding:28px 26px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon{
        width:100px;
        height:100px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:88px;
        height:88px;
    }

    #human-rights .hr-practice-grid .g-card .num{font-size:28px;margin-bottom:9px;}
    #human-rights .hr-practice-grid .g-card h3{font-size:22px;margin-bottom:12px;}
    #human-rights .hr-practice-grid .g-card p{font-size:16px;}
}

/* 모바일 */
@media(max-width:520px){
    #human-rights .kpi-card .kpi-main{font-size:21px;}
    #human-rights .kpi-card .kpi-sub{font-size:16px;line-height:1.6;}

    #human-rights .hr-practice-grid .g-card{
        grid-template-columns:76px minmax(0, 1fr);
        column-gap:16px;
        min-height:180px;
        padding:24px 20px;
        border-radius:14px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon{
        width:76px;
        height:76px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:68px;
        height:68px;
    }

    #human-rights .hr-practice-grid .g-card .num{font-size:24px;}
    #human-rights .hr-practice-grid .g-card h3{font-size:19px;line-height:1.4;}
    #human-rights .hr-practice-grid .g-card p{font-size:14px;line-height:1.6;}
}

/* =========================================================
   HUMAN RIGHTS PRACTICE ICON CLEANUP
   아이콘 확대 시 선 두께 과다/포인트 처리 보정
   - 마지막 path 기준 검정 처리 제거
   - 실제 포인트 요소만 검정으로 정리
   - 선 두께를 낮추고 벡터 선명도 보정
   ========================================================= */
#human-rights .hr-practice-grid .g-card .card-icon{
    width:138px;
    height:138px;
}

#human-rights .hr-practice-grid .g-card .card-icon svg{
    width:118px;
    height:118px;
    shape-rendering:geometricPrecision;
}

#human-rights .hr-practice-grid .g-card .card-icon svg path,
#human-rights .hr-practice-grid .g-card .card-icon svg circle,
#human-rights .hr-practice-grid .g-card .card-icon svg rect,
#human-rights .hr-practice-grid .g-card .card-icon svg line,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card .card-icon svg ellipse{
    stroke:#0E7E6A;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

/* 검정 포인트는 클래스 또는 속성으로 지정된 요소만 적용 */
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="black"]{
    stroke:#161A19;
}

#human-rights .hr-practice-grid .g-card .card-icon svg .accent-fill{
    fill:#0E7E6A;
    stroke:#161A19;
}

#human-rights .hr-practice-grid .g-card .card-icon svg .black-fill,
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#111"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#161A19"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#000"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="black"]{
    fill:#161A19;
}

@media(max-width:1400px){
    #human-rights .hr-practice-grid .g-card .card-icon{
        width:114px;
        height:114px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:96px;
        height:96px;
    }
}

@media(max-width:860px){
    #human-rights .hr-practice-grid .g-card .card-icon{
        width:96px;
        height:96px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:82px;
        height:82px;
    }
}

@media(max-width:520px){
    #human-rights .hr-practice-grid .g-card .card-icon{
        width:74px;
        height:74px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:62px;
        height:62px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg path,
    #human-rights .hr-practice-grid .g-card .card-icon svg circle,
    #human-rights .hr-practice-grid .g-card .card-icon svg rect,
    #human-rights .hr-practice-grid .g-card .card-icon svg line,
    #human-rights .hr-practice-grid .g-card .card-icon svg polyline,
    #human-rights .hr-practice-grid .g-card .card-icon svg ellipse{
        stroke-width:1.7;
    }
}


/* =========================================================
   HUMAN RIGHTS PRACTICE ICON DETAIL TUNING
   - 선 굵기 2px 통일
   - 05 강제노동 / 07 직장 내 괴롭힘 아이콘 개별 보정
   ========================================================= */
#human-rights .hr-practice-grid .g-card .card-icon svg path,
#human-rights .hr-practice-grid .g-card .card-icon svg circle,
#human-rights .hr-practice-grid .g-card .card-icon svg rect,
#human-rights .hr-practice-grid .g-card .card-icon svg line,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card .card-icon svg ellipse{
    stroke-width:4px;
}

/* 05 강제노동·아동노동 금지 : 원형+손+사선이 답답하지 않게 균형 보정 */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
    width:134px;
    height:134px;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg{
    width:112px;
    height:112px;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg path,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg circle,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg rect,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg line,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg polyline{
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* 금지 사선, 손목/손가락 포인트는 검정으로 선명하게 */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="black"]{
    stroke:#161A19;
    stroke-width:2px;
}

/* 07 직장 내 괴롭힘·성희롱 예방 : 말풍선/표정 요소 뭉침 완화 */
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
    width:136px;
    height:136px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
    width:114px;
    height:114px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg path,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg circle,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg rect,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg line,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg polyline{
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* 표정/강조부는 검정 포인트 유지 */
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="black"]{
    stroke:#161A19;
    stroke-width:2px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .black-fill,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="black"]{
    fill:#161A19;
}

@media(max-width:1400px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:112px;
        height:112px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
        width:94px;
        height:94px;
    }
}

@media(max-width:860px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:96px;
        height:96px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
        width:80px;
        height:80px;
    }
}

@media(max-width:520px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:74px;
        height:74px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
        width:62px;
        height:62px;
    }
}

/* =========================================================
   HUMAN RIGHTS PRACTICE ICON - PRESENTATION STYLE FINAL
   - 시안용 느낌으로 아이콘 정리
   - 전체 선 굵기 4px(기존 2px의 2배)
   - 05 / 07 아이콘은 개별적으로 더 정돈된 비율로 보정
   ========================================================= */

/* 카드 내 아이콘 영역을 조금 더 안정적으로 정리 */
#human-rights .hr-practice-grid .g-card{
    align-items:center;
}

#human-rights .hr-practice-grid .g-card .card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:142px;
    height:142px;
}

#human-rights .hr-practice-grid .g-card .card-icon svg{
    width:116px;
    height:116px;
    overflow:visible;
    shape-rendering:geometricPrecision;
}

/* 전체 기본 선굵기 4px */
#human-rights .hr-practice-grid .g-card .card-icon svg path,
#human-rights .hr-practice-grid .g-card .card-icon svg circle,
#human-rights .hr-practice-grid .g-card .card-icon svg rect,
#human-rights .hr-practice-grid .g-card .card-icon svg line,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card .card-icon svg ellipse{
    stroke:#0E7E6A;
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

/* 공통 검정 포인트 정리 */
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="black"]{
    stroke:#161A19;
    stroke-width:4px;
}

#human-rights .hr-practice-grid .g-card .card-icon svg .accent-fill{
    fill:#0E7E6A;
    stroke:#161A19;
    stroke-width:4px;
}

#human-rights .hr-practice-grid .g-card .card-icon svg .black-fill,
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#111"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#161A19"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#000"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="black"]{
    fill:#161A19;
}

/* 05 강제노동·아동노동 금지 - 금지 사선과 손 형태를 시안용으로 더 또렷하게 */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
    width:148px;
    height:148px;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg{
    width:122px;
    height:122px;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg path,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg circle,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg rect,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg line,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg polyline{
    stroke-width:4px;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg [stroke="black"]{
    stroke:#161A19;
    stroke-width:4px;
}

/* 07 직장 내 괴롭힘·성희롱 예방 - 말풍선과 내부 표정 요소를 더 시안형으로 또렷하게 */
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
    width:146px;
    height:146px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
    width:120px;
    height:120px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg path,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg circle,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg rect,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg line,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg polyline{
    stroke-width:4px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="black"]{
    stroke:#161A19;
    stroke-width:4px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .black-fill,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="black"]{
    fill:#161A19;
}

@media(max-width:1400px){
    #human-rights .hr-practice-grid .g-card .card-icon{
        width:118px;
        height:118px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:96px;
        height:96px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:122px;
        height:122px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
        width:100px;
        height:100px;
    }
}

@media(max-width:860px){
    #human-rights .hr-practice-grid .g-card .card-icon{
        width:100px;
        height:100px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:82px;
        height:82px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:104px;
        height:104px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
        width:86px;
        height:86px;
    }
}

@media(max-width:520px){
    #human-rights .hr-practice-grid .g-card .card-icon{
        width:76px;
        height:76px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:62px;
        height:62px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:80px;
        height:80px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
        width:66px;
        height:66px;
    }
}


/* =========================================================
   05 강제노동·아동노동 금지 - PNG 아이콘 최종
   경로: /theme/basic/img/esg/labor.png
   SVG/배경이미지 방식 제거, <img>만 사용
   ========================================================= */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:148px;
    height:148px;
    background:none;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg{
    display:none;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
    display:block;
    width:122px;
    max-width:100%;
    height:auto;
    max-height:122px;
    object-fit:contain;
}

@media(max-width:1400px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
        width:122px;
        height:122px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        width:100px;
        max-height:100px;
    }
}

@media(max-width:860px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
        width:104px;
        height:104px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        width:86px;
        max-height:86px;
    }
}

@media(max-width:520px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
        width:80px;
        height:80px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        width:66px;
        max-height:66px;
    }
}


/* =========================================================
   05 강제노동·아동노동 금지 - PNG 80 x 80px 최종
   HTML 인라인 크기 제거 후 CSS에서만 제어
   ========================================================= */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
    width:148px;
    height:148px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
    display:block;
    width:80px;
    height:80px;
    max-width:none;
    max-height:none;
    object-fit:contain;
}

/* 화면이 작아져도 80px을 넘기지 않고 카드 안에서 안정적으로 표시 */
@media(max-width:860px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        width:72px;
        height:72px;
    }
}

@media(max-width:520px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        width:60px;
        height:60px;
    }
}


/* =========================================================
   05 강제노동·아동노동 금지 - 80x80 최종 보정
   ========================================================= */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:148px;
    height:148px;
    background:none;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
    display:block;
    flex:0 0 80px;
    width:80px;
    height:80px;
    min-width:80px;
    min-height:80px;
    max-width:80px;
    max-height:80px;
    object-fit:contain;
}

/* 태블릿 */
@media(max-width:860px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        flex-basis:72px;
        width:72px;
        height:72px;
        min-width:72px;
        min-height:72px;
        max-width:72px;
        max-height:72px;
    }
}

/* 모바일 */
@media(max-width:520px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon .hr-labor-icon{
        flex-basis:60px;
        width:60px;
        height:60px;
        min-width:60px;
        min-height:60px;
        max-width:60px;
        max-height:60px;
    }
}

/* =========================================================
   HUMAN RIGHTS - 8대 실천 항목 최종 레이아웃
   - 회색 배경 : 브라우저 가로 전체
   - PC : 4열 × 2줄
   - 카드 문구 : 기존 기본 카드 대비 약 2배 확대
   ========================================================= */

/* 가로 전체 회색 배경 */
#human-rights .hr-practice-section{
    position:relative;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    margin-top:10px;
    margin-bottom:62px;
    padding:72px 30px 78px;
    background:#F2F3F3;
}

#human-rights .hr-practice-inner{
    width:calc(100% - 60px);
    max-width:1860px;
    margin:0 auto;
}

/* 8대 실천 항목 타이틀 : '핵심 ESG 지표'와 동일한 크기 */
#human-rights .hr-practice-section .section-label{
    margin:0 0 28px;
    padding-top:12px;
    font-size:26px;
    line-height:1.3;
    letter-spacing:-.03em;
}

#human-rights .hr-practice-section .section-label::before{
    width:34px;
    height:3px;
}

/* PC : 4열 × 2줄 */
#human-rights .hr-practice-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
    margin:0;
}

/* 4열에 맞춰 세로 카드형으로 재정렬 */
#human-rights .hr-practice-grid .g-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    min-width:0;
    min-height:350px;
    padding:34px 30px 30px;
    border:1px solid #D9DEDC;
    border-radius:16px;
    background:#fff;
}

/* 기존 grid 위치값 해제 */
#human-rights .hr-practice-grid .g-card .card-icon,
#human-rights .hr-practice-grid .g-card .num,
#human-rights .hr-practice-grid .g-card h3,
#human-rights .hr-practice-grid .g-card p{
    grid-column:auto;
    grid-row:auto;
}

/* 아이콘 */
#human-rights .hr-practice-grid .g-card .card-icon{
    width:104px;
    height:104px;
    margin:0 0 24px;
    flex:0 0 auto;
    align-self:flex-start;
    justify-content:flex-start;
}

#human-rights .hr-practice-grid .g-card .card-icon svg{
    width:92px;
    height:92px;
}

/* 번호 */
#human-rights .hr-practice-grid .g-card .num{
    margin:0 0 13px;
    font-size:30px;
    line-height:1;
}

/* 제목 / 설명 : 직전 확대값의 1/2 크기 */
#human-rights .hr-practice-grid .g-card h3{
    margin:0 0 12px;
    font-size:17px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:-.025em;
    word-break:keep-all;
}

#human-rights .hr-practice-grid .g-card p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    font-weight:500;
    letter-spacing:-.015em;
    color:#525C58;
    word-break:keep-all;
}

/* 1500px 이하 : 글자만 조금 줄여 4열 유지 */
@media (max-width:1500px) and (min-width:1201px){
    #human-rights .hr-practice-section .section-label{
        font-size:26px;
    }

    #human-rights .hr-practice-grid{
        gap:18px;
    }

    #human-rights .hr-practice-grid .g-card{
        min-height:330px;
        padding:30px 24px 28px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon{
        width:90px;
        height:90px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:80px;
        height:80px;
    }

    #human-rights .hr-practice-grid .g-card .num{
        font-size:27px;
    }

    #human-rights .hr-practice-grid .g-card h3{
        font-size:17px;
    }

    #human-rights .hr-practice-grid .g-card p{
        font-size:14px;
    }
}

/* 태블릿 : 2열 */
@media (max-width:1200px){
    #human-rights .hr-practice-section{
        padding:58px 24px 64px;
    }

    #human-rights .hr-practice-inner{
        width:100%;
    }

    #human-rights .hr-practice-section .section-label{
        font-size:26px;
        margin-bottom:28px;
    }

    #human-rights .hr-practice-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    #human-rights .hr-practice-grid .g-card{
        min-height:300px;
        padding:28px 26px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon{
        width:82px;
        height:82px;
        margin-bottom:20px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:72px;
        height:72px;
    }

    #human-rights .hr-practice-grid .g-card .num{
        font-size:25px;
    }

    #human-rights .hr-practice-grid .g-card h3{
        font-size:17px;
    }

    #human-rights .hr-practice-grid .g-card p{
        font-size:14px;
    }
}

/* 모바일 : 1열 */
@media (max-width:760px){
    #human-rights .hr-practice-section{
        padding:44px 16px 50px;
        margin-bottom:45px;
    }

    #human-rights .hr-practice-section .section-label{
        font-size:23px;
        margin-bottom:24px;
    }

    #human-rights .hr-practice-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    #human-rights .hr-practice-grid .g-card{
        min-height:auto;
        padding:26px 22px;
        border-radius:14px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon{
        width:72px;
        height:72px;
        margin-bottom:18px;
    }

    #human-rights .hr-practice-grid .g-card .card-icon svg{
        width:62px;
        height:62px;
    }

    #human-rights .hr-practice-grid .g-card .num{
        font-size:22px;
    }

    #human-rights .hr-practice-grid .g-card h3{
        font-size:16px;
        margin-bottom:10px;
    }

    #human-rights .hr-practice-grid .g-card p{
        font-size:13px;
        line-height:1.65;
    }
}

/* =========================================================
   HUMAN RIGHTS - 8대 실천 항목 아이콘 / 정렬 최종 보정
   - 검정 포인트 제거 : VISER Green 단색
   - 2번째 줄(05~08) 아이콘 박스 크기 통일
   - 05 아이콘 : /theme/basic/img/esg/labor.png 사용
   - 제목/설명 시작 위치 통일
   ========================================================= */

/* 모든 SVG 아이콘의 검정 포인트 제거 */
#human-rights .hr-practice-grid .g-card .card-icon svg path,
#human-rights .hr-practice-grid .g-card .card-icon svg circle,
#human-rights .hr-practice-grid .g-card .card-icon svg rect,
#human-rights .hr-practice-grid .g-card .card-icon svg line,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card .card-icon svg ellipse,
#human-rights .hr-practice-grid .g-card .card-icon svg path:last-child,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline:last-child,
#human-rights .hr-practice-grid .g-card .card-icon svg line:last-child,
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card .card-icon svg [stroke="black"]{
    stroke:#0E7E6A;
    stroke-width:2.2px;
}

/* 검정색으로 채워진 포인트도 녹색으로 통일 */
#human-rights .hr-practice-grid .g-card .card-icon svg .black-fill,
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#111"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#161A19"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="#000"],
#human-rights .hr-practice-grid .g-card .card-icon svg [fill="black"]{
    fill:#0E7E6A;
}

/* accent-fill도 테두리까지 녹색으로 통일 */
#human-rights .hr-practice-grid .g-card .card-icon svg .accent-fill{
    fill:#0E7E6A;
    stroke:#0E7E6A;
}

/*
 * 기존 CSS에서 05, 07 아이콘만 별도로 크게 잡혀 있어
 * 2번째 줄의 숫자/제목 시작 위치가 달라지는 부분을 동일 크기로 통일
 */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
    width:104px;
    height:104px;
    margin:0 0 24px;
    align-self:flex-start;
    justify-content:flex-start;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg{
    width:92px;
    height:92px;
}

/* 07번의 별도 검정 포인트 규칙도 녹색으로 최종 통일 */
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .accent-stroke,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .accent-black,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [stroke="black"]{
    stroke:#0E7E6A;
    stroke-width:2.2px;
}

#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg .black-fill,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#111"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#161A19"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="#000"],
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg [fill="black"]{
    fill:#0E7E6A;
}

/* 05 : 외부 PNG 아이콘 사용 */
#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon{
    position:relative;
    background:transparent;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg{
    display:none;
}

#human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon::before{
    content:"";
    display:block;
    width:92px;
    height:92px;
    background:url('/theme/basic/img/esg/labor.png') no-repeat left center;
    background-size:contain;
}

/* 번호 / 제목 / 설명 시작 위치를 모든 카드에서 동일하게 맞춤 */
#human-rights .hr-practice-grid .g-card .num{
    min-height:30px;
}

#human-rights .hr-practice-grid .g-card h3{
    min-height:48px;
}

/* 중형 화면에서도 05/07 아이콘 크기 동일 유지 */
@media (max-width:1500px) and (min-width:1201px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:90px;
        height:90px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon::before{
        width:80px;
        height:80px;
    }
}

/* 태블릿 */
@media (max-width:1200px){
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:82px;
        height:82px;
        margin-bottom:20px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon::before{
        width:72px;
        height:72px;
    }
}

/* 모바일 : 자연스러운 높이 사용 */
@media (max-width:760px){
    #human-rights .hr-practice-grid .g-card .num,
    #human-rights .hr-practice-grid .g-card h3{
        min-height:0;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon{
        width:72px;
        height:72px;
        margin-bottom:18px;
    }

    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg,
    #human-rights .hr-practice-grid .g-card:nth-child(5) .card-icon::before{
        width:62px;
        height:62px;
    }
}

/* =========================================================
   HUMAN RIGHTS - 8대 실천 항목 텍스트 크기 최종 보정
   - 제목 24px
   - 설명 18px
   ========================================================= */
#human-rights .hr-practice-grid .g-card h3{
    font-size:24px;
    line-height:1.35;
}

#human-rights .hr-practice-grid .g-card p{
    font-size:18px;
    line-height:1.6;
}

/* 태블릿 */
@media (max-width:1200px){
    #human-rights .hr-practice-grid .g-card h3{
        font-size:26px;
    }

    #human-rights .hr-practice-grid .g-card p{
        font-size:18px;
    }
}

/* 모바일 */
@media (max-width:760px){
    #human-rights .hr-practice-grid .g-card h3{
        font-size:22px;
    }

    #human-rights .hr-practice-grid .g-card p{
        font-size:16px;
    }
}

/* =========================================================
   ESG SCROLL REVEAL ANIMATION
   - 각 단락이 화면에 들어오면 아래에서 위로 자연스럽게 등장
   - 카드/지표는 순차 등장
   - 1회 실행
   ========================================================= */

.esg-page .esg-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .72s ease,
        transform .72s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform;
}

.esg-page .esg-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* 카드류는 조금 더 짧은 이동거리 */
.esg-page .g-card.esg-reveal,
.esg-page .kpi-card.esg-reveal,
.esg-page .goal-stat-card.esg-reveal,
.esg-page .rm-step.esg-reveal,
.esg-page .acc-item.esg-reveal{
    transform:translateY(22px);
}

.esg-page .g-card.esg-reveal.is-visible,
.esg-page .kpi-card.esg-reveal.is-visible,
.esg-page .goal-stat-card.esg-reveal.is-visible,
.esg-page .rm-step.esg-reveal.is-visible,
.esg-page .acc-item.esg-reveal.is-visible{
    transform:translateY(0);
}

/* 모바일에서는 이동거리를 줄여 과한 느낌 방지 */
@media(max-width:760px){
    .esg-page .esg-reveal{
        transform:translateY(18px);
        transition-duration:.58s;
    }

    .esg-page .g-card.esg-reveal,
    .esg-page .kpi-card.esg-reveal,
    .esg-page .goal-stat-card.esg-reveal,
    .esg-page .rm-step.esg-reveal,
    .esg-page .acc-item.esg-reveal{
        transform:translateY(14px);
    }
}

/* 접근성 : 모션 최소화 설정 사용자는 즉시 노출 */
@media (prefers-reduced-motion: reduce){
    .esg-page .esg-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* =========================================================
   ESG 아이콘 / 스크롤 애니메이션 최종 보정
   ========================================================= */

/* 8대 실천 항목 SVG 아이콘 선 굵기 2px */
#human-rights .hr-practice-grid .g-card .card-icon svg path,
#human-rights .hr-practice-grid .g-card .card-icon svg circle,
#human-rights .hr-practice-grid .g-card .card-icon svg rect,
#human-rights .hr-practice-grid .g-card .card-icon svg line,
#human-rights .hr-practice-grid .g-card .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card .card-icon svg ellipse{
    stroke-width:2px;
}

/* 스크롤 진입 시 조금 더 빠르고 자연스럽게 */
.esg-page .esg-reveal{
    transform:translateY(20px);
    transition:
        opacity .48s ease,
        transform .48s cubic-bezier(.22,.61,.36,1);
}

.esg-page .g-card.esg-reveal,
.esg-page .kpi-card.esg-reveal,
.esg-page .goal-stat-card.esg-reveal,
.esg-page .rm-step.esg-reveal,
.esg-page .acc-item.esg-reveal{
    transform:translateY(16px);
}

@media(max-width:760px){
    .esg-page .esg-reveal{
        transform:translateY(14px);
        transition-duration:.42s;
    }

    .esg-page .g-card.esg-reveal,
    .esg-page .kpi-card.esg-reveal,
    .esg-page .goal-stat-card.esg-reveal,
    .esg-page .rm-step.esg-reveal,
    .esg-page .acc-item.esg-reveal{
        transform:translateY(10px);
    }
}

/* =========================================================
   HUMAN RIGHTS - 아이콘 선 굵기 07번 기준 통일
   - 01~04, 06~08 SVG 아이콘을 07번과 동일한 4px 선으로 통일
   - 05번은 labor.png 원본 이미지 사용
   ========================================================= */

/* SVG 자체 기본 선 굵기 */
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg{
    stroke-width:4px;
}

/* SVG 내부 모든 선 요소 동일 굵기 적용 */
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg path,
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg circle,
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg rect,
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg line,
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card:not(:nth-child(5)) .card-icon svg ellipse{
    stroke-width:4px;
    stroke:#0E7E6A;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

/* 07번도 기준값을 명시해 전체와 완전히 동일하게 유지 */
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg path,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg circle,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg rect,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg line,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg polyline,
#human-rights .hr-practice-grid .g-card:nth-child(7) .card-icon svg ellipse{
    stroke-width:4px;
    stroke:#0E7E6A;
}

/* =========================================================
   ENVIRONMENT - 환경 실천 항목
   - 인권 8대 실천 항목과 동일한 카드 유형
   - PC 3열 × 2줄
   - 회색 배경 가로 FULL
   - 제목 24px / 설명 18px
   - 스크롤 애니메이션은 기존 #env-grid reveal과 연동
   ========================================================= */

#environment .env-practice-section{
    position:relative;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    margin-top:10px;
    margin-bottom:62px;
    padding:72px 30px 78px;
    background:#F2F3F3;
}

#environment .env-practice-inner{
    width:calc(100% - 60px);
    max-width:1860px;
    margin:0 auto;
}

#environment .env-practice-section .section-label{
    margin:0 0 28px;
    padding-top:12px;
    font-size:26px;
    line-height:1.3;
    letter-spacing:-.03em;
}

#environment .env-practice-section .section-label::before{
    width:34px;
    height:3px;
}

#environment .env-practice-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    margin:0;
}

#environment .env-practice-grid .g-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    min-width:0;
    min-height:350px;
    padding:34px 30px 30px;
    border:1px solid #D9DEDC;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}

#environment .env-practice-grid .g-card::after{
    display:none;
}

#environment .env-practice-grid .g-card .card-icon,
#environment .env-practice-grid .g-card .num,
#environment .env-practice-grid .g-card h3,
#environment .env-practice-grid .g-card p{
    grid-column:auto;
    grid-row:auto;
}

#environment .env-practice-grid .g-card .card-icon{
    width:104px;
    height:104px;
    margin:0 0 24px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    align-self:flex-start;
    justify-content:flex-start;
    flex:0 0 auto;
}

#environment .env-practice-grid .g-card .card-icon svg{
    display:block;
    width:92px;
    height:92px;
    fill:none;
    stroke:#0E7E6A;
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

#environment .env-practice-grid .g-card .card-icon svg path,
#environment .env-practice-grid .g-card .card-icon svg circle,
#environment .env-practice-grid .g-card .card-icon svg rect,
#environment .env-practice-grid .g-card .card-icon svg line,
#environment .env-practice-grid .g-card .card-icon svg polyline,
#environment .env-practice-grid .g-card .card-icon svg ellipse{
    stroke:#0E7E6A;
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

#environment .env-practice-grid .g-card .num{
    display:block;
    min-height:30px;
    margin:0 0 13px;
    font-size:30px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
    color:#0E7E6A;
}

#environment .env-practice-grid .g-card h3{
    min-height:48px;
    margin:0 0 12px;
    font-size:24px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.03em;
    color:#101312;
    word-break:keep-all;
}

#environment .env-practice-grid .g-card p{
    margin:0;
    font-size:18px;
    line-height:1.6;
    font-weight:500;
    letter-spacing:-.02em;
    color:#525C58;
    word-break:keep-all;
}

/* 환경 카드 애니메이션 이동거리도 인권 카드와 동일 */
#environment .env-practice-grid .g-card.esg-reveal{
    transform:translateY(16px);
}

#environment .env-practice-grid .g-card.esg-reveal.is-visible{
    transform:translateY(0);
}

@media(max-width:1200px){
    #environment .env-practice-section{
        padding:58px 24px 64px;
    }

    #environment .env-practice-inner{
        width:100%;
    }

    #environment .env-practice-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    #environment .env-practice-grid .g-card{
        min-height:300px;
        padding:28px 26px;
    }

    #environment .env-practice-grid .g-card .card-icon{
        width:82px;
        height:82px;
        margin-bottom:20px;
    }

    #environment .env-practice-grid .g-card .card-icon svg{
        width:72px;
        height:72px;
    }

    #environment .env-practice-grid .g-card h3{
        font-size:22px;
    }

    #environment .env-practice-grid .g-card p{
        font-size:17px;
    }
}

@media(max-width:760px){
    #environment .env-practice-section{
        padding:44px 16px 50px;
        margin-bottom:45px;
    }

    #environment .env-practice-section .section-label{
        font-size:23px;
        margin-bottom:24px;
    }

    #environment .env-practice-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    #environment .env-practice-grid .g-card{
        min-height:auto;
        padding:26px 22px;
        border-radius:14px;
    }

    #environment .env-practice-grid .g-card .card-icon{
        width:72px;
        height:72px;
        margin-bottom:18px;
    }

    #environment .env-practice-grid .g-card .card-icon svg{
        width:62px;
        height:62px;
    }

    #environment .env-practice-grid .g-card .num{
        min-height:0;
        font-size:22px;
    }

    #environment .env-practice-grid .g-card h3{
        min-height:0;
        font-size:20px;
        margin-bottom:10px;
    }

    #environment .env-practice-grid .g-card p{
        font-size:16px;
        line-height:1.65;
    }
}

/* =========================================================
   ENVIRONMENT - 글자 크기 최종 보정
   1) 핵심 ESG 지표 : 인권경영 카드와 동일한 글자 크기
   2) 탄소중립 로드맵 설명 : 16px
   3) 환경경영 목표 지표 : 제목 24px / 설명 18px
   ========================================================= */

/* 핵심 ESG 지표 : 인권경영 카드와 동일하게 */
#environment .kpi-card{
    min-height:440px;
}

#environment .kpi-card .kpi-main{
    margin-bottom:12px;
    font-size:32px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.035em;
    color:#171A19;
}

#environment .kpi-card .kpi-sub{
    max-width:92%;
    font-size:24px;
    line-height:1.55;
    font-weight:500;
    letter-spacing:-.03em;
    color:#5F6965;
}

/* 탄소중립 로드맵 하단 설명 */
#environment .rm-step li{
    font-size:16px;
    line-height:1.8;
}

/* 환경경영 목표 지표 */
#environment .goal-stat-card .gs-main{
    font-size:24px;
    line-height:1.45;
    font-weight:800;
    margin-bottom:9px;
}

#environment .goal-stat-card .gs-sub{
    font-size:18px;
    line-height:1.6;
}

/* 태블릿 */
@media(max-width:1200px){
    #environment .kpi-card{
        min-height:auto;
    }

    #environment .kpi-card .kpi-main{
        font-size:28px;
    }

    #environment .kpi-card .kpi-sub{
        max-width:100%;
        font-size:20px;
    }

    #environment .goal-stat-card .gs-main{
        font-size:21px;
    }

    #environment .goal-stat-card .gs-sub{
        font-size:16px;
    }
}

/* 모바일 */
@media(max-width:760px){
    #environment .kpi-card .kpi-main{
        font-size:24px;
    }

    #environment .kpi-card .kpi-sub{
        font-size:18px;
    }

    #environment .rm-step li{
        font-size:15px;
    }

    #environment .goal-stat-card .gs-main{
        font-size:20px;
    }

    #environment .goal-stat-card .gs-sub{
        font-size:15px;
    }
}

/* =========================================================
   SAFETY / SECURITY / SUPPLY CHAIN - KPI typography 통일
   인권경영/환경경영과 동일한 크기
   - 주요 제목 32px
   - 설명 24px
   ========================================================= */

#safety .kpi-card,
#security .kpi-card,
#supply-chain .kpi-card{
    min-height:440px;
}

#safety .kpi-card .kpi-main,
#security .kpi-card .kpi-main,
#supply-chain .kpi-card .kpi-main{
    margin-bottom:12px;
    font-size:32px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.035em;
    color:#171A19;
}

#safety .kpi-card .kpi-sub,
#security .kpi-card .kpi-sub,
#supply-chain .kpi-card .kpi-sub{
    max-width:92%;
    font-size:24px;
    line-height:1.55;
    font-weight:500;
    letter-spacing:-.03em;
    color:#5F6965;
}

/* =========================================================
   SECURITY - 정보보안 실천 항목
   - 8대 실천 항목과 동일한 카드 유형
   - PC 4열
   - 회색 배경 가로 FULL
   - 제목 24px / 설명 18px
   - 아이콘 4px
   - 기존 스크롤 reveal 효과 연동
   ========================================================= */

#security .sec-practice-section{
    position:relative;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    margin-top:10px;
    margin-bottom:62px;
    padding:72px 30px 78px;
    background:#F2F3F3;
}

#security .sec-practice-inner{
    width:calc(100% - 60px);
    max-width:1860px;
    margin:0 auto;
}

#security .sec-practice-section .section-label{
    margin:0 0 28px;
    padding-top:12px;
    font-size:26px;
    line-height:1.3;
    letter-spacing:-.03em;
}

#security .sec-practice-section .section-label::before{
    width:34px;
    height:3px;
}

#security .sec-practice-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
    margin:0;
}

#security .sec-practice-grid .g-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    min-width:0;
    min-height:350px;
    padding:34px 30px 30px;
    border:1px solid #D9DEDC;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
}

#security .sec-practice-grid .g-card::after{
    display:none;
}

#security .sec-practice-grid .g-card .card-icon,
#security .sec-practice-grid .g-card .num,
#security .sec-practice-grid .g-card h3,
#security .sec-practice-grid .g-card p{
    grid-column:auto;
    grid-row:auto;
}

#security .sec-practice-grid .g-card .card-icon{
    width:104px;
    height:104px;
    margin:0 0 24px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    align-self:flex-start;
    justify-content:flex-start;
    flex:0 0 auto;
}

#security .sec-practice-grid .g-card .card-icon svg{
    display:block;
    width:92px;
    height:92px;
    fill:none;
    stroke:#0E7E6A;
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

#security .sec-practice-grid .g-card .card-icon svg path,
#security .sec-practice-grid .g-card .card-icon svg circle,
#security .sec-practice-grid .g-card .card-icon svg rect,
#security .sec-practice-grid .g-card .card-icon svg line,
#security .sec-practice-grid .g-card .card-icon svg polyline,
#security .sec-practice-grid .g-card .card-icon svg ellipse{
    stroke:#0E7E6A;
    stroke-width:4px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

#security .sec-practice-grid .g-card .num{
    display:block;
    min-height:30px;
    margin:0 0 13px;
    font-size:30px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
    color:#0E7E6A;
}

#security .sec-practice-grid .g-card h3{
    min-height:48px;
    margin:0 0 12px;
    font-size:24px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.03em;
    color:#101312;
    word-break:keep-all;
}

#security .sec-practice-grid .g-card p{
    margin:0;
    font-size:18px;
    line-height:1.6;
    font-weight:500;
    letter-spacing:-.02em;
    color:#525C58;
    word-break:keep-all;
}

/* 정보보안 카드 reveal 이동거리도 기존 실천 카드와 동일 */
#security .sec-practice-grid .g-card.esg-reveal{
    transform:translateY(16px);
}

#security .sec-practice-grid .g-card.esg-reveal.is-visible{
    transform:translateY(0);
}

/* 태블릿 */
@media(max-width:1200px){
    #safety .kpi-card,
    #security .kpi-card,
    #supply-chain .kpi-card{
        min-height:auto;
    }

    #safety .kpi-card .kpi-main,
    #security .kpi-card .kpi-main,
    #supply-chain .kpi-card .kpi-main{
        font-size:28px;
    }

    #safety .kpi-card .kpi-sub,
    #security .kpi-card .kpi-sub,
    #supply-chain .kpi-card .kpi-sub{
        max-width:100%;
        font-size:20px;
    }

    #security .sec-practice-section{
        padding:58px 24px 64px;
    }

    #security .sec-practice-inner{
        width:100%;
    }

    #security .sec-practice-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    #security .sec-practice-grid .g-card{
        min-height:300px;
        padding:28px 26px;
    }

    #security .sec-practice-grid .g-card .card-icon{
        width:82px;
        height:82px;
        margin-bottom:20px;
    }

    #security .sec-practice-grid .g-card .card-icon svg{
        width:72px;
        height:72px;
    }

    #security .sec-practice-grid .g-card h3{
        font-size:22px;
    }

    #security .sec-practice-grid .g-card p{
        font-size:17px;
    }
}

/* 모바일 */
@media(max-width:760px){
    #safety .kpi-card .kpi-main,
    #security .kpi-card .kpi-main,
    #supply-chain .kpi-card .kpi-main{
        font-size:24px;
    }

    #safety .kpi-card .kpi-sub,
    #security .kpi-card .kpi-sub,
    #supply-chain .kpi-card .kpi-sub{
        font-size:18px;
    }

    #security .sec-practice-section{
        padding:44px 16px 50px;
        margin-bottom:45px;
    }

    #security .sec-practice-section .section-label{
        font-size:23px;
        margin-bottom:24px;
    }

    #security .sec-practice-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    #security .sec-practice-grid .g-card{
        min-height:auto;
        padding:26px 22px;
        border-radius:14px;
    }

    #security .sec-practice-grid .g-card .card-icon{
        width:72px;
        height:72px;
        margin-bottom:18px;
    }

    #security .sec-practice-grid .g-card .card-icon svg{
        width:62px;
        height:62px;
    }

    #security .sec-practice-grid .g-card .num{
        min-height:0;
        font-size:22px;
    }

    #security .sec-practice-grid .g-card h3{
        min-height:0;
        font-size:20px;
        margin-bottom:10px;
    }

    #security .sec-practice-grid .g-card p{
        font-size:16px;
        line-height:1.65;
    }
}

/* =========================================================
   SAFETY - 8대 실천 세부 방침 글자 크기
   - 제목 24px
   - 답변 18px
   ========================================================= */

#safety .acc-title{
    font-size:24px;
    line-height:1.45;
    font-weight:700;
}

#safety .acc-body-inner{
    font-size:18px;
    line-height:1.8;
}

/* 태블릿 */
@media(max-width:1200px){
    #safety .acc-title{
        font-size:22px;
    }

    #safety .acc-body-inner{
        font-size:17px;
    }
}

/* 모바일 */
@media(max-width:760px){
    #safety .acc-title{
        font-size:19px;
    }

    #safety .acc-body-inner{
        font-size:16px;
    }
}

/* =========================================================
   SUPPLY CHAIN - 협력사 행동 기준 글자 크기
   - 제목 24px
   - 답변 18px
   ========================================================= */

#supply-chain .acc-title{
    font-size:24px;
    line-height:1.45;
    font-weight:700;
}

#supply-chain .acc-body-inner{
    font-size:18px;
    line-height:1.8;
}

/* 태블릿 */
@media(max-width:1200px){
    #supply-chain .acc-title{
        font-size:22px;
    }

    #supply-chain .acc-body-inner{
        font-size:17px;
    }
}

/* 모바일 */
@media(max-width:760px){
    #supply-chain .acc-title{
        font-size:19px;
    }

    #supply-chain .acc-body-inner{
        font-size:16px;
    }
}

/* =========================================================
   ACCORDION DIVIDER LINE FINAL FIX
   - 항목 하단선 대신 다음 항목의 상단선으로 구분선을 그림
   - 스크롤 등장 transform 중 이전 항목의 border가 덮이는 현상 방지
   ========================================================= */
.esg-page .acc-item{
    border-bottom:0;
}

.esg-page .acc-item + .acc-item{
    border-top:1px solid #DFE7E3;
}

.esg-page .acc-item:last-child{
    border-bottom:1px solid #DFE7E3;
}


/* =========================================================
   ESG ACCORDION FINAL STABILITY FIX
   - fixed 헤더/고정 ESG 탭과 max-height/transform/smooth 애니메이션의
     브라우저 합성 충돌로 발생하는 잔상 방지
   - 안전보건 / 협력사 윤리 아코디언에만 적용
   ========================================================= */

/* 아코디언 항목은 reveal/compositor 레이어를 만들지 않음 */
.esg-page .accordion .acc-item,
.esg-page .accordion .acc-item.esg-reveal,
.esg-page .accordion .acc-item.esg-reveal.is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
}

/* 높이 애니메이션을 완전히 제거하고 display 방식으로 열고 닫음 */
.esg-page .accordion .acc-body{
    display:none;
    max-height:none !important;
    overflow:visible !important;
    transition:none !important;
    will-change:auto !important;
}

.esg-page .accordion .acc-item.open .acc-body{
    display:block;
}

/* 화살표 회전만 유지 - 레이아웃에는 영향 없음 */
.esg-page .accordion .acc-chevron{
    transition:transform .18s ease;
}

/* 고정 헤더 아래로 포커스 이동 시 가려지지 않도록 여유만 유지 */
.esg-page .accordion .acc-item{
    scroll-margin-top:180px;
}

@media(max-width:1025px){
    .esg-page .accordion .acc-item{
        scroll-margin-top:90px;
    }
}

@media(max-width:700px){
    .esg-page .accordion .acc-item{
        scroll-margin-top:20px;
    }
}