section { position: relative; width: 100%;  padding: 150px 20px; overflow: hidden; }


/* [VISION SECTION] - Flexbox 양쪽 분할 레이아웃 */
.vision-text-box { padding: 150px 0; display: flex; justify-content: space-between; align-items: center; gap: 80px; }

/* 좌측: 새로 추가된 이미지 영역 스타일 */
.vision-image { flex: 1; max-width: 500px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
.vision-image img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.6s ease; }
.vision-image:hover img { transform: scale(1.05); } /* 마우스 오버 시 살짝 확대되는 효과 */

/* 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
    .fluid-wrapper { padding: 0 }
    
    /* 가로 배치를 세로 배치로 변경 */
    .vision-text-box { padding: 80px 0; flex-direction: column; align-items: flex-start; gap: 40px; }
    .vision-image { max-width: 100%; width: 100%; border-radius: 16px; }
    .vision-content { max-width: 100%; }
}

/* 우측: 기존 텍스트 영역 */
.vision-content { flex: 1; max-width: 850px; }
.vision-content h3 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); margin-bottom: 30px; line-height: 1.5; font-weight: 700; word-break: keep-all; }
.vision-content p { font-size: clamp(1rem, 1.1vw, 1.2rem); margin-bottom: 20px; color: #444; line-height: 1.6; word-break: keep-all; }
.bold-point { font-weight: 800; color: #000; box-shadow: inset 0 -10px 0 rgba(255, 241, 81, 0.6); }

/* [BUSINESS DOMAIN] */
.fluid-wrapper { max-width: 1600px; margin: 0 auto; position: relative; }
.domain-title {  margin-bottom: 30px; border-bottom: 2px solid #000;  padding-bottom: 15px; display: inline-block;  font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; }
.domain-grid {  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; margin-bottom: 80px;}
@media (min-width: 1024px) {
    .domain-grid { gap: 40px; margin-bottom: 120px; }
}

.domain-card { padding: 30px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; border: 1px solid #ddd;  position: relative; overflow: hidden; background: #fff;}
@media (min-width: 1024px) { 
    .domain-card { padding: 50px; } 
}

.domain-card:hover { background: #000; color: #fff; transform: translateY(-10px); }
.card-num { font-size: 1.2rem; font-weight: 700; color: #999; margin-bottom: 20px; display: block; }
.domain-card h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
.domain-card ul { list-style: none; }
.domain-card ul li { margin-bottom: 10px; font-size: 1.2rem; opacity: 0.6; font-weight: 600;}

.go-icon {position: absolute; bottom: 20px; right: 20px; font-size: 2rem; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; color: #fff151; }
.domain-card:hover .go-icon { opacity: 1; transform: translateY(0); }

/* [HISTORY SECTION - 반응형 스크롤 개선] */
  #history { background: #f9f9f9; border-top: 1px solid #ddd; }
 .history-viewport {  width: 100%; overflow-x: auto; overflow-y: hidden;-webkit-overflow-scrolling: touch;scroll-behavior: smooth;  padding-bottom: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
 .history-viewport::-webkit-scrollbar { display: none; /* 크롬 스크롤바 숨김 */ }
 .history-track { display: flex; width: max-content; /* 내용물만큼 늘어남 */}
 .history-item { flex-shrink: 0; /* 모바일: 화면 너비의 85%, PC: 400px 고정 */ width: 85vw; margin-right: 20px; padding: 20px; background: #fff; border: 1px solid #eee;scroll-snap-align: start; /* 스크롤 시작점에 맞춤 */}
@media (min-width: 1024px) {
    .history-item { width: 400px; margin-right: 60px;  background: transparent; border: none; padding: 0; }
}

.history-item .year { font-size: clamp(3rem, 5vw, 5rem); font-weight: 800; display: block; margin-bottom: 10px; color: #333; }
.history-item .desc { font-size: 1.1rem; color:#295ea6; font-weight: 700; margin-bottom: 5px; }
.history-item p { color: #555; font-size: 1rem; margin: 5px 0; font-weight: 600;}
.history-nav { display: flex; gap: 10px; margin-top: 30px; justify-content: flex-end; }
@media (min-width: 1024px) {
    .history-nav { justify-content: flex-start; margin-top: 50px; }
}

.nav-btn { width: 50px; height: 50px;  border: 1px solid #000; background: #fff; display: flex; align-items: center; justify-content: center;  cursor: pointer; transition: all 0.3s; }
.nav-btn:hover { background: #000; color: #fff; }
.nav-btn span { font-size: 24px; }


/* [TYPOGRAPHY] */
.mega-text { font-size: 10vw; font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; line-height: 0.85; }
.outline-text {  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.8);  color: transparent;  display: inline-block;}
.highlight { color: #fff151; }

/* [HERO SECTION] */
.sub-hero { display: flex; align-items: flex-end; padding-bottom: 5vh; border-bottom: 1px solid #ddd; height: 100vh; }
.hero-year { position: absolute; top: 18%; right: 5%; font-size: 15vw; opacity: 0.05; font-weight: 900; color: #000; }

@media (max-width: 768px) {
    .sub-hero { height: auto; }
}

/* [VISION DESCRIPTION] */
.vision-text-box { padding: 150px 0; display: flex; justify-content: flex-end; }
.vision-content { max-width: 900px; }
.vision-content p { font-size: 1.35rem; color: #444; margin-bottom: 30px; word-break: keep-all; line-height: 1.75; letter-spacing: 0.5px; font-weight: 600;}
.vision-content .bold-point { color: #000; font-weight: 700; }

@media (max-width: 768px) {
 .vision-text-box { padding: 50px 0; display: flex; justify-content: flex-end; }
}



/* 타이틀 영역 */
.section-header { text-align: center; margin-bottom: 80px; }
.section-header h2 { font-size: 2.5rem; font-weight: 800; color: #111; margin-bottom: 20px; }
.section-header p { font-size: 1.25rem; color: #555; line-height: 1.6; word-break: keep-all; }

/* 3단 카드 그리드 레이아웃 */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* 개별 카드 스타일 */
.feature-card { background: #fff; padding: 60px 40px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.icon { font-size: 3rem; margin-bottom: 24px; }
.feature-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; color: #222; }
.feature-card p { font-size: 1.1rem; color: #666; line-height: 1.6; }

/* 반응형 (태블릿 & 모바일) */
@media (max-width: 1024px) { 
    .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } 
}

@media (max-width: 768px) { 
    .section-header h2 { font-size: 2rem; } 
    .feature-grid { grid-template-columns: 1fr; gap: 20px; } 
    .feature-card { padding: 40px 30px; } 
}



/* [IMPACT IMAGE SECTION - 신규 추가] */
.impact-image-section { height: 80vh; padding: 0; display: flex; align-items: center; justify-content: center;background: #000;}
.impact-bg {position: absolute; inset: 0; background: url('./../img/impact-bg.webp') center/cover; background-attachment: fixed; opacity: 0.5;}
.impact-text { position: relative; z-index: 10; color: #fff;text-align: center; width: 100%;}
.impact-text h2 { font-size: 12vw; font-weight: 900; line-height: 1; mix-blend-mode: overlay; }

.nav-btn { width: 80px; height: 80px; border: 1px solid #000;display: flex; align-items: center; justify-content: center;cursor: pointer; font-size: 2rem; transition: all 0.3s;}
.nav-btn:hover { background: #000; color: #fff; }

.reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }


/* [UTILITY] */
.cs-title { font-size: 10vw;  font-weight: 900;  letter-spacing: -0.04em;  text-transform: uppercase;  line-height: 0.95; font-family: 'SchoolSafetyNotification';}
.cs-outline {  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.8); color: transparent;  display: inline-block; }
.cs-point { color: #fff151;  }

.core-service-hero { height: 70vh; display: flex; align-items: flex-end; padding-top: 120px; padding-bottom: 5vh; padding-left: 60px; padding-right: 60px; box-sizing: border-box; }


/* [WILD SERVICE SECTION] */
.service-container { position: relative; }
.service-row { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 60px; position: sticky; top: 0; background: #fff; border-bottom: 1px solid #ddd; }
.service-content { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; max-width: 1600px; width: 100%; align-items: center; }

.s-info { display: flex;flex-direction: column; justify-content: center;  height: 100%;}
.s-info h2 { font-size: 3.5vw; font-weight: 900; line-height: 1.1; margin: 20px 0 40px; }
.s-info p { font-size: 1.2rem; color: #444; margin-bottom: 40px; word-break: keep-all; font-weight: 600; line-height: 1.65;}

.s-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.s-list li {  padding: 20px; background: #f5f5f5; border: 1px solid #ddd; font-weight: 700; transition: all 0.3s; font-size: 1rem;}
.s-list li:hover { background: #fff151; border: 1px solid #fff151; color: #000; transform: scale(1.03); }

/* 이미지 시각 효과 */
.s-visual { position: relative; overflow: hidden; height: 55vh; background: #eee; border-radius: 2px; }
.s-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s ease; }
.service-row:hover .s-visual img { transform: scale(1.1); }

/* [REVEAL ANIMATION] */
.reveal.active .sub-title { font-size:14px; font-weight: 600; letter-spacing: 1px; opacity: 0.8;}

@media (max-width: 1024px) {
     .core-service-hero { height: auto;  /*min-height: 50vh; */ padding-top: 100px; padding-left: 24px; padding-right: 24px;}
    .service-row { height: auto; padding: 100px 24px; position: relative; }
    .service-content { grid-template-columns: 1fr; gap: 60px; }
    .s-info h2 { font-size: 3rem; }
    .s-list { grid-template-columns: 1fr; }
    .s-visual { height: 40vh; }
}

/* 미션1보드 장점 그리드 레이아웃 */
.m1-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
.m1-card { background: #f5f5f5; padding: 25px; border: 1px solid #ddd; transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.m1-card:hover { background: #000; color: #fff; transform: translateY(-10px); }
.m1-card h4 { font-size: 0.85rem; margin-bottom: 15px; letter-spacing: 0.15em; font-weight: 800; }
.m1-card ul { list-style: none; font-size: 0.95rem; font-weight: 600; opacity: 0.8; }
.m1-card ul li { margin-bottom: 8px; }

@media (max-width: 1024px) {
  .m1-grid { grid-template-columns: 1fr; }
}

/* [CHECKLIST SECTION] */
.checklist-section {  background: #f4f7fa; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 80px; }
.check-card { padding: 60px;  background: #fff;  border-bottom: 5px solid var(--color-card-border);  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);  border-radius: 15px; }
.check-card h4 { font-size: 1.5rem;  font-weight: 800;  margin-bottom: 20px; color: var(--color-card-title); /* 체크리스트 제목 색상 */}
.check-card p { font-size: 1.1rem; color: #556b82; word-break: keep-all; font-weight: 600; line-height: 1.65;}

/* [PROCESS SECTION] */
.process-container { position: relative; height: 500vh; }
.sticky-wrapper { position: sticky; top: 0; height: 100vh; width: 100%;overflow: hidden; display: flex; align-items: center; background: #fff;}
.process-track { display: flex; will-change: transform; height: 100%; align-items: center; }
.p-step { width: 100vw; height: 100vh; flex-shrink: 0;display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; padding: 0 10vw; position: relative;}
.p-step:nth-child(1) { background: #ebf4ff; }
.p-step:nth-child(2) { background: #f3f0ff; }
.p-step:nth-child(3) { background: #e6fffa; }
.p-step:nth-child(4) { background: #fffbeb; }

.step-bg-num { position: absolute; top: 0; left: 0; font-size: 25vw; font-weight: 900; color: rgba(0,0,0,0.03); z-index: 1;}
.p-info { position: relative; z-index: 2; }
.p-info h2 { font-size: 4.5vw; font-weight: 900; line-height: 1.1; margin-bottom: 30px; }

/* 프로세스 숫자 태그 색상 */
.p-info .p-num-tag {  font-size: 1.1rem; font-weight: 800;  display: block;  margin-bottom: 15px;  letter-spacing: 0.2em; color: var(--color-process-tag); }
.p-info p { font-size: 1.2rem; color: #4a5568; font-weight: 600;}

.p-visual { width: 100%; height: 55vh; overflow: hidden; border-radius: 20px; position: relative; z-index: 2; }
.p-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: 0.8s; }
.p-step:hover .p-visual img { filter: grayscale(0); transform: scale(1.05); }


.danbee-footer { background: #0a192f; color: #fff; padding: 100px 60px 40px; }

@media (max-width: 1024px) {
    .p-step { grid-template-columns: 1fr; padding: 10vh 24px; }
    .p-visual { height: 35vh; }
    .p-info h2 { font-size: 2.8rem; }
}  


/* [WHY SECTION - 불안 해소 테마] */
.layout-wrap { max-width: 1600px; margin: 0 auto; }   
.layout-wrap h2 {font-size:5vw; color: #0056ff; font-family: 'SchoolSafetyNotification';}
.why-section { padding: 150px 0px; background: #f0f7ff; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 60px; }
.why-card { padding: 50px; background: #fff;  border-radius: 20px; transition: all 0.4s ease;}
.why-card h3 { font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; color: #0056ff; line-height: 1.3 }
.why-card p { color: #556b82; font-size: 1.1rem; font-weight: 600; line-height: 1.65; word-break: keep-all;}


/* [STRENGTHS - 보안 및 신뢰 테마] */
.strength-row {  padding: 120px 60px; background: var(--bg-deep); display: flex;  gap: 50px; align-items: center; justify-content: space-around;}
.s-box { text-align: center; flex: 1; }
.s-num-wrap { font-size: 8rem; font-weight: 900; color: #fff; line-height: 1; display: flex; justify-content: center; align-items: baseline; }
.s-unit { font-size: 2.5rem; margin-left: 5px; color: var(--point); } /* 시안 컬러 포인트 */
.s-title { font-size: 1.3rem; font-weight: 700; margin-top: 15px; color: rgba(255,255,255,0.7); }

/* [PROCESS SECTION] */
.process-list { padding: 150px 60px; background: #fff; }
.process-item {  display: grid; grid-template-columns: 150px 1fr 400px; gap: 50px;padding: 80px 0;  border-top: 1px solid #ddd;align-items: center;}
.p-step { font-size: 1.1rem; font-weight: 900;  letter-spacing: 0.1em; }
.p-info h4 { font-size: 3.2rem; font-weight: 800; margin-bottom: 20px; }
.p-info p { font-size: 1.2rem; color: #666; }

.p-img-box {width: 100%; height: 250px; border-radius: 30px; overflow: hidden; background: #f5f5f5; }
.p-img-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: 0.8s; }
.process-item:hover .p-img-box img { filter: grayscale(0); transform: scale(1.05); }


@media (max-width: 1024px) {
    .process-item { grid-template-columns: 1fr; }
    .strength-row { flex-direction: column; }
    .s-num-wrap { font-size: 6rem; }
}


/* TRUST SECTION */
.trust-section { padding: 120px 60px; background: #0a192f;}
.trust-inner {display: flex;width:100%;justify-content: space-around; flex-wrap: wrap; gap: 50px;}
.trust-box { text-align: center; flex: 1; }
.trust-num-wrap {font-size: 8rem; font-weight: 900; color: #fff;line-height: 1; display: flex; justify-content: center; align-items: baseline;}
.trust-unit { font-size: 2.5rem; margin-left: 5px; color: #00d4ff }
.trust-title { font-size: 1.3rem; font-weight: 700; margin-top: 15px; color: rgba(255,255,255,0.7); }

/* WORKFLOW */
.layout-wrap { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
.workflow-section { padding: 80px 0; background: #fff; overflow: hidden; }
.display-title { font-family: 'SchoolSafetyNotification', sans-serif; font-weight: 900; color: #0056ff; line-height: 1; font-size: clamp(40px, 6vw, 100px) !important; }
.workflow-item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 60px 0; border-bottom: 1px solid #eee; gap: 60px; }
.workflow-item:last-child { border-bottom: none; }
.wf-step { width: 15%; font-size: 1.5rem; font-weight: 900; color: #0056ff; font-family: 'Montserrat', sans-serif; letter-spacing: 2px; }
.wf-info { width: 40%; }
.wf-info h4 { font-size: 2.5rem; font-weight: 800; margin-bottom: 15px; color: #111; word-break: keep-all; }
.wf-info p { font-size: 1.1rem; color: #666; line-height: 1.6; word-break: keep-all;  font-weight: 600;}
.wf-img-box { width: 40%; height: 350px; border-radius: 20px; overflow: hidden; background: #f5f5f5; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.wf-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.workflow-item:hover .wf-img-box img { transform: scale(1.05); }
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s; }
.fade-up.active { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
    .workflow-item { flex-direction: column; align-items: stretch; gap: 30px; }
    .wf-step { width: 100%; font-size: 1.2rem; }
    .wf-info { width: 100%; }
    .wf-info h4 { font-size: 2rem; }
    .wf-img-box { width: 100%; height: auto; }
}

/* CTA */
.cta-transfer {padding: 100px 60px; text-align: center; background: #fff151; cursor: pointer;}
.cta-transfer .display-title { color: #fff; }

/* REVEAL */
.fade-up { opacity: 0;transform: translateY(50px);transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1);}
.fade-up.active {opacity: 1; transform: translateY(0);}


/* ==========================================
   호스팅 섹션 (1600px 반응형 그리드)
========================================== */

/* 1. 섹션 기본 배경 및 여백 */
.hosting-section { position: relative; padding: 120px 0; overflow: hidden; }

/* 2. 1600px 그리드 컨테이너 */
.grid-container { max-width: 1600px; margin: 0 auto; padding: 0; }

/* 3. 섹션 헤더 (타이틀 영역) */
.section-header { text-align: center; margin-bottom: 80px; }
.neon-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 15px; letter-spacing: 2px; }
.section-desc { font-size: 1.2rem; font-weight: 600; opacity: 0.6; }

/* 4. CSS Grid 레이아웃 (핵심 반응형) */
.hosting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }

/* 5. 트렌디한 글래스모피즘 카드 디자인 */
.hosting-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 241, 81, 0.15); border-radius: 20px; padding: 50px 40px; backdrop-filter: blur(10px); transition: all 0.4s ease; cursor: default; position: relative; overflow: hidden; }
.hosting-card:hover { transform: translateY(-15px); background: rgba(255, 255, 255, 0.05); border-color: #fff151; box-shadow: 0 15px 40px rgba(255, 241, 81, 0.15); }
.card-icon { font-size: 3.5rem; margin-bottom: 25px; line-height: 1;}
.hosting-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.5px; }
.hosting-card p { font-size: 1.05rem; line-height: 1.6; color: #777; font-weight: 600; word-break: keep-all; }

/* 6. 모바일 최적화 미디어 쿼리 */
@media screen and (max-width: 768px) { 
    .hosting-section { padding: 80px 0; } 
    .neon-title { font-size: 2.5rem; } 
    .section-desc { font-size: 1rem; } 
    .hosting-grid { gap: 20px; } 
    .hosting-card { padding: 40px 30px; }
 }

/* [호스팅 상품 리스트] */
.hosting-section { padding: 150px 20px; }
.hosting-container { max-width: 1400px; margin: 0 auto;display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.hosting-card { border: 1px solid #ddd; padding: 60px 40px; background: #fff; display: flex; flex-direction: column; transition: 0.5s;}

.card-header { text-align: center; margin-bottom: 40px; }
.icon { font-size: 3.5rem; margin-bottom: 20px; color: #0056ff; }
.plan-name { font-size: 1.8rem; font-weight: 800; }
.plan-tag { color: #bbb; font-size: 0.85rem; letter-spacing: 0.1em; margin-top: 8px; }
.plan-price { font-size: 2.5rem; font-weight: 900; margin-top: 30px; display: inline-block; }
.plan-price span { font-size: 1rem; color: #bbb; }

.feature-list { margin-bottom: 40px; flex-grow: 1; }
.feature-item { margin-bottom: 25px; }
.feature-item strong { display: block; font-size: 1.3rem; color: #000; margin-bottom: 5px; }
.feature-item p { font-size: 1.1rem; color: #777; line-height: 1.5; }
.spec-badge { display: inline-block; padding: 8px 20px; background: #f4f4f4; border-radius: 50px; font-size: 0.85rem; font-weight: 800; margin-top: 10px; }

/* [변경] 결정을 유도하고 전문성을 강조하는 로열 블루 */
.inquiry-btn {width: 100%; padding: 22px; background: #0056ff; color: #fff;border: none; font-weight: 900; font-size: 1.2rem; cursor: pointer; transition: 0.3s;}
.inquiry-btn:hover { background: #000; }

/* [변경] 데이터센터의 견고함과 24시간 가동의 안정성을 상징하는 딥 네이비 */
.server-stats { padding: 100px 60px; background: #0a1931; color: #fff; }
.stats-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.stat-item { text-align: center; }
.stat-label { font-weight: 800; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 10px; display: block; color: rgba(255,255,255,0.6); }
.stat-value { font-size: 6vw; font-weight: 900; line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; color: #00fff0; } /* 첨단 기술을 상징하는 시안 컬러 포인트 */
.stat-value .unit { font-size: 2vw; }

/* [호스팅 프로세스 섹션] */
.section-title { font-size: 5vw; font-weight: 900; text-align: center; margin-bottom: 80px; }
.process-grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-item { padding: 40px; background: #f8f8f8; transition: 0.4s; }
.process-item:hover { background: #0056ff; color: #fff; }
.step-num { font-size: 1.2rem; font-weight: 900; color: #0056ff; margin-bottom: 20px; }
.process-item h4 { font-size: 2.1rem; font-weight: 800; margin-bottom: 15px; }
.process-item p { font-size: 1.2rem; opacity: 0.7; }

 /* [반응형] */
@media (max-width: 1024px) {
    .hosting-container, .stats-container { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr 1fr; }
    .footer-links { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .process-grid, .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: span 1; }
    .mega-text { font-size: 12vw; }
    .footer-slogan h2 { font-size: 12vw; }
}
 

.portfolio-container { position: relative; background: #000; } 
.pf-item { position: sticky; top: 0; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;background: #fff;}

/* 각 아이템별 심리적 배경색 정의 */
.pf-item:nth-child(1) { background: #f9f9fb; } 
.pf-item:nth-child(2) { background: #147dff; color: #fff; }
.pf-item:nth-child(2) .pf-info { background: #147dff; }
.pf-item:nth-child(2) .pf-title { color: #fff; }
.pf-item:nth-child(2) .pf-desc { color: #fff; opacity: 0.8; }
.pf-item:nth-child(2) .view-link { color: #fff151; }
.pf-item:nth-child(3) { background: #f4f7ff; } 

.pf-inner { display: grid;grid-template-columns: 1.2fr 1fr; width: 100%;height: 100%;}

/* 이미지 영역 */
.pf-visual { position: relative; overflow: hidden; height: 100%; background: #000; }
.pf-visual img { width: 100%; height: 100%; object-fit: cover;filter: grayscale(1) brightness(0.8);transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), filter 1s; }
.pf-item:hover .pf-visual img { transform: scale(1.05); filter: grayscale(0) brightness(1); }

/* 텍스트 정보 영역 */
.pf-info {padding: 80px; display: flex;flex-direction: column;justify-content: center; background: transparent; }

.pf-category { font-size: 1rem; font-weight: 800; color: #ff6b00; margin-bottom: 20px; letter-spacing: 0.2em; text-transform: uppercase; }
.pf-title { font-size: 4rem; font-weight: 900; line-height: 1.1; margin-bottom: 30px; word-break: keep-all; }
.pf-desc { font-size: 1.2rem; color: #666; margin-bottom: 40px; line-height: 1.8; max-width: 500px; font-weight: 600;  word-break: keep-all;}

.pf-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 50px; }
.pf-tags span {  padding: 8px 16px; border: 1px solid rgba(0,0,0,0.1); border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: #888;}
.pf-item:nth-child(2) .pf-tags span { border-color: rgba(255,255,255,0.2); color: #fff; }

.view-link {font-size: 1.2rem; font-weight: 800; text-decoration: none; color: #000;display: flex; align-items: center; gap: 15px; transition: 0.3s;}
.view-link:hover { color: #ff6b00; padding-left: 10px; }

/* [VIEW MORE BUTTON SECTION] */
.view-more-container {position: relative; z-index: 10; padding: 150px 60px; text-align: center; background: #fff; border-top: 1px solid #eee;}

.btn-wild {display: inline-flex; align-items: center; gap: 20px; padding: 30px 80px; border: 2px solid #000; background: transparent; color: #000; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; text-decoration: none; letter-spacing: 0.1em; transition: 0.5s; position: relative; overflow: hidden; }
.btn-wild::before {content: ''; position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; background: #000; transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1;}
.btn-wild:hover { color: #fff; transform: scale(1.05); }
.btn-wild:hover::before { bottom: 0; }
.btn-wild span, .btn-wild .arrow { position: relative; z-index: 2; }
.btn-wild:hover .arrow { transform: translateX(15px); color: #fff151; }

@media (max-width: 768px) {
    .btn-wild {
        gap: 15px;
        padding: 20px 50px;
        font-size: 1.25rem;
    }
    .view-more-container {
        position: relative; 
        z-index: 10; 
        padding: 50px 60px; 
        text-align: center; 
        background: #fff; 
        border-top: 1px solid #eee;
    }
}

/* 모바일 화면 (가로 480px 이하) */
@media (max-width: 480px) {
    .btn-wild {
        gap: 10px;
        padding: 15px 30px;
        font-size: 1rem;
    }
}


@media (max-width: 1024px) {
    .pf-inner { grid-template-columns: 1fr; }
    .pf-visual { height: 40vh; order: 2; }
    .pf-info { padding: 60px 24px; order: 1; }
    .pf-title { font-size: 2.5rem; }
    .pf-item { position: relative; height: auto; }
}

.card-header { text-align: center; margin-bottom: 40px; }
.icon { font-size: 3.5rem; margin-bottom: 20px; color: #0056ff; }
.plan-name { font-size: 1.8rem; font-weight: 800; }
.plan-tag { color: #bbb; font-size: 0.85rem; letter-spacing: 0.1em; margin-top: 8px; font-weight: 800; }
.plan-price { font-size: 2.5rem; font-weight: 900; margin-top: 30px; display: inline-block; }
.plan-price span { font-size: 1rem; color: #bbb; }

.feature-list { margin-bottom: 40px; flex-grow: 1; }
.feature-item { margin-bottom: 25px; }
.feature-item strong { display: block; font-size: 1.3rem; color: #000; margin-bottom: 5px; }
.spec-badge { display: inline-block; padding: 8px 20px; background: #f4f4f4; border-radius: 50px; font-size: 0.85rem; font-weight: 800; margin-top: 10px; }

/* [변경] 결정을 유도하고 전문성을 강조하는 로열 블루 */
.inquiry-btn {width: 100%; padding: 22px; background: #0056ff; color: #fff;border: none; font-weight: 900; font-size: 1.2rem; cursor: pointer; transition: 0.3s;}
.inquiry-btn:hover { background: #000; }

/* [변경] 데이터센터의 견고함과 24시간 가동의 안정성을 상징하는 딥 네이비 */
.server-stats { padding: 100px 60px; background: #0a1931; color: #fff; }
.stats-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.stat-item { text-align: center; }
.stat-item p { font-size: 16px;  font-weight: 600}
.stat-label { font-weight: 800; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 10px; display: block; color: rgba(255,255,255,0.6); }
.stat-value { font-size: 6vw; font-weight: 900; line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; color: #00fff0; } /* 첨단 기술을 상징하는 시안 컬러 포인트 */
.stat-value .unit { font-size: 2vw; }


/* [호스팅 프로세스 섹션] */
.section-title { font-size: 5vw; font-weight: 900; text-align: center; margin-bottom: 80px; }
.hosting-steps-container { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card { padding: 40px; background: #f8f8f8; transition: 0.4s; border-radius: 8px; }
.step-card:hover { background: #0056ff; color: #fff; transform: translateY(-10px); }
.step-badge { font-size: 1.2rem; font-weight: 900; color: #0056ff; margin-bottom: 20px; }
.step-card:hover .step-badge { color: #fff; }
.step-card h4 { font-size: 2.1rem; font-weight: 800; margin-bottom: 15px; }
.step-card p { font-size: 16px; font-weight: 600; opacity: 0.6; ;line-height: 1.6;   }

/* [반응형] */
@media (max-width: 1024px) {
.hosting-container, .stats-container { grid-template-columns: 1fr; }
.hosting-steps-container { grid-template-columns: 1fr 1fr; }
.footer-links { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
.hosting-steps-container, .form-grid { grid-template-columns: 1fr; }
.form-group.full { grid-column: span 1; }
.mega-text { font-size: 12vw; }
}


/* [상품 소개 섹션] */
.intro-section { padding: 120px 20px; background: #fff; }
.intro-container { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; }
.intro-tag { font-weight: 800; color: #ff4e00; text-transform: uppercase; margin-bottom: 20px; display: block; }
.intro-title { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.2; margin-bottom: 30px; word-break: keep-all; }
.intro-desc { font-size: 1.25rem; color: #555; word-break: keep-all; margin-bottom: 40px; font-weight: 600; line-height: 1.5; }
.view-all-btn { display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 20px 40px; background: #000; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid #000; }
.view-all-btn:hover { background: #fff; color: #000; transform: translateX(10px); }
.view-all-btn svg { transition: 0.4s; }
.view-all-btn:hover svg { transform: rotate(-45deg); }

/* [라이선스 카드 섹션] */
.license-grid { padding: 80px 20px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.license-card { border: 1px solid #eee; padding: 60px; transition: 0.5s; position: relative; background: #fff; }
.license-card:hover { border-color: #000; transform: translateY(-15px); box-shadow: 0 30px 60px rgba(0,0,0,0.05); }
.card-type { font-size: 0.9rem; font-weight: 800; color: #bbb; letter-spacing: 0.1em; margin-bottom: 10px; }
.card-title { font-size: 2.2rem; font-weight: 900; margin-bottom: 30px; word-break: keep-all; }
.card-price { font-size: 2.5rem; font-weight: 900; color: #000; margin-bottom: 40px; word-break: keep-all; }
.card-price span { font-size: 1rem; color: #999; }
.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li { margin-bottom: 15px; padding-left: 25px; position: relative; color: #666; font-size: 1.1rem; font-weight: 600; word-break: keep-all; }
.spec-list li::before { content: '→'; position: absolute; left: 0; color: #ff4e00; font-weight: 900; }

/* [범위 및 특징 섹션] */
.feature-section { padding: 120px 60px; background: #000; color: #fff; }
.feature-grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.theme-item h4 { font-size: 1.5rem; margin-bottom: 20px; border-left: 4px solid #fff151; padding-left: 15px; font-weight: 800; word-break: keep-all; }
.theme-item p { font-size:1.1rem; font-weight: 600; line-height: 1.65; opacity: 0.8;}

/* [반응형 모바일 미디어 쿼리 - 1024px 이하] */
@media (max-width: 1024px) {
    .intro-section { padding: 60px 20px; }
    .intro-container { grid-template-columns: 1fr; gap: 30px; }
    .intro-title { font-size: 2.2rem; margin-bottom: 20px; }
    .intro-desc { font-size: 1.1rem; margin-bottom: 30px; }
    .view-all-btn { width: 100%; padding: 15px 20px; }
    .view-all-btn:hover { transform: translateY(-5px); /* 모바일은 가로 대신 위로 살짝 뜨게 변경 */ }
    
    .license-grid { padding: 60px 20px; grid-template-columns: 1fr; gap: 30px; }
    .license-card { padding: 30px; }
    .license-card:hover { transform: translateY(-5px); }
    .card-title { font-size: 1.8rem; margin-bottom: 20px; }
    .card-price { font-size: 2rem; margin-bottom: 30px; }
    
    .feature-section { padding: 60px 20px; }
    .feature-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* [섹션 스타일] */
.hero { height: 70vh; display: flex; align-items: flex-end; padding: 60px; background: #f0f4ff; }
.intro-section { padding: 120px 20px; background: #fff; }
.intro-container { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.brand-story h2 { font-size: 3.5rem; font-weight: 900; margin-bottom: 30px; line-height: 1.2; }
.brand-story p { font-size: 1.2rem; color: #555; margin-bottom: 40px; word-break: keep-all; font-weight: 600; line-height: 1.65; }

.store-btn {display: inline-flex; align-items: center; gap: 15px;padding: 22px 45px; background: #0033ff; color: #fff;text-decoration: none; font-weight: 800; font-size: 1.1rem;transition: 0.4s; border-radius: 50px;}
.store-btn:hover { background: #000; transform: scale(1.05); }

/* [파도 애니메이션 & 심해 그라데이션] */
.wave-container { position: relative; width: 100%; background: #fff; line-height: 0;}
.waves {position: relative; width: 100%; height: 15vh; min-height: 100px;  max-height: 150px; margin-bottom: -1px; /* 틈새 방지 */}
.parallax > use {animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;}
/* 파도 색상을 바다색 그라데이션과 연결되도록 수정 */
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; fill: rgba(0, 51, 255, 0.3); }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; fill: rgba(0, 51, 255, 0.5); }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; fill: rgba(0, 51, 255, 0.7); }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; fill: #0033ff; }

@keyframes move-forever {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

/* [카테고리 섹션 - 심해 그라데이션 배경] */
.category-section {padding: 80px 20px 150px; background: linear-gradient(180deg, #0033ff 0%, #001a80 50%, #000a33 100%); color: #fff;}
.section-label { font-weight: 800; color: #fff151; text-transform: uppercase; margin-bottom: 40px; display: block; text-align: center; letter-spacing: 0.2em; }
.category-grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
.category-card {background: rgba(255, 255, 255, 0.1);  backdrop-filter: blur(10px); padding: 50px 30px;  text-align: center; transition: 0.5s;border-radius: 20px;}
.category-card:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff151; transform: translateY(-15px);  box-shadow: 0 30px 60px rgba(0,0,0,0.3); }
.card-icon { margin-bottom: 30px; color: #fff151; display: flex; justify-content: center; }
.category-card h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 15px; color: #fff; }
.category-card p { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; font-weight: 600;}

/* [반응형] */
@media (max-width: 1024px) {
    .intro-container, .category-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: 1fr 1fr; }
    .mega-text { font-size: 12vw; }
    .waves { height: 60px; min-height: 60px; }
}
@media (max-width: 768px) {
    .category-grid { grid-template-columns: 1fr; }
    .brand-story h2 { font-size: 2.5rem; }
}

/* [HERO & FAQ] */
.hero { height: 50vh; display: flex; align-items: flex-end; padding: 60px; background: #fff; border-bottom: 1px solid #eee; }
.faq-container { padding: 100px 60px; max-width: 1600px; margin: 0 auto; } /* 가독성을 위해 너비 제한 */
.faq-item { margin-bottom: 20px; border: 1px solid #e1e8f5; background: #fff; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden; border-radius: 15px; /* 심리적 안정감을 주는 라운딩 */ }
.faq-question { padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-question h3 { font-size: 1.3rem; font-weight: 700; color: #333; transition: color 0.3s; }
.faq-question h3::before { content: 'Q.'; margin-right: 15px; color: #0056ff; font-weight: 900; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; background: #f0f5ff; /* 질문과 대비되는 부드러운 블루 배경 */ }
.answer-content { padding: 40px; font-size: 1.1rem; color: #4a5568; border-top: 1px solid #e1e8f5; line-height: 1.8; font-weight: 600;   }
.answer-content p::before { content: 'A.'; display: block; font-weight: 900; color: #0056ff; margin-bottom: 10px; }
.faq-item.active { border-color: #0056ff; }
.faq-item.active .faq-question h3 { color: #0056ff; }
.faq-item.active .faq-answer { max-height: 800px; }
.toggle-btn { width: 30px; height: 30px; background: #f0f5ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #0056ff; font-weight: bold; transition: 0.3s; }
.faq-item.active .toggle-btn { transform: rotate(45deg); background: #0056ff; color: #fff; }


.tab-menu { width: 100%; max-width: 1000px; margin: 50px 0 20px 0; display: flex; justify-content: space-between;flex-wrap: wrap}
.tab-menu a {width: 20%;text-align: center; padding: 20px 0; border-right: 1px solid #ddd; font-weight: 600; font-size: 16px;}
.tab-menu a:last-child {border: 0}
.tab_fap {background: #0056ff; color: #fff;}

@media all and (max-width: 576px) {
  .tab-menu a {
    width: 50%;
    border-top: 1px solid #ddd
  }
}