@charset "utf-8"; @import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.min.css'); /* ============================================================================ zbc-token.css v4.0 집반찬연구소 랜딩 디자인 토큰 v4.0 = v3.0 + OK PACK v1 (originkit.dev 효과 CSS 이식, 파일 하단) ⚠ 이 파일은 대표 승인 없이 수정하지 않습니다. ⚠ 화면을 만들 때는 2층(시맨틱) 토큰만 사용합니다. 기준 프레임 720px · 모든 vw 값은 720 기준으로 환산 ============================================================================ */ :root{ /* ── 1층 · 스케일 토큰 ── 브랜드가 바뀔 때만 수정 ──────────────────────── */ /* 그린 */ --zbc-green-900:#0d5611; /* 브랜드 기본 */ --zbc-green-600:#54810a; --zbc-green-500:#34c26f; /* 강조 보더 */ --zbc-green-400:#9da269; --zbc-green-200:#cadacb; /* 연한 라인 */ --zbc-green-100:#dbe6db; /* 연한 배경 */ --zbc-green-50:#f3f7f3; /* 가장 연한 배경 */ /* 무채색 */ --zbc-gray-0:#ffffff; --zbc-gray-50:#fafafa; --zbc-gray-100:#f5f5f5; --zbc-gray-200:#eeeeee; --zbc-gray-300:#b5b5b5; --zbc-gray-500:#757575; --zbc-gray-700:#444444; --zbc-gray-900:#171717; --zbc-gray-950:#111111; /* 웜(베이지) */ --zbc-warm-100:#faf7f2; --zbc-warm-200:#f4f0e7; --zbc-warm-300:#e1ddc9; /* 포인트 */ --zbc-red-600:#bd2420; --zbc-yellow-400:#ffd600; --zbc-amber-600:#db8c10; --zbc-amber-50:#fdf0db; /* 타이포 · 8단계 (720px 기준) */ --zbc-fs-1:clamp(9px, 2.500vw, 18px); /* 캡션·취소선 정가 */ --zbc-fs-2:clamp(10px,2.917vw, 21px); /* 뱃지 */ --zbc-fs-3:clamp(11px,3.472vw, 25px); /* 보조 설명 */ --zbc-fs-4:clamp(12px,3.889vw, 28px); /* 본문 */ --zbc-fs-5:clamp(14px,4.583vw, 33px); /* 금액·소제목 */ --zbc-fs-6:clamp(16px,5.556vw, 40px); /* 카드 제목·CTA */ --zbc-fs-7:clamp(19px,6.250vw, 45px); /* 섹션 헤더 */ --zbc-fs-8:clamp(28px,8.889vw, 64px); /* 히어로 */ /* 아이콘(타입 스케일과 분리) */ --zbc-icon-sm:clamp(14px,4.500vw, 32px); --zbc-icon-md:clamp(18px,6.000vw, 43px); --zbc-icon-lg:clamp(24px,7.851vw, 56px); /* 굵기 */ --zbc-fw-md:500; --zbc-fw-sb:600; --zbc-fw-b:700; /* 행간 */ --zbc-lh-flat:1; --zbc-lh-tight:1.2; --zbc-lh-quote:1.182; --zbc-lh-snug:1.3; --zbc-lh-base:1.36; --zbc-lh-loose:1.5; /* 자간 */ --zbc-ls-tight:-.03em; --zbc-ls-normal:-.02em; --zbc-ls-wide:.09em; --zbc-ls-x:-.05em; /* 모서리 */ --zbc-r-1:clamp(2px,.556vw, 4px); --zbc-r-2:clamp(4px,1.111vw, 8px); --zbc-r-3:clamp(8px,2.222vw,16px); --zbc-r-4:clamp(13px,3.750vw,27px); --zbc-r-5:clamp(20px,8.333vw,60px); --zbc-r-full:999px; /* 그림자 */ --zbc-sh-1:0 .2857em .3929em rgba(0,0,0,.13); --zbc-sh-2:0 8px 8px rgba(0,0,0,.25); /* 여백(720 기준 %) */ --zbc-sp-1:1.389%; /* 10px */ --zbc-sp-2:2.778%; /* 20px */ --zbc-sp-3:4.167%; /* 30px */ --zbc-sp-4:5.556%; /* 40px */ --zbc-sp-5:8.889%; /* 64px */ --zbc-sp-6:12.500%; /* 90px */ --zbc-sp-7:16.667%; /* 120px */ /* 레이어 */ --zbc-z-base:1; --zbc-z-sticky:100; --zbc-z-overlay:200; /* 모션 */ --zbc-dur-1:150ms; /* 탭 피드백 */ --zbc-dur-2:300ms; /* 일반 전환 */ --zbc-dur-3:600ms; /* 등장 */ --zbc-dur-4:900ms; /* 히어로 */ --zbc-ease-out:cubic-bezier(.16,1,.3,1); --zbc-ease-inout:cubic-bezier(.65,0,.35,1); --zbc-ease-spring:cubic-bezier(.34,1.56,.64,1); /* ── 2층 · 시맨틱 토큰 ── 화면을 만들 땐 이것만 사용 ─────────────────── */ /* 표면 */ --zbc-bg:var(--zbc-gray-0); --zbc-bg-warm:var(--zbc-warm-200); --zbc-bg-soft:var(--zbc-gray-50); --zbc-bg-brand:var(--zbc-green-900); --zbc-surface:var(--zbc-gray-0); --zbc-surface-veil:rgba(250,250,250,.8); --zbc-surface-tint:var(--zbc-green-50); /* 텍스트 */ --zbc-text:var(--zbc-gray-950); --zbc-text-sub:var(--zbc-gray-700); --zbc-text-mute:var(--zbc-gray-500); --zbc-text-on-brand:var(--zbc-gray-0); --zbc-brand:var(--zbc-green-900); /* 선 */ --zbc-line:var(--zbc-gray-300); --zbc-line-soft:var(--zbc-gray-200); --zbc-line-brand:var(--zbc-green-200); --zbc-line-accent:var(--zbc-green-500); /* ── CRO 전용 ── */ /* CTA 1순위(주 전환) / 2순위(반전) */ --zbc-cta-bg:var(--zbc-green-900); --zbc-cta-fg:var(--zbc-gray-0); --zbc-cta-alt-bg:var(--zbc-gray-0); --zbc-cta-alt-fg:var(--zbc-green-900); --zbc-cta-radius:var(--zbc-r-2); --zbc-cta-shadow:var(--zbc-sh-2); --zbc-tap-min:48px; /* 최소 터치 영역 */ /* 긴급·희소성 */ --zbc-urgent:var(--zbc-red-600); --zbc-urgent-fg:var(--zbc-gray-0); --zbc-highlight:var(--zbc-yellow-400); --zbc-marker:rgba(112,217,156,.7); /* 형광펜 */ /* 가격 */ --zbc-price-was:var(--zbc-gray-500); --zbc-price-now:var(--zbc-gray-950); --zbc-price-off:var(--zbc-red-600); --zbc-price-save:var(--zbc-green-900); /* 신뢰 신호 */ --zbc-trust-bg:var(--zbc-green-100); --zbc-trust-fg:var(--zbc-green-900); --zbc-info-bg:var(--zbc-amber-50); --zbc-info-fg:var(--zbc-amber-600); --zbc-star:var(--zbc-green-900); /* 접근성 */ --zbc-focus-ring:0 0 0 3px rgba(13,86,17,.35); } /* ── 기본 래퍼 ─────────────────────────────────────────────────────── */ .zbc{ max-width:720px; margin:0 auto; text-align:left; box-sizing:border-box; font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif; color:var(--zbc-text); } .zbc *{box-sizing:border-box;} .zbc a{text-decoration:none;} .zbc a:focus-visible{outline:none; box-shadow:var(--zbc-focus-ring);} /* ══════════════════════════════════════════════════════════════════════ 모션 라이브러리 v3 · 집반찬연구소 랜딩 공용 JS 없이 CSS 스크롤 타임라인으로 동작. 미지원 브라우저/모션 최소화 설정 에서는 전부 무시되고 콘텐츠가 즉시 정상 표시된다. 설계 근거 (landing-page-cro/references/motion.md) · 주의를 끄는 건 "움직임의 시작·새 요소의 등장"이지 지속적 움직임이 아니다 (Abrams & Christ 2003, A급). 무한 반복은 이점 없이 비용만 남는다. · 다가옴/확대(looming)가 축소보다 강하게 주의를 끈다 (Franconeri & Simons 2003, A급) → 등장은 항상 작게→크게. · 무관한 장식 모션은 이해·기억을 해친다 (Rey 2012 메타분석, S급) → 연출은 핵심 메시지가 등장하는 순간에만. 한 화면에 2~3개까지. · 과제 몰입 구간(상품 고르기·결제·폼)에는 연출 금지 (Hamborg 2012, A급) → 상품 카드·CTA에는 zbc-still. · 자동 시작 + 5초 초과 모션은 정지 수단 필요 (WCAG 2.2.2 Level A) → 이 라이브러리의 반복 효과는 전부 스크롤 연동(사용자가 속도를 제어) 또는 횟수 제한. 무한 반복은 zbc-float 하나뿐이고 사용 주의 표시. 사용법
기본 등장
시차 (d1~d6, 숫자가 클수록 늦게)
화면보다 큰 이미지 연출 제외 ══════════════════════════════════════════════════════════════════════ */ /* ── A. 등장 (스크롤 진입 시 1회) ─────────────────────────────────── */ @keyframes zbc-in {from{opacity:0} to{opacity:1}} @keyframes zbc-up {from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}} @keyframes zbc-down {from{opacity:0; transform:translateY(-16px)} to{opacity:1; transform:none}} @keyframes zbc-right{from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none}} @keyframes zbc-left {from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}} @keyframes zbc-zoom {from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}} @keyframes zbc-pop {from{opacity:0; transform:scale(.88)} to{opacity:1; transform:none}} @keyframes zbc-blur {from{opacity:0; filter:blur(8px)} to{opacity:1; filter:blur(0)}} @keyframes zbc-wipe {from{opacity:.001; clip-path:inset(30% 0 0 0)} to{opacity:1; clip-path:inset(0 0 0 0)}} @keyframes zbc-flip {from{opacity:0; transform:perspective(800px) rotateX(-24deg)} to{opacity:1; transform:none}} @keyframes zbc-tilt {from{opacity:0; transform:rotate(-3deg) translateY(14px)} to{opacity:1; transform:none}} /* ── B. 강조·리빌 ─────────────────────────────────────────────────── */ @keyframes zbc-draw {from{background-size:0% 100%} to{background-size:100% 100%}} @keyframes zbc-underline {from{background-size:0% .09em} to{background-size:100% .09em}} @keyframes zbc-line {from{transform:scaleX(0)} to{transform:scaleX(1)}} @keyframes zbc-type {from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}} @keyframes zbc-reverse {0%{background-size:0% 100%} 59%{color:inherit} 60%{color:var(--zbc-text-on-brand)} 100%{background-size:100% 100%; color:var(--zbc-text-on-brand)}} @keyframes zbc-count {from{--zbc-n:0} to{--zbc-n:var(--zbc-to,100)}} /* ── C. 스크롤 연동 지속 (스크롤하는 내내 반응) ───────────────────── */ @keyframes zbc-ken {from{transform:scale(1)} to{transform:scale(1.12)}} /* 이동 전에 살짝 키워야 가장자리에 빈 공간이 생기지 않는다 (object-fit:cover 대응) */ @keyframes zbc-panx {from{transform:scale(1.1) translateX(-3%)} to{transform:scale(1.1) translateX(3%)}} @keyframes zbc-pany {from{transform:scale(1.1) translateY(-3%)} to{transform:scale(1.1) translateY(3%)}} @keyframes zbc-out {from{opacity:1} to{opacity:0}} @keyframes zbc-nudge{0%,38%{transform:translateX(0)} 62%{transform:translateX(-4.5%)} 82%{transform:translateX(1%)} 100%{transform:translateX(0)}} /* ── D. 반복 (전부 스크롤 연동 = 사용자가 속도 제어) ──────────────── */ @keyframes zbc-pulse{0%,100%{transform:scale(1)} 17%,50%,83%{transform:scale(1)} 8%,42%,75%{transform:scale(1.045)}} @keyframes zbc-blink{0%,20%,40%,60%,80%,100%{opacity:1} 10%,30%,50%{opacity:.3}} @keyframes zbc-shine{from{background-position:-140% 0} to{background-position:240% 0}} @keyframes zbc-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}} /* 숫자 카운트업 — 지원 브라우저에서만. 미지원 시 ::after 가 비어 그대로 표시 */ @property --zbc-n{syntax:""; initial-value:0; inherits:false;} @counter-style zbc-pad3{system:numeric; symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; pad:3 "0";} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ /* A. 등장 11종 — 기본값은 zbc-up */ .zbc-in,.zbc-up,.zbc-down,.zbc-right,.zbc-left, .zbc-zoom,.zbc-pop,.zbc-blur,.zbc-wipe,.zbc-flip,.zbc-tilt{ animation:zbc-up var(--zbc-dur-3) var(--zbc-ease-out) both; animation-timeline:view(); animation-range:cover 22% cover 62%; /* 화면 78% 지점에서 시작 → 50% 에서 완료 */ } .zbc-in {animation-name:zbc-in;} .zbc-down {animation-name:zbc-down;} .zbc-right{animation-name:zbc-right;} .zbc-left {animation-name:zbc-left;} .zbc-zoom {animation-name:zbc-zoom;} .zbc-blur {animation-name:zbc-blur;} .zbc-wipe {animation-name:zbc-wipe;} .zbc-flip {animation-name:zbc-flip;} .zbc-tilt {animation-name:zbc-tilt;} .zbc-pop {animation-name:zbc-pop; animation-timing-function:var(--zbc-ease-spring);} /* B. 강조·리빌 */ .zbc-mark{background-size:0% 100%;animation:zbc-draw linear both; animation-timeline:view();animation-range:cover 15% cover 55%;} .zbc-mark--2{animation-range:cover 20% cover 60%;} .zbc-underline{animation:zbc-underline linear both; animation-timeline:view();animation-range:cover 18% cover 58%;} .zbc-line{animation:zbc-line var(--zbc-dur-3) var(--zbc-ease-out) both; animation-timeline:view();animation-range:cover 15% cover 60%;} /* 타이핑 — --zbc-ch 에 글자 수를 넣으면 그만큼 끊어서 찍힌다 */ .zbc-type{animation:zbc-type steps(var(--zbc-ch,24)) both; animation-timeline:view();animation-range:cover 18% cover 55%;} .zbc-reverse{background-size:0% 100%;animation:zbc-reverse linear both; animation-timeline:view();animation-range:cover 18% cover 52%;} /* 숫자 카운트업 — style="--zbc-to:374" 로 목표값 지정 */ .zbc-count{animation:zbc-count linear both; animation-timeline:view();animation-range:cover 15% cover 60%;} /* C. 스크롤 연동 지속 */ .zbc-ken {animation:zbc-ken linear both;animation-timeline:view();animation-range:cover 0% cover 100%;} .zbc-panx{animation:zbc-panx linear both;animation-timeline:view();animation-range:cover 0% cover 100%;} .zbc-pany{animation:zbc-pany linear both;animation-timeline:view();animation-range:cover 0% cover 100%;} /* 들어올 때 페이드인, 나갈 때 페이드아웃 */ /* 두 번째 애니메이션에 both 를 주면 backwards fill 이 entry 구간을 덮어써 페이드인이 무효화된다. 반드시 forwards 로 둔다. */ .zbc-inout{animation:zbc-in linear both, zbc-out linear forwards; animation-timeline:view(),view(); animation-range:entry 5% entry 85%, exit 15% exit 95%;} .zbc-nudge{animation:zbc-nudge linear both;animation-timeline:--zbc-cw; animation-range:entry 0% cover 42%;} /* D. 반복 — 스크롤을 따라 3회 */ .zbc-pulse{animation:zbc-pulse linear both;animation-timeline:view();animation-range:cover 20% cover 85%;} .zbc-blink{animation:zbc-blink linear both;animation-timeline:view();animation-range:cover 20% cover 85%;} /* ::after 오버레이 방식 — 대상이 background 단축을 쓰고 있어도 안전하다 */ .zbc-shine::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background-image:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); background-size:250% 100%;background-repeat:no-repeat; animation:zbc-shine linear both;animation-timeline:view();animation-range:cover 25% cover 75%;} /* 시차 — 순차 등장. 사진 여러 장을 차례로 띄울 때도 이걸 쓴다 */ /* 속도 — fast 는 화면보다 큰 이미지 전용. 큰 요소는 cover 구간이 길어져 기본값이면 화면 중앙에서도 반투명하게 남는다 */ .zbc-fast{animation-range:cover 5% cover 38%;} .zbc-slow{animation-duration:var(--zbc-dur-4);} /* ⚠ 무한 반복 — 유일하게 시간 기반이다. 주변시야 모션은 읽기를 방해하고 반복 노출 시 짜증으로 바뀐다(NN/g). 스크롤 유도 화살표처럼 화면당 하나까지만, 결제·폼 구간에는 절대 쓰지 않는다. */ .zbc-float{animation:zbc-float 2.6s var(--zbc-ease-inout) infinite;} /* 연출 제외 — CTA·상품 카드·폼처럼 고르고 누르는 구간 */ .zbc-still{animation:none !important;opacity:1 !important;transform:none !important; filter:none !important;clip-path:none !important;background-size:auto !important;} } } /* 숫자 카운트업 출력부 — @supports 밖에 두어야 미지원 시에도 값이 보인다 */ .zbc-count{counter-reset:zbcn var(--zbc-n);} .zbc-count::after{content:counter(zbcn);} .zbc-count--pad3::after{content:counter(zbcn,zbc-pad3);} /* 밑줄·구분선 기본 형태 (애니메이션 없이도 모양이 유지되도록) */ .zbc-underline{background-image:linear-gradient(var(--zbc-brand),var(--zbc-brand)); background-repeat:no-repeat;background-position:0 100%;background-size:100% .09em; padding-bottom:.08em;} .zbc-line{display:block;height:1px;background:var(--zbc-line);transform-origin:left center;} .zbc-type{display:inline-block;} .zbc-shine{position:relative;overflow:hidden;} .zbc-reverse{display:inline;background-image:linear-gradient(var(--zbc-brand),var(--zbc-brand)); background-repeat:no-repeat;background-size:100% 100%;color:var(--zbc-text-on-brand); padding:0 .12em;margin-left:-.12em;} /* CTA 주목 효과 — 무한반복 대신 진입 시 1회만 */ @media (prefers-reduced-motion: no-preference){ .zbc-cta{transition:transform var(--zbc-dur-1) var(--zbc-ease-out), box-shadow var(--zbc-dur-1) var(--zbc-ease-out);} .zbc-cta:active{transform:scale(.985);} } /* ── F. 반복 강조 (시간 기반) ──────────────────────────────────────── v1.9 변경 · 속도를 사용자 검수값으로 확정 (깜빡임 1.7s / 카운트업 상승 3s / 별점 4s / 타이핑 4s / 형광펜 4s / 사진 8s / 강조·그림자 1.6s / 광택 3.2s) · 숫자 카운트업을 iOS 대응 오도미터(숫자 띠를 transform 으로 굴리는 방식)로 교체. 기존 counter() 방식은 WebKit(아이폰 크롬 포함)에서 숫자가 다시 그려지지 않는다. · 형광펜은 "1줄 → 2줄 순서로 그어지고 마지막에 둘이 동시에 사라지는" 구조로 변경. · 카운트업 상승과 깜빡임을 분리해 상승은 3초, 깜빡임은 1초씩 여유 있게. ------------------------------------------------------------------ */ /* 깜빡임 — 완전히 꺼졌다 켜진다 */ @keyframes zbc-flash{0%{opacity:1} 76%{opacity:0} 100%{opacity:1}} @keyframes zbc-throb{0%,100%{transform:scale(1)} 50%{transform:scale(1.07)}} @keyframes zbc-glow{0%,100%{box-shadow:var(--zbc-sh-2)} 50%{box-shadow:0 8px 8px rgba(0,0,0,.25), 0 0 0 7px rgba(13,86,17,.18)}} @keyframes zbc-shineloop{0%{background-position:-160% 0} 55%,100%{background-position:260% 0}} /* 숫자 오도미터 — 0~9 를 두 바퀴 굴려 목표 숫자에 멈춘다. transform 만 쓰므로 아이폰 사파리/크롬에서도 확실히 동작한다. 앞 50%(3초) 동안 굴러 올라가고, 나머지 구간에서 3번 깜빡인다. */ /* 이동량을 띠 자체 높이의 % 로 준다. 숫자 20칸이므로 한 칸 = 5%. em 으로 주면 줄상자가 정수 픽셀로 반올림되면서 10칸 누적 시 몇 px 씩 어긋나 숫자가 칸에 정확히 안 멈춘다. % 는 실제 렌더 높이 기준이라 오차가 없다. */ @keyframes zbc-od{ 0% {transform:translateY(0)} 50% {transform:translateY(calc((10 + var(--zbc-d,0)) * -5%))} 100%{transform:translateY(calc((10 + var(--zbc-d,0)) * -5%))} } @keyframes zbc-odblink{ 0%,58%{opacity:1} 65%{opacity:0} 72%{opacity:1} 79%{opacity:0} 86%{opacity:1} 93%{opacity:0} 100%{opacity:1} } /* 별점 — 한 칸씩 5칸까지 */ @keyframes zbc-stars{ 0% {width:0; animation-timing-function:steps(5,end)} 45% {width:100%} 100%{width:100%} } /* 타이핑 — 한 글자씩 */ @keyframes zbc-type1{ 0% {clip-path:inset(0 100% 0 0); animation-timing-function:steps(var(--zbc-ch,14),end)} 50% {clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 0)} } @keyframes zbc-type2{ 0%,45%{clip-path:inset(0 100% 0 0); animation-timing-function:steps(var(--zbc-ch,16),end)} 85% {clip-path:inset(0 0 0 0)} 100% {clip-path:inset(0 0 0 0)} } /* 형광펜 1줄 — 먼저 그어지고, 마지막에 한 번에 사라진다 */ @keyframes zbc-markloop{ 0% {background-size:0% 100%} 26% {background-size:100% 100%} 88% {background-size:100% 100%; animation-timing-function:step-end} 89% {background-size:0% 100%} 100%{background-size:0% 100%} } /* 형광펜 2줄 — 1줄이 끝난 뒤 그어지고, 1줄과 동시에 사라진다 */ @keyframes zbc-markloop2{ 0%,26%{background-size:0% 100%} 52% {background-size:100% 100%} 88% {background-size:100% 100%; animation-timing-function:step-end} 89% {background-size:0% 100%} 100% {background-size:0% 100%} } /* 사진 */ @keyframes zbc-kenloop {0%,100%{transform:scale(1.02)} 50%{transform:scale(1.13)}} @keyframes zbc-panloop {0%,100%{transform:scale(1.12) translateX(-2.6%)} 50%{transform:scale(1.12) translateX(2.6%)}} @keyframes zbc-panyloop{0%,100%{transform:scale(1.12) translateY(-2.6%)} 50%{transform:scale(1.12) translateY(2.6%)}} @keyframes zbc-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}} @media (prefers-reduced-motion: no-preference){ .zbc-flash {animation:zbc-flash 2s step-end infinite;} .zbc-throb {animation:zbc-throb .8s ease-in-out infinite;} .zbc-glow {animation:zbc-glow 2s ease-in-out infinite;} .zbc-od__s {animation:zbc-od 4s cubic-bezier(.12,.9,.2,1) infinite;} .zbc-od {animation:zbc-odblink 4s step-end infinite;} .zbc-stars__fg{animation:zbc-stars 2s linear infinite;} .zbc-type1 {animation:zbc-type1 3s linear infinite;} .zbc-type2 {animation:zbc-type2 3s linear infinite;} .zbc-markloop {animation:zbc-markloop 3s ease-in-out infinite !important; animation-timeline:auto !important;} .zbc-markloop--2{animation-name:zbc-markloop2 !important; animation-delay:0s !important;} .zbc-kenloop {animation:zbc-kenloop 5s ease-in-out infinite !important; animation-timeline:auto !important;} .zbc-panloop {animation:zbc-panloop 5s ease-in-out infinite !important; animation-timeline:auto !important;} .zbc-panyloop {animation:zbc-panyloop 5s ease-in-out infinite !important; animation-timeline:auto !important;} .zbc-bob {animation:zbc-bob 2.2s ease-in-out infinite;} .zbc-shineloop::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%); background-size:260% 100%;background-repeat:no-repeat; animation:zbc-shineloop 2s linear infinite;} .zbc-flash.zbc-glow{animation:zbc-flash 2s step-end infinite, zbc-glow 2s ease-in-out infinite;} /* 순차 등장 — 섹션 중간쯤 왔을 때 하나씩 (뱃지용) */ .zbc-s1{animation-range:cover 26% cover 52%;} .zbc-s2{animation-range:cover 33% cover 59%;} .zbc-s3{animation-range:cover 40% cover 66%;} .zbc-s4{animation-range:cover 47% cover 73%;} .zbc-s5{animation-range:cover 54% cover 80%;} .zbc-s6{animation-range:cover 61% cover 87%;} .zbc-ph1,.zbc-ph2,.zbc-ph3{animation-delay:0s;} } /* ── 구조 규칙 ── */ .zbc-stars{position:relative;display:inline-block;white-space:nowrap;} .zbc-stars__bg{color:var(--zbc-line-soft);} .zbc-stars__fg{position:absolute;left:0;top:0;width:100%;overflow:hidden; color:var(--zbc-star);white-space:nowrap;} .zbc-type1,.zbc-type2{display:inline-block;} .zbc-mark--red{--zbc-marker:rgba(238,118,118,.58);} .zbc-shineloop{position:relative;overflow:hidden;} /* 오도미터 — 숫자 한 자리 */ /* 창 높이를 주변 텍스트의 줄 높이(1lh)와 똑같이 맞추고 줄상자 바닥에 붙여야 콤마·"명"·"건" 과 기준선이 정확히 일치한다. lh 미지원 시 1.3em 폴백. */ .zbc-od{display:inline-block;height:1.3em;line-height:inherit;overflow:hidden;vertical-align:bottom;} @supports (height:1lh){.zbc-od{height:1lh;}} .zbc-od__s{display:block;line-height:inherit;} /* 카운트업 출력부 (반복 버전) */ .zbc-tally{counter-reset:zbcn var(--zbc-n);} .zbc-tally::after{content:counter(zbcn);} .zbc-tally.zbc-count--pad3::after{content:counter(zbcn,zbc-pad3);} /* ══════════════════════════════════════════════════════════════════════ 유틸리티 — 값을 미리 다 만들어 뒀다. CSS 를 고치지 말고 클래스만 바꿔 쓴다. ══════════════════════════════════════════════════════════════════════ */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ /* ── 등장 시점 · zbc-at5 ~ zbc-at100 (5% 단위) ────────────────────── 숫자 = 요소가 화면 위에서 몇 % 지점에 왔을 때 나타나기 시작하는가. at100 = 화면 맨 아래(들어오자마자) / at50 = 화면 중앙 / at20 = 거의 위쪽 기본값(클래스 없음) = at78 수준. 값이 클수록 일찍 나타난다. */ .zbc-at5{animation-range:cover 95% cover 100%;} .zbc-at10{animation-range:cover 90% cover 100%;} .zbc-at15{animation-range:cover 85% cover 100%;} .zbc-at20{animation-range:cover 80% cover 100%;} .zbc-at25{animation-range:cover 75% cover 100%;} .zbc-at30{animation-range:cover 70% cover 100%;} .zbc-at35{animation-range:cover 65% cover 100%;} .zbc-at40{animation-range:cover 60% cover 100%;} .zbc-at45{animation-range:cover 55% cover 95%;} .zbc-at50{animation-range:cover 50% cover 90%;} .zbc-at55{animation-range:cover 45% cover 85%;} .zbc-at60{animation-range:cover 40% cover 80%;} .zbc-at65{animation-range:cover 35% cover 75%;} .zbc-at70{animation-range:cover 30% cover 70%;} .zbc-at75{animation-range:cover 25% cover 65%;} .zbc-at80{animation-range:cover 20% cover 60%;} .zbc-at85{animation-range:cover 15% cover 55%;} .zbc-at90{animation-range:cover 10% cover 50%;} .zbc-at95{animation-range:cover 5% cover 45%;} .zbc-at100{animation-range:cover 0% cover 40%;} /* ── 등장 속도 · zbc-sp02 ~ zbc-sp30 (초) ────────────────────────── sp02=0.2초(딱딱) / sp06=0.6초(기본) / sp15=1.5초(느긋) */ .zbc-sp02{animation-duration:0.2s;} .zbc-sp03{animation-duration:0.3s;} .zbc-sp04{animation-duration:0.4s;} .zbc-sp05{animation-duration:0.5s;} .zbc-sp06{animation-duration:0.6s;} .zbc-sp08{animation-duration:0.8s;} .zbc-sp01{animation-duration:1s;} .zbc-sp12{animation-duration:1.2s;} .zbc-sp15{animation-duration:1.5s;} .zbc-sp02{animation-duration:2s;} .zbc-sp25{animation-duration:2.5s;} .zbc-sp03{animation-duration:3s;} /* ── 반복 주기 · zbc-lp10 ~ zbc-lp100 (초) ───────────────────────── 깜빡임·카운트업·별점·타이핑·형광펜·사진 등 반복 효과의 한 사이클 길이. lp10=1초(빠름) / lp20=2초 / lp50=5초 / lp100=10초(느림) */ .zbc-lp10{animation-duration:1s;} .zbc-lp15{animation-duration:1.5s;} .zbc-lp20{animation-duration:2s;} .zbc-lp25{animation-duration:2.5s;} .zbc-lp30{animation-duration:3s;} .zbc-lp35{animation-duration:3.5s;} .zbc-lp40{animation-duration:4s;} .zbc-lp45{animation-duration:4.5s;} .zbc-lp50{animation-duration:5s;} .zbc-lp55{animation-duration:5.5s;} .zbc-lp60{animation-duration:6s;} .zbc-lp65{animation-duration:6.5s;} .zbc-lp70{animation-duration:7s;} .zbc-lp75{animation-duration:7.5s;} .zbc-lp80{animation-duration:8s;} .zbc-lp85{animation-duration:8.5s;} .zbc-lp90{animation-duration:9s;} .zbc-lp95{animation-duration:9.5s;} .zbc-lp100{animation-duration:10s;} /* ── 순차 시차 · zbc-d1 ~ zbc-d12 ────────────────────────────────── 같은 그룹을 하나씩 등장시킬 때. 숫자가 클수록 늦게. 3% 간격. */ .zbc-d1{animation-range:cover 25% cover 65%;} .zbc-d2{animation-range:cover 28% cover 68%;} .zbc-d3{animation-range:cover 31% cover 71%;} .zbc-d4{animation-range:cover 34% cover 74%;} .zbc-d5{animation-range:cover 37% cover 77%;} .zbc-d6{animation-range:cover 40% cover 80%;} .zbc-d7{animation-range:cover 43% cover 83%;} .zbc-d8{animation-range:cover 46% cover 86%;} .zbc-d9{animation-range:cover 49% cover 89%;} .zbc-d10{animation-range:cover 52% cover 92%;} .zbc-d11{animation-range:cover 55% cover 95%;} .zbc-d12{animation-range:cover 58% cover 98%;} /* ── 넓은 시차 · zbc-s1 ~ zbc-s6 (뱃지처럼 느긋하게) ────────────── */ .zbc-s1{animation-range:cover 26% cover 52%;} .zbc-s2{animation-range:cover 33% cover 59%;} .zbc-s3{animation-range:cover 40% cover 66%;} .zbc-s4{animation-range:cover 47% cover 73%;} .zbc-s5{animation-range:cover 54% cover 80%;} .zbc-s6{animation-range:cover 61% cover 87%;} } } /* 반복 효과(시간 기반)에도 주기 유틸이 먹도록 — @supports 밖에도 선언 */ @media (prefers-reduced-motion: no-preference){ .zbc-lp10{animation-duration:1s;} .zbc-lp15{animation-duration:1.5s;} .zbc-lp20{animation-duration:2s;} .zbc-lp25{animation-duration:2.5s;} .zbc-lp30{animation-duration:3s;} .zbc-lp35{animation-duration:3.5s;} .zbc-lp40{animation-duration:4s;} .zbc-lp45{animation-duration:4.5s;} .zbc-lp50{animation-duration:5s;} .zbc-lp55{animation-duration:5.5s;} .zbc-lp60{animation-duration:6s;} .zbc-lp65{animation-duration:6.5s;} .zbc-lp70{animation-duration:7s;} .zbc-lp75{animation-duration:7.5s;} .zbc-lp80{animation-duration:8s;} .zbc-lp85{animation-duration:8.5s;} .zbc-lp90{animation-duration:9s;} .zbc-lp95{animation-duration:9.5s;} .zbc-lp100{animation-duration:10s;} .zbc-lp10 .zbc-od__s,.zbc-lp20 .zbc-od__s{animation-duration:inherit;} } /* ══════════════════════════════════════════════════════════════════════ OK PACK v1 · originkit.dev 효과를 순수 CSS 로 이식한 확장 팩 ---------------------------------------------------------------------- 왜 이식인가 : originkit 컴포넌트는 전부 React + WebGL/canvas 라서 고도몰 게시판(