@charset "UTF-8";

/* /ev/intro (충전 사업 소개) 페이지 전용 스타일 */

.box-ev-intro .area-item + .area-item { margin-top: 120px; }

/* ====== 제목 영역 ====== */
.ev-title { text-align: center; margin-bottom: 56px; }

.ev-title-main {
    font-size: 3.6rem; line-height: 4.8rem; font-weight: 800;
    color: #1c3a73;
    letter-spacing: -.02em;
    margin: 0 0 18px;
}
.ev-title-main .primary-gra {
    background: linear-gradient(to right, #2e7ce0 -3%, #20c161 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.ev-title-desc {
    font-size: 1.7rem; line-height: 2.8rem; color: #5b6b85;
    margin: 0;
}

/* ====== Mobility 카드 영역 ====== */
.ev-mobility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.ev-mobility-card {
    position: relative;
    padding: 32px 36px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f5faff 0%, #ffffff 60%);
    border: 1px solid #e3edfa;
    box-shadow: 0 10px 30px rgba(46, 124, 224, 0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
}
.ev-mobility-card.up {
    background: linear-gradient(135deg, #f3fcf6 0%, #ffffff 60%);
    border-color: #d8f0e0;
    box-shadow: 0 10px 30px rgba(32, 193, 97, 0.08);
}
.ev-mobility-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(46, 124, 224, 0.14);
}
.ev-mobility-card.up:hover {
    box-shadow: 0 18px 40px rgba(32, 193, 97, 0.16);
}

.mobility-head { display: flex; align-items: center; gap: 16px; }
.mobility-icon {
    flex: none;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(46, 124, 224, 0.12);
}
.ev-mobility-card.up .mobility-icon { box-shadow: 0 6px 14px rgba(32, 193, 97, 0.16); }
.mobility-icon svg { width: 28px; height: 28px; }

.mobility-text { display: flex; flex-direction: column; gap: 4px; }
.mobility-text .label {
    font-size: 1.4rem; line-height: 1.6rem;
    color: #2e7ce0; font-weight: 700; letter-spacing: .02em;
}
.ev-mobility-card.up .mobility-text .label { color: #20c161; }
.mobility-text .title {
    font-size: 2.2rem; line-height: 3rem; font-weight: 700; color: #1c3a73;
}

/* 막대 차트 */
.mobility-bars {
    margin-top: 28px;
    display: flex; align-items: flex-end; gap: 10px;
    height: 88px;
}
.mobility-bars span {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #cfe1f7 0%, #e9f1fc 100%);
    transition: height .6s cubic-bezier(.2,.8,.2,1);
}
.mobility-bars.down span:nth-child(1) { height: 80%; }
.mobility-bars.down span:nth-child(2) { height: 58%; }
.mobility-bars.down span:nth-child(3) { height: 38%; }
.mobility-bars.down span:nth-child(4) { height: 22%; }
.mobility-bars.up span {
    background: linear-gradient(180deg, #cdebd7 0%, #ebf8ef 100%);
}
.mobility-bars.up span:nth-child(1) { height: 28%; }
.mobility-bars.up span:nth-child(2) { height: 48%; }
.mobility-bars.up span:nth-child(3) { height: 68%; }
.mobility-bars.up span:nth-child(4) { height: 90%; }

.ev-mobility-card:hover .mobility-bars.down span:nth-child(1) { height: 86%; }
.ev-mobility-card:hover .mobility-bars.down span:nth-child(4) { height: 18%; }
.ev-mobility-card:hover .mobility-bars.up span:nth-child(1) { height: 24%; }
.ev-mobility-card:hover .mobility-bars.up span:nth-child(4) { height: 96%; }

/* ====== Energy Transition flow ====== */
.ev-transition-flow {
    margin-top: 56px;
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}
.ev-trans-step {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3edfa;
    box-shadow: 0 6px 20px rgba(28, 58, 115, 0.06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ev-trans-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(28, 58, 115, 0.12);
}
.ev-trans-step .step-icon {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f0f6ff;
    display: inline-flex; align-items: center; justify-content: center;
}
.ev-trans-step.num02 .step-icon,
.ev-trans-step.num03 .step-icon { background: #ebf8ef; }
.ev-trans-step .step-icon svg { width: 20px; height: 20px; }
.ev-trans-step .step-label {
    font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #1c3a73;
}
.ev-trans-step .step-bar { color: #c9d4e6; font-weight: 400; }
.ev-trans-step .step-value {
    font-size: 1.5rem; line-height: 2rem; color: #4a5b7a;
}
.ev-trans-arrow {
    display: inline-flex; align-items: center;
    width: 40px;
}
.ev-trans-arrow svg { width: 100%; height: auto; }

/* ====== 추진 방향 카드 ====== */
.ev-direction-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    list-style: none;
}
.ev-direction-card {
    position: relative;
    padding: 40px 28px 36px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e6efe9;
    box-shadow: 0 10px 30px rgba(32, 193, 97, 0.06);
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ev-direction-card:hover {
    transform: translateY(-8px);
    border-color: #b9e2c6;
    box-shadow: 0 22px 44px rgba(32, 193, 97, 0.16);
}
.dir-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #ebf8ef;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: transform .3s ease;
}
.ev-direction-card:hover .dir-icon { transform: scale(1.06); }
.dir-icon svg { width: 30px; height: 30px; }
.dir-title {
    display: block;
    font-size: 2rem; line-height: 2.8rem; font-weight: 700; color: #1c3a73;
    margin-bottom: 10px;
}
.dir-text {
    display: block;
    font-size: 1.5rem; line-height: 2.4rem; color: #6b7a93;
}

/* ====== Responsive ====== */
@media (max-width: 1024px) {
    .ev-title-main { font-size: 3rem; line-height: 4rem; }
    .ev-direction-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .box-ev-intro .area-item + .area-item { margin-top: 80px; }
    .ev-title { margin-bottom: 36px; }
    .ev-title-main { font-size: 2.4rem; line-height: 3.4rem; }
    .ev-title-desc { font-size: 1.5rem; line-height: 2.4rem; }

    .ev-mobility-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    .ev-mobility-card { padding: 24px; border-radius: 18px; }
    .mobility-text .title { font-size: 1.8rem; line-height: 2.4rem; }
    .mobility-bars { height: 72px; margin-top: 20px; }

    .ev-transition-flow { margin-top: 36px; flex-direction: column; gap: 10px; }
    .ev-trans-step { width: 100%; justify-content: center; padding: 12px 18px; }
    .ev-trans-arrow { transform: rotate(90deg); width: 28px; }

    .ev-direction-grid { margin-top: 32px; gap: 16px; }
    .ev-direction-card { padding: 32px 20px 28px; }
    .dir-title { font-size: 1.8rem; line-height: 2.4rem; }
}