/* Ethics Page Styles */

/* Hero Section - History Page Style */
.ethics-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px; /* tighten space above Ethical Management */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
}

.hero-title {
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 0.5rem; /* 간격 축소 */
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.4rem; /* 간격 축소 */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.8s forwards;
}

.hero-description {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0; /* 위아래 여백 최소화 */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.1s forwards;
}

.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.scroll-arrow {
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
}

.scroll-arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

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

    60% {
        transform: translateY(-5px);
    }
}

/* Main Content Section */
.ethics-main-content {
    margin-bottom: 60px;
    text-align: center;
}

.content-intro {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.intro-subtitle {
    font-size: 2rem;
    color: #1c86e5; /* theme blue */
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.intro-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #333;
}

.intro-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.main-content {
    padding-top: 50px; /* reduce gap above Ethical Management */
}

/* Core Values Section – stacked rows + big center hub */
.core-values-section {
    background: #ffffff; /* solid white background */
    padding: 50px 0 70px;
    margin-bottom: 30px; /* reduced space above 윤리강령 */
    will-change: auto;
}

.values-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin: 0 auto 24px;
}

.values-row.top {
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: center;
}

.values-row.top .hub-circle {
    width: 360px;
    height: 360px;
}

.values-row.top .value-card {
    width: 180px;
    height: 180px;
}

.values-row.bottom { margin-top: 18px; }

/* Nudge side cards on the top row slightly outward */
.values-row.top .value-card:first-child { /* 고객 카드 */
    margin-right: 44px; /* push left card a bit further left */
}
.values-row.top .value-card:last-child { /* 구성원 카드 */
    margin-left: 44px; /* push right card a bit further right */
}

/* Big center hub */
.ethics-hub { display: flex; justify-content: center; margin: 0 auto; }
.hub-circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: #ffffff; /* plain white background */
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08); /* neutral soft shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #0b4591;
    transition: box-shadow 0.3s ease; /* enable smooth hover */
}
.hub-circle strong { font-size: 1.05rem; letter-spacing: .28em; color: #0b61d6; margin-bottom: 10px; }
.hub-circle span { font-size: 1.7rem; font-weight: 900; color: #0b4591; }

/* Circular value cards – vivid blue */
.value-card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b61d6 0%, #1b8cff 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 44px rgba(11, 97, 214, 0.35);
    border: 6px solid rgba(255,255,255,0.14);
    padding: 16px;
}
.value-card i { font-size: 34px; margin-bottom: 10px; opacity: 1; }
.value-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.value-card p { font-size: .92rem; line-height: 1.35; margin: 0; color: rgba(255,255,255,.98); }
.value-card:hover { transform: none !important; box-shadow: inherit !important; }
/* Make sure previous grid/orbit styles don't interfere */
.values-grid, .ethics-orbit { display: none; }

/* Company Ethic Section */
.company-ethics-section {
    text-align: center;
    margin-bottom: 80px;
}

.company-ethics-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 60px;
}

.ethics-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 40px; /* row x column gap */
    max-width: 1140px;
    margin: 0 auto;
}

.ethics-item {
    flex: 1;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 40px 30px;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(11, 97, 214, 0.08), 0 2px 10px rgba(0,0,0,.05);
    position: relative;
    text-align: left;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    min-height: 180px; /* unify card height */
    display: flex;
    flex-direction: column;
}

/* Header row for number + title */
.item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.item-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0b4591;
}

.ethics-item p {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #eef3fb;
    flex-grow: 1; /* fill remaining to keep heights even */
}

.item-number {
    position: static;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0b61d6 0%, #1b8cff 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: bold;
    box-shadow: 0 8px 22px rgba(27, 140, 255, 0.28), 0 0 0 6px rgba(27, 140, 255, 0.08);
    border: 1px solid rgba(255,255,255,0.65);
}

.ethics-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(11, 97, 214, 0.18), 0 6px 18px rgba(0,0,0,.06);
}
/* initial states: hidden until in-view */
.core-values-section .hub-circle,
.core-values-section .value-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Prevent hover motion */
.core-values-section .value-card:hover {
  transform: none !important;
  box-shadow: inherit !important;
}

/* Hub circle: show blue-themed hover shadow like other symbols */
.core-values-section .hub-circle:hover {
  transform: none;
  box-shadow: 0 18px 48px rgba(11, 97, 214, 0.28), /* outer blue drop shadow */
              0 0 0 8px rgba(11, 97, 214, 0.12);     /* soft blue ring */
}

/* Responsive */
@media (max-width: 1200px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    /* Keep top row in one line on medium screens */
    .values-row.top { gap: 22px; }
    .values-row.top .hub-circle { width: 320px; height: 320px; }
    .values-row.top .value-card { width: 165px; height: 165px; }
    .values-row.top .value-card:first-child,
    .values-row.top .value-card:last-child { margin: 0; }
}

@media (max-width: 1100px) {
    .values-row.top { gap: 20px; }
    .values-row.top .hub-circle { width: 320px; height: 320px; }
    .values-row.top .value-card { width: 160px; height: 160px; }
    .values-row.top .value-card:first-child,
    .values-row.top .value-card:last-child { margin: 0; }
    .hub-circle { width: 360px; height: 360px; }
    .value-card { width: 180px; height: 180px; }
}

@media (max-width: 820px) {
    .values-row.top { flex-wrap: wrap; }
    .values-row.top .hub-circle { width: 300px; height: 300px; }
    .values-row { gap: 20px; }
    .values-row.top, .values-row.bottom { flex-wrap: wrap; }
    .hub-circle { width: 320px; height: 320px; }
}

@media (max-width: 640px) {
    .core-values-section { padding: 40px 0 56px; }

    /* Stack: 고객, 구성원, (아래) 윤리경영 허브 */
    .values-row.top { flex-wrap: wrap; }
    .values-row.top .value-card { order: 1; flex: 0 0 auto; }
    .values-row.top .hub-circle { 
        order: 2; 
        width: 260px; 
        height: 260px; 
        flex-basis: 100%; 
        margin: 12px auto 0; 
    }

    .hub-circle { width: 260px; height: 260px; }
    .value-card { width: 160px; height: 160px; }
}

@media (max-width: 480px) {
    .values-row { gap: 16px; }
    .value-card { width: 150px; height: 150px; }
    .values-row.top .hub-circle { width: 250px; height: 250px; }
    .values-row.top .value-card { width: 150px; height: 150px; }
}

@media (max-width: 992px) {
    .ethics-hero {
        height: 400px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ethics-items {
        grid-template-columns: 1fr; /* 1 per row on smaller screens */
        gap: 24px;
    }

    .company-ethics-section h2 {
        font-size: 2rem;
    }

    .value-card {
        width: 160px;
        height: 160px;
    }

    .ethics-item { min-height: unset; } /* allow natural height on small screens */

    /* Mobile optimizations for main content */
    .main-content { padding-top: 30px; }
    .content-intro { padding: 0 16px; }
    .intro-subtitle { font-size: 1.5rem; margin-bottom: 14px; }
    .intro-title { font-size: 1.4rem; line-height: 1.35; margin-bottom: 20px; }
    .intro-description { font-size: 0.95rem; }
}

@media (max-width: 768px) {
    .ethics-hero {
        height: 28vh;
        margin-bottom: 40px;
        margin-top: -12px
    }
    .scroll-indicator {
        bottom: 10px;
    }
    .scroll-arrow {
        width: 35px;         /* 기존 50px -> 40px */
        height: 35px;        /* 기존 50px -> 40px */
        border-width: 1.5px; /* 기존 2px -> 1.5px (선택) */
        font-size: 1rem;     /* 기존 1.2rem -> 1rem */
    }
    /* 히어로 텍스트를 살짝 위로 이동 (우선순위 강제) */
    .ethics-hero .hero-content { transform: translateY(-14px) !important; }
    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .core-values-section {
        padding: 50px 0;
        margin-bottom: 60px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .value-card { 
        width: 150px; 
        height: 150px; 
        margin: 0 auto; 
    }

    .card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .company-ethics-section {
        margin-bottom: 60px;
    }

    .company-ethics-section h2 {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .ethics-item {
        padding: 30px 20px;
    }

    .ethics-item p {
        font-size: 0.95rem;
    }

    /* 본문 텍스트 좌측 정렬 */
    .content-intro,
    .content-intro p { text-align: left !important; }
    /* 인트로 헤드라인(윤리경영 인트로 타이틀) 소폭 축소 */
    .intro-title { font-size: 1.15rem !important; line-height: 1.45 !important; }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 0 15px;
    }
    /* 초소형에서는 텍스트를 조금 더 위로 */
    .ethics-hero .hero-content { transform: translateY(-16px) !important; }

    .hero-title {
        font-size: 1.7rem;
    }

    .hero-description {
        font-size: 0.85rem;
    }

    .values-btn {
        padding: 10px 25px;
        font-size: 1rem;
    }

    .value-card {
        padding: 25px 15px;
    }

    .company-ethics-section h2 {
        font-size: 1.5rem;
    }

    .ethics-item {
        padding: 25px 15px;
    }

    /* 초소형에서 한 단계 더 축소 */
    .intro-title { font-size: 0.88rem !important; line-height: 1.5 !important; }
}