/* ============================================================
   editorial.css — 서브페이지 공용 에디토리얼 폴리시
   랜딩(Direction A · light)과 톤 통일: 모노 키커 / 히어로 강화 /
   blur+slide 스태거 스크롤 리빌
   · styles.css 이후에 로드되어 필요한 부분만 override (styles.css 미수정)
   · 대상: about / solutions / technology / contact / solutions 상세 4종
   ============================================================ */
:root{
  --accent:#3d87ff; --accent-2:#3e89ff;
  --mono:"Do Hyeon","Noto Sans KR","Noto Sans SC","Noto Sans JP",ui-monospace,monospace;
}

/* ── 모노 키커 (eyebrow) ── */
.eyebrow{
  font-family:var(--mono); font-weight:400;
  letter-spacing:.16em; font-size:12.5px; color:var(--faint);
}
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ letter-spacing:-.03em; }

/* ── 그라데이션 강조 유틸 ── */
.grad-text{
  background:linear-gradient(100deg,#0144b2,#3e89ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── 히어로 강화 (좌측정렬 대형 타이포 + 은은한 그리드) ── */
.sol-hero{ padding:clamp(74px,10vw,124px) 0 clamp(48px,6vw,70px); }
.sol-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(15,21,34,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(15,21,34,.045) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(70% 72% at 72% 28%,#000,transparent 82%);
  mask-image:radial-gradient(70% 72% at 72% 28%,#000,transparent 82%);
  opacity:.7;
}
.sol-hero .container{ position:relative; z-index:1; }
.sol-hero h1{ font-size:clamp(2.2rem,5.2vw,3.9rem); letter-spacing:-.04em; line-height:1.08; }
.sol-hero .lead{ font-size:clamp(1.02rem,1.4vw,1.18rem); margin-top:22px; }
.sol-hero .pill{ font-family:var(--mono); letter-spacing:.05em; }

/* ── 스크롤 리빌: blur + slide (21st Stagger List 톤) ── */
.rev{
  opacity:0; transform:translateY(26px); filter:blur(8px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1),
             filter .8s cubic-bezier(.22,1,.36,1);
}
.rev.in{ opacity:1; transform:none; filter:blur(0); }

/* 그리드 컨테이너가 in 되면 자식이 순차 등장 */
.split.rev>*,.features.rev>*,.bento.rev>*,.stats.rev>*,.cases.rev>*,.tech-list.rev>*,.logos.rev>*{
  opacity:0; transform:translateY(20px); filter:blur(6px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),
             transform .7s cubic-bezier(.22,1,.36,1),
             filter .7s cubic-bezier(.22,1,.36,1);
}
.split.rev.in>*,.features.rev.in>*,.bento.rev.in>*,.stats.rev.in>*,.cases.rev.in>*,.tech-list.rev.in>*,.logos.rev.in>*{
  opacity:1; transform:none; filter:blur(0);
}
.split.rev.in>*:nth-child(1),.features.rev.in>*:nth-child(1),.bento.rev.in>*:nth-child(1),.stats.rev.in>*:nth-child(1),.cases.rev.in>*:nth-child(1),.tech-list.rev.in>*:nth-child(1),.logos.rev.in>*:nth-child(1){ transition-delay:.05s; }
.split.rev.in>*:nth-child(2),.features.rev.in>*:nth-child(2),.bento.rev.in>*:nth-child(2),.stats.rev.in>*:nth-child(2),.cases.rev.in>*:nth-child(2),.tech-list.rev.in>*:nth-child(2),.logos.rev.in>*:nth-child(2){ transition-delay:.13s; }
.split.rev.in>*:nth-child(3),.features.rev.in>*:nth-child(3),.bento.rev.in>*:nth-child(3),.stats.rev.in>*:nth-child(3),.cases.rev.in>*:nth-child(3),.tech-list.rev.in>*:nth-child(3),.logos.rev.in>*:nth-child(3){ transition-delay:.21s; }
.split.rev.in>*:nth-child(4),.features.rev.in>*:nth-child(4),.bento.rev.in>*:nth-child(4),.stats.rev.in>*:nth-child(4),.cases.rev.in>*:nth-child(4),.tech-list.rev.in>*:nth-child(4),.logos.rev.in>*:nth-child(4){ transition-delay:.29s; }
.bento.rev.in>*:nth-child(5),.stats.rev.in>*:nth-child(5),.tech-list.rev.in>*:nth-child(5),.logos.rev.in>*:nth-child(5){ transition-delay:.37s; }
.bento.rev.in>*:nth-child(6),.tech-list.rev.in>*:nth-child(6),.logos.rev.in>*:nth-child(6){ transition-delay:.45s; }

@media (prefers-reduced-motion:reduce){
  .rev,.split.rev>*,.features.rev>*,.bento.rev>*,.stats.rev>*,.cases.rev>*,.tech-list.rev>*,.logos.rev>*{
    transition:none; filter:none; transform:none; opacity:1;
  }
}


/* ============================================================
   두 색 교차 테마 (ECEEF0 / #2b2b2b) — 랜딩과 통일
   main 직계 section: 홀수=다크 / 짝수=라이트, cta-band 항상 다크
   ============================================================ */
/* 두 톤 베이지 교차 (묵색 제거) — 홀수=살짝 진한 베이지 / 짝수=메인 베이지 */
:root{ --tm-dark:#ecf2fe; --tm-light:#ffffff; }
main>section{position:relative;transition:background .3s ease}
main>section:nth-of-type(even){background:var(--tm-light)}
main>section:nth-of-type(odd){background:var(--tm-dark)}
.cta-band{background:#0145b4!important;color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.86)!important}
.cta-band .btn-primary{background:#fff!important;color:#0145b4!important}
.cta-band .btn-primary:hover{background:#e8f0ff!important}
.cta-band::before{background:radial-gradient(50% 80% at 50% 0%,rgba(255,255,255,.14),transparent 70%)!important}

/* sol-hero (1번 섹션): 라이트 베이지 · 다크 텍스트 */
.sol-hero h1{color:var(--ink)}
.sol-hero .lead{color:var(--muted)}
.sol-hero::after{background-image:linear-gradient(rgba(15,21,34,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,21,34,.045) 1px,transparent 1px)!important}
.sol-hero .pill{background:#fff;border-color:var(--line-2);color:var(--muted)}
.sol-hero .pill .dot{background:var(--brand)!important}


/* 카드가 정확히 3개인 features 는 데스크톱에서 한 줄(3열)로 — 2+1 어색함 방지 */
@media (min-width:901px){
  .features:has(> .feature:nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); }
}