@charset "utf-8";
/* 비전·핵심가치 전용 스타일 (공통은 fl-sub.css). 색은 --fl-* 토큰만, SVG 일러스트 내부 색만 예외. */

#container > #sub-vision { background: var(--fl-cream); }
#sub-vision { color: var(--fl-ink); }
#sub-vision p, #sub-vision h2, #sub-vision h3, #sub-vision h4, #sub-vision li { word-break: keep-all; overflow-wrap: break-word; }
body:has(#sub-vision) { background: var(--fl-cream) !important; }
body:has(#sub-vision) #container_wr, body:has(#sub-vision) .gw-footer-container { background: var(--fl-cream); }
#sub-vision em { font-style: normal; color: var(--fl-primary); }

#sub-vision .vs-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-primary); }
#sub-vision .vs-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#sub-vision .vs-title { margin-top: 14px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: var(--fl-ink); }
#sub-vision .vs-lead { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; color: var(--fl-ink-2); }
#sub-vision .vs-head { max-width: 760px; margin-bottom: 56px; }

/* ---------- 비전 (다크) ---------- */
#sub-vision .vs-vision { --fl-focus: var(--fl-white); padding: clamp(80px, 9vw, 140px) 0; background: var(--fl-dark); color: var(--fl-cream); overflow: hidden; }
#sub-vision .vs-vision-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
#sub-vision .vs-vision .vs-label, #sub-vision .vs-vision em { color: var(--fl-mango-on-dark); }
#sub-vision .vs-vision-title { margin-top: 20px; font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; color: var(--fl-white); }
#sub-vision .vs-vision-lead { margin-top: 26px; max-width: 520px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; color: color-mix(in srgb, var(--fl-cream) 78%, transparent); }
#sub-vision .vs-orbit { position: relative; width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 1 / 1; }
#sub-vision .vs-orbit svg { display: block; width: 100%; height: 100%; }
#sub-vision .vs-ring { fill: none; stroke: var(--fl-mango-on-dark); stroke-width: 1.5; stroke-dasharray: 3 8; opacity: .55; }
#sub-vision .vs-ring.is-mid { opacity: .4; }
#sub-vision .vs-ring.is-in { fill: color-mix(in srgb, var(--fl-primary) 22%, transparent); stroke-dasharray: none; opacity: .8; }
#sub-vision .vs-dot circle { fill: var(--fl-mango-on-dark); }
#sub-vision .vs-orbit-tag { position: absolute; padding: 5px 14px; border-radius: 999px; background: var(--fl-cream); color: var(--fl-ink); font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .04em; transform: translate(-50%, -50%); white-space: nowrap; }
#sub-vision .vs-orbit-tag.is-t { left: 50%; top: 0; }
#sub-vision .vs-orbit-tag.is-r { left: 100%; top: 50%; transform: translate(-85%, -50%); }
#sub-vision .vs-orbit-tag.is-b { left: 50%; top: 100%; }
#sub-vision .vs-orbit-tag.is-l { left: 0; top: 50%; transform: translate(-15%, -50%); }

/* ---------- 핵심가치 ---------- */
#sub-vision .vs-values { background: var(--fl-white); }
#sub-vision .vs-value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
#sub-vision .vs-value { padding: 40px 36px; border-radius: 24px; background: var(--fl-cream); transition: transform .3s, box-shadow .3s, background .3s; }
#sub-vision .vs-value:hover { transform: translateY(-6px); box-shadow: var(--fl-shadow-lg); background: var(--fl-sand); }
#sub-vision .vs-value-top { display: flex; align-items: center; justify-content: space-between; }
#sub-vision .vs-value-ico { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--fl-primary); color: var(--fl-white); }
#sub-vision .vs-value-ico svg { width: 30px; height: 30px; }
#sub-vision .vs-value-no { font-family: var(--fl-font-en); font-size: 44px; font-weight: 800; line-height: 1; color: var(--fl-primary-soft); -webkit-text-stroke: 1px var(--fl-primary); }
#sub-vision .vs-value-en { margin-top: 26px; font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-primary); }
#sub-vision .vs-value-title { margin-top: 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--fl-ink); }
#sub-vision .vs-value-desc { margin-top: 14px; font-size: 15.5px; line-height: 1.85; color: var(--fl-ink-2); }

/* ---------- 중장기 방향 ---------- */
#sub-vision .vs-future { background: var(--fl-sand); }
#sub-vision .vs-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: vs-step; }
#sub-vision .vs-path::before { content: ""; position: absolute; left: 6%; right: 6%; top: 38px; border-top: 2px dashed var(--fl-primary); opacity: .45; }
#sub-vision .vs-path-item { position: relative; padding: 68px 30px 34px; border-radius: 24px; background: var(--fl-white); box-shadow: var(--fl-shadow); }
#sub-vision .vs-path-item::before { content: ""; position: absolute; left: 30px; top: 28px; width: 20px; height: 20px; border-radius: 50%; background: var(--fl-primary); border: 4px solid var(--fl-sand); box-sizing: content-box; }
#sub-vision .vs-path-step { position: absolute; right: 26px; top: 26px; padding: 4px 12px; border-radius: 999px; background: var(--fl-primary-soft); color: var(--fl-primary-dark); font-family: var(--fl-font-en); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#sub-vision .vs-path-en { font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-primary); }
#sub-vision .vs-path-item h4 { margin-top: 6px; font-size: 22px; font-weight: 800; color: var(--fl-ink); }
#sub-vision .vs-path-item p:not(.vs-path-en) { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--fl-ink-2); }

#sub-vision .vs-cta { --fl-focus: var(--fl-white); }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
    #sub-vision .vs-vision-inner { grid-template-columns: 1fr; }
    #sub-vision .vs-orbit { max-width: 340px; margin-top: 12px; }
    #sub-vision .vs-path { grid-template-columns: 1fr; }
    #sub-vision .vs-path::before { display: none; }
}
@media (max-width: 576px) {
    #sub-vision .vs-value-grid { grid-template-columns: 1fr; }
    #sub-vision .vs-value { padding: 30px 24px; border-radius: var(--fl-radius); }
    #sub-vision .vs-value-no { font-size: 36px; }
    #sub-vision .vs-orbit { max-width: 280px; }
    #sub-vision .vs-orbit-tag { font-size: 11.5px; padding: 4px 10px; }
    #sub-vision .vs-path-item { padding: 64px 24px 28px; }
}