@charset "utf-8";

:root {
    --philosophy-icon-size: clamp(40px, calc( 88 / var(--inner) * 100vw ), 88px);
}

/* ──────────────────────────────────────────
   Philosophy Cards Grid
────────────────────────────────────────── */
.values {background: #fff; padding: var(--section-padding-t) var(--inner-padding-l);}

.philosophy-list {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); justify-content: center; gap: 1.25rem clamp(12px, 3.125vw, 60px);}

.card {padding: 2.5rem 1.875rem; border-radius: 1.875rem; color: var(--white); text-align: center;}
.card:nth-child(odd) {background: var(--green800);}
.card:nth-child(even) {background: var(--green600);}

.card .icon-area {width: var(--philosophy-icon-size); height: auto; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: clamp(32px, 3.75rem, 60px); margin: 0 auto 0.25em;}

.card .icon-area svg, 
.card .icon-area svg path {transition: all 0.15s ease-out;}
.card .icon-area svg {width: 100%; height: 100%; object-fit: contain;}
.card:hover .icon-area svg {transform: translateY(clamp(-5px, -0.09em, 0px));}
.card:hover .icon-area svg path:not(.path-circle,.path-check) {stroke: #FFE032;}
.card:hover .icon-area svg path:where(.path-circle,.path-check) {fill: #FFE032;}

.title-en {font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.5; letter-spacing: 0;}

.card .top + .desc {margin-top: clamp(10px, 1.6em, 24px);}
.desc {white-space: pre-line;}

.lower-bg {width: 100%; height: auto; aspect-ratio: 1920/460; position: relative; overflow: hidden;}
.lower-bg img {width: 100%; height: 100%; object-fit: cover;}


/* 영문 */
html:lang(en) .card .title {display: none;}
/* //영문 */





@media (min-width:601px) and (max-width:1280px){
    .philosophy-list {grid-template-columns: repeat(6, 1fr);}
    .card:nth-child(-n+3) {grid-column: span 2;}
    .card:nth-child(4) {grid-column: 2 / span 2;}
    .card:nth-child(5) {grid-column: 4 / span 2;}
}

@media (min-width:376px) and (max-width:600px){
    .philosophy-list {grid-template-columns: repeat(4, 1fr);}
    .card:nth-child(-n+4) {grid-column: span 2;}
    .card:nth-child(5) {grid-column: 2 / span 2;}

    .card:nth-child(3) {background: var(--green600);}
    .card:nth-child(4) {background: var(--green800);}
    .card:nth-child(5) {background: var(--green600);}
}

@media (max-width:375px){
    .philosophy-list {grid-template-columns: unset;}
}