/**
 * sub0102 — 회사소개 › 브랜드 밸류 (Figma SUB 01-03 브랜드 밸류 94:2372)
 * 서브 상단(건물 사진 · 틴트 없음) → S1 Philosophy(슬로건 2) → S2 CI Meaning → S3 상생 Cycle(木生火) → S5 Expansion Roadmap → CTA
 */

/* Figma 변수 없음 — 디자이너 확인 */
:root {
    --ci-glow-red-strong: rgba(246, 0, 0, 0.4);     /* S2 CI 배경 원(좌) 그라데이션 */
    --ci-glow-red-soft: rgba(246, 0, 0, 0.04);
    --ci-glow-green-strong: rgba(69, 166, 106, 0.4); /* = green-400 · 40% */
    --ci-glow-green-soft: rgba(69, 166, 106, 0.04);
    --cycle-glass: rgba(255, 255, 255, 0.16);       /* S3 원형 유리 카드 */
    --cycle-dim: rgba(0, 0, 0, 0.2);                /* S3 사진 위 어둡게 */
}

/* ==========================================================================
   S1 Brand Philosophy — 헤더 + 슬로건 카드 2장(레드 · 그린)
   ========================================================================== */
.philosophy { background: var(--bg-default); }
.slogans { display: flex; gap: var(--grid-gap); padding-top: 70px; }
.slogan {
    flex: 1 1 0; min-width: 0; height: 355px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 40px 44px; text-align: center; color: var(--text-inverse);
    border-radius: var(--radius-xl);
}
.slogan--brand { background: var(--bg-brand); }
.slogan--accent { background: var(--bg-accent); }
.slogan-label { font: 500 16px/1.6 var(--font); }
.slogan-kr { margin-top: 60px; font: var(--heading-32); letter-spacing: var(--heading-32-ls); }
.slogan-en { margin-top: var(--space-12); font: var(--body-20); }
.slogan-desc { margin-top: 50px; font: var(--body-18); }

/* ==========================================================================
   S2 CI Meaning — 좌측 흰 로고 패널 · 우측 설명 + 컬러칩, 배경에 큰 원 2개(레드 · 그린)
   ========================================================================== */
.ci { position: relative; overflow: hidden; background: var(--bg-subtle); }
.ci-glow {
    position: absolute; top: -282px; width: 1527px; height: 1525px;
    border-radius: 50%; pointer-events: none;
}
.ci-glow--red { left: calc(50% - 1422px); background: linear-gradient(175.82deg, var(--ci-glow-red-strong) 5.15%, var(--ci-glow-red-soft) 28.77%); }
.ci-glow--green { left: calc(50% - 106px); background: linear-gradient(175.82deg, var(--ci-glow-green-strong) 5.15%, var(--ci-glow-green-soft) 28.77%); }
.ci-inner { position: relative; display: flex; align-items: center; gap: var(--space-80); }
.ci-logo {
    flex: none; width: 568px; height: 720px;
    display: flex; align-items: center; justify-content: center; padding: var(--space-56);
    background: var(--bg-default); border-radius: var(--radius-xl);
}
.ci-text { flex: 1 1 0; min-width: 0; }
.ci-colors { display: flex; gap: var(--space-16); }
.ci-color {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-24) var(--space-32);
    color: var(--text-inverse); border-radius: var(--radius-lg);
}
.ci-color--red { background: var(--red-500); }
.ci-color--green { background: var(--green-500); }
.ci-color strong { font: var(--title-20); letter-spacing: var(--title-20-ls); }
.ci-color span { font: var(--body-14); }

/* ==========================================================================
   S3 상생 Cycle — 숲 사진(60%) + 어둡게 20% · 가운데 정렬 · 원형 유리 카드 3 + 화살표
   ========================================================================== */
.cycle {
    position: relative; overflow: hidden;
    display: flex; align-items: center; min-height: 960px;
    background: var(--black); color: var(--text-inverse);
}
.cycle::before {
    content: ''; position: absolute; inset: 0;
    background: url('/assets/img/company/cycle-bg.webp') center bottom / cover no-repeat;
    opacity: 0.6;
}
.cycle::after { content: ''; position: absolute; inset: 0; background: var(--cycle-dim); }
.cycle .container { position: relative; z-index: 1; width: 100%; }
.cycle .eyebrow { color: var(--red-300); }
.cycle .sec-desc { color: var(--text-inverse); }
.cycle-list { display: flex; align-items: center; justify-content: center; gap: var(--grid-gap); }
.cycle-item {
    flex: none; width: 370px; height: 370px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 40px 44px; text-align: center;
    background: var(--cycle-glass); border-radius: var(--radius-full);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cycle-glyph { font: 800 80px/1.25 'Shippori Mincho', serif; letter-spacing: -0.025em; }
.cycle-title { margin-top: 30px; font: var(--title-24); letter-spacing: var(--title-24-ls); }
.cycle-desc { margin-top: var(--space-8); font: var(--body-18); color: var(--text-inverse); }
.cycle-item--wood .cycle-glyph, .cycle-item--wood .cycle-title { color: var(--green-200); }
.cycle-item--fire .cycle-glyph { color: var(--red-50); }
.cycle-item--fire .cycle-title { color: var(--red-200); }
.cycle-arrow { flex: none; font: 500 57px/1.35 var(--font); letter-spacing: -0.02em; color: var(--text-inverse); }

/* ==========================================================================
   S5 Expansion Roadmap — 단계 카드 3 + 화살표 · 1단계(현재) 레드 테두리
   ========================================================================== */
.road { display: flex; align-items: center; gap: var(--space-16); }
.road-step {
    flex: 1 1 0; min-width: 0; align-self: stretch;
    display: flex; flex-direction: column;
    padding: 32px 32px 36px;
    background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
}
.road-step--current { border: 1.5px solid var(--action-primary); }
.road-icon { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 60px; height: 60px; }
.road-phase { margin-top: 18px; font: 500 20px/1.1 'Poppins', var(--font); letter-spacing: -0.01em; color: var(--text-brand); }
.road-step--accent .road-phase { color: var(--text-accent); }
.road-title { margin-top: 14px; font: var(--title-28); letter-spacing: var(--title-28-ls); color: var(--text-primary); }
.road-desc { margin-top: 10px; font: var(--body-16); color: var(--text-secondary); }
.road-arrow { flex: none; font: var(--heading-32); letter-spacing: var(--heading-32-ls); color: var(--text-tertiary); }
.road-note { margin-top: var(--space-24); font: var(--body-16); color: var(--text-secondary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1439px) {
    .slogan { padding-inline: var(--space-24); }
    .slogan-kr { font-size: 28px; }
    .slogan-en { font-size: 18px; }
    .ci-inner { gap: var(--space-48); }
    .ci-logo { width: 42%; height: auto; aspect-ratio: 568 / 720; }
    .ci .sec-desc br { display: none; }
    .ci-colors { flex-wrap: wrap; }
    .ci-color { flex-basis: 220px; }
    .cycle .sec-desc br { display: none; }
    .cycle-item { width: 300px; height: 300px; padding: var(--space-24); }
    .cycle-glyph { font-size: 64px; }
    .cycle-title { margin-top: var(--space-16); }
    .cycle-desc { font-size: 16px; }
    .cycle-arrow { font-size: 44px; }
}
@media (max-width: 1023px) {
    .slogans { flex-direction: column; padding-top: 0; }
    .slogan { flex: none; height: auto; padding-block: var(--space-40); }
    .slogan-kr { margin-top: var(--space-32); }
    .slogan-desc { margin-top: var(--space-32); }
    .ci-inner { flex-direction: column; align-items: stretch; }
    .ci-logo { width: 100%; aspect-ratio: auto; height: 400px; }
    .ci-logo img { width: 240px; height: 240px; }
    .cycle { min-height: 0; }
    .cycle-list { flex-direction: column; gap: var(--space-8); }
    .cycle-arrow { transform: rotate(90deg); line-height: 1; }
    .cycle-arrow + .cycle-item ~ .cycle-arrow { transform: none; }
    .road { flex-direction: column; align-items: stretch; gap: var(--space-8); }
    .road-arrow { align-self: center; transform: rotate(90deg); line-height: 1; }
}
@media (max-width: 767px) {
    .slogan { padding: var(--space-32) var(--space-20); }
    .slogan-label { font-size: 14px; }
    .slogan-kr { margin-top: var(--space-24); font-size: 22px; }
    .slogan-en { font-size: 16px; }
    .slogan-desc { margin-top: var(--space-24); font-size: 16px; }
    .ci-logo { height: 280px; padding: var(--space-32); }
    .ci-logo img { width: 180px; height: 180px; }
    .ci-color { flex-basis: 100%; padding: var(--space-20) var(--space-24); }
    .cycle .sec-desc { font-size: 16px; }
    .cycle-item { width: 260px; height: 260px; }
    .cycle-glyph { font-size: 52px; }
    .cycle-title { margin-top: var(--space-8); font-size: 20px; }
    .cycle-desc { font-size: 15px; }
    .cycle-arrow { font-size: 36px; }
    .road-step { padding: var(--space-24); }
    .road-icon { width: 48px; height: 48px; }
    .road-title { font-size: 22px; }
    .road-desc, .road-note { font-size: 15px; }
}