@charset "utf-8";

/* ========== 전체 서브페이지 스타일 (컨텐츠만) ========== */
:root {--color-main:var(--color-primary); --color-sub:var(--color-secondary); --color-heading:#242424; --color-body:#454545; --color-muted:#707070; --color-white:#fff; --color-border:#ddd; --color-bg-light:#f7f8f9; --color-gradient-end:#69aaff; --font-en:'Outfit',sans-serif; --font-ko:'Pretendard',sans-serif; --font-size-13:13px; --font-size-14:14px; --font-size-15:15px; --font-size-18:18px; --font-size-20:20px; --font-size-22:22px; --font-size-24:24px; --font-size-26:26px; --font-size-28:28px; --font-size-32:32px; --font-size-34:34px; --font-size-36:36px; --font-size-40:40px; --font-size-48:48px; --gap-4:4px; --gap-8:8px; --gap-10:10px; --gap-12:12px; --gap-16:16px; --gap-20:20px; --gap-24:24px; --gap-32:32px; --gap-40:40px; --gap-48:48px; --gap-64:64px; --gap-100:100px; --gap-150:150px; --radius-card:16px; --radius-pill:100px; --radius-input:8px; --layout-max:1500px; --layout-gutter-mobile:30px; --line-height-22:1.57em; --line-height-23:1.44em; --line-height-24:1.5em; --line-height-26:1.62em; --line-height-28:1.56em; --line-height-30:1.5em; --line-height-32:1.33em; --line-height-42:1.4em; --line-height-48:1.5em; --line-height-58:1.21em; --ceo-photo-width:580px; --ceo-photo-height:780px; --clients-logo-gap:24px; --clients-logo-pad:28px; --clients-logo-h:48px; --clients-logo-area-h:72px; --clients-logo-radius:16px; --ss-showcase-pad:48px; --ss-showcase-min-h:420px; --ss-showcase-radius:28px; --ss-showcase-tag-h:38px; --ss-showcase-img-max:560px; --sat-process-pad:32px; --sat-process-max:100%; --sat-process-soft:#e8f0ff; --sat-process-box-stroke:#a8c5f5; --sat-process-fs-box:14px; --sat-process-fs-label:12px; --sat-process-fs-org:13px; --sat-role-pad:32px; --sat-role-max:100%; --sat-role-stroke:1.6; --sat-role-stroke-thin:1.2; --sat-role-tint:#eef4ff; --sat-role-foot-accent:#2766fb; --sat-rx-gold:#e0a830; --sat-rx-gold-dark:#c48a18; --sat-rx-panel:#2f5fd0; --sat-rx-panel-light:#6ea0f5; --sat-rx-signal:#8ec2ff; --sat-rx-dish:#b8bec8; --sat-rx-dish-mid:#8e96a3; --sat-rx-dish-dark:#6a7380; --virt-arch-max:704px; --virt-arch-node:79px; --virt-arch-core-fs:26px; --virt-arch-node-fs:20px; --virt-arch-pad:32px; --maint-arch-max:704px; --maint-arch-pad:32px; --inte-hex-max:320px; --inte-stat-size:56px; --inte-desc-min-h:160px; --inte-arch-pad:24px; --inte-arch-max:100%; --inte-arch-line:#b0b4bb; --inte-prod-gap:24px; --inte-prod-pad:28px; --inte-prod-img-max-h:168px; --inte-prod-ico:40px; --inte-prod-feat-gap:16px; --ai-cap-badge:36px; --ai-cap-illust-h:140px; --ai-cap-svg-max:168px; --ai-cap-border:#c5d8ff; --ai-cap-soft:#e8f0ff; --ai-cap-mid:#7aa4fc; --ai-cap-banner-pad-y:18px; --ai-cap-banner-icon:28px; --ai-ind-gap:20px; --ai-ind-pad:16px; --ai-ind-radius:16px; --ai-arch-pad:24px; --ai-arch-max:100%; --ai-arch-fs-title:16px; --ai-arch-fs-box:13px; --ai-arch-fs-label:11px; --ai-arch-fs-sub:10px; --ai-arch-fs-card:11px; --process-step-size:28px; --web-cap-illust-h:180px; --web-cap-svg-max:260px; --web-svc-illust-h:100px; --web-svc-svg-max:140px; --web-process-max:100%; --web-process-pad:32px; --virt-value-label-w:240px; --virt-value-aside-pad:28px; --virt-value-icon:56px; --virt-value-soft:#e8f0ff; --virt-value-aside-mid:#001e52; --virt-hw-media-max:420px; --virt-hw-spec-ico:48px; --virt-prod-brand-h:56px; --virt-prod-head-h:48px; --gap-30:30px; --sec-arch-pad:24px; --sec-arch-max:100%; --sec-arch-fs-title:15px; --sec-arch-fs-pill:13px; --sec-arch-fs-actor:13px; --sec-arch-soft:#e8f0ff; --sec-arch-mgmt:#eef0f3; --sec-benefit-illust:100px; --sec-benefit-svg-max:120px; --sec-cap-banner-pad-y:18px; --sec-cap-banner-icon:28px; --sec-cap-banner-pad:32px; --sec-cap-banner-gap:28px; --sec-cap-banner-visual:120px; --sec-cap-banner-shield:88px; --sec-cap-banner-feat-icon:36px; --sec-cap-banner-feat-gap:10px; --sec-cap-banner-divider:rgba(255, 255, 255, 0.28); --sec-cap-banner-glow:#4aa3ff; --sec-feat-min-h:280px; --sec-feat-pad:32px; --sec-feat-gap:24px; --sec-feat-icon:80px; --sec-feat-soft:#e8f0ff; --sec-prod-logo-h:28px; --sec-prod-logo-max-w:132px; --sec-prod-row-gap:40px; --bd-pillar-min-h:280px; --bd-pillar-visual-h:132px; --bd-pillar-svg-max:96px; --bd-pillar-glow:rgba(39, 102, 251, 0.1); --bd-pillar-visual-top:#eef4ff; --bd-pillar-border:#d8e4fc; --bd-feat-illust-h:140px; --bd-feat-svg-max:120px; --bd-feat-icon-wrap:112px; --bd-feat-icon-inner:80px; --bd-feat-row-gap:40px; --bd-feat-col-gap:24px; --bd-feat-desc-gap:48px; --bd-feat-card-min-h:268px; --bd-cloud-svc-pad:32px; --bd-cloud-svc-max:100%; --bd-cloud-svc-soft:#e8f0ff; --bd-cloud-svc-lab:linear-gradient(180deg, #eef5ff 0%, #d6ebff 100%); --bd-cloud-svc-circle:#d6e8ff; --bd-cloud-flow-request-w:220px; --bd-cloud-flow-result:180px; --bd-cloud-flow-ico:40px; --bd-cloud-flow-arrow:48px; --bd-cloud-flow-gap:20px; --bd-cloud-flow-module-gap:20px; --bd-arch-pad:40px; --bd-arch-max:100%; --bd-arch-fs-title:18px; --bd-arch-fs-head:15px; --bd-arch-fs-body:12px; --bd-arch-fs-pill:12px; --bd-arch-soft:#edf4ff; --bd-arch-soft-mid:#eef4ff; --bd-arch-panel:#eceff3; --bd-arch-panel-stroke:#d5dbe5; --bd-arch-canvas:#ffffff; --bd-arch-shadow:rgba(36, 36, 36, 0.08); --ss-hero-max:920px; --ss-hero-pad:24px; --ss-vendor-gap:24px; --ss-brand-h:112px; --ss-logo-h:40px; --ss-logo-max-w:220px; --ss-link-h:48px; --ss-hpe-accent:#01a982; --ss-soft:#f2f4f7;}
.sr-only {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0,0,0,0);}
.is-section-hidden {display:none !important;}

/* 서브 본문 공통 */
.sub-lead { margin: 0 0 var(--gap-32); font-size: var(--font-size-20); font-weight: 500; line-height: var(--line-height-30); color: var(--color-body); }
.sub-block { margin-bottom: var(--gap-150); }
.sub-section { margin-bottom: var(--gap-150); }
#contArea:not(.wide) .real-cont > :last-child { margin-bottom: 0; }
#contArea:not(.wide) .real-cont > .sub-section:has(+ .sub-cta), #contArea:not(.wide) .real-cont > .sub-block:has(+ .sub-cta) { margin-bottom: 0; }
#contArea:not(.wide) .sub-block .ss-showcase { margin-bottom: 0; }
.sub-section__title { margin: 0 0 var(--gap-32); font-size: var(--font-size-32, 32px); font-weight: 700; line-height: var(--line-height-58); color: var(--color-heading); }
.sub-section__title--lg { font-size: var(--font-size-48); margin-bottom: var(--gap-24); }
.sub-section__subtitle { margin: 0 0 var(--gap-16); font-size: var(--font-size-20); font-weight: 600; line-height: var(--line-height-30); color: var(--color-heading); }
.sub-eyebrow { margin: 0 0 var(--gap-16); font-family: var(--font-en); font-weight: 500; color: var(--color-main); }
.sub-quote { margin: var(--gap-32) 0 0; padding: var(--gap-24) var(--gap-32); border-left: 4px solid var(--color-main); background: var(--color-bg-light); font-size: var(--font-size-18); line-height: var(--line-height-28); color: var(--color-body); }
.sub-sign { margin-top: var(--gap-32); font-size: var(--font-size-18); color: var(--color-heading); }
.sub-intro--ceo { display: grid; grid-template-columns: minmax(280px, var(--ceo-photo-width)) 1fr; gap: var(--gap-64); align-items: center; }
.sub-intro__text p { margin: 0 0 var(--gap-20); font-size: var(--font-size-18); line-height: var(--line-height-28); color: var(--color-body); }
.sub-intro__text .sub-lead { margin: 0 0 var(--gap-32); font-size: var(--font-size-32); font-weight: 700; line-height: 1.5em; color: var(--color-heading); word-break: keep-all; }
.sub-intro__text .sub-lead strong { font-weight: 600; color: var(--color-heading); }
.sub-intro__text .sub-sign { margin-top: var(--gap-32); font-size: var(--font-size-18); color: var(--color-heading); }
.sub-talent__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-24); margin: 0; padding: 0; list-style: none; }
.sub-talent__grid h4 { margin: var(--gap-16) 0 var(--gap-8); font-size: var(--font-size-18); font-weight: 600; color: var(--color-heading); }
.sub-talent__grid p { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.sub-talent__icon .media-placeholder { --ph-ratio: 100%; min-height: 80px; }
.sub-history__year { margin-bottom: var(--gap-40); padding-bottom: var(--gap-32); border-bottom: 1px solid var(--color-border); }
.sub-history__year h3 { margin: 0 0 var(--gap-16); font-size: var(--font-size-32, 32px); font-weight: 700; color: var(--color-main); }
.sub-history__year ul { margin: 0; padding: 0; list-style: none; }
.sub-history__year li { margin-bottom: var(--gap-8); line-height: var(--line-height-28); color: var(--color-body); }
.sub-history__mm { display: inline-block; min-width: 2.5em; margin-right: var(--gap-8); font-weight: 600; color: var(--color-heading); }
.sub-location { margin-top: var(--gap-40); }
.sub-location__name { margin: 0 0 var(--gap-24); font-size: var(--font-size-24, 24px); font-weight: 700; color: var(--color-heading); }
.sub-location__dl { display: grid; gap: var(--gap-16); margin: 0 0 var(--gap-32); }
.sub-location__dl div { display: flex; flex-wrap: wrap; gap: var(--gap-8); margin: 0; }
.sub-location__dl dt { margin: 0; min-width: 7em; font-weight: 600; color: var(--color-heading); }
.sub-location__dl dd { margin: 0; color: var(--color-body); }
.media-placeholder { position: relative; width: 100%; margin: 0 0 var(--gap-24); padding-top: var(--ph-ratio, 56.25%); border: 1px dashed var(--color-border); border-radius: var(--radius-card); background: var(--color-bg-light); overflow: hidden; }
.media-placeholder__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--gap-16); font-size: var(--font-size-15); font-weight: 500; line-height: var(--line-height-26); color: var(--color-placeholder); text-align: center; }
.sub-core-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap-24); }
.sub-core-list li { padding: var(--gap-24); border-radius: var(--radius-card); background: var(--color-bg-light); }
.sub-core-list--grid { grid-template-columns: repeat(4, 1fr); text-align: left; counter-reset: core-item; }
.sub-core-list--grid li { counter-increment: core-item; }
.sub-core-list--grid li::before { content: counter(core-item, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 var(--gap-48); border-radius: var(--radius-pill); background: var(--color-main); font-size: var(--font-size-15); font-weight: 700; line-height: 1em; color: var(--color-white); }
.sub-core-list strong { display: block; margin-bottom: var(--gap-8); font-size: var(--font-size-18); color: var(--color-heading); }
.sub-core-list--grid strong { margin-bottom: var(--gap-24); font-size: 24px; font-weight: 700; line-height: var(--line-height-32); }
.sub-core-list p { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }

/* 핵심기술 카드 그리드 — vision-mgmt 스타일 */
.tech-core-section { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 0; padding: var(--gap-150) clamp(20px, 6.25vw, 120px); background: var(--color-white); }
.tech-core-section::before { content: ""; position: absolute; inset: 0 -12%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 75% 45% at 50% 0%, rgba(39, 102, 251, 0.05) 0%, transparent 72%), radial-gradient(ellipse 70% 55% at 50% 55%, rgba(39, 102, 251, 0.06) 0%, transparent 68%), radial-gradient(circle at 18% 50%, rgba(39, 102, 251, 0.04) 0%, transparent 42%), radial-gradient(circle at 82% 38%, rgba(39, 181, 245, 0.05) 0%, transparent 40%); }
.tech-core-section .sub-section__title { position: relative; z-index: 1; width: min(var(--layout-max), calc(100% - var(--layout-gutter-mobile) * 2)); margin-inline: auto; }
.tech-core-grid { position: relative; z-index: 1; width: min(var(--layout-max), calc(100% - var(--layout-gutter-mobile) * 2)); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; margin-block: 0; padding: 0; list-style: none; gap: var(--gap-24); }
.tech-core-card { flex: 1 1 calc(33.333% - var(--gap-24) * 2 / 3); max-width: calc(33.333% - var(--gap-24) * 2 / 3); display: flex; flex-direction: column; align-items: center; gap: var(--gap-20); padding: var(--gap-40) var(--gap-32); border-radius: var(--radius-card); background: var(--color-white); box-shadow: 0 8px 32px rgba(0, 10, 34, 0.08); text-align: center; transition: background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease; }
.tech-core-card:hover { background: var(--color-main); box-shadow: 0 16px 40px rgba(39, 102, 251, 0.22); transform: translateY(-6px); }
.tech-core-card__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: calc(var(--gap-48) - var(--gap-20)); flex-shrink: 0; }
.tech-core-card__icon svg { display: block; width: 100%; height: 100%; }
.tech-core-card:hover .tech-core-card__icon { filter: brightness(0) invert(1); }
.tech-core-card__title { margin: 0; font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); transition: color 0.28s ease; }
.tech-core-card__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; transition: color 0.28s ease; }
.tech-core-card:hover .tech-core-card__title, .tech-core-card:hover .tech-core-card__desc { color: var(--color-white); }
.sub-tags { display: flex; flex-wrap: wrap; gap: var(--gap-10); margin: 0 0 var(--gap-32); padding: 0; list-style: none; }
.sub-tags li { padding: var(--gap-8) var(--gap-20); border-radius: var(--radius-pill); background: var(--color-bg-light); font-size: var(--font-size-15); font-weight: 500; color: var(--color-heading); }
.sub-tags--wrap { margin-bottom: var(--gap-40); }
.sub-service-cards { display: flex; margin: 0 0 var(--gap-40); padding: 0; list-style: none; }
.bd-pillar-grid + .sub-service-cards { margin-top: var(--gap-48); margin-bottom: 0; }
.sub-service-cards li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-8); min-height: 112px; padding: var(--gap-20) var(--gap-40); background: #d8dade; color: var(--color-heading); text-align: center; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
.sub-service-cards li:nth-child(1) { z-index: 4; }
.sub-service-cards li:nth-child(2) { z-index: 3; background: #9a9ea6; color: var(--color-white); }
.sub-service-cards li:nth-child(3) { z-index: 2; background: #3d4046; color: var(--color-white); }
.sub-service-cards li:not(:first-child) { margin-left: -28px; padding-left: calc(var(--gap-40) + 28px); }
.sub-service-cards li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.sub-service-cards li:nth-child(4) { z-index: 1; background: var(--color-main); color: var(--color-white); }
.sub-service-cards--solo { margin: var(--gap-48) 0 0; }
.sub-service-cards--solo li { margin-left: 0; padding-left: var(--gap-40); background: var(--color-main); color: var(--color-white); clip-path: none; border-radius: var(--radius-card); }
.sub-service-cards strong { display: block; margin-bottom: var(--gap-8); font-size: var(--font-size-17); font-weight: 700; }
.sub-service-cards span { font-size: var(--font-size-14); line-height: var(--line-height-22); opacity: 0.85; }
.sub-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.sub-benefit-grid li { padding: var(--gap-20); border: 1px solid var(--color-border); border-radius: var(--radius-card); font-weight: 500; text-align: center; color: var(--color-heading); }
.sub-benefit-grid--icons { grid-template-columns: repeat(4, 1fr); gap: 0; }
.sub-benefit-grid--icons li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-16); margin: 0; padding: var(--gap-32) var(--gap-32) var(--gap-32) 0; border: 0; border-radius: 0; background: transparent; font-size: inherit; font-weight: inherit; text-align: left; }
.sub-benefit-grid--icons li:nth-child(4n+2), .sub-benefit-grid--icons li:nth-child(4n+3), .sub-benefit-grid--icons li:nth-child(4n) { padding-left: var(--gap-32); }
.sub-benefit-grid--icons li:not(:nth-child(4n)) { border-right: 1px solid var(--color-border); }
.sub-benefit-grid--icons li:nth-child(-n+4) { border-bottom: 1px solid var(--color-border); }
.sub-benefit-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; }
.sub-benefit-icon svg { display: block; width: 100%; height: 100%; }
.sub-benefit-ico { fill: none; stroke: var(--color-heading); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sub-benefit-ico-accent { fill: var(--color-main); stroke: none; }
.sub-benefit-label { font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); word-break: keep-all; }
.sub-cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-24); margin-bottom: var(--gap-40); text-align: center; }
.sub-cert-grid p { margin: var(--gap-8) 0 0; font-size: var(--font-size-15); color: var(--color-body); }
.sub-clients { margin: var(--gap-150) 0; }
.sub-clients__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap-16); }
.sub-clients__grid--large { grid-template-columns: repeat(4, 1fr); }
.sub-clients__logo .media-placeholder { --ph-ratio: 60%; min-height: 72px; margin: 0; }
.sub-vendor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-24); }
.sub-vendor-grid article { padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.sub-vendor-grid h4 { margin: var(--gap-16) 0 var(--gap-8); font-size: var(--font-size-18); color: var(--color-heading); }
.sub-vendor-grid p { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.sub-product-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.sub-product-cards .media-placeholder { margin: 0; }
.sub-link-more { margin: var(--gap-24) 0; }
.sub-link-more a { color: var(--color-main); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sub-cta { position: relative; margin-top: var(--gap-150); padding: clamp(64px, 7vw, 96px) clamp(32px, 5vw, 64px); border-radius: var(--radius-card); overflow: hidden; text-align: center; background: linear-gradient(175deg, #0d1b40 0%, var(--color-sub) 60%); }
.sub-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(39, 102, 251, 0.3) 0%, transparent 62%); pointer-events: none; }
.sub-cta__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--gap-16); max-width: 640px; margin-inline: auto; }
.sub-cta__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-en); font-size: var(--font-size-13); font-weight: 500; letter-spacing: 0.14em; line-height: var(--line-height-23); color: rgba(105, 170, 255, 0.95); text-transform: uppercase; }
.sub-cta__eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(39, 102, 251, 0), var(--color-main)); }
.sub-cta__eyebrow::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--color-main), rgba(39, 102, 251, 0)); }
.sub-cta__title { margin: 0; font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; line-height: 1.35em; letter-spacing: -0.02em; color: var(--color-white); word-break: keep-all; }
.sub-cta__desc { margin: 0; max-width: 32em; line-height: var(--line-height-28); color: rgba(255, 255, 255, 0.7); word-break: keep-all; }
.sub-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-16); margin-top: var(--gap-8); width: auto; }
.sub-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; width: auto; height: 54px; padding: 0 var(--gap-40); border: 0; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-main) 0%, #4d8bff 100%); font-weight: 600; color: var(--color-white); text-decoration: none; box-shadow: 0 8px 24px rgba(39, 102, 251, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.sub-cta__btn-arrow { display: inline-block; width: 7px; height: 7px; margin-left: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
.sub-cta__btn--inline { margin-top: var(--gap-16); width: auto; }
.sub-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 32px rgba(39, 102, 251, 0.45); }
.sub-cta__btn:hover .sub-cta__btn-arrow { transform: translateX(3px) rotate(45deg); }
.sub-cta__tel { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; height: 54px; padding: 0 28px; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); background: transparent; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
.sub-cta__tel:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.sub-cta__tel-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 100px; background: rgba(39, 102, 251, 0.35); }
.sub-cta__tel-icon img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.sub-figure { margin: 0 0 var(--gap-32); }
.sub-figure__img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.sub-benefit-grid--detail li { text-align: left; }
.sub-benefit-grid--detail strong { display: block; margin-bottom: var(--gap-8); color: var(--color-heading); }
.sub-benefit-grid--detail p { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); }
.sub-benefit-grid--cards { grid-template-columns: repeat(4, 1fr); gap: var(--gap-24); }
.sub-benefit-grid--cards li { display: flex; flex-direction: column; align-items: flex-start; padding: var(--gap-32) var(--gap-24); border: none; border-radius: var(--radius-card); background: var(--color-bg-light); box-shadow: none; font-size: inherit; font-weight: inherit; text-align: left; transition: transform 0.25s ease; }
.sub-benefit-grid--cards li:hover { box-shadow: none; transform: translateY(-4px); }
.sub-benefit-grid--cards .sub-benefit-icon { width: 80px; height: 80px; margin-bottom: var(--gap-48); }
.page-business-virtualization .sub-benefit-grid--cards .sub-benefit-icon { width: 64px; height: 64px; }
.sub-benefit-grid--cards strong { display: block; margin-bottom: var(--gap-24); font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); }
.sub-benefit-grid--cards p { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); }
.sub-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-24); margin-bottom: var(--gap-32); }
.sub-spec-card { padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.sub-spec-card__title { margin: 0 0 var(--gap-16); font-size: var(--font-size-18); font-weight: 600; color: var(--color-heading); }
.sub-spec-card p { margin: 0 0 var(--gap-16); font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.sub-spec-card__link { margin: 0; padding: var(--gap-20) 0 0; border-top: 1px solid var(--color-border); text-align: left; }
.sub-spec-card__link a { display: inline-flex; align-items: center; gap: var(--gap-8); font-size: var(--font-size-15); font-weight: 600; color: var(--color-heading); text-decoration: none; }
.sub-spec-card__link a::after { content: "\2197"; font-size: 1em; line-height: 1em; }
.sub-spec-card__link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sub-vendor-grid a { color: var(--color-main); font-weight: 600; }

/* 웹 개발 프로세스 설명 목록 */
.sub-process-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-16); counter-reset: process-step; }
.sub-process-list li { position: relative; display: grid; gap: var(--gap-8); padding: var(--gap-24) var(--gap-24) var(--gap-24) calc(var(--gap-24) + var(--process-step-size, 28px) + var(--gap-16)); border-radius: var(--radius-card); background: var(--color-bg-light); counter-increment: process-step; }
.sub-process-list li::before { content: counter(process-step, decimal-leading-zero); position: absolute; left: var(--gap-24); top: var(--gap-24); display: inline-flex; align-items: center; justify-content: center; width: var(--process-step-size, 28px); height: var(--process-step-size, 28px); border-radius: var(--radius-pill); background: var(--color-main); font-size: var(--font-size-13, 13px); font-weight: 700; line-height: 1em; color: var(--color-white); }
.sub-process-list strong { font-size: var(--font-size-18); font-weight: 600; color: var(--color-heading); }
.sub-process-list p { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }

/* 정보보호 특징 2단 카드 */
.sub-section__desc { margin: calc(var(--gap-16) * -1) 0 var(--gap-32); line-height: var(--line-height-26); color: var(--color-body); }
.sub-section--center .sub-section__title, .sub-section--center .sub-section__desc { text-align: center; }
.sub-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-24); align-items: start; }
.sub-feature-card { display: flex; flex-direction: column; gap: var(--gap-16); padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.sub-feature-card__title { margin: 0; font-size: var(--font-size-20); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); }
.sub-feature-card__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.sub-feature-card__figure { margin: 0; }
.sub-feature-card__img { display: block; width: 100%; height: auto; border-radius: var(--radius-input); border: 0; }
.sub-feature-card .virt-arch { padding: 0; }
.sub-feature-card .virt-arch__svg { max-width: 100%; }
.sub-feature-card .virt-arch__node-circle { fill: url(#gradCsapArchNode); }

/* 가상화 구성도 — 원형 다이어그램 */
.virt-arch { margin: 0; padding: var(--virt-arch-pad, 32px); border: 0; border-radius: var(--radius-card); background: var(--color-white); overflow-x: auto; }
.virt-arch-split { display: flex; flex-direction: column; align-items: center; padding-bottom: 0; }
.virt-arch-split .sub-section__title { margin: 0 0 var(--gap-32); line-height: 1.3em; text-align: center; }
.virt-arch-split .virt-arch { padding: 0; width: 100%; }
.virt-arch-split .virt-arch__svg { margin-inline: auto; }
.virt-arch__svg { display: block; width: 100%; max-width: var(--virt-arch-max, 704px); height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.virt-arch__ring { fill: none; stroke: rgba(39, 102, 251, 0.42); stroke-width: 1.4; stroke-dasharray: 6 8; }
.virt-arch__halo-outer { fill: url(#gradVirtArchHaloOuter); }
.virt-arch__halo-inner { fill: url(#gradVirtArchHaloInner); }
.virt-arch__core { fill: var(--color-main); stroke: none; }
.virt-arch__core-accent-ring { fill: none; stroke: #ffffff; stroke-width: 1; opacity: 0.3; }
.virt-arch__core-text { fill: var(--color-white); font-weight: 700; font-size: var(--virt-arch-core-fs, 26px); }
.virt-arch__node-circle { fill: url(#gradVirtArchNode); stroke: none; filter: drop-shadow(0 10px 18px rgba(39, 102, 251, 0.28)); }
.virt-arch__ico { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.virt-arch__ico-accent { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.virt-arch__ico-accent[r], circle.virt-arch__ico-accent { fill: rgba(255, 255, 255, 0.9); stroke: none; }
.virt-arch__node-text { fill: var(--color-heading); font-weight: 700; font-size: var(--virt-arch-node-fs, 20px); }
/* IT 통합유지보수 — 역량 카드 */
.maint-capability { margin: 0 0 var(--gap-40); }
.maint-cap-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.maint-cap-list__item { position: relative; display: flex; flex-direction: column; gap: var(--gap-16); padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.maint-cap-list__num { font-family: var(--font-en); font-size: var(--font-size-32); font-weight: 500; line-height: 1em; color: var(--color-main); }
.maint-cap-list__visual { display: flex; align-items: center; justify-content: center; min-height: var(--maint-cap-illust-h); }
.maint-cap-list__svg { display: block; width: 100%; max-width: var(--maint-cap-svg-max); height: auto; font-family: var(--font-ko); }
.maint-ico__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.maint-ico__accent { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.maint-ico__accent-fill { fill: var(--color-main); stroke: none; }
.maint-ico__badge { fill: var(--color-main); stroke: none; }
.maint-ico__badge-text { fill: var(--color-white); font-family: var(--font-en); font-weight: 500; }
.maint-ico__label { fill: var(--color-heading); font-family: var(--font-en); font-weight: 600; }
.maint-ico__label-accent { fill: var(--color-main); font-family: var(--font-en); font-weight: 600; }
.maint-cap-list__title { font-size: var(--font-size-20); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); text-align: center; }
.maint-cap-list__bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap-10); }
.maint-cap-list__bullets li { position: relative; padding-left: var(--gap-16); font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-heading); }
.maint-cap-list__bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-main); }

/* IT 통합유지보수 — 구성도 */
.maint-arch { margin: 0; padding: 0 var(--maint-arch-pad, 32px); border: 0; border-radius: var(--radius-card); background: var(--color-white); overflow-x: auto; }
.maint-arch__svg { display: block; width: 100%; max-width: var(--maint-arch-max, 704px); height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.maint-arch__ring { fill: none; stroke: rgba(39, 102, 251, 0.42); stroke-width: 1.4; stroke-dasharray: 6 8; }
.maint-arch__halo-outer { fill: url(#gradMaintHaloOuter); }
.maint-arch__halo-inner { fill: url(#gradMaintHaloInner); }
.maint-arch__core { fill: url(#gradMaintCore); stroke: none; }
.maint-arch__core-accent-ring { fill: none; stroke: #ffffff; stroke-width: 1; opacity: 0.3; }
.maint-arch__core-text { fill: var(--color-white); font-weight: 700; }
.maint-arch__node-circle { fill: url(#gradMaintNode); stroke: none; filter: drop-shadow(0 10px 18px rgba(39, 102, 251, 0.28)); }
.maint-arch__ico { fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.maint-arch__ico-accent { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.maint-arch__ico-accent[r], circle.maint-arch__ico-accent { fill: rgba(255, 255, 255, 0.9); stroke: none; }
.maint-arch__label { fill: var(--color-heading); font-weight: 700; }
.maint-arch__desc { margin: 0 0 var(--gap-32); line-height: var(--line-height-26); color: var(--color-heading); text-align: center; }
/* 시스템 통합구축 — 핵심 역량 육각형 + 설명 카드 */
.inte-capability { margin: 0 0 var(--gap-64); }
.inte-capability__title { margin: 0 0 var(--gap-40); font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); text-align: center; }
.inte-hex-row { margin: 0 0 var(--gap-40); }
.inte-hex-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-24); margin: 0; padding: 0; list-style: none; }
.inte-hex-list__item { display: flex; justify-content: center; }
.inte-hex-list__svg { display: block; width: 100%; max-width: var(--inte-hex-max, 320px); height: auto; font-family: var(--font-ko); }
.inte-hex__outer { fill: none; stroke: var(--color-main); stroke-width: 2.5; }
.inte-hex__inner { fill: var(--color-white); stroke: var(--color-heading); stroke-width: 1.5; }
.inte-hex__num { fill: var(--color-main); font-family: var(--font-en); font-size: var(--font-size-20); font-weight: 500; }
.inte-hex__label { fill: var(--color-heading); font-size: var(--font-size-18); font-weight: 700; }
.inte-hex__stat { fill: var(--color-main); font-family: var(--font-en); font-size: var(--inte-stat-size, 56px); font-weight: 700; }
.inte-hex__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.inte-hex__accent { fill: none; stroke: var(--color-main); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inte-hex__accent-fill { fill: var(--color-main); stroke: none; }
.inte-hex__next { fill: var(--color-heading); font-family: var(--font-en); font-size: var(--font-size-20); font-weight: 700; }
.inte-hex__cycle { fill: var(--color-heading); font-size: var(--font-size-14); font-weight: 600; }
.inte-desc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.inte-desc-list__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-12); min-height: var(--inte-desc-min-h, 160px); padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.inte-desc-list__title { font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); }
.inte-desc-list__desc { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-heading); }
/* 시스템 통합구축 — 네트워크 구성도 */
.inte-arch { margin: 0; padding: var(--inte-arch-pad, 24px); border: 0; border-radius: var(--radius-card); background: var(--color-bg-light); overflow-x: auto; }
.inte-arch__svg { display: block; width: 100%; max-width: var(--inte-arch-max, 100%); min-width: 880px; height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.inte-arch__zone-box { fill: var(--color-white); stroke: none; filter: drop-shadow(0 4px 16px rgba(0, 10, 34, 0.06)); }
.inte-arch__zone-head { fill: var(--color-main); stroke: none; }
.inte-arch__zone-head-fix { fill: var(--color-main); stroke: none; }
.inte-arch__zone-title { fill: var(--color-white); font-weight: 700; }
.inte-arch__line { fill: none; stroke: var(--inte-arch-line, #b0b4bb); stroke-width: 1.5; }
.inte-arch__dash { fill: none; stroke: var(--inte-arch-line, #b0b4bb); stroke-width: 1.6; stroke-dasharray: 6 4; }
.inte-arch__ico-shape { fill: url(#gradInteArchIco); stroke: none; filter: drop-shadow(0 8px 16px rgba(39, 102, 251, 0.22)); }
.inte-arch__ico-line { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; }
.inte-arch__accent { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.inte-arch__dot { fill: #ffffff; stroke: none; opacity: 0.92; }
.inte-arch__badge { fill: var(--color-white); stroke: none; filter: drop-shadow(0 3px 6px rgba(0, 10, 34, 0.18)); }
.inte-arch__badge-arrow { fill: none; stroke: var(--color-main); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inte-arch__ellipsis circle { fill: var(--color-muted); stroke: none; }
.inte-arch__label { fill: var(--color-heading); font-size: 13px; font-weight: 600; }
/* 시스템 통합구축 — 서버·스토리지 제품군 */
.inte-prod { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--inte-prod-gap, 24px); margin: 0 0 var(--gap-32); padding: 0; list-style: none; }
.inte-prod__card { display: flex; flex-direction: column; gap: var(--gap-16); padding: var(--inte-prod-pad, 28px); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.inte-prod__media { display: flex; align-items: center; justify-content: center; margin: 0; min-height: calc(var(--inte-prod-img-max-h, 168px) + var(--gap-16)); padding: var(--gap-12) 0; }
.inte-prod__img { display: block; width: auto; max-width: 72%; max-height: var(--inte-prod-img-max-h, 168px); height: auto; object-fit: contain; }
.inte-prod__name { margin: 0; font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); }
.inte-prod__lead { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-heading); }
.inte-prod__feats { display: grid; gap: var(--inte-prod-feat-gap, 16px); margin: 0; padding: var(--gap-20) 0 0; list-style: none; border-top: 1px solid var(--color-border); }
.inte-prod__feat { display: flex; align-items: flex-start; gap: var(--gap-12); }
.inte-prod__ico { flex: 0 0 var(--inte-prod-ico, 40px); width: var(--inte-prod-ico, 40px); height: var(--inte-prod-ico, 40px); }
.inte-prod__ico svg { display: block; width: 100%; height: 100%; }
.inte-prod__feat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inte-prod__feat-title { font-weight: 700; line-height: var(--line-height-26); color: var(--color-heading); }
.inte-prod__feat-desc { font-size: var(--font-size-14); font-weight: 400; line-height: var(--line-height-24); color: var(--color-muted); }
.inte-prod__link { margin-top: auto; }
/* AI 데이터 사업 — 핵심 역량 카드 */
.ai-capability { margin: 0 0 var(--gap-64); }
.ai-capability__title { margin: 0 0 var(--gap-40); font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); text-align: center; }
.ai-cap-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-16); margin: 0 0 var(--gap-32); padding: 0; list-style: none; }
.ai-cap-list__item { display: flex; flex-direction: column; align-items: center; gap: var(--gap-12); padding: var(--gap-24) var(--gap-20); border: 1px solid var(--ai-cap-border, #c5d8ff); border-radius: var(--radius-card); background: var(--color-white); }
.ai-cap-list__badge { display: inline-flex; align-items: center; justify-content: center; width: var(--ai-cap-badge, 36px); height: var(--ai-cap-badge, 36px); border-radius: var(--radius-pill); background: var(--color-main); font-family: var(--font-en); font-size: var(--font-size-14); font-weight: 600; line-height: 1em; color: var(--color-white); }
.ai-cap-list__title { font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-main); text-align: center; }
.ai-cap-list__visual { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--ai-cap-illust-h, 140px); }
.ai-cap-list__svg { display: block; width: 100%; max-width: var(--ai-cap-svg-max, 168px); height: auto; font-family: var(--font-en); }
.ai-ico__fill { fill: var(--color-main); stroke: none; }
.ai-ico__fill-white { fill: var(--color-white); stroke: none; }
.ai-ico__soft { fill: var(--ai-cap-soft, #e8f0ff); stroke: none; }
.ai-ico__mid { fill: var(--ai-cap-mid, #7aa4fc); stroke: none; }
.ai-ico__accent-fill { fill: var(--color-main); stroke: none; }
.ai-ico__line-fill { fill: var(--ai-cap-soft, #e8f0ff); stroke: var(--color-main); stroke-width: 1; }
.ai-ico__stroke-light { fill: none; stroke: var(--color-white); stroke-width: 1.4; opacity: 0.7; }
.ai-ico__line { fill: none; stroke: var(--color-main); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ai-ico__check { fill: none; stroke: var(--color-white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ai-ico__dot { fill: var(--color-main); stroke: none; }
.ai-ico__label { fill: var(--color-heading); font-size: var(--font-size-13); font-weight: 600; }
.ai-ico__label-white { fill: var(--color-white); font-size: var(--font-size-14); font-weight: 700; }
.ai-cap-list__desc { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-heading); text-align: center; word-break: keep-all; }
.ai-cap-banner { display: flex; align-items: center; justify-content: center; gap: var(--gap-12); margin: 0; padding: var(--ai-cap-banner-pad-y, 18px) var(--gap-32); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-main) 0%, var(--color-gradient-end) 100%); }
.ai-cap-banner__icon { flex: 0 0 var(--ai-cap-banner-icon, 28px); width: var(--ai-cap-banner-icon, 28px); height: var(--ai-cap-banner-icon, 28px); }
.ai-cap-banner__icon svg { display: block; width: 100%; height: 100%; }
.ai-cap-banner__stroke { fill: none; stroke: var(--color-white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-cap-banner__fill { fill: var(--color-white); stroke: none; }
.ai-cap-banner__text { font-weight: 700; line-height: var(--line-height-26); color: var(--color-white); text-align: center; word-break: keep-all; }
/* AI 데이터 사업 — 산업분야 4x2 카드 */
.ai-industry { margin: 0 0 var(--gap-64); }
.ai-industry__title { margin: 0 0 var(--gap-16); font-size: var(--font-size-36); font-weight: 600; line-height: var(--line-height-48); color: var(--color-heading); text-align: center; word-break: keep-all; }
.ai-industry__lead { margin: 0 0 var(--gap-40); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); text-align: center; word-break: keep-all; }
.ai-industry__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ai-ind-gap, 20px); margin: 0; padding: 0; list-style: none; }
.ai-industry__card { display: flex; flex-direction: column; gap: var(--gap-12); overflow: hidden; padding: var(--ai-ind-pad, 16px); border: none; border-radius: var(--radius-card); background: var(--color-white); box-shadow: none; transition: transform 0.25s ease; }
.ai-industry__card:hover { transform: translateY(-4px); }
.ai-industry__media { margin: 0; overflow: hidden; border-radius: var(--ai-ind-radius, 16px); aspect-ratio: 4 / 3; background: var(--color-bg-light); }
.ai-industry__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.ai-industry__card:hover .ai-industry__img { transform: scale(1.04); }
.ai-industry__name { display: block; padding: 0 var(--gap-8) var(--gap-8); font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); text-align: center; }
/* AI 데이터 사업 — 구성도 (검정·파란 계열) */
.ai-arch { margin: 0; padding: var(--ai-arch-pad, 24px); border: 0; border-radius: var(--radius-card); background: var(--color-bg-light); overflow-x: auto; }
.ai-arch__svg { display: block; width: 100%; max-width: var(--ai-arch-max, 100%); min-width: 1000px; height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.ai-arch__title { fill: var(--color-heading); font-size: var(--ai-arch-fs-title, 16px); font-weight: 700; }
.ai-arch__side { fill: var(--color-heading); font-size: var(--ai-arch-fs-box, 13px); font-weight: 700; }
.ai-arch__layer-label { fill: var(--color-main); font-size: var(--ai-arch-fs-box, 13px); font-weight: 700; }
.ai-arch__card { fill: var(--color-white); stroke: none; }
.ai-arch__card-bg { fill: var(--color-white); stroke: none; filter: drop-shadow(0 4px 16px rgba(0, 10, 34, 0.06)); }
.ai-arch__card-head { fill: var(--ai-cap-soft, #e8f0ff); stroke: none; }
.ai-arch__card-head-fix { fill: var(--ai-cap-soft, #e8f0ff); stroke: none; }
.ai-arch__card-div { stroke: none; }
.ai-arch__card-stroke { fill: none; stroke: none; }
.ai-arch__card-title { fill: var(--color-heading); font-size: var(--ai-arch-fs-sub, 10px); font-weight: 700; dominant-baseline: middle; }
.ai-arch__box { fill: var(--color-white); stroke: none; filter: drop-shadow(0 4px 16px rgba(0, 10, 34, 0.06)); }
.ai-arch__box-title { fill: var(--color-heading); font-size: var(--ai-arch-fs-box, 13px); font-weight: 700; }
.ai-arch__plus { fill: var(--color-main); font-size: var(--font-size-32); font-weight: 700; dominant-baseline: middle; }
.ai-arch__banner-shape { fill: var(--ai-cap-soft, #e8f0ff); stroke: none; }
.ai-arch__banner-text { fill: var(--color-heading); font-family: var(--font-ko); font-size: var(--ai-arch-fs-label, 11px); font-weight: 400; dominant-baseline: middle; text-anchor: middle; }
.ai-arch__banner-text--en { font-family: var(--font-en); }
.ai-arch__core { fill: var(--color-main); stroke: none; }
.ai-arch__core-ring { fill: none; stroke: var(--color-main); stroke-width: 1.2; opacity: 0.35; }
.ai-arch__core-frame { fill: var(--color-white); stroke: none; opacity: 0.18; }
.ai-arch__core-text { fill: var(--color-white); font-family: var(--font-en); font-weight: 700; dominant-baseline: middle; }
.ai-arch__circuit { fill: none; stroke: var(--color-white); stroke-width: 1.2; opacity: 0.45; stroke-linecap: round; }
.ai-arch__circuit-dot { fill: var(--color-white); stroke: none; opacity: 0.55; }
.ai-arch__pill { fill: var(--ai-cap-soft, #e8f0ff); stroke: none; }
.ai-arch__pill-text { fill: var(--color-heading); font-size: var(--ai-arch-fs-label, 11px); font-weight: 700; dominant-baseline: middle; }
.ai-arch__orbit { fill: none; stroke: var(--color-main); stroke-width: 3.5; stroke-linecap: round; opacity: 0.65; }
.ai-arch__orbit-head { fill: var(--color-main); stroke: none; opacity: 0.9; }
.ai-arch__node { fill: var(--color-white); stroke: none; }
.ai-arch__node-title { fill: var(--color-heading); font-size: var(--ai-arch-fs-label, 11px); font-weight: 700; }
.ai-arch__node-sub { fill: var(--color-heading); font-size: var(--ai-arch-fs-sub, 10px); font-weight: 400; }
.ai-arch__row { fill: var(--ai-cap-soft, #e8f0ff); stroke: none; }
.ai-arch__badge { fill: var(--color-main); stroke: none; }
.ai-arch__badge-fix { fill: var(--color-main); stroke: none; }
.ai-arch__badge-text { fill: var(--color-white); font-size: var(--ai-arch-fs-sub, 10px); font-weight: 700; }
.ai-arch__row-text { fill: var(--color-heading); font-size: var(--ai-arch-fs-label, 11px); font-weight: 500; dominant-baseline: middle; }
.ai-arch__ico { fill: none; stroke: var(--color-heading); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-arch__ico-accent { fill: none; stroke: var(--color-main); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-arch__ico-fill { fill: var(--color-main); stroke: none; }
.ai-arch__check { fill: none; stroke: var(--color-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-arch__ico-badge { fill: url(#gradAiArchIco); stroke: none; }
.ai-arch__ico-glyph { fill: var(--color-white); stroke: none; }
.ai-arch__ico-glyph-line { fill: none; stroke: var(--color-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ai-arch__ico-glyph-line-fill { fill: var(--color-white); stroke: none; }
.ai-arch__ico-glyph-ring { fill: none; stroke: var(--color-white); stroke-width: 2.2; }
.ai-arch__ico-glyph-accent { fill: none; stroke: #2766fb; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ai-arch__ico-glyph-accent-fill { fill: #2766fb; stroke: none; }
.ai-arch__dash { fill: none; stroke: var(--color-main); stroke-width: 1.4; stroke-dasharray: 6 5; opacity: 0.55; }
.ai-arch__arrow { fill: none; stroke: var(--color-main); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ai-arch__link { fill: none; stroke: var(--color-main); stroke-width: 1.2; stroke-linecap: round; opacity: 0.7; }
.ai-arch__flow-text { fill: var(--color-main); font-size: var(--ai-arch-fs-sub, 10px); font-weight: 600; }
.ai-arch__sw-label { fill: var(--color-heading); font-size: var(--ai-arch-fs-label, 11px); font-weight: 600; }
/* WEB 컨텐츠 개발 — 핵심 역량 카드 */
.web-capability { margin: 0 0 var(--gap-40); }
.web-cap-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.web-cap-list__item { position: relative; display: flex; flex-direction: column; gap: var(--gap-16); padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.web-cap-list__num { font-family: var(--font-en); font-size: var(--font-size-32); font-weight: 500; line-height: 1em; color: var(--color-main); }
.web-cap-list__visual { display: flex; align-items: center; justify-content: center; min-height: var(--web-cap-illust-h, 180px); }
.web-cap-list__svg { display: block; width: 100%; max-width: var(--web-cap-svg-max, 260px); height: auto; font-family: var(--font-ko); }
.web-ico__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.web-ico__accent { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.web-ico__accent-fill { fill: var(--color-main); stroke: none; }
.web-ico__badge { fill: var(--color-main); stroke: none; }
.web-ico__badge-text { fill: var(--color-white); font-family: var(--font-en); font-weight: 500; }
.web-ico__badge-stroke { fill: none; stroke: var(--color-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.web-ico__label { fill: var(--color-heading); font-family: var(--font-en); font-weight: 600; }
.web-ico__label-accent { fill: var(--color-main); font-family: var(--font-en); font-weight: 700; }
.web-cap-list__title { font-size: var(--font-size-20); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); text-align: center; }
.web-cap-list__bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap-10); }
.web-cap-list__bullets li { position: relative; padding-left: var(--gap-16); font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-heading); }
.web-cap-list__bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-main); }

/* WEB 컨텐츠 개발 — 주요 서비스 */
.web-svc-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.web-svc-list__item { display: flex; flex-direction: column; align-items: center; gap: var(--gap-12); padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); text-align: center; }
.web-svc-list__item:nth-child(1) { grid-column: 1 / 3; }
.web-svc-list__item:nth-child(2) { grid-column: 3 / 5; }
.web-svc-list__item:nth-child(3) { grid-column: 5 / 7; }
.web-svc-list__item:nth-child(4) { grid-column: 2 / 4; }
.web-svc-list__item:nth-child(5) { grid-column: 4 / 6; }
.web-svc-list__num { display: inline-flex; align-items: center; justify-content: center; width: var(--process-step-size, 28px); height: var(--process-step-size, 28px); border-radius: var(--radius-pill); background: var(--color-main); font-family: var(--font-en); font-size: var(--font-size-14); font-weight: 700; line-height: 1em; color: var(--color-white); }
.web-svc-list__visual { display: flex; align-items: center; justify-content: center; min-height: var(--web-svc-illust-h, 100px); }
.web-svc-list__svg { display: block; width: 100%; max-width: var(--web-svc-svg-max, 140px); height: auto; }
.web-svc-list__title { font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); }
.web-svc-list__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }

/* WEB 컨텐츠 개발 — 개발 프로세스 SVG */
.web-process { margin: 0 0 var(--gap-24); padding: var(--web-process-pad, 32px); border: 0; border-radius: 0; background: transparent; overflow-x: auto; }
.web-process__svg { display: block; width: 100%; max-width: var(--web-process-max, 100%); min-width: 880px; height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.web-process__badge { fill: var(--color-main); stroke: none; }
.web-process__badge-text { fill: var(--color-white); font-size: 11px; font-weight: 700; }
.web-process__label { fill: var(--color-heading); font-weight: 600; }
.web-process__arrow { fill: none; stroke: #9a9ea6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 정보보호 컨설팅 — 시스템 개념도 */
.sec-arch { margin: 0; padding: var(--sec-arch-pad, 24px); border: none; border-radius: var(--radius-card); background: var(--color-bg-light); overflow-x: auto; }
.sec-arch__svg { display: block; width: 100%; max-width: var(--sec-arch-max, 100%); min-width: 880px; height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.sec-arch__panel { fill: var(--sec-arch-soft, #e8f0ff); stroke: none; }
.sec-arch__panel--db { fill: var(--sec-arch-soft, #e8f0ff); }
.sec-arch__panel--mgmt { fill: var(--sec-arch-mgmt, #eef0f3); stroke: none; }
.sec-arch__panel-title { fill: var(--color-heading); font-size: var(--sec-arch-fs-title, 15px); font-weight: 700; }
.sec-arch__panel-title--dark { fill: var(--color-heading); }
.sec-arch__subpanel { fill: #dce8ff; stroke: none; }
.sec-arch__pill { fill: var(--color-white); stroke: none; }
.sec-arch__panel--db ~ .sec-arch__pill { fill: var(--color-white); }
.sec-arch__oval { fill: var(--sec-arch-soft); stroke: none; }
.sec-arch__pill-text { fill: var(--color-heading); font-size: var(--sec-arch-fs-pill, 13px); font-weight: 600; }
.sec-arch__actor-ring { fill: var(--color-white); stroke: var(--color-heading); stroke-width: 1.6; }
.sec-arch__actor-label { fill: var(--color-main); font-size: var(--sec-arch-fs-actor, 13px); font-weight: 600; }
.sec-arch__ico { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sec-arch__ico-accent { fill: none; stroke: var(--color-main); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
circle.sec-arch__ico-accent { fill: var(--color-main); stroke: none; }
.sec-arch__badge { fill: var(--color-main); stroke: none; }
.sec-arch__badge-check { fill: none; stroke: var(--color-white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-arch__ico-badge { fill: url(#gradSecArchIco); stroke: none; }
.sec-arch__ico-glyph { fill: var(--color-white); stroke: none; }
.sec-arch__ico-glyph-soft { fill: #2766fb; stroke: none; }
.sec-arch__ico-glyph-line { fill: none; stroke: var(--color-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sec-arch__ico-glyph-line-fill { fill: #2766fb; stroke: none; }
.sec-arch__link { fill: none; stroke: var(--color-heading); stroke-width: 1.4; }
.sec-arch__spine { fill: none; stroke: #c5cad3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sec-arch__arrow { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; }
.sec-arch__arrow-head { fill: var(--color-main); stroke: none; }
.sec-arch__ext-label { fill: var(--color-main); font-size: var(--sec-arch-fs-actor, 13px); font-weight: 600; }

/* 정보보호 컨설팅 — 장점 카드 */
.sec-benefit-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.sec-benefit-list__item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gap-16); align-items: center; padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.sec-benefit-list__num { font-family: var(--font-en); font-size: var(--font-size-32); font-weight: 500; line-height: 1em; color: var(--color-main); align-self: start; }
.sec-benefit-list__body { display: grid; gap: var(--gap-8); min-width: 0; }
.sec-benefit-list__title { font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); }
.sec-benefit-list__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.sec-benefit-list__visual { display: flex; align-items: center; justify-content: center; width: var(--sec-benefit-illust, 100px); }
.sec-benefit-list__svg { display: block; width: 100%; max-width: var(--sec-benefit-svg-max, 120px); height: auto; }
.sec-ico__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sec-ico__accent { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-ico__accent-fill { fill: var(--color-main); stroke: none; }
.sec-ico__badge-stroke { fill: none; stroke: var(--color-white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-ico__dot { fill: var(--color-white); stroke: none; }
/* 정보보호 컨설팅 — 핵심 메시지 배너 */
.sec-cap-banner { display: flex; align-items: center; gap: var(--sec-cap-banner-gap, 28px); margin: var(--gap-64) 0 0; padding: var(--sec-cap-banner-pad, 32px); border-radius: var(--radius-card); background: linear-gradient(105deg, #00081c 0%, #00153a 45%, #002a5c 100%); }
.sec-cap-banner__visual { flex: 0 0 var(--sec-cap-banner-visual, 120px); width: var(--sec-cap-banner-visual, 120px); height: var(--sec-cap-banner-visual, 120px); display: grid; place-items: center; }
.sec-cap-banner__deco { grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0.55; }
.sec-cap-banner__ring { fill: none; stroke: var(--sec-cap-banner-glow, #4aa3ff); stroke-width: 1; opacity: 0.35; }
.sec-cap-banner__circuit { fill: none; stroke: var(--sec-cap-banner-glow, #4aa3ff); stroke-width: 1.2; stroke-linecap: round; opacity: 0.55; }
.sec-cap-banner__node { fill: var(--sec-cap-banner-glow, #4aa3ff); stroke: none; opacity: 0.7; }
.sec-cap-banner__shield { grid-area: 1 / 1; width: var(--sec-cap-banner-shield, 88px); height: auto; filter: drop-shadow(0 0 14px rgba(74, 163, 255, 0.55)); }
.sec-cap-banner__shield-body { fill: var(--sec-cap-banner-glow, #4aa3ff); stroke: none; }
.sec-cap-banner__lock { fill: var(--color-white); stroke: none; }
.sec-cap-banner__lock-shackle { fill: none; stroke: var(--color-white); stroke-width: 3; stroke-linecap: round; }
.sec-cap-banner__lock-key { fill: var(--sec-cap-banner-glow, #4aa3ff); stroke: none; }
.sec-cap-banner__text { flex: 1 1 auto; margin: 0; min-width: 0; font-size: var(--font-size-18); font-weight: 500; line-height: var(--line-height-28); color: var(--color-white); word-break: keep-all; }
.sec-cap-banner__text strong { font-weight: 700; }
.sec-cap-banner__feats { display: flex; flex: 0 0 auto; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.sec-cap-banner__feat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sec-cap-banner-feat-gap, 10px); min-width: 96px; padding: 0 var(--gap-20); }
.sec-cap-banner__feat + .sec-cap-banner__feat { border-left: 1px solid var(--sec-cap-banner-divider, rgba(255, 255, 255, 0.28)); }
.sec-cap-banner__feat-icon { display: flex; align-items: center; justify-content: center; width: var(--sec-cap-banner-feat-icon, 36px); height: var(--sec-cap-banner-feat-icon, 36px); }
.sec-cap-banner__feat-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--color-white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-cap-banner__feat-label { font-weight: 500; line-height: var(--line-height-23); color: var(--color-white); text-align: center; white-space: nowrap; }
/* 위성시스템 — 지상국 시스템 프로세스 SVG */
.sat-process { margin: 0; padding: var(--sat-process-pad, 32px); border: 0; border-radius: var(--radius-card); background: var(--color-bg-light); overflow-x: auto; }
.sat-process__svg { display: block; width: 100%; max-width: var(--sat-process-max, 100%); min-width: 880px; height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.sat-process__phase { fill: var(--sat-process-soft, #e8f0ff); stroke: none; }
.sat-process__phase-text { fill: var(--color-heading); font-weight: 700; }
.sat-process__box { fill: var(--color-white); stroke: none; filter: drop-shadow(0 4px 12px rgba(0, 10, 34, 0.06)); }
.sat-process__box--wide { stroke: none; }
.sat-process__box-text { fill: var(--color-heading); font-weight: 600; }
.sat-process__core { fill: var(--color-white); stroke: none; filter: drop-shadow(0 4px 12px rgba(0, 10, 34, 0.06)); }
.sat-process__core-text { fill: var(--color-heading); font-weight: 700; }
.sat-process__monitor { fill: var(--sat-process-soft, #e8f0ff); stroke: none; }
.sat-process__monitor-text { fill: var(--color-heading); font-weight: 700; }
.sat-process__side-head { fill: var(--color-main); stroke: none; }
.sat-process__side-head-text { fill: var(--color-white); font-weight: 700; }
.sat-process__side-body { fill: var(--color-white); stroke: none; filter: drop-shadow(0 4px 12px rgba(0, 10, 34, 0.06)); }
.sat-process__org-item { fill: var(--color-bg-light); stroke: none; }
.sat-process__org-text { fill: var(--color-heading); font-weight: 500; }
.sat-process__ico { fill: #2766fb; stroke: none; }
.sat-process__ico-accent { fill: #69aaff; stroke: none; }
.sat-process__signal { fill: none; stroke: var(--color-heading); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 3; }
.sat-process__flow { fill: none; stroke: #C2C9DA; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sat-process__arrow-head { fill: #C2C9DA; stroke: none; }
.sat-process__flow-label { fill: var(--color-heading); font-weight: 600; }
.sat-rx__body { fill: var(--sat-rx-gold); stroke: var(--sat-rx-gold-dark); stroke-width: 0.8; }
.sat-rx__body-side { fill: var(--sat-rx-gold-dark); stroke: none; }
.sat-rx__panel { fill: var(--sat-rx-panel); stroke: var(--sat-rx-panel-light); stroke-width: 0.6; }
.sat-rx__panel-grid { fill: none; stroke: var(--sat-rx-panel-light); stroke-width: 0.5; }
.sat-rx__antenna { fill: none; stroke: var(--sat-rx-gold-dark); stroke-width: 1.4; stroke-linecap: round; }
.sat-rx__signal { fill: var(--sat-rx-signal); stroke: none; }
.sat-rx__dish { fill: var(--sat-rx-dish); stroke: var(--sat-rx-dish-dark); stroke-width: 1; }
.sat-rx__dish-inner { fill: var(--sat-rx-dish-mid); stroke: none; }
.sat-rx__dish-strut { fill: none; stroke: var(--sat-rx-dish-dark); stroke-width: 1; stroke-linecap: round; }
.sat-rx__dish-feed { fill: var(--sat-rx-dish-dark); stroke: none; }
.sat-rx__dish-stand { fill: var(--sat-rx-dish-mid); stroke: var(--sat-rx-dish-dark); stroke-width: 0.8; }
.sat-rx__dish-base { fill: var(--sat-rx-dish); stroke: var(--sat-rx-dish-dark); stroke-width: 0.8; }
/* 위성시스템 — 지상국의 역할 SVG */
.sat-role { margin: 0 0 var(--gap-32); padding: var(--gap-24); border: 0; border-radius: var(--radius-card); background: var(--color-bg-light); overflow-x: auto; }
.sat-role__layer-label { margin: 0 0 var(--gap-8); font-size: var(--font-size-14); font-weight: 600; color: var(--color-heading); opacity: 0.55; }
.sat-role__layer-label--svg { margin-top: var(--gap-24); }
.sat-role__ref-img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.sat-role__svg { display: block; width: 100%; max-width: var(--sat-role-max); min-width: 880px; height: auto; margin: 0 auto; font-family: var(--font-ko); overflow: visible; }
.sat-role--png-only .sat-role__svg { display: none; }
.sat-role--png-only .sat-role__layer-label--svg { display: none; }
.sat-role__card-shell { fill: var(--color-white); stroke: none; }
.sat-role__card-foot { fill: var(--sat-process-soft); stroke: none; }
.sat-role__card-label { fill: var(--color-heading); font-weight: 700; }
.sat-role__ico { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sat-role__ico-accent { fill: none; stroke: var(--color-main); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
circle.sat-role__ico-accent { fill: var(--color-main); stroke: none; }
.sat-role__ico-ring { fill: none; stroke: var(--color-heading); stroke-width: 1.6; }
.sat-role__dot { fill: var(--color-heading); stroke: none; }
.sat-role__pixel { fill: var(--color-heading); stroke: none; }
.sat-role__bin { fill: var(--color-heading); font-weight: 600; }
.sat-role__signal-wave { fill: none; stroke: var(--color-main); stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.sat-role__flow { fill: none; stroke: var(--color-main); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sat-role__flow-node { fill: var(--color-white); stroke: var(--color-main); stroke-width: 2; }
.sat-role__arrow-head { fill: var(--color-main); stroke: none; }
.sat-role__card-shell--tint { fill: var(--sat-role-tint); stroke: none; }
.sat-role__card-foot--accent { fill: var(--sat-role-foot-accent); }
.sat-role__card-label--on-accent { fill: var(--color-white); }
.sat-role__dist-arrow { fill: url(#gradSatRoleDist); stroke: none; }
.sat-role__dist-text { fill: var(--color-white); font-weight: 700; }

/* 지상국의 역할 — 카드 아이콘 보조 스타일 (세부 디테일용) */
.sat-role__ico--thin { stroke-width: var(--sat-role-stroke-thin); }
.sat-role__ico-screen { fill: var(--sat-process-soft); stroke: var(--sat-process-box-stroke); stroke-width: var(--sat-role-stroke-thin); }
.sat-role__ico-tint { fill: var(--sat-process-soft); stroke: var(--color-heading); stroke-width: var(--sat-role-stroke-thin); }
ellipse.sat-role__ico-accent { fill: none; stroke: var(--color-main); stroke-width: var(--sat-role-stroke); }
/* 제품 — 가상화/클라우드 */
.virt-value-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-24); margin: 0; padding: 0; list-style: none; }
.virt-value-list__item { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); box-shadow: 0 4px 24px rgba(0, 10, 34, 0.06); transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.virt-value-list__item:hover { border-color: rgba(39, 102, 251, 0.35); box-shadow: 0 8px 32px rgba(39, 102, 251, 0.12); }
.virt-value-list__aside { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-16); padding: var(--virt-value-aside-pad, 28px) var(--gap-20); background: linear-gradient(155deg, var(--color-sub) 0%, var(--virt-value-aside-mid, #001e52) 55%, var(--color-main) 100%); text-align: center; }
.virt-value-list__aside::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.14) 0%, transparent 55%); pointer-events: none; }
.virt-value-list__num { position: absolute; top: var(--gap-16); left: var(--gap-16); font-family: var(--font-en); font-size: var(--font-size-32); font-weight: 500; line-height: 1em; color: rgba(255, 255, 255, 0.22); }
.virt-value-list__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--virt-value-icon, 56px); height: var(--virt-value-icon, 56px); padding: var(--gap-12); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); }
.virt-value-list__icon svg { display: block; width: 100%; height: 100%; }
.virt-val-ico__stroke { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.virt-val-ico__accent { fill: none; stroke: var(--color-gradient-end); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.virt-val-ico__accent-fill { fill: var(--color-gradient-end); stroke: none; }
.virt-val-ico__badge { fill: none; stroke: var(--color-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.virt-value-list__label { position: relative; z-index: 1; margin: 0; font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-white); word-break: keep-all; }
.virt-value-list__body { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--gap-16); flex: 1 1 auto; min-width: 0; padding: var(--gap-32); }
.virt-value-list__lead { margin: 0; font-size: var(--font-size-22); font-weight: 600; line-height: var(--line-height-26); color: var(--color-heading); }
.virt-value-list__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.virt-hw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap-40); align-items: center; }
.virt-hw__media { display: flex; flex-direction: column; align-items: center; gap: var(--gap-12); margin: 0; padding: var(--gap-32); border: 0; border-radius: var(--radius-card); background: #f8f8f8; }
.virt-hw__img { display: block; width: 100%; max-width: var(--virt-hw-media-max, 420px); height: auto; object-fit: contain; background: #f8f8f8; }
.virt-hw__svg { display: block; width: 100%; max-width: var(--virt-hw-media-max, 420px); height: auto; }
.virt-hw__rack { fill: var(--color-white); stroke: var(--color-heading); stroke-width: 1.5; }
.virt-hw__rack--dark { fill: #2a2a2a; stroke: #1a1a1a; }
.virt-hw__rack-unit { fill: none; stroke: var(--color-border); stroke-width: 1.2; }
.virt-hw__rack-unit--accent { fill: var(--color-main); stroke: none; opacity: 0.85; }
.virt-hw__rack-unit--dark { fill: #444; stroke: #666; }
.virt-hw__rack-dot { fill: var(--color-main); stroke: none; }
.virt-hw__rack-label { fill: var(--color-white); font-family: var(--font-en); font-size: var(--font-size-13); font-weight: 500; }
.virt-hw-spec { display: grid; margin: 0; padding: 0; list-style: none; }
.virt-hw-spec__item { display: grid; grid-template-columns: var(--virt-hw-spec-ico, 48px) 1fr; gap: var(--gap-16); align-items: start; padding: var(--gap-24) 0; border-bottom: 1px dashed var(--color-border); }
.virt-hw-spec__item:first-child { padding-top: 0; }
.virt-hw-spec__item:last-child { padding-bottom: 0; border-bottom: 0; }
.virt-hw-spec__icon { display: flex; align-items: center; justify-content: center; width: var(--virt-hw-spec-ico, 48px); height: var(--virt-hw-spec-ico, 48px); }
.virt-hw-spec__icon svg { display: block; width: 100%; height: 100%; }
.virt-hw-ico__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.virt-hw-ico__accent { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.virt-hw-ico__accent-fill { fill: var(--color-main); stroke: none; }
.virt-hw-spec__body { display: grid; gap: var(--gap-8); min-width: 0; }
.virt-hw-spec__title { font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); }
.virt-hw-spec__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-muted); }
.virt-prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-24); }
.virt-prod-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.virt-prod-card__brand { display: flex; align-items: center; justify-content: center; min-height: var(--virt-prod-brand-h, 56px); padding: var(--gap-12) var(--gap-24); background: var(--color-heading); }
.virt-prod-card__logo { font-family: var(--font-en); font-size: var(--font-size-20); font-weight: 500; line-height: 1em; color: var(--color-white); }
.virt-prod-card__head { display: flex; align-items: center; justify-content: center; min-height: var(--virt-prod-head-h, 48px); margin: 0; padding: 0 var(--gap-24); background: var(--color-main); font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-white); text-align: center; }
.virt-prod-card__body { display: grid; gap: var(--gap-12); flex: 1 1 auto; padding: var(--gap-24); background: var(--color-bg-light); }
.virt-prod-card__body p { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.virt-prod-card__link { margin: 0; padding: var(--gap-20) var(--gap-24) var(--gap-24); text-align: center; }
.virt-prod-card__link a { font-size: var(--font-size-15); font-weight: 600; color: var(--color-main); text-decoration: underline; text-underline-offset: 3px; }
/* 제품 — 빅데이터 */
.bd-pillar-section { margin-top: 0; }
.bd-pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-24); align-items: stretch; margin: 0; padding: 0; list-style: none; }
.bd-pillar-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.bd-pillar-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
.bd-pillar-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-card); background: var(--color-bg-light); }
.bd-pillar-card__body { display: flex; flex-direction: column; gap: var(--gap-24); flex: 1 1 auto; padding: var(--gap-32); }
.bd-pillar-card__step { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; border-radius: 50%; background: var(--color-main); font-family: var(--font-en); font-size: var(--font-size-15); font-weight: 500; line-height: 1em; color: var(--color-white); letter-spacing: 0; text-transform: none; }
.bd-pillar-card__icon { display: block; width: 64px; height: 64px; margin: 0 0 calc(var(--gap-48) - var(--gap-24)); flex-shrink: 0; }
.bd-pillar-card__icon svg { display: block; width: 100%; height: 100%; }
.bd-pillar-card__title { margin: 0; font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-32); color: var(--color-heading); word-break: keep-all; }
.bd-pillar-card__title-accent { color: var(--color-heading); }
.bd-pillar-card__desc { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.bd-pillar-card__list { display: grid; gap: var(--gap-8); margin: 0; padding: 0; list-style: none; }
.bd-pillar-card__list li { position: relative; padding-left: 1em; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.bd-pillar-card__list li::before { content: "·"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-body); }
.bd-pillar-card__list li:only-child { padding-left: 0; }
.bd-pillar-card__list li:only-child::before { content: none; }
.bd-feat-section .sub-section__desc { margin-top: 0; margin-bottom: var(--bd-feat-desc-gap, 48px); }
.bd-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: var(--bd-feat-row-gap, 40px); column-gap: var(--bd-feat-col-gap, 24px); margin: 0; padding: 0; list-style: none; }
.bd-feat-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gap-24); height: 100%; min-height: var(--bd-feat-card-min-h, 268px); padding: var(--gap-32) var(--gap-24) var(--gap-40); border: 1px solid var(--bd-pillar-border, #d8e4fc); border-radius: var(--radius-card); background: var(--color-white); box-shadow: 0 6px 24px var(--bd-pillar-glow, rgba(39, 102, 251, 0.1)); text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.bd-feat-card:hover { transform: translateY(-4px); border-color: rgba(39, 102, 251, 0.45); box-shadow: 0 12px 32px rgba(39, 102, 251, 0.14); }
.bd-feat-card__visual { display: flex; align-items: center; justify-content: center; width: var(--bd-feat-icon-wrap, 112px); height: var(--bd-feat-icon-wrap, 112px); flex-shrink: 0; border-radius: var(--radius-pill); background: var(--bd-pillar-visual-top, #eef4ff); }
.bd-feat-card__visual .bd-feat-card__svg { width: var(--bd-feat-icon-inner, 80px); max-width: var(--bd-feat-icon-inner, 80px); height: var(--bd-feat-icon-inner, 80px); max-height: var(--bd-feat-icon-inner, 80px); }
.bd-feat-card__svg { display: block; width: 100%; max-width: var(--bd-feat-svg-max, 120px); height: auto; }
.bd-feat-card__label { margin: 0; padding-top: var(--gap-8); font-size: var(--font-size-15); font-weight: 600; line-height: var(--line-height-26); color: var(--color-main); word-break: keep-all; }
.bd-ico__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bd-ico__accent { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bd-ico__accent-fill { fill: var(--color-main); stroke: none; }
.bd-ico__white { fill: none; stroke: var(--color-white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bd-ico__white-fill { fill: var(--color-white); stroke: none; }
.bd-ico__text-accent { fill: var(--color-main); font-family: var(--font-en); font-weight: 700; }
.bd-cloud-flow { display: flex; align-items: stretch; gap: var(--bd-cloud-flow-gap, 20px); margin: 0; padding: var(--bd-cloud-svc-pad, 32px); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); overflow-x: auto; }
.bd-cloud-flow__card--request { display: flex; flex-direction: column; flex: 0 0 var(--bd-cloud-flow-request-w, 220px); min-width: var(--bd-cloud-flow-request-w, 220px); overflow: hidden; border: 1.5px solid var(--color-main); border-radius: var(--radius-input); background: var(--color-white); }
.bd-cloud-flow__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-8); padding: var(--gap-16) var(--gap-12); background: var(--color-main); text-align: center; }
.bd-cloud-flow__ico { display: flex; align-items: center; justify-content: center; width: var(--bd-cloud-flow-ico, 40px); height: var(--bd-cloud-flow-ico, 40px); }
.bd-cloud-flow__ico svg { display: block; width: 100%; height: 100%; }
.bd-flow-ico__bg { fill: var(--color-white); stroke: none; }
.bd-flow-ico__glyph { fill: #2766fb; stroke: none; }
.bd-flow-ico__glyph-soft { fill: #69aaff; stroke: none; }
.bd-flow-ico__glyph-accent-fill { fill: #69aaff; stroke: none; }
.bd-flow-ico__glyph-line { fill: none; stroke: #69aaff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bd-cloud-flow__title { margin: 0; font-size: var(--font-size-15); font-weight: 700; line-height: var(--line-height-23); color: var(--color-white); word-break: keep-all; }
.bd-cloud-flow__list { display: grid; gap: var(--gap-12); margin: 0; padding: var(--gap-20) var(--gap-16); list-style: none; }
.bd-cloud-flow__list li { display: flex; align-items: flex-start; gap: var(--gap-10); font-size: var(--font-size-14); font-weight: 500; line-height: var(--line-height-23); color: var(--color-heading); word-break: keep-all; }
.bd-cloud-flow__list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: 1px; background: var(--color-main); }
.bd-cloud-flow__arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--bd-cloud-flow-arrow, 48px); align-self: center; }
.bd-cloud-flow__arrow svg { display: block; width: var(--bd-cloud-flow-arrow, 48px); height: auto; fill: var(--color-main); }
.bd-cloud-flow__lab { display: flex; flex-direction: column; gap: var(--bd-cloud-flow-module-gap, 20px); flex: 1 1 auto; min-width: 420px; padding: var(--gap-24); border-radius: var(--radius-card); background: var(--bd-cloud-svc-lab, linear-gradient(180deg, #eef5ff 0%, #d6ebff 100%)); }
.bd-cloud-flow__lab-head { display: grid; gap: var(--gap-12); text-align: center; }
.bd-cloud-flow__lab-brand { margin: 0; font-family: var(--font-en); font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); }
.bd-cloud-flow__lab-teams { display: flex; align-items: center; justify-content: center; gap: var(--gap-12); flex-wrap: wrap; }
.bd-cloud-flow__lab-teams > span { font-size: var(--font-size-14); font-weight: 700; line-height: var(--line-height-23); color: var(--color-main); }
.bd-cloud-flow__lab-people { display: inline-flex; width: 56px; height: 32px; }
.bd-cloud-flow__lab-people svg { display: block; width: 100%; height: 100%; }
.bd-cloud-flow__module { overflow: hidden; border: 1.5px solid var(--color-main); border-radius: var(--radius-input); background: var(--color-white); }
.bd-cloud-flow__module .bd-cloud-flow__head { flex-direction: row; gap: var(--gap-12); padding: var(--gap-12) var(--gap-20); }
.bd-cloud-flow__module .bd-cloud-flow__ico { width: 32px; height: 32px; flex-shrink: 0; }
.bd-cloud-flow__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-8) var(--gap-24); padding: 0 var(--gap-16) var(--gap-8); }
.bd-cloud-flow__cols .bd-cloud-flow__list { padding-top: var(--gap-16); padding-bottom: var(--gap-16); }
.bd-cloud-flow__result { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--bd-cloud-flow-result, 180px); width: var(--bd-cloud-flow-result, 180px); height: var(--bd-cloud-flow-result, 180px); align-self: center; border: 0; border-radius: 50%; background: var(--bd-cloud-svc-circle, #d6e8ff); box-shadow: none; text-align: center; }
.bd-cloud-flow__result-text { margin: 0; font-weight: 700; line-height: var(--line-height-26); color: var(--color-heading); word-break: keep-all; }
.bd-arch { margin: 0 0 var(--gap-32); padding: var(--bd-arch-pad, 40px); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--bd-arch-canvas, #ffffff); box-shadow: none; overflow-x: auto; }
.bd-arch:last-child { margin-bottom: 0; }
.bd-arch__svg { display: block; width: 100%; max-width: var(--bd-arch-max, 100%); min-width: 880px; height: auto; margin: 0 auto; font-family: var(--font-ko); filter: none; overflow: visible; }
.bd-arch__svg * { filter: none; }
.bd-arch__canvas { fill: var(--bd-arch-canvas, #ffffff); }
.bd-arch__section-title { fill: var(--color-heading); font-size: var(--bd-arch-fs-title, 18px); font-weight: 700; }
.bd-arch__panel { fill: var(--color-white); stroke: var(--color-border); stroke-width: 1; }
.bd-arch__card { fill: var(--bd-arch-soft, #edf4ff); stroke: none; }
.bd-arch__card-solid { fill: var(--bd-arch-soft, #edf4ff); stroke: none; }
.bd-arch__card-label { fill: var(--color-heading); font-size: var(--bd-arch-fs-head, 15px); font-weight: 700; }
.bd-arch__col-title { fill: var(--color-heading); font-size: var(--bd-arch-fs-head, 15px); font-weight: 700; }
.bd-arch__col-desc { fill: var(--color-body); font-size: var(--bd-arch-fs-body, 12px); font-weight: 500; }
.bd-arch__stroke { fill: none; stroke: var(--color-heading); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bd-arch__accent { fill: none; stroke: var(--color-main); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bd-arch__accent-fill { fill: var(--color-main); stroke: none; }
.bd-arch__ico-bg { fill: var(--color-white); stroke: none; }
.bd-arch__arrow-dot { fill: var(--color-main); stroke: none; }
.bd-arch__arrow { fill: none; stroke: #a9c6ff; stroke-width: 2; stroke-linecap: round; }
.bd-arch__arrow-head { fill: none; stroke: var(--color-main); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-platform-intro { margin: var(--gap-64) 0 var(--gap-32); text-align: center; }
.bd-platform-intro__title { margin: 0 0 var(--gap-16); font-size: var(--font-size-24); font-weight: 700; line-height: var(--line-height-30); color: var(--color-heading); word-break: keep-all; }
.bd-platform-intro__desc { margin: 0 auto; max-width: 820px; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.bd-platform-split { display: flex; align-items: center; gap: var(--gap-64); margin-top: var(--gap-64); }
.bd-platform-split__visual { flex: 0 0 900px; max-width: 900px; margin: 0; overflow-x: auto; }
.bd-platform-split__img { display: block; width: 100%; min-width: 880px; height: auto; border-radius: var(--radius-card); }
.bd-platform-split__content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.bd-platform-split__title { margin: 0 0 var(--gap-24); font-size: var(--font-size-36); font-weight: 700; line-height: var(--line-height-48); color: var(--color-heading); word-break: keep-all; }
.bd-platform-split__desc { margin: 0; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.bd-arch__lake-zone { fill: var(--bd-arch-soft-mid, #eef4ff); stroke: var(--color-main); stroke-width: 2; stroke-dasharray: 8 6; }
.bd-arch__lake-title { fill: var(--color-heading); font-family: var(--font-en); font-size: var(--bd-arch-fs-title, 18px); font-weight: 700; }
.bd-arch__pill { fill: var(--color-main); stroke: none; }
.bd-arch__pill-text { fill: var(--color-white); font-family: var(--font-en); font-size: var(--bd-arch-fs-pill, 12px); font-weight: 600; }
.bd-arch__hdfs { fill: var(--bd-arch-soft, #edf4ff); stroke: var(--color-main); stroke-width: 1.6; }
.bd-arch__hdfs-text { fill: var(--color-main); font-family: var(--font-en); font-size: 15px; font-weight: 700; }
.bd-arch__box { fill: var(--color-white); stroke: var(--bd-arch-panel-stroke, #d5dbe5); stroke-width: 1.4; }
.bd-arch__box-head { fill: var(--color-main); stroke: none; }
.bd-arch__box-title { fill: var(--color-white); font-family: var(--font-en); font-size: var(--bd-arch-fs-head, 15px); font-weight: 700; }
.bd-arch__box-label { fill: var(--color-heading); font-family: var(--font-en); font-size: var(--bd-arch-fs-body, 12px); font-weight: 600; }
.bd-arch__flow { fill: none; stroke: var(--color-main); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bd-arch__flow-label { fill: var(--color-main); font-family: var(--font-en); font-size: 11px; font-weight: 700; }
.bd-arch__cyl { fill: var(--bd-arch-soft, #edf4ff); stroke: var(--color-main); stroke-width: 1.4; }
.bd-arch__cyl-label { fill: var(--color-heading); font-family: var(--font-en); font-size: var(--bd-arch-fs-body, 12px); font-weight: 700; }
.bd-arch__report-head { fill: var(--color-main); stroke: none; }
.bd-arch__report-body { fill: var(--color-bg-light); stroke: var(--bd-arch-panel-stroke, #d5dbe5); stroke-width: 1.4; }
.bd-arch__chip { fill: var(--color-white); stroke: var(--bd-arch-panel-stroke, #d5dbe5); stroke-width: 1; }
.bd-arch__warn { fill: #f5c542; stroke: none; }
/* 제품 — 보안솔루션 */
.sec-feat-section { margin-top: 0; }
.sec-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sec-feat-gap, 24px); margin: 0; padding: 0; list-style: none; }
.sec-feat-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-16); min-height: var(--sec-feat-min-h, 280px); padding: var(--sec-feat-pad, 32px) var(--gap-24) var(--gap-32); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); box-shadow: 0 4px 24px rgba(0, 10, 34, 0.06); text-align: center; transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.sec-feat-card:hover { border-color: rgba(39, 102, 251, 0.35); box-shadow: 0 8px 32px rgba(39, 102, 251, 0.12); transform: translateY(-4px); }
.sec-feat-card__visual { display: flex; align-items: center; justify-content: center; width: var(--sec-feat-icon, 80px); height: var(--sec-feat-icon, 80px); flex-shrink: 0; }
.sec-feat-card__icon { display: block; width: var(--sec-feat-icon, 80px); height: var(--sec-feat-icon, 80px); object-fit: contain; }
.sec-feat-card__num { font-family: var(--font-en); font-size: var(--font-size-14); font-weight: 600; line-height: 1em; color: var(--color-main); }
.sec-feat-card__title { margin: 0; font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-main); word-break: keep-all; }
.sec-feat-card__desc { margin: 0; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.sec-prod-grid { margin-top: var(--gap-24); gap: var(--gap-24); --sec-prod-col: calc((100% - var(--gap-24) * 2) / 3); }
.sec-prod-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-prod-grid--2 { margin-top: var(--gap-24); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sec-prod-card { border: 0; border-radius: var(--radius-card); background: var(--color-bg-light); box-shadow: none; padding: var(--gap-32) var(--gap-30, 30px); gap: var(--gap-20); transition: background-color 0.25s ease; }
.sec-prod-card:hover { background: var(--color-white); box-shadow: 0 12px 32px rgba(0, 10, 34, 0.08); }
.sec-prod-card__brand { display: flex; align-items: center; justify-content: flex-start; min-height: 0; padding: 0; background: transparent; border-bottom: 0; text-align: left; }
.sec-prod-card__logo { display: block; width: auto; max-width: var(--sec-prod-logo-max-w, 132px); height: var(--sec-prod-logo-h, 28px); margin: 0; object-fit: contain; object-position: left center; }
.sec-prod-card__logo--text { height: auto; max-width: none; font-family: var(--font-en); font-size: var(--font-size-20); font-weight: 700; line-height: 1em; color: var(--color-heading); }
.sec-prod-card__head { display: block; min-height: 0; margin: calc(var(--gap-48) - var(--gap-20)) 0 0; padding: 0; background: transparent; font-size: var(--font-size-22); font-weight: 700; line-height: var(--line-height-32); color: var(--color-heading); text-align: left; }
.sec-prod-card__body { display: grid; gap: var(--gap-8); flex: 1 1 auto; padding: 0; background: transparent; }
.sec-prod-card__body p { position: relative; margin: 0; padding-left: 1em; font-size: var(--font-size-15); line-height: var(--line-height-26); color: var(--color-body); }
.sec-prod-card__body p::before { content: "\00b7"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-body); }
.sec-prod-card__link { margin: 0; padding: var(--gap-20) 0 0; border-top: 1px solid var(--color-border); text-align: left; }
.sec-prod-card__link a { display: inline-flex; align-items: center; gap: var(--gap-8); font-size: var(--font-size-15); font-weight: 600; color: var(--color-heading); text-decoration: none; }
.sec-prod-card__link a::after { content: "\2197"; font-size: 1em; line-height: 1em; }
.sec-prod-card__link a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 제품 — 서버/스토리지 */
.ss-intro { text-align: center; }
.ss-intro .sub-lead { margin-left: auto; margin-right: auto; max-width: 880px; }
.ss-hero { display: flex; align-items: center; justify-content: center; margin: var(--gap-40) auto 0; max-width: var(--ss-hero-max, 920px); padding: var(--ss-hero-pad, 24px); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: linear-gradient(180deg, #f7f9fc 0%, var(--color-white) 100%); box-shadow: 0 8px 32px rgba(0, 10, 34, 0.06); }
.ss-hero__img { display: block; width: 100%; height: auto; object-fit: contain; }
.ss-vendor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ss-vendor-gap, 24px); align-items: stretch; }
.ss-vendor-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); box-shadow: none; transition: border-color 0.25s ease, transform 0.25s ease; }
.ss-vendor-card:hover { border-color: rgba(39, 102, 251, 0.35); box-shadow: none; transform: translateY(-4px); }
.ss-vendor-card__brand { display: flex; align-items: center; justify-content: center; min-height: var(--ss-brand-h, 112px); padding: var(--gap-16) var(--gap-24); border-bottom: 0; background: var(--color-white); text-align: center; }
.ss-vendor-card__logo { display: block; width: auto; max-width: var(--ss-logo-max-w, 220px); height: var(--ss-logo-h, 40px); margin: 0 auto; object-fit: contain; object-position: center; }
.ss-vendor-card__logo--wide { max-width: 100%; height: auto; max-height: calc(var(--ss-logo-h, 40px) + 4px); }
.ss-vendor-card__body { flex: 1 1 auto; padding: var(--gap-24); background: var(--color-white); }
.ss-vendor-card:not(.ss-vendor-card--storage) .ss-vendor-card__group { flex: 1 1 auto; }
.ss-vendor-card__body p { margin: 0; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.ss-vendor-card__body strong { font-weight: 700; color: var(--color-heading); }
.ss-vendor-card__links { display: grid; gap: var(--gap-12); margin: 0; padding: var(--gap-20) var(--gap-24) var(--gap-24); list-style: none; }
.ss-vendor-card__links a { display: flex; align-items: center; justify-content: center; min-height: var(--ss-link-h, 48px); padding: 0 var(--gap-16); border: 1.5px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-white); font-size: var(--font-size-15); font-weight: 500; line-height: var(--line-height-23); color: var(--color-heading); text-align: center; word-break: keep-all; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.ss-vendor-card__links a:hover { background: var(--color-bg-light); border-color: var(--color-border); color: var(--color-heading); }
.ss-vendor-card__links--primary a { border-color: var(--color-main); color: var(--color-main); }
.ss-vendor-card__links--primary a:hover { background: rgba(39, 102, 251, 0.08); border-color: var(--color-main); color: var(--color-main); }
.ss-vendor-card__links--outline a { background: var(--color-white); border: 1.5px solid var(--ss-hpe-accent, #01a982); color: var(--ss-hpe-accent, #01a982); }
.ss-vendor-card__links--outline a:hover { background: rgba(1, 169, 130, 0.08); border-color: var(--ss-hpe-accent, #01a982); color: var(--ss-hpe-accent, #01a982); }
.ss-vendor-card--storage { padding-bottom: var(--gap-16); }
.ss-vendor-card--storage > .ss-vendor-card__brand + .ss-vendor-card__group .ss-vendor-card__group-desc { min-height: calc(var(--line-height-26) * 3); }
.ss-vendor-card__group { display: grid; gap: var(--gap-12); padding: var(--gap-24) var(--gap-24) var(--gap-8); }
.ss-vendor-card__group + .ss-vendor-card__group { padding-top: var(--gap-16); border-top: 1px solid var(--color-border); margin: 0 var(--gap-24); padding-left: 0; padding-right: 0; }
.ss-vendor-card__group-title { margin: 0; font-size: var(--font-size-18); font-weight: 700; line-height: var(--line-height-28); color: var(--color-heading); word-break: keep-all; }
.ss-vendor-card__group-desc { margin: 0; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.ss-prod-list { display: grid; gap: var(--gap-10); margin: 0; padding: 0; list-style: none; }
.ss-prod-list a { display: flex; align-items: center; justify-content: center; min-height: var(--ss-link-h, 48px); padding: var(--gap-12) var(--gap-16); border: 1.5px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-white); font-size: var(--font-size-15); font-weight: 500; line-height: var(--line-height-23); color: var(--color-heading); text-align: center; word-break: keep-all; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.ss-prod-list a:hover { border-color: var(--color-border); color: var(--color-heading); background: var(--color-bg-light); }
.ss-prod-list--solid a { border: 1.5px solid var(--color-main); background: var(--color-white); color: var(--color-main); }
.ss-prod-list--solid a:hover { border-color: var(--color-main); background: rgba(39, 102, 251, 0.08); color: var(--color-main); }
.ss-prod-list--outline a { border: 1.5px solid var(--ss-hpe-accent, #01a982); background: var(--color-white); color: var(--ss-hpe-accent, #01a982); }
.ss-prod-list--outline a:hover { border-color: var(--ss-hpe-accent, #01a982); color: var(--ss-hpe-accent, #01a982); background: rgba(1, 169, 130, 0.08); }
/* 서버/스토리지 — 쇼케이스 비주얼 업그레이드 */
.ss-intro { text-align: left; }
.ss-showcase { position: relative; overflow: hidden; margin: 0; border-radius: var(--ss-showcase-radius); background: var(--color-white); }
.ss-showcase__glow { display: none; }
.ss-showcase__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--gap-64); align-items: center; min-height: var(--ss-showcase-min-h); }
.ss-showcase__copy { display: grid; gap: var(--gap-20); color: var(--color-heading); }
.ss-showcase__eyebrow { margin: 0; font-family: var(--font-en); font-size: var(--font-size-14); font-weight: 500; line-height: var(--line-height-23); color: var(--color-main); text-transform: uppercase; animation: ss-fade-up 0.7s ease both; }
.ss-showcase__title { margin: 0; font-size: var(--font-size-32); font-weight: 700; line-height: var(--line-height-48); color: var(--color-heading); word-break: keep-all; animation: ss-fade-up 0.7s ease 0.08s both; }
.ss-showcase__lead { margin: 0; max-width: 34em; font-weight: 400; line-height: var(--line-height-28); color: var(--color-body); word-break: keep-all; animation: ss-fade-up 0.7s ease 0.16s both; }
.ss-showcase__tags { display: flex; flex-wrap: wrap; gap: var(--gap-10); margin: var(--gap-8) 0 0; padding: 0; list-style: none; animation: ss-fade-up 0.7s ease 0.24s both; }
.ss-showcase__tag { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ss-showcase-tag-h); padding: 4px calc(var(--gap-16) + 2px); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-white); font-size: var(--font-size-15); font-weight: 600; line-height: var(--line-height-23); color: var(--color-heading); }
.ss-showcase__visual { position: relative; display: grid; place-items: center; margin: 0; min-height: 280px; animation: ss-fade-up 0.85s ease 0.18s both; }
.ss-showcase__stage { position: absolute; inset: 18% 8% 12%; border-radius: 50%; background: radial-gradient(circle, rgba(39, 102, 251, 0.1) 0%, rgba(39, 102, 251, 0.04) 42%, transparent 72%); filter: blur(2px); animation: ss-stage-breathe 4.8s ease-in-out infinite; }
.ss-showcase__img { position: relative; z-index: 1; display: block; width: 100%; max-width: var(--ss-showcase-img-max); height: auto; object-fit: contain; border-radius: var(--radius-card); }
[class*="page-product-"] .ss-showcase__img { width: 640px; max-width: 640px; height: auto; object-fit: contain; object-position: center; }
[class*="page-product-"] .ss-showcase { padding-block: 0; padding-left: 0; }
[class*="page-product-"] .ss-showcase__grid { grid-template-columns: 640px minmax(0, 1fr); }
[class*="page-product-"] .ss-showcase__visual { place-items: center; }
.ss-showcase__caption { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-10); margin-top: var(--gap-16); }
.ss-showcase__chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--gap-12); border: 1px solid rgba(39, 102, 251, 0.16); border-radius: var(--radius-pill); background: rgba(39, 102, 251, 0.08); font-family: var(--font-en); font-size: var(--font-size-15); font-weight: 500; line-height: 1em; color: var(--color-main); }
@keyframes ss-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ss-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes ss-stage-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.page-product-server-storage .ss-showcase__visual { width: 640px; max-width: 100%; height: 400px; padding: var(--gap-24); border-radius: var(--radius-card); background: #f8f8f8; box-sizing: border-box; }
.page-product-server-storage .sub-section__desc { font-size: var(--font-size-18); line-height: var(--line-height-28); }
.page-product-server-storage .ss-showcase__stage { display: none; }
.page-product-server-storage .ss-showcase__img { width: 100%; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; }

/* 쇼케이스 인트로 적용 페이지 — 후속 섹션 간격 보정 */
.page-product-bigdata .ss-intro + .bd-pillar-section { margin-top: 0; }
.page-product-virtualization .ss-intro + .sub-section, .page-product-security .ss-intro + .sub-section { margin-top: 0; }
.ceo-focus-section + .sub-section, .ceo-focus-section + .contain { margin-top: var(--gap-150); }
.ceo-focus-section + .tech-core-section, .ceo-focus-section + .bd-pillar-section { margin-top: 0; }
.ceo-focus-section__inner > .ai-cap-banner { margin-top: var(--gap-64); background: var(--color-main); }

/* ========== 사업소개 — 상단 인트로(쇼케이스, 이미지+카피 2단 레이아웃) ========== */
[class*="page-business-"] .ss-showcase { margin-bottom: var(--gap-150); padding-block: 0; padding-left: 0; }
[class*="page-business-"] .ss-showcase__grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); justify-items: normal; text-align: left; min-height: 0; padding-block: 0; }
[class*="page-business-"] .ss-showcase__copy { justify-items: normal; max-width: none; margin-inline: 0; }
[class*="page-business-"] .ss-showcase__lead { max-width: none; }
[class*="page-business-"] .ss-showcase__tags { justify-content: flex-start; }
[class*="page-business-"] .ss-showcase__visual { place-items: start; min-height: 0; }
[class*="page-business-"] .ss-showcase__img { border-radius: var(--radius-card); }
.page-business-satellite .ss-showcase__img { animation: none; filter: none; }
[class*="page-business-"] .ss-intro + .sub-section, [class*="page-business-"] .ss-intro + section { margin-top: 0; }

/* ========== 사업소개 — 타이틀 중앙정렬 & 아이콘 카드 통일 ========== */
[class*="page-business-"] .sub-section--center .sub-section__subtitle { text-align: center; }

/* ========== 회사소개 — CEO ========== */
.ceo-photo { display: block; width: 100%; height: var(--ceo-photo-height); margin: 0; border-radius: var(--radius-card); background: var(--color-bg-light); overflow: hidden; }
.ceo-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ceo-focus-section { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; padding: var(--gap-150) clamp(20px, 6.25vw, 120px); background: var(--color-sub); color: var(--color-white); }
.ceo-focus-section__inner { width: min(var(--layout-max), calc(100% - var(--layout-gutter-mobile) * 2)); margin-inline: auto; }
.ceo-focus-section__head { margin-bottom: var(--gap-64); text-align: center; }
.ceo-focus-section__desc { margin: 0; font-size: var(--font-size-40); font-weight: 600; line-height: var(--line-height-48); color: var(--color-white); word-break: keep-all; }
.ceo-focus-section__subdesc { margin: var(--gap-24) 0 0; font-size: var(--font-size-18); font-weight: 500; line-height: var(--line-height-28); color: var(--color-white); word-break: keep-all; }
.ceo-focus-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-48); margin: 0; padding: 0; list-style: none; }
.ceo-focus-list__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-24); height: 100%; padding: var(--gap-40) var(--gap-32); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-card); }
.ceo-focus-list__icon { display: block; width: 64px; height: 64px; margin-bottom: var(--gap-24); flex-shrink: 0; }
.ceo-focus-list__icon svg, .ceo-focus-list__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ceo-focus-ico__line { fill: none; stroke: var(--color-main); stroke-width: 1.5; }
.ceo-focus-ico__dot { fill: var(--color-main); stroke: none; }
.ceo-focus-list__title { margin: 0; font-size: var(--font-size-24); font-weight: 600; line-height: var(--line-height-30); color: var(--color-white); word-break: keep-all; }
.ceo-focus-list__desc { margin: 0; flex: 1 1 auto; font-weight: 400; line-height: var(--line-height-26); color: rgba(255, 255, 255, 0.88); word-break: keep-all; }
.ceo-focus-list--4 { grid-template-columns: repeat(4, 1fr); gap: var(--gap-24); }
.ceo-focus-list--2 { grid-template-columns: repeat(2, 1fr); gap: var(--gap-24); }
.ceo-focus-list--light { gap: var(--gap-24); }
.ceo-focus-list--light .ceo-focus-list__item { background: var(--color-white); border-color: var(--color-border); }
.ceo-focus-list--light .ceo-focus-list__title { color: var(--color-heading); font-weight: 700; }
.ceo-focus-list--light .ceo-focus-list__desc { color: var(--color-body); }
.ceo-focus-list__bullets { display: grid; gap: var(--gap-8); margin: 0; padding: 0; list-style: none; width: 100%; text-align: left; }
.ceo-focus-list__bullets li { position: relative; padding-left: 1em; font-size: var(--font-size-15); font-weight: 400; line-height: var(--line-height-26); color: var(--color-body); word-break: keep-all; }
.ceo-focus-list__bullets li::before { content: "·"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-body); }
.ceo-focus-section--follow { padding-top: var(--gap-150); }
.ceo-focus-section--follow .ceo-focus-section__desc { font-size: var(--font-size-36); }
.ceo-focus-section--follow .ceo-focus-list { gap: var(--gap-24); }
.ceo-focus-section--follow .ceo-focus-list__icon { width: 80px; height: 80px; }
.page-product-virtualization .ceo-focus-section--follow .ceo-focus-list__icon { width: 64px; height: 64px; }
.page-product-bigdata .ceo-focus-section--follow .ceo-focus-list__icon { width: 64px; height: 64px; }
.page-product-security .ceo-focus-section--follow .ceo-focus-list__icon { width: 64px; height: 64px; }
.page-business-virtualization .ceo-focus-section--follow .ceo-focus-list__icon { width: 64px; height: 64px; }
.ceo-focus-section--follow .ceo-focus-list__item { align-items: center; text-align: center; }
.ceo-focus-section--follow .ceo-focus-list--4 .ceo-focus-list__item { min-height: 380px; justify-content: center; }
.ceo-focus-section--follow .ceo-focus-list__desc { flex: 0 1 auto; }
.ceo-focus-section--follow .ceo-focus-list:not(.ceo-focus-list--light) .ceo-focus-list__item { cursor: pointer; transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease; }
.ceo-focus-section--follow .ceo-focus-list:not(.ceo-focus-list--light) .ceo-focus-list__title, .ceo-focus-section--follow .ceo-focus-list:not(.ceo-focus-list--light) .ceo-focus-list__desc { transition: color 0.28s ease; }
.ceo-focus-section--follow .ceo-focus-list:not(.ceo-focus-list--light) .ceo-focus-list__item:hover { background: var(--color-white); border-color: var(--color-white); box-shadow: 0 16px 40px rgba(0, 10, 34, 0.12); transform: translateY(-4px); }
.ceo-focus-section--follow .ceo-focus-list:not(.ceo-focus-list--light) .ceo-focus-list__item:hover .ceo-focus-list__title { color: var(--color-heading); }
.ceo-focus-section--follow .ceo-focus-list:not(.ceo-focus-list--light) .ceo-focus-list__item:hover .ceo-focus-list__desc { color: var(--color-body); }
.page-business-ai-data .ceo-focus-section--follow .ceo-focus-list__item:hover { background: var(--color-white); border-color: var(--color-white); box-shadow: 0 16px 40px rgba(0, 10, 34, 0.12); transform: translateY(-4px); }
.page-business-ai-data .ceo-focus-section--follow .ceo-focus-list__item:hover .ceo-focus-list__title { color: var(--color-heading); }
.page-business-ai-data .ceo-focus-section--follow .ceo-focus-list__item:hover .ceo-focus-list__desc { color: var(--color-body); }
.ceo-focus-section--vision-mgmt { position: relative; overflow: hidden; background: var(--color-white); color: var(--color-heading); }
.ceo-focus-section--vision-mgmt::before { content: ""; position: absolute; inset: 0 -12%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 75% 45% at 50% 0%, rgba(39, 102, 251, 0.05) 0%, transparent 72%), radial-gradient(ellipse 70% 55% at 50% 55%, rgba(39, 102, 251, 0.06) 0%, transparent 68%), radial-gradient(circle at 18% 50%, rgba(39, 102, 251, 0.04) 0%, transparent 42%), radial-gradient(circle at 82% 38%, rgba(39, 181, 245, 0.05) 0%, transparent 40%); }
.ceo-focus-section--vision-mgmt .ceo-focus-section__inner { position: relative; z-index: 1; }
.ceo-focus-section--vision-mgmt .ceo-focus-section__desc { font-size: var(--font-size-36); font-weight: 700; line-height: var(--line-height-48); color: var(--color-heading); }
.ceo-focus-section--vision-mgmt .ceo-focus-section__accent { color: #242424; }
.ceo-focus-section--vision-mgmt .ceo-focus-section__subdesc { color: var(--color-body); }
.ceo-focus-section--vision-mgmt .ceo-focus-list--stagger { align-items: end; }
.ceo-focus-section--vision-mgmt .ceo-focus-list__icon svg, .ceo-focus-section--vision-mgmt .ceo-focus-list__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ceo-focus-section--vision-mgmt .ceo-focus-list__item { align-items: center; padding-block: calc(var(--gap-40) + 40px); border: 0; background: var(--color-white); box-shadow: 0 8px 32px rgba(0, 10, 34, 0.08); text-align: center; transition: background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease, color 0.28s ease; }
.ceo-focus-section--vision-mgmt .ceo-focus-list__item:nth-child(even) { transform: translateY(var(--gap-40)); }
.ceo-focus-section--vision-mgmt .ceo-focus-list__item:hover { background: var(--color-main); box-shadow: 0 16px 40px rgba(39, 102, 251, 0.22); transform: translateY(-6px); }
.ceo-focus-section--vision-mgmt .ceo-focus-list__item:nth-child(even):hover { transform: translateY(calc(var(--gap-40) - 6px)); }
.ceo-focus-section--vision-mgmt .ceo-focus-list__title { color: var(--color-heading); }
.ceo-focus-section--vision-mgmt .ceo-focus-list__desc { color: var(--color-body); }
.ceo-focus-section--vision-mgmt .ceo-focus-list__item:hover .ceo-focus-list__title, .ceo-focus-section--vision-mgmt .ceo-focus-list__item:hover .ceo-focus-list__desc { color: var(--color-white); }
.ceo-focus-section--vision-mgmt .ceo-focus-list__item:hover .ceo-focus-list__icon { filter: brightness(0) invert(1); }
.vision-intro { display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: var(--gap-64); align-items: center; margin-bottom: var(--gap-150); }
.vision-intro__text { min-width: 0; }
.vision-intro__image { width: 640px; max-width: 640px; border-radius: var(--radius-card); overflow: hidden; }
.vision-intro__image img { display: block; width: 640px; max-width: 100%; height: auto; object-fit: contain; }
.vision-intro .sub-lead { margin: 0 0 var(--gap-20); font-size: var(--font-size-34); font-weight: 700; line-height: var(--line-height-48); color: var(--color-heading); }
.vision-intro .sub-lead strong { font-weight: 700; color: var(--color-heading); }
.vision-intro p:not(.sub-lead) { margin: 0; font-size: var(--font-size-18); font-weight: 500; line-height: var(--line-height-28); color: var(--color-body); }
.vision-intro p:last-child { margin: 0; }

/* ========== 회사소개 — 비전 ========== */
.vision-mgmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-16); margin: 0; padding: 0; list-style: none; }
.vision-mgmt-card { display: grid; gap: var(--gap-12); min-height: var(--vision-card-min-h); padding: var(--gap-32) var(--gap-24); border-radius: var(--radius-card); background: linear-gradient(165deg, var(--color-sub) 0%, #00153a 100%); color: var(--color-white); }
.vision-mgmt-card__num { font-family: var(--font-en); font-size: var(--font-size-14); font-weight: 600; color: #8eb6ff; }
.vision-mgmt-card__title { margin: 0; font-size: var(--font-size-20); font-weight: 700; color: var(--color-white); }
.vision-mgmt-card__desc { margin: 0; font-size: var(--font-size-15); line-height: var(--line-height-26); color: rgba(255, 255, 255, 0.82); word-break: keep-all; }
.sub-talent__item { display: grid; gap: var(--gap-8); padding: var(--gap-24); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.sub-talent__icon { display: flex; align-items: center; justify-content: center; width: var(--talent-icon); height: var(--talent-icon); margin-bottom: var(--gap-8); border-radius: 50%; background: var(--virt-value-soft, #e8f0ff); }
.sub-talent__icon svg { display: block; width: 40px; height: 40px; }
.talent-ico__ring { fill: none; stroke: #b8cdf8; stroke-width: 1.5; }
.talent-ico__stroke { fill: none; stroke: var(--color-sub); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.talent-ico__accent { fill: none; stroke: var(--color-main); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.talent-ico__dot { fill: var(--color-main); stroke: none; }

/* ========== 회사소개 — 연혁 인트로 배너 ========== */
.sub-intro-banner { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 360px; margin: 0 0 var(--gap-64); padding: 80px 64px; border-radius: var(--radius-card); background: var(--color-sub); isolation: isolate; }
.sub-intro-banner__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sub-intro-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.06) 100%); pointer-events: none; }
.sub-intro-banner__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--gap-24); max-width: 840px; }
.sub-intro-banner__eyebrow { margin: 0; font-family: var(--font-en); font-size: var(--font-size-20); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.5em; color: rgba(255, 255, 255, 0.5); }
.sub-intro-banner__title { margin: 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.5em; color: var(--color-white); word-break: keep-all; }

/* ========== 회사소개 — 연혁 (스크롤 하이라이트) ========== */
.hist-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hist-timeline__item { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; align-items: start; gap: var(--gap-40); padding-block: var(--gap-48); border-top: 1px solid var(--color-border); opacity: 0.36; transition: opacity 0.5s ease; }
.hist-timeline__item:first-child { border-top: none; padding-top: 0; }
.hist-timeline__item.is-active { opacity: 1; }
.hist-timeline__year-wrap { position: relative; }
.hist-timeline__year { margin: 0; font-family: var(--font-en); font-size: 64px; font-weight: 800; line-height: 1em; letter-spacing: -0.02em; color: var(--color-border); transition: color 0.5s ease; }
.hist-timeline__item.is-active .hist-timeline__year { color: var(--color-heading); }
.hist-timeline__list { display: grid; gap: var(--gap-16); margin: 0; padding-top: 14px; list-style: none; }
.hist-timeline__list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: var(--font-size-18); font-weight: 500; line-height: 1.56em; color: var(--color-border); word-break: keep-all; transition: color 0.5s ease; }
.hist-timeline__item.is-active .hist-timeline__list li { color: var(--color-heading); }
.hist-timeline__dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 0.55em; border-radius: 50%; background: currentColor; opacity: 0.45; transition: background-color 0.5s ease, opacity 0.5s ease; }
.hist-timeline__item.is-active .hist-timeline__dot { background: var(--color-main); opacity: 1; }
.hist-timeline__mm { flex: 0 0 auto; min-width: 2.5em; font-family: var(--font-en); font-weight: 600; color: inherit; }

/* ========== 회사소개 — 오시는 길 ========== */
.loc-map { position: relative; width: 100%; aspect-ratio: 1400 / 459; min-height: 280px; margin: 0 0 var(--gap-40); border-radius: var(--radius-card); overflow: hidden; background-color: #e9edf3; }
.loc-map__link { position: absolute; inset: 0; display: block; }
.loc-map__marker { position: absolute; left: 50%; top: 50%; z-index: 1; width: 22px; height: 22px; margin: -6px 0 0 -11px; border: 3px solid var(--color-white); border-radius: 50% 50% 50% 0; background: var(--color-main); box-shadow: 0 4px 10px rgba(39, 102, 251, 0.35); transform: rotate(-45deg); pointer-events: none; }
.loc-map__label { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, calc(-100% - 28px)); padding: 8px 14px; border-radius: 8px; background: var(--color-white); box-shadow: 0 4px 16px rgba(0, 10, 34, 0.14); font-size: var(--font-size-15); font-weight: 600; line-height: 1.4em; color: var(--color-heading); white-space: nowrap; pointer-events: none; }
.loc-map__frame, .loc-map__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; border: 0; object-fit: cover; object-position: center; }
.loc-map__kakao { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); background: #fee500; font-size: var(--font-size-14); font-weight: 700; line-height: 1em; color: #191919; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 10, 34, 0.16); }
.loc-map__kakao:hover { filter: brightness(0.97); }
.loc-info { display: flex; align-items: center; justify-content: flex-start; gap: 360px; margin: 0; flex-wrap: wrap; }
.loc-info__addr { display: flex; align-items: center; gap: var(--gap-16); min-width: 0; }
.loc-info__pin { flex: 0 0 auto; width: 56px; height: 56px; display: block; object-fit: contain; }
.loc-info__addr-text { display: flex; flex-direction: column; gap: var(--gap-16); min-width: 0; }
.loc-info__addr-main { margin: 0; font-size: var(--font-size-24); font-weight: 600; line-height: 1.4em; color: var(--color-heading); word-break: keep-all; }
.loc-info__addr-sub { margin: 0; font-size: var(--font-size-18); line-height: 1.5em; color: #454545; word-break: keep-all; }
.loc-info__contact { display: grid; gap: 10px; margin: 0; flex: 0 0 auto; font-size: var(--font-size-18); color: #454545; }
.loc-info__contact-row { display: grid; grid-template-columns: 4.5em 1fr; gap: var(--gap-16); align-items: baseline; }
.loc-info__contact-row dt { margin: 0; font-family: var(--font-en); font-size: var(--font-size-18); font-weight: 500; color: #242424; }
.loc-info__contact-row dd { margin: 0; font-size: var(--font-size-18); font-weight: 500; color: #454545; word-break: break-all; }
.loc-info__contact-row a { color: inherit; text-decoration: none; }
.loc-info__contact-row a:hover { color: var(--color-main); text-decoration: underline; text-underline-offset: 3px; }

/* ========== 회사소개 — 고객사 ========== */
.clients-empty { margin: 0 0 var(--gap-40); padding: var(--gap-48) var(--gap-32); border-radius: var(--radius-card); background: var(--color-bg-light); text-align: center; }
.clients-empty__eyebrow { margin: 0 0 var(--gap-12); font-family: var(--font-en); font-size: var(--font-size-14); font-weight: 600; color: var(--color-main); }
.clients-empty__title { margin: 0 0 var(--gap-12); font-size: var(--font-size-24); font-weight: 700; color: var(--color-heading); }
.clients-empty__desc { margin: 0; line-height: var(--line-height-28); color: var(--color-body); word-break: keep-all; }
.clients-partner-head { display: grid; gap: var(--clients-head-gap); margin: 0 0 var(--gap-56); text-align: center; }
.clients-partner-head__eyebrow { margin: 0; font-family: var(--font-en); font-weight: 600; line-height: var(--line-height-24); color: var(--color-main); text-transform: uppercase; }
.clients-partner-head__title { margin: 0; font-size: var(--font-size-32); font-weight: 700; line-height: var(--line-height-48); color: var(--color-heading); word-break: keep-all; }
.clients-logo-section { margin: 0; }
.clients-logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--clients-logo-gap); margin: 0; padding: 0; list-style: none; }
.clients-logo-grid__item { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(var(--clients-logo-area-h) + var(--clients-logo-pad) * 2); padding: var(--clients-logo-pad); border: 1px solid var(--color-border); border-radius: var(--clients-logo-radius); background: var(--color-white); overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.clients-logo-grid__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(39, 102, 251, 0.06), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.clients-logo-grid__item:hover { border-color: rgba(39, 102, 251, 0.3); box-shadow: 0 12px 28px rgba(0, 10, 34, 0.08); }
.clients-logo-grid__item:hover::after { opacity: 1; }
.clients-logo-grid__item img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: auto; max-height: var(--clients-logo-h); object-fit: contain; transition: transform 0.3s ease; }
.clients-logo-grid__item:hover img { transform: scale(1.04); }
.clients-logo-grid__item--nesc img, .clients-logo-grid__item--arko img { max-height: 56px; }

/* 스크롤 등장 — JS가 html.has-fx 를 붙인 뒤에만 숨김 */
.has-fx .js-reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); }
.has-fx .js-reveal.is-in { opacity: 1; transform: none; }

/* 추가 은은한 모션 — 호버·아이콘·패널 */
.bd-pillar-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.bd-pillar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 10, 34, 0.06); }
.loc-map { transition: box-shadow 0.35s ease; }
.loc-map:hover { box-shadow: 0 16px 40px rgba(0, 10, 34, 0.08); }
@keyframes fx-shine {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  40% { transform: translateX(420%); opacity: 0; }
  100% { transform: translateX(420%); opacity: 0; }
}
@keyframes fx-soft-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(39, 102, 251, 0.2); }
  50% { box-shadow: 0 10px 28px rgba(39, 102, 251, 0.38); }
}

@media (prefers-reduced-motion: reduce) {
  .has-fx .js-reveal, .has-fx .js-reveal.is-in { opacity: 1; transform: none; transition: none; }
}