/* demo-intro.css — index.html에서 분리한 인트로 전용 스타일 (ez-header + .landing 오버라이드) */
/* 로딩 순서: styles.css → intro-landing.css → 이 파일(마지막, 오버라이드 우선) */
:root{ --ezh:84px; --ez-blue:#2A8BCC; --ez-ink:#1a1a1a; --ez-line:#e6e2da; }
/* #mainNav 를 항상 고정·흰 바로 (scripts.js 의 스크롤 자동숨김/투명 무력화) */
#mainNav.ez-header,
#mainNav.ez-header.is-fixed,
#mainNav.ez-header.is-visible{
position:fixed; top:0; left:0; right:0; transform:none;
height:var(--ezh); z-index:1030;
background:#fff !important; border-bottom:1px solid var(--ez-line) !important;
display:flex; align-items:center; justify-content:flex-start;
padding:0 max(50px,9%);
font-family:'Roboto','Pretendard Variable','Pretendard','Pretendard Fallback','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
}
/* 고정 헤더 높이만큼 본문 밀어주는 스페이서 */
.ezh-spacer{ height:var(--ezh); }
/* 로고 */
.ezh-logo{ display:flex; align-items:center; gap:10px; flex:none; z-index:2; }
.ezh-logo img{ height:32px; width:auto; display:block; }
#mainNav.ez-header .ezh-logo .ezh-word{ font-size:24px; font-weight:800; letter-spacing:-.3px; color:var(--ez-ink); }
#mainNav.ez-header .ezh-logo,
#mainNav.ez-header .ezh-logo:hover{ color:var(--ez-ink); text-decoration:none; }
/* 중앙 메뉴 (전체폭에 가운데, 빈영역 클릭통과) */
.ezh-nav{
position:absolute; left:0; right:0; top:0; height:100%;
display:flex; align-items:center; justify-content:center; gap:46px;
pointer-events:none; margin:0; padding:0; list-style:none;
}
.ezh-nav li{ pointer-events:auto; }
.ezh-nav a{
position:relative; display:inline-block; padding:30px 0;
font-size:17px; font-weight:500; color:var(--ez-ink); letter-spacing:-.3px;
text-transform:none; text-decoration:none;
}
.ezh-nav a::after{
content:""; position:absolute; left:-14px; right:-14px; bottom:0; height:4px;
background:var(--ez-blue); border-radius:3px 3px 0 0;
transform:scaleX(0); transform-origin:center; transition:transform .26s ease;
}
.ezh-nav li:hover a, .ezh-nav li.on a{ color:var(--ez-blue); }
.ezh-nav li:hover a::after, .ezh-nav li.on a::after{ transform:scaleX(1); }
/* 우측 로그인/회원 */
/* .ezh-auth 스타일은 styles.css 끝에 정의됨 (JSP 캐시 회피) */
/* 햄버거 (≤992 노출) */
.ezh-burger{
display:none; width:36px; height:36px; flex-direction:column; justify-content:center; gap:6px;
border:0; background:none; cursor:pointer; padding:0; margin-left:auto; z-index:2;
}
.ezh-burger span{ display:block; width:26px; height:2px; background:var(--ez-ink); border-radius:2px; transition:transform .25s ease,opacity .2s ease; }
.ezh-burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.ezh-burger.open span:nth-child(2){ opacity:0; }
.ezh-burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
/* 모바일 드롭다운 패널 */
.ezh-mobile{
position:fixed; top:var(--ezh); left:0; right:0; background:#fff;
border-bottom:1px solid var(--ez-line); box-shadow:0 18px 30px -20px rgba(0,0,0,.25);
transform:translateY(-12px); opacity:0; visibility:hidden; transition:.25s; z-index:1029;
}
.ezh-mobile.open{ transform:none; opacity:1; visibility:visible; }
.ezh-mobile a{
display:block; padding:15px 24px; font-size:16px; font-weight:600; color:var(--ez-ink);
border-bottom:1px solid #f0f0f0; text-decoration:none;
}
.ezh-mobile a:active{ background:#f6f8fb; }
.ezh-mobile .ezh-m-auth a{ color:#666; font-weight:500; display:flex; align-items:center; gap:9px; }
.ezh-mobile .ezh-m-auth a svg{ width:18px; height:18px; flex:none; stroke-width:1.4; }
@media (max-width:1100px){ .ezh-nav{ gap:30px; } .ezh-nav a{ font-size:15px; } }
@media (max-width:992px){
.ezh-nav, .ezh-auth{ display:none; }
.ezh-burger{ display:flex; }
}
/*hero-height-fix — 리스타일러 .page-hero 실제값에 정렬 (가역: 이 블록만 지우면 원복) */
/* 원본 intro-landing.css: .lp-hero{padding:calc(60px+5.5rem) 0 5rem} → ez-header/spacer와 상단 이중여백.
리스타일러 common.css .page-hero 값 그대로: min-height:480px, padding:30px 0 80px, 상단정렬. */
.landing .lp-hero{
padding:30px 0 80px;
min-height:480px;
box-sizing:border-box;
}
/*krds-blue — 본문 파랑을 KRDS primary-50/60으로 통일 (가역: 이 블록만 삭제) */
/* 원본 intro-landing.css: --lp-blue:#0E67DB, hover #1276F0. 히어로 그라디언트(#2CAFFF→#7FD1FF)는 다크배경 가독용 유지. */
.landing{ --lp-blue:#256ef4; --lp-blue-dark:#0b50d0; }
.landing .lp-btn-primary:hover{ background:#0b50d0; }
.landing .lp-form-card .btn-submit:hover{ background:#0b50d0; }
/*card-unify — Scope 카드를 레퍼런스(.ref-feat) 스타일로 통일 (가역: 이 블록만 삭제) */
/* 기준 = demo/reference.html: 평상시 그림자 없음, hover = 파란 보더 + inset 링(떠오름 없음), 본문 lh 1.65 */
.landing .lp-card{ box-shadow:none; }
.landing .lp-card:hover{
transform:none;
border-color:var(--lp-blue);
box-shadow:inset 0 0 0 1px var(--lp-blue);
}
.landing .lp-card p{ line-height:1.65; }
/*process-stepcard — ai-reference .case-card 스타일 이식: 상단 태그+색 액센트 바 (가역: 이 블록만 삭제) */
/* 색: s1 KRDS파랑 #256ef4 → s2 보라 #8e44ad → s3 초록 #27ae60 (모두 단색으로 바꿀려면 세 --sc 값을 #256ef4로) */
.landing .lp-step[data-mod="0"]{ --sc:#256ef4; }
.landing .lp-step[data-mod="1"]{ --sc:#8e44ad; }
.landing .lp-step[data-mod="2"]{ --sc:#27ae60; }
.landing .lp-step{ box-shadow:none; }
.landing .lp-step:hover{ transform:none; box-shadow:none; border-color:var(--sc,var(--lp-blue)); }
.landing .lp-step-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.landing .lp-step-tag{ font-size:12px; font-weight:700; letter-spacing:1.2px; color:var(--sc,var(--lp-blue)); white-space:nowrap; }
.landing .lp-step-bar{ flex:1; height:3px; border-radius:3px; background:var(--sc,var(--lp-blue)); }
.landing .lp-step .step-link{ color:var(--sc,var(--lp-blue)); }
/*aurora-perf — 버벅임 해결(A): 오로라 애니메이션 정지, 그라디언트는 유지 (가역: 이 블록만 삭제) */
/* 원인: blur+mix-blend-mode 레이어의 무한 transform 애니메이션이 매 프레임 대형 리페인트 유발.
→ 커튼 애니메이션 완전 정지. 오로라 그라디언트/별빛(정적)은 그대로 예쁘게 남는다. */
.landing .lp-aurora{ contain:paint; }
.landing .lp-curtain{ filter:blur(38px); animation:none; }
/* 별빛 반짝임(opacity만 바뀌는 값싼 애니메이션)은 유지 — 부담 거의 없음 */
/*hero-restyler-match*/
.landing .lp-hero h1{ font-size:clamp(32px,4vw,52px); font-weight:700; letter-spacing:-1.5px; margin-bottom:16px; }
.landing .lp-lead{ max-width:720px; }
/*hero-crumb-eyebrow*/
.landing .lp-crumb{ font-size:13px; opacity:.85; margin-bottom:10px; }
.landing .lp-crumb .current{ color:#fff; }
.landing .lp-hero-eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.4px; color:#6ea8ff; margin-bottom:8px; }
/*hero-height-fix3*/ /* 리스타일러 page-hero 판박이: 상단 흐름 + min-height (fix2 세로중앙 해제) */
.landing .lp-hero{ height:auto; min-height:480px; display:block; }
/*hero-crumb-v3*/ /* 리스타일러 intro .breadcrumb/.hero-eyebrow 실측값 그대로 이식 (v2 대체) */
.landing .lp-hero .lp-crumb{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:.2px;color:rgba(255,255,255,.82);margin-bottom:26px;opacity:1}
.landing .lp-hero .lp-crumb a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s ease}
.landing .lp-hero .lp-crumb a:hover{color:#fff;text-decoration:none}
.landing .lp-hero .lp-crumb .sep{opacity:.5;margin:0}
.landing .lp-hero .lp-crumb .current{color:#fff}
.landing .lp-hero .lp-hero-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1px;color:#6ce4ff;margin-bottom:18px}
/*hero-continuity*/ /* index 히어로 = main(ezp-head 250 + main_banner) 상단 스택 정렬 — styles.css 실측 합산 */
.landing .lp-hero{ padding-top:12px; min-height:530px; } /* 250+280 (>=1400px) */
@media (max-width:1399px){ .landing .lp-hero{ min-height:474px; } } /* 250+224 */
@media (max-width:1199px){ .landing .lp-hero{ min-height:460px; } } /* 250+210 */
@media (max-width:991px){ .landing .lp-hero{ min-height:418px; } } /* 250+168 */
@media (max-width:768px){ .landing .lp-hero{ min-height:0; } } /* main도 자연흐름 구간 */
/*container-align-main*/ /* landing 시작선 = main .ezp-inner (1280 + 50px, styles.css 13801 실측). px-lg-5 !important 대응 */
.landing .container{ max-width:1280px; padding-left:50px !important; padding-right:50px !important; }
/*roi-stat-case*/ /* ROI 지표 = case.html 성과 요약 인라인 빅넘버 판박이 (roi-stat-polish 대체) */
.landing .lp-stats--light{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:0; background:transparent; border-radius:0; overflow:visible; }
.landing .lp-stats--light .stat-item{ text-align:center; padding:26px 24px; }
.landing .lp-stats--light .stat-item + .stat-item{ border-left:1px solid #e5e5ea; }
.landing .stat-num{ font-size:clamp(46px,5vw,60px); font-weight:700; line-height:1; letter-spacing:-2.5px; color:#256ef4; font-variant-numeric:tabular-nums; }
.landing .stat-num .unit{ font-size:.48em; font-weight:700; letter-spacing:-.5px; margin-left:3px; }
.landing .stat-label{ margin-top:14px; font-size:17px; font-weight:600; color:#111; letter-spacing:-.2px; }
.landing .stat-sub{ margin-top:5px; font-size:15px; color:#222; }
@media (max-width:768px){
.landing .lp-stats--light{ grid-template-columns:1fr; }
.landing .lp-stats--light .stat-item{ padding:22px 12px; }
.landing .lp-stats--light .stat-item + .stat-item{ border-left:none; border-top:1px solid #e5e5ea; }
}
/*cta-unify*/ /* 히어로 CTA = Contact 버튼(lp-btn-primary) 판박이 — 999px 알약·그라디언트·글로우 전부 해제 (cta-size-fix 대체) */
.landing .lp-quick-contact{
min-height:54px; padding:0.4rem 1.9rem;
border-radius:10px;
background:var(--lp-blue);
font-size:1rem; font-weight:700;
box-shadow:none;
}
.landing .lp-quick-contact:hover{ transform:none; filter:none; box-shadow:none; background:#0b50d0; }
.landing .lp-quick-contact::after{ display:none; }
.landing .lp-btn-primary{ box-shadow:none; }
.landing .lp-contact-cta .lp-btn{ min-height:54px; padding:0.4rem 1.9rem; }
/*hero-bg-image*/ /* 오로라(블러 커튼+별빛) 완전 제거 → 정적 이미지 1장 + 그라디언트 오버레이 (리스타일러 패턴) */
.landing .lp-aurora{ display:none; }
.landing .lp-hero{ background:linear-gradient(rgba(4,8,26,.55),rgba(4,8,26,.7)), url("../../img/hero-ai.jpg") center/cover no-repeat; }
/*stepcard-height-border*/ /* 3-스텝 카드: CTA 하단고정(baseline 정렬) + restyler 톤 회색경계 (가역: 이 블록만 삭제) */
.landing .lp-step { border-color:#e5e5ea; }
.landing .lp-step .step-link { margin-top:auto; }
/*stepcard-divider-meta*/ /* 설명↔CTA 사이 회색 divider + 굵은 요약 메타 (가역: 이 블록만 삭제) */
.landing .lp-step-meta { margin:1.1rem 0 0; padding-top:1.1rem; border-top:1px solid #e5e5ea; font-size:0.9rem; font-weight:700; color:var(--lp-ink); }
/* font-fix : 웹폰트 교체 시 레이아웃 흔들림 제거 (2026-07-20 실측) */
@font-face{
font-family:'Pretendard Fallback';
src:local('Malgun Gothic'), local('맑은 고딕');
size-adjust:85.74%;
ascent-override:110.80%;
descent-override:27.99%;
line-gap-override:0%;
}
/* end font-fix */