/* Pretendard Variable — 한글 서브셋 자체 호스팅. 원본(2,058KB)에는 한자·가나까지 들어 있고, jsDelivr 의 dynamic-subset 은 90여 개 청크로 쪼개져 모바일에서 왕복 비용이 크다. scripts/build-font-subset.js 로 필요한 블록만 남긴 woff2 하나를 같은 오리진에서 준다. */ @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/assets/fonts/PretendardVariable-krsubset.woff2") format("woff2-variations"); } /* ============================================================ BidRaon — home.css index.html 전용 디자인 시스템 (레퍼런스급 전면 개편) - 다크 기본 + 라이트 유지 - 디스플레이: Wanted Sans / 본문: Pretendard - 모든 규칙은 body.home-v2 스코프로 한정해 형제 페이지 보호 - style.css / tailwind-built.css 뒤에 로드 → 토큰·컴포넌트 정제 ============================================================ */ /* 디스플레이 폰트(Wanted Sans Variable)는 index.html 에서 link로 로드 */ /* ============================================================ 1. 토큰 — 다크(기본) 기존 토큰 이름을 재정의해 유지 컴포넌트(wf/val/case/kpi/tc/faq)도 함께 리스킨되고, 신규 컴포넌트는 --bd-* 를 사용한다. ============================================================ */ body.home-v2 { /* 캔버스 — 기존 브랜드 다크 (복원) */ --bg-deep: #111216; --bg-surface: #181A20; --text-main: #F3F3F3; --text-sub: #E5E5E5; /* 카드/표면 (기존 값 복원) */ --card-bg: rgba(30, 32, 40, .7); --card-hover-bg: rgba(38, 40, 52, .85); --card-border: rgba(255, 255, 255, .1); --card-hover-border: rgba(37, 99, 235, .3); --card-shadow: rgba(0, 0, 0, .15); --card-hover-shadow: rgba(37, 99, 235, .12); --tag-bg: rgba(255, 255, 255, .05); --tag-border: rgba(255, 255, 255, .1); --tag-color: rgba(255, 255, 255, .72); --tag-hover-color: #fff; --tc-bg: rgba(30, 32, 40, .6); --tc-border: rgba(255, 255, 255, .1); --tc-hover-border: rgba(37, 99, 235, .25); --tc-shadow: rgba(0, 0, 0, .1); --header-bg: rgba(17, 18, 22, .9); --header-border: rgba(255, 255, 255, .05); --section-border: rgba(255, 255, 255, .05); --faq-border: rgba(255, 255, 255, .1); --scroll-color: rgba(255, 255, 255, .3); --footer-bg: #111216; /* 시스템 토큰 — 시그니처 블루 (#2563EB 계열) */ --bd-accent: #3b82f6; /* 다크 위 가독 브랜드 블루 */ --bd-accent-2: #2563EB; --bd-accent-deep: #1d4ed8; --bd-link: #60a5fa; --bd-grad-text: linear-gradient(100deg, #93c5fd 0%, #3b82f6 52%, #2563EB 100%); --bd-grad-eyebrow: linear-gradient(90deg, #60a5fa 0%, #2563EB 100%); --bd-grad-accent: linear-gradient(135deg, #3b82f6 0%, #2563EB 100%); --bd-grad-band: radial-gradient(120% 120% at 0% 0%, rgba(59, 130, 246, .22), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(37, 99, 235, .14), transparent 55%); --bd-glow: rgba(37, 99, 235, .4); --bd-surface-1: rgba(255, 255, 255, .03); --bd-surface-2: rgba(255, 255, 255, .05); --bd-hairline: rgba(255, 255, 255, .1); --bd-display: "Wanted Sans Variable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Pretendard 는 레포에 실제로 쓰인 글자만 담은 서브셋이다. 카피를 고치고 build:font 를 안 돌린 경우 빠진 글자가 두부로 뜨지 않도록 Noto Sans KR(이미 로드됨, 유니코드 전 범위)을 폴백에 둔다. */ --bd-body: "Pretendard Variable", "Noto Sans KR", "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bd-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* spacing 리듬 */ --bd-maxw: 1200px; --bd-section-y: clamp(6rem, 9vw, 9rem); } /* ============================================================ 2. 토큰 — 라이트 ============================================================ */ html.light body.home-v2 { --bg-deep: #ffffff; --bg-surface: #f4f7fb; --text-main: #1a1a2e; --text-sub: #2d3748; --card-bg: rgba(255, 255, 255, .9); --card-hover-bg: #ffffff; --card-border: rgba(37, 99, 235, .1); --card-hover-border: rgba(37, 99, 235, .3); --card-shadow: rgba(37, 99, 235, .06); --card-hover-shadow: rgba(37, 99, 235, .12); --tag-bg: rgba(37, 99, 235, .04); --tag-border: rgba(37, 99, 235, .12); --tag-color: #374151; --tag-hover-color: #1a1a2e; --tc-bg: rgba(255, 255, 255, .9); --tc-border: rgba(37, 99, 235, .1); --tc-hover-border: rgba(37, 99, 235, .25); --tc-shadow: rgba(37, 99, 235, .04); --header-bg: rgba(255, 255, 255, .9); --header-border: rgba(37, 99, 235, .1); --section-border: rgba(37, 99, 235, .1); --faq-border: rgba(37, 99, 235, .1); --scroll-color: rgba(71, 85, 105, .5); --footer-bg: #f4f7fb; --bd-accent: #2563EB; --bd-accent-2: #3b82f6; --bd-accent-deep: #1d4ed8; --bd-link: #2563EB; --bd-grad-text: linear-gradient(100deg, #3b82f6 0%, #2563EB 55%, #1d4ed8 100%); --bd-grad-eyebrow: linear-gradient(90deg, #2563EB 0%, #1d4ed8 100%); --bd-grad-accent: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --bd-grad-band: radial-gradient(120% 120% at 0% 0%, rgba(37, 99, 235, .1), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(37, 99, 235, .06), transparent 55%); --bd-glow: rgba(37, 99, 235, .25); --bd-surface-1: rgba(37, 99, 235, .025); --bd-surface-2: rgba(37, 99, 235, .05); --bd-hairline: rgba(37, 99, 235, .1); } /* ============================================================ 3. 베이스 타이포그래피 ============================================================ */ body.home-v2 { font-family: var(--bd-body); background: var(--bg-deep); color: var(--text-main); letter-spacing: -0.011em; } body.home-v2 h1, body.home-v2 h2, body.home-v2 h3, body.home-v2 h4 { font-family: var(--bd-display); word-break: keep-all; text-wrap: balance; } body.home-v2 ::selection { background: var(--bd-accent-2); color: #fff; } /* ============================================================ 4. 앰비언트 배경 (배경 비디오 대체) 고정 레이어 — 라디얼 글로우 + 격자 + 그레인. reduced-motion 존중. ============================================================ */ .bd-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg-deep); } .bd-ambient__grid { position: absolute; inset: -10%; background-image: linear-gradient(var(--bd-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--bd-hairline) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); opacity: .5; } .bd-ambient__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; } .bd-ambient__glow--a { width: 52vw; height: 52vw; top: -16vw; left: -8vw; background: radial-gradient(circle, rgba(47, 95, 224, .5), transparent 66%); } .bd-ambient__glow--b { width: 44vw; height: 44vw; top: 2vw; right: -10vw; background: radial-gradient(circle, rgba(52, 214, 232, .22), transparent 66%); } .bd-ambient__glow--c { width: 40vw; height: 40vw; top: 38vw; left: 30vw; background: radial-gradient(circle, rgba(59, 130, 246, .18), transparent 68%); } html.light .bd-ambient__glow--a { background: radial-gradient(circle, rgba(37, 99, 235, .16), transparent 66%); } html.light .bd-ambient__glow--b { background: radial-gradient(circle, rgba(14, 155, 180, .1), transparent 66%); } html.light .bd-ambient__glow--c { background: radial-gradient(circle, rgba(59, 130, 246, .08), transparent 68%); } html.light .bd-ambient__grid { opacity: .7; } /* 상·하단 비네팅으로 콘텐츠 가독성 확보 */ .bd-ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 15, .2) 0%, transparent 16%, transparent 62%, var(--bg-deep) 100%); } html.light .bd-ambient::after { background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, transparent 18%, transparent 60%, var(--bg-deep) 100%); } @media (prefers-reduced-motion: no-preference) { .bd-ambient__glow { animation: bd-drift 24s ease-in-out infinite alternate; } .bd-ambient__glow--b { animation-duration: 30s; animation-delay: -6s; } .bd-ambient__glow--c { animation-duration: 36s; animation-delay: -12s; } } @keyframes bd-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3%, 4%, 0) scale(1.08); } } /* ============================================================ 5. 시그니처 유틸리티 ============================================================ */ /* 그라데이션 아이브로우 라벨 */ .bd-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--bd-display); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--bd-grad-eyebrow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .bd-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--bd-accent)); -webkit-text-fill-color: initial; } .bd-eyebrow--center { justify-content: center; } .bd-eyebrow--center::before { display: none; } /* 디스플레이 그라데이션 텍스트 */ .bd-grad { background: var(--bd-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 시머 보더 (rastra 결) */ .bd-shimmer { position: relative; } .bd-shimmer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3; } html.light .bd-shimmer::before { background: linear-gradient(140deg, rgba(37, 99, 235, .26), rgba(37, 99, 235, 0) 55%); } /* 칩 */ .bd-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 9999px; border: 1px solid var(--bd-hairline); background: var(--bd-surface-1); font-size: .8125rem; font-weight: 500; color: var(--text-sub); word-break: keep-all; } .bd-chip svg { width: .9rem; height: .9rem; color: var(--bd-accent); flex-shrink: 0; } /* ============================================================ 6. 버튼 ============================================================ */ .bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 3rem; padding: 0 1.5rem; border-radius: 9999px; font-family: var(--bd-display); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .2s ease; } .bd-btn svg { width: 1.05rem; height: 1.05rem; } .bd-btn--lg { height: 3.5rem; padding: 0 2rem; font-size: 1rem; } .bd-btn--sm { height: 2.5rem; padding: 0 1.25rem; font-size: .8125rem; } .bd-btn--primary { background: var(--bd-grad-accent); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 26px -6px var(--bd-glow); } .bd-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 14px 34px -6px var(--bd-glow); } .bd-btn--primary:active { transform: translateY(0); } .bd-btn--ghost { background: var(--bd-surface-2); color: var(--text-main); border: 1px solid var(--bd-hairline); backdrop-filter: blur(8px); } .bd-btn--ghost:hover { transform: translateY(-2px); border-color: var(--card-hover-border); background: var(--bd-surface-1); } @media (prefers-reduced-motion: reduce) { .bd-btn:hover { transform: none; } } /* 키보드 포커스 링 (a11y) */ body.home-v2 .bd-btn:focus-visible, body.home-v2 .bd-link:focus-visible, body.home-v2 .nav-link:focus-visible, body.home-v2 a.bd-case:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 3px; border-radius: 9999px; } /* 인라인 텍스트 링크 화살표 */ .bd-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--bd-display); font-size: .9375rem; font-weight: 600; color: var(--bd-link); transition: gap .2s ease; } .bd-link svg { width: 1rem; height: 1rem; } .bd-link:hover { gap: .65rem; } /* ============================================================ 7. 헤더 ============================================================ */ /* 헤더는 전 페이지 공유 컴포넌트 — 폰트만 서브페이지와 동일하게(Noto) 맞춰 메뉴 글씨가 페이지 이동 시 달라 보이지 않게 한다. 배경·블러·보더·nav-link 색은 style.css + 마크업이 모든 페이지에 동일 적용. */ body.home-v2 header.site-header, body.home-v2 header.site-header .nav-link { font-family: "Noto Sans KR", sans-serif; } /* ============================================================ 8. 섹션 리듬 + 공통 헤더 ============================================================ */ body.home-v2 main { position: relative; z-index: 10; } .bd-section { position: relative; padding-block: var(--bd-section-y); padding-inline: 1.5rem; border-bottom: 1px solid var(--section-border); } .bd-section--plain { border-bottom: 0; } .bd-inner { max-width: var(--bd-maxw); margin-inline: auto; } .bd-inner--narrow { max-width: 760px; } .bd-head { margin-bottom: clamp(3rem, 5vw, 4.5rem); } .bd-head--center { text-align: center; } .bd-head--center .bd-eyebrow { justify-content: center; } .bd-head--center .bd-eyebrow::before { display: none; } .bd-head .bd-eyebrow { margin-bottom: 1.25rem; } .bd-title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 700; line-height: 1.18; letter-spacing: -.03em; color: var(--text-main); margin: 0; } .bd-head--center .bd-title { margin-inline: auto; } .bd-sub { margin-top: 1.25rem; max-width: 60ch; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.7; color: var(--text-sub); word-break: keep-all; } .bd-head--center .bd-sub { margin-inline: auto; } /* 섹션 배경 변주 */ .bd-section--band { background: var(--bd-grad-band), linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%); } /* ---- 섹션 배경 정리 ---- 깔끔한 교차: 홀수 섹션은 솔리드 다크(텍스트 위주 — 가독성), 짝수 섹션은 투명(카드 위주 — 배경 영상이 은은히 비침). */ body.home-v2 main > section:not(.bd-hero) { position: relative; background-color: var(--bg-deep); } body.home-v2 main > section:not(.bd-hero):nth-of-type(2n) { background-color: transparent; } /* 투명 섹션 위 텍스트 가독성용 옅은 베일 */ body.home-v2 main > section:not(.bd-hero):nth-of-type(2n)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(10, 11, 15, .42); } html.light body.home-v2 main > section:not(.bd-hero):nth-of-type(2n)::after { background: rgba(255, 255, 255, .55); } body.home-v2 main > section:not(.bd-hero) > * { position: relative; z-index: 1; } /* 슬라이더는 투명 + 자체 글로우 유지 */ body.home-v2 .bd-slider { background-color: transparent; } /* ============================================================ 9. 히어로 ============================================================ */ .bd-hero { position: relative; min-height: calc(100vh - 5rem); display: flex; flex-direction: column; justify-content: center; padding: 7rem 1.5rem 5rem; } /* 영상 위 가독성 베일 */ .bd-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 52% at 50% 44%, rgba(17, 18, 22, .62) 0%, rgba(17, 18, 22, .2) 54%, transparent 78%), linear-gradient(180deg, rgba(17, 18, 22, .35) 0%, transparent 30%, transparent 72%, var(--bg-deep) 100%); } html.light .bd-hero::before { background: radial-gradient(58% 52% at 50% 44%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .15) 54%, transparent 80%), linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, transparent 30%, transparent 72%, var(--bg-deep) 100%); } .bd-hero__inner { position: relative; z-index: 2; max-width: var(--bd-maxw); margin-inline: auto; width: 100%; text-align: center; } .bd-hero__eyebrow { margin-bottom: 1.75rem; } .bd-hero__title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; color: var(--text-main); margin: 0 auto 1.75rem; max-width: 18ch; } .bd-hero__sub { max-width: 52ch; margin: 0 auto 2.75rem; font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem); line-height: 1.65; color: var(--text-sub); word-break: keep-all; } .bd-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; margin-bottom: 4rem; } .bd-hero__trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.75rem); max-width: 980px; margin: 0 auto; padding-top: 2.5rem; border-top: 1px solid var(--bd-hairline); list-style: none; } .bd-hero__trust li { display: flex; flex-direction: column; gap: .4rem; text-align: left; } .bd-hero__trust b { display: flex; align-items: center; gap: .5rem; font-family: var(--bd-display); font-size: 1rem; font-weight: 700; color: var(--text-main); } .bd-hero__trust b svg { width: 1.05rem; height: 1.05rem; color: var(--bd-accent); flex-shrink: 0; } .bd-hero__trust span { font-size: .8125rem; line-height: 1.55; color: var(--text-sub); word-break: keep-all; } /* 스크롤 인디케이터 */ .bd-scroll { position: absolute; bottom: 1.75rem; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: .65rem; z-index: 2; } .bd-scroll span { font-family: var(--bd-display); font-size: .625rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--scroll-color); } .bd-scroll i { width: 1px; height: 2.25rem; background: linear-gradient(to bottom, var(--scroll-color), transparent); } @media (prefers-reduced-motion: no-preference) { .bd-scroll i { animation: scrollBounce 2s ease-in-out infinite; } } /* ============================================================ 10. 섹션별 컴포넌트 정제 (마크업 재구성과 함께 사용) ============================================================ */ /* --- 쇼케이스 (좌우 2단 / 변주) --- */ .bd-showcase__kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--bd-display); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-accent); margin-bottom: 1.25rem; } .bd-showcase__kicker .n { font-variant-numeric: tabular-nums; color: var(--text-sub); opacity: .7; } .bd-showcase__title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--text-main); margin: 0 0 1rem; } .bd-showcase__desc { font-size: 1.0625rem; line-height: 1.7; color: var(--text-sub); margin-bottom: 2rem; word-break: keep-all; } .bd-showcase__tags { display: flex; flex-wrap: wrap; gap: .625rem; } /* 제품 프레임 — 뒤 블루 글로우(연하게) + floating stat */ .bd-framewrap { position: relative; } .bd-framewrap::before { content: ""; position: absolute; inset: -10% -8%; z-index: 0; background: radial-gradient(58% 58% at 50% 42%, var(--bd-glow), transparent 70%); filter: blur(40px); opacity: .55; pointer-events: none; } .bd-framewrap .sc-frame { position: relative; z-index: 1; } .bd-framewrap .bd-floating { z-index: 2; } .bd-floating { position: absolute; right: -.75rem; bottom: -1rem; padding: .9rem 1.15rem; border-radius: .9rem; background: #1b1d25; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); z-index: 4; } html.light .bd-floating { background: #fff; border-color: rgba(20, 45, 100, .1); box-shadow: 0 18px 40px rgba(20, 45, 100, .14); } .bd-floating__label { display: block; font-family: var(--bd-display); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bd-accent); } .bd-floating__value { display: block; margin-top: .3rem; font-size: 1.05rem; font-weight: 700; color: var(--text-main); white-space: nowrap; } @media (max-width: 640px) { .bd-floating { display: none; } } /* ============================================================ Product Tour 슬라이더 (레퍼런스 2번째 섹션 — 가로 슬라이드 트랙) ============================================================ */ .bd-slider { position: relative; padding-block: var(--bd-section-y); padding-inline: 1.5rem; border-bottom: 1px solid var(--section-border); overflow: hidden; } /* 섹션 분위기 글로우 */ .bd-slider::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 18%, var(--bd-glow), transparent 60%); opacity: .5; } .bd-slider > .bd-inner { position: relative; z-index: 1; } .bd-slider__viewport { position: relative; margin-top: 1.5rem; overflow: hidden; /* 가로 트랙 클리핑 (현재 슬라이드만 노출) */ touch-action: pan-y; /* 세로 스크롤은 브라우저가, 가로 스와이프는 JS가 처리 */ cursor: grab; /* PC 드래그 가능 힌트 */ user-select: none; /* 드래그 중 텍스트 선택 방지 */ -webkit-user-select: none; } .bd-slider.is-dragging .bd-slider__viewport { cursor: grabbing; } .bd-fader { display: flex; list-style: none; margin: 0; padding: 0; will-change: transform; transition: transform .55s cubic-bezier(.4, 0, .2, 1); } .bd-slide { flex: 0 0 100%; min-width: 0; /* flex 자식 내부 콘텐츠 오버플로 방지 */ } @media (prefers-reduced-motion: reduce) { .bd-fader { transition: none; } } .bd-showcard { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; min-height: 30rem; padding: clamp(2rem, 3.5vw, 3.5rem); border-radius: 1.5rem; background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(12px); } .bd-showcard__kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--bd-display); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-accent); margin: 0 0 1.1rem; } .bd-showcard__kicker .n { font-variant-numeric: tabular-nums; color: var(--text-sub); opacity: .65; } .bd-showcard__title { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--text-main); margin: 0 0 1.1rem; } .bd-showcard__desc { font-size: 1.0625rem; line-height: 1.7; color: var(--text-sub); margin: 0 0 1.75rem; word-break: keep-all; } .bd-showcard__tags { display: flex; flex-wrap: wrap; gap: .625rem; list-style: none; margin: 0; padding: 0; } /* 미디어(실제 캡처) — 브라우저 프레임 + 뒤 글로우 */ .bd-showcard__media { position: relative; } .bd-showcard__media::before { content: ""; position: absolute; inset: -12% -8%; z-index: 0; background: radial-gradient(58% 58% at 50% 45%, var(--bd-glow), transparent 70%); filter: blur(44px); opacity: .55; pointer-events: none; } .bd-shot-frame { position: relative; z-index: 1; margin: 0; border-radius: 1rem; overflow: hidden; background: #f8fafc; border: 1px solid var(--card-border); box-shadow: 0 36px 80px -28px rgba(0, 0, 0, .6); } html.light .bd-shot-frame { box-shadow: 0 36px 80px -32px rgba(20, 45, 100, .26); } .bd-shot-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; background: #eef2f7; border-bottom: 1px solid rgba(20, 40, 90, .08); } .bd-shot-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #cbd5e1; } .bd-shot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; } /* 컨트롤 (화살표 + 닷) */ .bd-slider__controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.75rem; } .bd-slider__nav { width: 3rem; height: 3rem; border-radius: 9999px; display: grid; place-items: center; background: var(--bd-surface-2); border: 1px solid var(--bd-hairline); color: var(--text-main); cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .bd-slider__nav:hover { transform: translateY(-2px); border-color: var(--card-hover-border); } .bd-slider__nav:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 3px; } .bd-slider__nav svg { width: 1.4rem; height: 1.4rem; } .bd-slider__dots { display: flex; align-items: center; gap: 0; } /* 터치 타깃 24x24px 확보. padding 은 투명 히트영역이고 점의 시각 크기는 width/height 그대로. background-clip: content-box 라서 배경색이 히트영역까지 번지지 않는다. background 단축 속성을 쓰면 background-clip 이 초기화되므로 background-color 로 분리해 둔다. */ .bd-slider__dots .dot { box-sizing: content-box; width: .55rem; height: .55rem; padding: .5rem; border: 0; border-radius: 9999px; background-color: var(--bd-hairline); background-clip: content-box; cursor: pointer; transition: width .25s ease, background-color .25s ease; } .bd-slider__dots .dot.is-active { width: 1.7rem; background-color: var(--bd-accent); } .bd-slider__dots .dot:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: -.3rem; } @media (max-width: 900px) { .bd-showcard { grid-template-columns: 1fr; gap: 2rem; min-height: 0; } } /* --- Workflow 타임라인 (5단계) --- */ .bd-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; counter-reset: bdflow; } .bd-flow::before { content: ""; position: absolute; top: 1.55rem; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--bd-hairline) 12%, var(--bd-hairline) 88%, transparent); z-index: 0; } .bd-flow__step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .85rem; } .bd-flow__dot { width: 3.1rem; height: 3.1rem; border-radius: 9999px; display: grid; place-items: center; font-family: var(--bd-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bd-accent); background: var(--card-bg); border: 1px solid var(--card-border); } .bd-flow__step--hilite .bd-flow__dot { color: #fff; background: var(--bd-grad-accent); border-color: transparent; box-shadow: 0 10px 28px -8px var(--bd-glow); } .bd-flow__step h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-main); margin: 0; } .bd-flow__step p { font-size: .875rem; line-height: 1.6; color: var(--text-sub); margin: 0; word-break: keep-all; } /* --- 핵심 가치 (열린 행 — 카드 탈피) --- */ .bd-values { display: grid; gap: 0; } .bd-value { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(2rem, 4vw, 2.75rem) 0; border-top: 1px solid var(--section-border); align-items: start; } .bd-value:first-child { border-top: 0; } .bd-value__num { font-family: var(--bd-display); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; background: var(--bd-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .bd-value__body { max-width: 64ch; } .bd-value__h { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -.025em; color: var(--text-main); margin: 0 0 .4rem; } .bd-value__h .hl { color: var(--bd-accent); } .bd-value__claim { font-size: 1rem; font-weight: 600; color: var(--text-main); opacity: .85; margin: 0 0 .75rem; } .bd-value__desc { font-size: .95rem; line-height: 1.7; color: var(--text-sub); margin: 0; word-break: keep-all; } .bd-value__source { display: block; margin-top: .8rem; font-size: .75rem; line-height: 1.55; color: var(--text-sub); opacity: .6; } /* --- KPI (열린 4분할) --- */ .bd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--section-border); border-radius: 1.25rem; overflow: hidden; background: var(--bd-surface-1); } .bd-kpi { padding: clamp(1.75rem, 3vw, 2.5rem); border-left: 1px solid var(--section-border); } .bd-kpi:first-child { border-left: 0; } .bd-kpi__head { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem; } .bd-kpi__label { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-main); } .bd-kpi__arrow { font-size: 1.5rem; line-height: 1; font-weight: 800; background: var(--bd-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bd-kpi p { font-size: .9rem; line-height: 1.65; color: var(--text-sub); margin: 0; word-break: keep-all; } /* --- 업종 사례 (3열 카드 — 정제) --- */ .bd-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .bd-case { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem; border-radius: 1.25rem; background: var(--card-bg); border: 1px solid var(--card-border); transition: border-color .25s ease, transform .25s ease; } .bd-case:hover { border-color: var(--card-hover-border); transform: translateY(-3px); } .bd-case--hilite { border-color: rgba(107, 155, 255, .3); } .bd-case__tag { align-self: flex-start; font-family: var(--bd-display); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 9999px; color: var(--bd-accent); background: var(--bd-surface-2); margin-bottom: 1.1rem; } .bd-case h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-main); margin: 0 0 .65rem; } .bd-case__pain { font-size: .9rem; line-height: 1.65; color: var(--text-sub); margin: 0 0 1.5rem; word-break: keep-all; } .bd-case__body h4 { font-family: var(--bd-display); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bd-accent); margin: 0 0 .75rem; } .bd-case__body ul { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.5rem; list-style: none; padding: 0; } .bd-case__body li { position: relative; padding-left: 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--text-sub); word-break: keep-all; } .bd-case__body li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .375rem; height: .375rem; border-radius: 50%; background: var(--bd-accent); } .bd-case__result { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--section-border); background: transparent; /* footer 태그 전역 배경 무효화 */ } .bd-case__result span { display: block; margin-bottom: .65rem; font-family: var(--bd-display); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-sub); opacity: .7; } .bd-case__result p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--text-main); word-break: keep-all; } .bd-case__result strong { color: var(--bd-accent); font-weight: 700; } /* --- 후기 --- */ .bd-testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .bd-testi__card { display: flex; flex-direction: column; padding: 2rem 1.75rem; border-radius: 1.25rem; background: var(--tc-bg); border: 1px solid var(--tc-border); box-shadow: 0 8px 30px var(--tc-shadow); } .bd-testi__stars { font-size: .8125rem; letter-spacing: .15em; color: var(--bd-accent); margin-bottom: 1.1rem; } .bd-testi__quote { font-size: .95rem; line-height: 1.7; color: var(--text-main); opacity: .9; margin: 0 0 1.75rem; word-break: keep-all; } .bd-testi__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; } .bd-testi__ava { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: grid; place-items: center; font-family: var(--bd-display); font-weight: 700; font-size: .9rem; color: var(--bd-accent); background: var(--bd-surface-2); flex-shrink: 0; } .bd-testi__who b { display: block; font-size: .9rem; font-weight: 700; color: var(--text-main); } .bd-testi__who span { font-size: .75rem; color: var(--text-sub); } /* --- CTA 박스 --- */ .bd-cta { position: relative; max-width: 880px; margin-inline: auto; text-align: center; padding: clamp(3rem, 6vw, 5rem) 1.5rem; border-radius: 1.75rem; background: radial-gradient(90% 130% at 50% 0%, rgba(59, 130, 246, .2), transparent 60%), var(--card-bg); border: 1px solid var(--card-border); overflow: hidden; } .bd-cta h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; color: var(--text-main); margin: 0 0 1rem; } .bd-cta .bd-eyebrow { margin-bottom: 1.1rem; } .bd-cta h2 .it { font-family: "Noto Serif KR", serif; font-style: italic; font-weight: 400; color: var(--text-sub); } .bd-cta p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-sub); margin: 0 0 2.25rem; } .bd-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; } /* --- Coming Soon 밴드 --- */ .bd-soon { position: relative; overflow: hidden; text-align: center; border-radius: 1.75rem; padding: clamp(3rem, 6vw, 5rem) 1.5rem; background: radial-gradient(55% 65% at 18% 28%, rgba(59, 130, 246, .35), transparent 60%), radial-gradient(45% 55% at 82% 72%, rgba(37, 99, 235, .28), transparent 60%), radial-gradient(65% 45% at 50% 100%, rgba(96, 165, 250, .12), transparent 70%), linear-gradient(135deg, #0c1a3a 0%, #0a1628 50%, #060e1f 100%); border: 1px solid var(--bd-hairline); } html.light .bd-soon { background: radial-gradient(55% 65% at 18% 28%, rgba(37, 99, 235, .16), transparent 60%), radial-gradient(45% 55% at 82% 72%, rgba(37, 99, 235, .1), transparent 60%), linear-gradient(135deg, #eaf1ff 0%, #f4f8fe 60%); } .bd-soon__badge { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem 1.1rem; border-radius: 9999px; background: var(--bd-surface-2); border: 1px solid var(--bd-hairline); margin-bottom: 1.75rem; backdrop-filter: blur(8px); } .bd-soon__badge .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--bd-accent); box-shadow: 0 0 10px var(--bd-accent); } .bd-soon__badge .lbl { font-family: var(--bd-display); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--bd-grad-eyebrow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bd-soon__badge .sep { width: 1px; height: .75rem; background: var(--bd-hairline); } .bd-soon__badge .when { font-size: .6875rem; color: var(--text-sub); } @media (prefers-reduced-motion: no-preference) { .bd-soon__badge .dot { animation: pulse 1.8s ease-in-out infinite; } } .bd-soon h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; color: var(--text-main); margin: 0 0 1.1rem; } .bd-soon h2 .hl { color: var(--bd-accent); } .bd-soon p { font-size: 1.0625rem; line-height: 1.7; color: var(--text-sub); margin: 0 auto; max-width: 46ch; word-break: keep-all; } .bd-soon__cta { margin-top: 2rem; display: flex; justify-content: center; } /* ============================================================ 11. FAQ 정제 ============================================================ */ body.home-v2 .faq-tab { border-radius: 9999px; background: var(--bd-surface-1); border-color: var(--bd-hairline); color: var(--text-sub); font-family: var(--bd-display); } body.home-v2 .faq-tab[aria-selected="true"] { background: var(--bd-grad-accent); border-color: transparent; color: #fff; } body.home-v2 .faq-question-text { font-family: var(--bd-body); } body.home-v2 .faq-item.open .faq-chevron, body.home-v2 .faq-item.open .faq-question-text { color: var(--bd-accent); } /* ============================================================ 12. 푸터 ============================================================ */ body.home-v2 footer#contact { background: var(--footer-bg); } /* ============================================================ 13. 반응형 ============================================================ */ @media (max-width: 1024px) { .bd-flow { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } .bd-flow::before { display: none; } .bd-cases { grid-template-columns: 1fr; } .bd-testi { grid-template-columns: 1fr; } .bd-kpis { grid-template-columns: repeat(2, 1fr); } .bd-kpi:nth-child(odd) { border-left: 0; } .bd-kpi:nth-child(n+3) { border-top: 1px solid var(--section-border); } } @media (max-width: 768px) { .bd-hero { min-height: auto; padding-top: 6.5rem; } .bd-hero__trust { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .bd-flow { grid-template-columns: 1fr; } .bd-value { grid-template-columns: 1fr; gap: .5rem; } .bd-value__num { font-size: 1.6rem; } } @media (max-width: 600px) { .bd-kpis { grid-template-columns: 1fr; } .bd-kpi { border-left: 0; border-top: 1px solid var(--section-border); } .bd-kpi:first-child { border-top: 0; } } /* ============================================================ 14. 유지 컴포넌트 호환 오버라이드 기존 마크업을 그대로 두고 정제 — theme-sub 그라데이션, accent 가독성, sc-tag 칩화, 쇼케이스 타이포 업그레이드. ============================================================ */ /* 헤딩 둘째 줄 강조 → 디스플레이 그라데이션 */ body.home-v2 .theme-sub { background: var(--bd-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 다크 캔버스 위 accent 텍스트/아이콘 가독성 (라이트는 var로 2563EB 유지) */ body.home-v2 .text-accent { color: var(--bd-accent); } /* 쇼케이스 칩 (sc-tag) → 정제 칩 */ body.home-v2 .sc-tag { border-radius: 9999px; background: var(--bd-surface-1); border-color: var(--bd-hairline); color: var(--text-sub); font-weight: 500; } body.home-v2 .sc-tag:hover { border-color: var(--card-hover-border); color: var(--text-main); background: var(--bd-surface-2); } /* 쇼케이스 텍스트 사이드 타이포 업그레이드 (마크업 무수정) */ body.home-v2 .sc-2col h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.025em; line-height: 1.25; } body.home-v2 .sc-2col .text-accent.uppercase, body.home-v2 .sc-2col span.uppercase.text-accent { font-family: var(--bd-display); letter-spacing: .12em; } /* 제품 프레임 — 시머 보더 + 깊이 정제 */ body.home-v2 .sc-frame { position: relative; box-shadow: 0 30px 70px -24px rgba(2, 4, 12, .7); } body.home-v2 .sc-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } html.light body.home-v2 .sc-frame { box-shadow: 0 30px 70px -28px rgba(20, 45, 100, .22); } /* Before/After 카드 정제 */ body.home-v2 .ba-after-card { background: linear-gradient(157deg, rgba(59, 130, 246, .14), rgba(37, 99, 235, .05)); border-color: rgba(107, 155, 255, .28); } body.home-v2 .ba-mid-arrow { color: var(--bd-accent); } /* 섹션 배경 — bg-surface/40 구간은 앰비언트가 비치도록 살짝 투명 유지, bg-deep 구간은 솔리드. 별도 글로우는 band/soon/cta가 담당. */