/* ==========================================
   Refinement Layer
   장식을 덜어내고 여백을 늘려 톤을 정리하는 레이어.
   반드시 마지막에 로드할 것. 되돌리려면 이 <link> 한 줄만 제거하면 됩니다.
   ========================================== */

/* ==========================================
   1. 물결 구분선(wave divider) 제거
   섹션 경계는 배경색 차이만으로 구분한다
   ========================================== */
.custom-shape-divider-bottom {
    display: none;
}

/* ==========================================
   2. 골드 액센트 축소
   금색은 장식이 아니라 "지금 눌러야 할 곳"에만 남긴다
   ========================================== */

/* 섹션 제목 밑 금색 밑줄 — 두 종류 모두 제거 */
.section-title::after,
.section-header::after {
    display: none;
}

/* 섹션 제목 주변 글로우 원 제거 */
.section-header::before {
    display: none;
}

/* 아이라벨: 파란 그라데이션 알약 → 담백한 소문자 간격 텍스트 */
.section-label-box {
    background: none;
    box-shadow: none;
    color: var(--primary-blue);
    padding: 0;
    margin-bottom: var(--spacing-lg);
    font-size: 0.8rem;
    letter-spacing: 3px;
    border-radius: 0;
}

.section-label-box:hover {
    transform: none;
    box-shadow: none;
}

.section-label-box::before {
    display: none;
}

.section-label-box i {
    display: none;
}

/* 섹션 라벨 — 금색 → 중립 톤 */
.section-label {
    color: var(--text-medium);
    letter-spacing: 3px;
}

.benefits-section .section-label {
    color: rgba(255, 255, 255, 0.65);
}

/* 기본 버튼: 금색 그라데이션 → 단색 브랜드 블루 */
.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
    box-shadow: none;
    opacity: 1;
    transform: translateY(-1px);
}

/* 버튼 위에 번지는 원형 하이라이트 제거 */
.btn-primary::before,
.btn-primary:hover::before {
    display: none;
}

/* 카드 버튼도 동일하게 */
.btn-card {
    background: var(--primary-blue);
    box-shadow: none;
}

.btn-card:hover {
    background: var(--primary-blue-dark);
    box-shadow: none;
}

/* 솔루션 카드 상단 바 — 블루→골드 흐르는 그라데이션 → 단색 블루, 애니메이션 정지 */
.solution-card::before {
    background: var(--primary-blue);
    background-size: auto;
    animation: none;
    height: 3px;
}

/* 카드 아이콘 위를 훑고 지나가는 반짝임 제거 */
.card-icon::before {
    display: none;
}

/* Benefits 번호 — 금색 → 흰색 저채도 */
.benefit-number {
    color: rgba(255, 255, 255, 0.45);
    opacity: 1;
}

/* 기술지원 단계 번호 — 금색 그라데이션 → 단색 블루, 펄스 정지 */
.process-step .step-number {
    background: var(--primary-blue);
    box-shadow: none;
    animation: none;
}

/* 최상단 이동 버튼 호버 시 금색 → 블루 유지 */
#scrollTopBtn:hover {
    background: var(--primary-blue-dark);
}

/* ==========================================
   3. 여백 확대
   한 화면에 한 가지만 말하도록 숨통을 틔운다
   ========================================== */
.overview-section,
.features-section,
.benefits-section {
    padding: calc(var(--spacing-2xl) * 4.2) 0;
}

.sync-section,
.ai-mobile-section {
    padding: calc(var(--spacing-2xl) * 2.6) 0;
}

.product-detail-section {
    padding: calc(var(--spacing-2xl) * 2.5) 0;
}

.flow-section {
    padding: calc(var(--spacing-2xl) * 2.6) 0;
}

/* 제목 블록과 본문 사이 간격 */
.section-header {
    margin-bottom: calc(var(--spacing-2xl) * 2);
}

/* 설명문은 한 줄이 너무 길지 않게 — 가독 폭 제한 */
.section-description {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* 카드 사이 간격 */
.solutions-grid,
.overview-grid,
.benefits-grid {
    gap: calc(var(--spacing-2xl) * 0.9);
}

/* 워크플로우 단계 사이 간격 */
.workflow-step {
    margin-bottom: calc(var(--spacing-2xl) * 1.8);
}

/* ==========================================
   4. 배경 회로 그래픽 톤다운
   선 농도를 절반 이하로, 대형 모티프는 화면당 한 곳만
   ========================================== */
:root {
    --tech-line: rgba(30, 58, 95, 0.045);
    --tech-line-strong: rgba(30, 58, 95, 0.06);
    --tech-dot: rgba(30, 58, 95, 0.05);
    --tech-orb-blue: rgba(37, 99, 235, 0.04);
    --tech-orb-gold: rgba(37, 99, 235, 0.03);
    --tech-orb-cyan: rgba(14, 165, 180, 0.035);
}

/* 대형 회로: 워크플로우 좌하단 하나는 덜어낸다 (우상단만 유지) */
.flow-section::after {
    display: none;
}

.features-section::before {
    opacity: 0.55;
}

.cta-section::before {
    opacity: 0.5;
}

/* 공급처 연동 섹션의 반복 회로 타일도 절반 수준으로 */
.sync-section::before {
    opacity: 0.28;
}

/* 다크 섹션 격자도 한 톤 낮춤 */
.benefits-section::before {
    opacity: 0.6;
}

/* ==========================================
   반응형
   ========================================== */
@media (max-width: 767px) {

    .overview-section,
    .features-section,
    .benefits-section {
        padding: calc(var(--spacing-2xl) * 2) 0;
    }

    .sync-section,
    .ai-mobile-section,
    .flow-section,
    .product-detail-section {
        padding: calc(var(--spacing-2xl) * 1.4) 0;
    }

    .section-header {
        margin-bottom: var(--spacing-2xl);
    }

    .workflow-step {
        margin-bottom: var(--spacing-2xl);
    }
}

/* ==========================================
   5. 모서리 · 그림자 평탄화
   둥근 모서리와 짙은 그림자를 덜어내고, 경계는 얇은 선으로 대신한다
   ========================================== */
:root {
    --radius-md: 0.25rem;
    --radius-lg: 0.375rem;
    --radius-xl: 0.5rem;
    --radius-2xl: 0.625rem;
    --radius-3xl: 0.75rem;
    /* --radius-full은 아이콘 원형 등에 필요하므로 유지 */

    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.03);
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md: 0 2px 6px rgb(15 23 42 / 0.05);
    --shadow-lg: 0 4px 14px rgb(15 23 42 / 0.06);
    --shadow-xl: 0 8px 24px rgb(15 23 42 / 0.07);
    --shadow-2xl: 0 12px 36px rgb(15 23 42 / 0.09);
    --shadow-colored: 0 4px 14px hsl(222.2 47.4% 41.2% / 0.12);
    --shadow-gold: 0 4px 14px hsl(222.2 47.4% 41.2% / 0.1);
}

/* 그림자 대신 얇은 경계선.
   .step-content는 제품 페이지의 워크플로우 카드와 채용 페이지의 단계 안
   텍스트 묶음에 같은 이름으로 쓰인다. 카드인 쪽에만 선을 준다 */
.workflow-step .step-content,
.vision-card,
.process-step {
    border: 1px solid hsl(var(--border));
}
/* .visual-mockup은 배경 없는 껍데기이고 실제 카드는 그 안의 .mockup-window다.
   .support-card는 호버 강조용 테두리를 스스로 쓰고 있어 건드리지 않는다 */

/* 토큰을 쓰지 않아 위 그림자 조정이 닿지 않은 곳들 */
.mockup-window {
    box-shadow: 0 4px 16px rgb(15 23 42 / 0.07);
}

.mockup-device {
    box-shadow: 0 8px 28px rgb(15 23 42 / 0.12);
}

.benefit-card:hover {
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.16);
}

/* 호버 시 과하게 들리던 카드를 잔잔하게 */
.solution-card:hover,
.overview-card:hover,
.benefit-card:hover,
.vision-card:hover,
.support-card:hover,
.process-step:hover,
.sync-node:hover,
.ai-card:hover {
    transform: translateY(-4px);
}

.card-icon,
.overview-card .card-icon {
    border-radius: var(--radius-xl);
}

/* ==========================================
   6. 타이포그래피
   굵기를 한 단계 낮추고 줄간격을 넉넉히 — 제목은 크게, 무게는 가볍게
   ========================================== */
h1,
h2,
h3,
h4,
.section-title,
.product-title,
.card-title,
.step-title,
.feature-title,
.hero-title {
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.34;
}

.hero-title,
.product-title {
    font-weight: 700;
}

/* 본문 줄간격 */
body {
    line-height: 1.7;
}

p,
.section-description,
.card-subtitle,
.feature-list p,
.step-description {
    line-height: 1.75;
}

/* 여백이 넓어진 만큼 섹션 제목은 조금 더 크게 */
@media (min-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }

    .section-description {
        font-size: 1.08rem;
    }
}

/* 라벨류는 작고 넓게 — 제목과 대비를 만든다 */
.section-label,
.section-label-box,
.product-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
}

/* 제품 라벨 — .section-label / .section-label-box와 같은 톤으로 맞춘다
   (혼자 그라데이션 알약으로 남아 있었다) */
.product-label {
    background: none;
    color: var(--primary-blue);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: var(--spacing-md);
}