전문 컨설턴트가 귀 기관 환경에 맞는 최적의 방안을 제안해 드립니다.
+
+
+ GUARDiA ITSM 도입을 검토하고 계신가요?
+
+
+ 전문 컨설턴트가 귀 기관 환경에 맞는 최적의 방안을 제안해 드립니다.
+
-
-
+
+
무료 상담 신청
-
- 제품 소개서 다운로드
+
+ 제품 소개서 →
diff --git a/workspace/zioinfo-web/frontend/src/styles/global.css b/workspace/zioinfo-web/frontend/src/styles/global.css
index 60c2e0b9..ff3fb3a8 100644
--- a/workspace/zioinfo-web/frontend/src/styles/global.css
+++ b/workspace/zioinfo-web/frontend/src/styles/global.css
@@ -1,6 +1,7 @@
/* ============================================================
- (주)지오정보기술 글로벌 스타일 — URP 스타일 기반
+ (주)지오정보기술 글로벌 스타일 — Variant 디자인 적용
============================================================ */
+@import './tokens.css';
:root {
/* ── 브랜드 컬러 ── */
@@ -27,8 +28,8 @@
--warning: #F59E0B;
--danger: #EF4444;
- /* ── 타이포그래피 ── */
- --font-sans: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
+ /* ── 타이포그래피 (Pretendard 우선) ── */
+ --font-sans: 'Pretendard', 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
--font-en: 'Inter', sans-serif;
/* ── 레이아웃 ── */
@@ -213,3 +214,181 @@ button { cursor: pointer; border: none; background: none; font-family: inherit;
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.container { padding: 0 16px; }
}
+
+/* ════════════════════════════════════════════════════
+ Variant 디자인 시스템 — 공통 UI 요소
+ ════════════════════════════════════════════════════ */
+
+/* ── 섹션 라벨 (시안 소문자 + 굵은 텍스트) ── */
+.section-label-v {
+ display: inline-block;
+ font-size: var(--v-label-size, 12px);
+ font-weight: var(--v-label-weight, 700);
+ letter-spacing: var(--v-label-spacing, 0.1em);
+ text-transform: uppercase;
+ color: var(--v-cyan-500, #00A0C8);
+ margin-bottom: 12px;
+}
+
+/* ── 섹션 제목 (Variant 스타일) ── */
+.section-title-v {
+ font-size: clamp(28px, 3.5vw, 42px);
+ font-weight: 800;
+ color: var(--v-navy-700, #003366);
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ margin-bottom: 16px;
+}
+
+/* ── 언더라인 강조 (시안) ── */
+.section-underline {
+ width: 48px; height: 3px;
+ background: var(--v-cyan-500, #00A0C8);
+ border-radius: 2px;
+ margin: 0 auto 40px;
+}
+.section-underline.left { margin-left: 0; }
+
+/* ── 서비스 아이콘 카드 (Variant 스타일) ── */
+.v-icon-box {
+ width: 64px; height: 64px;
+ background: var(--v-blue-100, #E8F0F8);
+ border-radius: var(--v-radius-md, 12px);
+ display: flex; align-items: center; justify-content: center;
+ margin-bottom: 20px;
+ transition: all var(--v-ease, 240ms);
+}
+.v-icon-box svg { width: 32px; height: 32px; }
+.v-card:hover .v-icon-box {
+ background: var(--v-cyan-100, #E8F7FB);
+ transform: scale(1.08);
+}
+
+/* ── 서비스 카드 (Variant 스타일) ── */
+.v-card {
+ background: #fff;
+ border-radius: var(--v-radius-lg, 16px);
+ border: 1px solid var(--v-gray-200, #E2E8F0);
+ padding: 32px 28px;
+ box-shadow: var(--v-shadow-sm);
+ transition: all var(--v-ease, 240ms);
+}
+.v-card:hover {
+ box-shadow: var(--v-shadow-lg);
+ transform: translateY(-4px);
+ border-color: var(--v-blue-200, #C5D8EF);
+}
+.v-card-title {
+ font-size: 18px; font-weight: 700;
+ color: var(--v-navy-700, #003366);
+ margin-bottom: 10px;
+}
+.v-card-desc {
+ font-size: 14px; line-height: 1.7;
+ color: var(--v-gray-600, #475569);
+}
+
+/* ── 통계 섹션 (다크 네이비) ── */
+.v-stats-section {
+ background: var(--v-navy-800, #002752);
+ padding: var(--v-section-py, 96px) 0;
+}
+.v-stat-number {
+ font-size: clamp(32px, 4vw, 52px);
+ font-weight: 900;
+ color: #fff;
+ letter-spacing: -0.02em;
+ line-height: 1;
+}
+.v-stat-label {
+ font-size: 14px; color: rgba(255,255,255,.65);
+ margin-top: 8px; font-weight: 500;
+}
+.v-stat-unit {
+ font-size: 18px; font-weight: 700; color: var(--v-cyan-400, #29B8D8);
+ margin-left: 4px;
+}
+
+/* ── CTA 배너 (다크) ── */
+.v-cta-banner {
+ background: linear-gradient(135deg, var(--v-navy-700), var(--v-navy-500));
+ border-radius: var(--v-radius-xl, 24px);
+ padding: 48px 56px;
+ display: flex; align-items: center; justify-content: space-between; gap: 32px;
+ box-shadow: var(--v-shadow-lg);
+}
+.v-cta-title {
+ font-size: clamp(20px, 2.5vw, 28px);
+ font-weight: 800; color: #fff;
+}
+.v-cta-sub {
+ font-size: 15px; color: rgba(255,255,255,.7);
+ margin-top: 8px;
+}
+
+/* ── Variant 버튼 스타일 ── */
+.btn-v-primary {
+ display: inline-flex; align-items: center; gap: 8px;
+ padding: 13px 28px;
+ background: var(--v-navy-700, #003366);
+ color: #fff; font-weight: 700; font-size: 15px;
+ border-radius: var(--v-radius-full, 9999px);
+ border: none; cursor: pointer;
+ transition: all var(--v-ease, 240ms);
+ text-decoration: none;
+}
+.btn-v-primary:hover {
+ background: var(--v-navy-600, #004080);
+ box-shadow: var(--v-shadow-md);
+ transform: translateY(-2px);
+}
+.btn-v-ghost {
+ display: inline-flex; align-items: center; gap: 8px;
+ padding: 12px 28px;
+ background: transparent;
+ color: var(--v-navy-700, #003366); font-weight: 600; font-size: 15px;
+ border-radius: var(--v-radius-full, 9999px);
+ border: 2px solid var(--v-navy-700, #003366);
+ cursor: pointer; transition: all var(--v-ease, 240ms);
+ text-decoration: none;
+}
+.btn-v-ghost:hover {
+ background: var(--v-blue-100, #E8F0F8);
+}
+.btn-v-cyan {
+ background: var(--v-cyan-500, #00A0C8);
+}
+.btn-v-cyan:hover { background: var(--v-cyan-400, #29B8D8); }
+
+/* ── 파트너 로고 바 ── */
+.v-partners-bar {
+ display: flex; align-items: center; justify-content: center;
+ gap: 40px; flex-wrap: wrap;
+ padding: 32px 0;
+ border-top: 1px solid var(--v-gray-200);
+ border-bottom: 1px solid var(--v-gray-200);
+ margin: 32px 0;
+}
+.v-partner-item {
+ font-size: 15px; font-weight: 700;
+ color: var(--v-gray-400, #94A3B8);
+ display: flex; align-items: center; gap: 8px;
+ transition: color var(--v-ease);
+}
+.v-partner-item:hover { color: var(--v-navy-700); }
+
+/* ── 섹션 배경 종류 ── */
+.bg-white { background: #fff; }
+.bg-light { background: var(--v-gray-50, #F8FAFC); }
+.bg-navy { background: var(--v-navy-800, #002752); }
+.bg-navy-dark { background: var(--v-navy-900, #001a33); }
+
+/* ── 섹션 패딩 ── */
+.py-section { padding: var(--v-section-py, 96px) 0; }
+.py-section-sm { padding: var(--v-section-py-sm, 64px) 0; }
+
+@media (max-width: 768px) {
+ .v-cta-banner { flex-direction: column; padding: 32px 24px; }
+ .v-stat-number { font-size: 28px; }
+ .v-section-py { padding: 60px 0; }
+}
diff --git a/workspace/zioinfo-web/frontend/src/styles/tokens.css b/workspace/zioinfo-web/frontend/src/styles/tokens.css
new file mode 100644
index 00000000..033b6ad7
--- /dev/null
+++ b/workspace/zioinfo-web/frontend/src/styles/tokens.css
@@ -0,0 +1,50 @@
+/* ── zio Variant 디자인 토큰 ── */
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+
+:root {
+ /* Variant 색상 팔레트 */
+ --v-navy-900: #001a33;
+ --v-navy-800: #002752;
+ --v-navy-700: #003366;
+ --v-navy-600: #004080;
+ --v-navy-500: #005A8C;
+ --v-cyan-500: #00A0C8;
+ --v-cyan-400: #29B8D8;
+ --v-cyan-100: #E8F7FB;
+ --v-blue-100: #E8F0F8;
+ --v-blue-200: #C5D8EF;
+
+ /* 뉴트럴 */
+ --v-gray-50: #F8FAFC;
+ --v-gray-100: #F1F5F9;
+ --v-gray-200: #E2E8F0;
+ --v-gray-400: #94A3B8;
+ --v-gray-600: #475569;
+ --v-gray-800: #1E293B;
+ --v-gray-900: #0F172A;
+
+ /* 섹션 라벨 */
+ --v-label-color: var(--v-cyan-500);
+ --v-label-size: 12px;
+ --v-label-weight: 700;
+ --v-label-spacing: 0.1em;
+
+ /* 간격 */
+ --v-section-py: 96px;
+ --v-section-py-sm: 64px;
+
+ /* 반경 */
+ --v-radius-sm: 8px;
+ --v-radius-md: 12px;
+ --v-radius-lg: 16px;
+ --v-radius-xl: 24px;
+ --v-radius-full: 9999px;
+
+ /* 그림자 */
+ --v-shadow-sm: 0 1px 3px rgba(0,51,102,.08), 0 1px 2px rgba(0,51,102,.06);
+ --v-shadow-md: 0 4px 12px rgba(0,51,102,.10), 0 2px 6px rgba(0,51,102,.06);
+ --v-shadow-lg: 0 10px 30px rgba(0,51,102,.12), 0 4px 10px rgba(0,51,102,.06);
+
+ /* 전환 */
+ --v-ease: 240ms cubic-bezier(.4,0,.2,1);
+}