@charset "UTF-8";

/* =====================================================================
   personalDark.css
   solution / downloads / company / contact / technology 페이지를
   메인과 동일한 다크 톤으로 전환한다. (body.dark-page 스코프)
   - 라이트 전용으로 하드코딩된 색을 메인 다크 팔레트(#05080f + 블루)로 덮어쓴다.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. 페이지 배경 + 색상 변수 일괄 전환 (변수 기반 컴포넌트 자동 적용)
   --------------------------------------------------------------------- */
body.dark-page {
	background: #060d24 !important;

	--color-text-primary: #eef2f8;
	--color-text-strong: #d4deec;
	--color-text-secondary: #9aa6ba;
	--color-text-tertiary: #8390a6;
	--color-text-muted: #6c7890;

	--color-bg-page: #060d24;
	--surface: #0d1422;
	--surface-subtle: #111a2b;

	--color-border: rgba(255, 255, 255, 0.14);
	--color-border-light: rgba(255, 255, 255, 0.08);
	--color-border-divider: rgba(255, 255, 255, 0.10);
	--color-border-table: rgba(255, 255, 255, 0.10);
}

body.dark-page main {
	color: #eef2f8;
}

/* ---------------------------------------------------------------------
   2. 하드코딩된 본문 텍스트 → 라이트 톤
   --------------------------------------------------------------------- */
body.dark-page .section-title { color: #f4f7fb; }
body.dark-page .section-sub-info { color: #9aa6ba; }

body.dark-page .feature-text h2 { color: #f4f7fb; }
body.dark-page .feature-text ul { color: #aab4c6; }

body.dark-page .case-subtitle { color: #f4f7fb; }
body.dark-page .case-info { color: #9aa6ba; }

body.dark-page .service-title { color: #f4f7fb; }
body.dark-page .service-desc { color: #9aa6ba; }

body.dark-page .download-title { color: #f4f7fb; }
body.dark-page .download-description { color: #9aa6ba; }
body.dark-page .video-box div:last-child { color: #cdd7e6; }

body.dark-page .contact-section { color: #eef2f8; }
body.dark-page .contact-section .title { color: #f4f7fb; }
body.dark-page .contact-section .subtitle { color: #9aa6ba; }

/* ---------------------------------------------------------------------
   3. 흰색 카드 / 박스 → 다크 글래스
   --------------------------------------------------------------------- */
body.dark-page .blue-line-blur-box {
	background: #ffffff17;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 34px rgba(0, 0, 0, 0.40);
	border: 1px solid rgba(55, 135, 255, 0.28);
}

body.dark-page .service-box {
	background: #ffffff17;
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 26px rgba(0, 0, 0, 0.35);
}
body.dark-page .service-box:hover {
	border-color: #3787ff;
	box-shadow: 0 10px 34px rgba(55, 135, 255, 0.25);
}

/* 라이트 섹션 배경 → 다크 */
body.dark-page .section-block.bg-sky { background-color: #060d24; }
body.dark-page .section-block.bg-grey { background-color: #060d24; }

/* use-cases 섹션 배경 이미지 제거 */
body.dark-page .use-cases-section { background-image: none; }

/* 활용 분야 아이콘 카드 (.application-card) */
body.dark-page .application-card {
	background: #ffffff17;
	border: 1px solid rgba(255, 255, 255, 0.10);
}
body.dark-page .application-card .title { color: #f4f7fb; }
body.dark-page .application-card .info { color: #9aa6ba; }

/* 주요 기능 카드 (.enterprise-box) — 원본이 #ffffff !important 라 동일하게 덮어씀 */
body.dark-page .enterprise-box {
	background-color: #ffffff17 !important;
	border: 1px solid rgba(55, 135, 255, 0.28) !important;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.40) !important;
}
body.dark-page .enterprise-box h3 { color: #f4f7fb !important; }
body.dark-page .enterprise-box li,
body.dark-page .enterprise-box .text-secondary { color: #aab4c6 !important; }

/* ---------------------------------------------------------------------
   4. 폼 입력 (contact)
   --------------------------------------------------------------------- */
body.dark-page .form-group label { color: #cdd7e6; }

body.dark-page .form-group input,
body.dark-page .form-group textarea {
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #eef2f8;
}
body.dark-page .form-group input::placeholder,
body.dark-page .form-group textarea::placeholder {
	color: #6c7890;
}
body.dark-page .form-group input:focus,
body.dark-page .form-group textarea:focus {
	border-color: #3787ff;
	background-color: rgba(55, 135, 255, 0.08);
	color: #ffffff;
}

/* ---------------------------------------------------------------------
   5. 구분선
   --------------------------------------------------------------------- */
body.dark-page .bottom-line {
	border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* ---------------------------------------------------------------------
   6. 슬라이드 이전/다음 버튼 → 메인 .features-nav-btn 스타일
   --------------------------------------------------------------------- */
body.dark-page .slide-prev,
body.dark-page .slide-next {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: #3888ff29;
	color: rgba(195, 215, 250, 0.62);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.18s;
}
body.dark-page .slide-prev:hover,
body.dark-page .slide-next:hover {
	border-color: rgba(79, 158, 255, 0.28);
	background: #0f1a2e;
	color: #4f9eff;
	transform: scale(1.07);
}

/* ---------------------------------------------------------------------
   7. 도입사례 카드 스크롤 영역
   personal.css 의 기본 스크롤바(흰 트랙)가 다크 배경에서 크게 튀므로
   얇은 다크 톤 스크롤바로 교체한다. (세로 · 가로 양쪽)
   --------------------------------------------------------------------- */
body.dark-page .use-cases-grid {
	scrollbar-width: thin;
	scrollbar-color: rgba(55, 135, 255, 0.55) rgba(255, 255, 255, 0.06);
}

body.dark-page .use-cases-grid::-webkit-scrollbar {
	display: block;
	width: 6px;
	height: 6px;
}

body.dark-page .use-cases-grid::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 999px;
}

body.dark-page .use-cases-grid::-webkit-scrollbar-thumb {
	background-color: rgba(55, 135, 255, 0.55);
	border-radius: 999px;
}

body.dark-page .use-cases-grid::-webkit-scrollbar-thumb:hover {
	background-color: rgba(55, 135, 255, 0.85);
}

body.dark-page .use-cases-grid::-webkit-scrollbar-corner {
	background: transparent;
}

/* ---------------------------------------------------------------------
   8. 도입 문의하기 버튼 → 히어로 .deid-hero .hero__btn 스타일
   --------------------------------------------------------------------- */
body.dark-page .use-cases-inquiry-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding: 0 14px;
	min-width: 211px;
	height: 56px;
	font-size: 0.98rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(5px);
	border: 1px solid #fff;
	border-radius: var(--radius-pill);
	transition: 0.3s ease-in;
}
body.dark-page .use-cases-inquiry-btn:hover {
	background: #fff;
	border: 1px solid #fff;
	font-weight: 700;
	color: #0b1020;
	transform: translateY(-2px);
}