/* ========================================================================== 2026 노인일자리 주간 — 키비주얼(KV) 레이어 ※ 전 페이지 공통 로드 -------------------------------------------------------------------------- 공식 포스터(00포스터_2026 노인일자리 주간_실행.ai)에서 벡터 요소를 그대로 추출해 화면 장식으로 재구성했습니다. 원본 패스를 쓰므로 확대해도 깨지지 않습니다. title.svg 제호(슬로건) — 일하는 즐거움 / 당당한 어르신 / 활기찬 대한민국 subtitle.svg 행사명 — 2026 노인일자리 주간 land-wide.svg 하단 풍경 — 포스터 원본(가운데) + 좌우로 이어 그린 언덕 wave.svg 언덕 띠 — 서브 페이지용 (가로 늘림 허용) pattern.svg 꽃 패턴 타일 260×260 (주황·파랑 8엽화) — 정지 텍스처 ※ 예전에는 96초에 걸쳐 흘렸으나(kvDrift) background-position 은 합성 대상이 아니라 .end/.sv 전 영역을 매 프레임 리페인트했습니다. 이동량이 초당 3.5px(프레임당 0.06px)로 눈에 보이지도 않아 애니메이션을 걷어냈습니다. cloud-a/b.svg 구름 flower-o/b/p.svg 낱꽃 mascot.webp 공식 캐릭터 UI 색(파랑 계열)은 기존 그대로 두고, 장식 레이어만 포스터 팔레트를 씁니다. ========================================================================== */ :root{ --kv-sky-t:#F5FBF8; /* 하늘 그라데이션 위 */ --kv-sky-b:#DEEFEB; /* 하늘 그라데이션 아래 = 포스터 배경색 */ --kv-ink:#2C5974; /* 제호 남색 */ --kv-orange:#F18E42; /* 포인트 주황 */ --kv-green:#4EA136; /* 행사명 초록 */ --kv-green-d:#3D8A28; --kv-leaf:#C3D391; /* 뒷 언덕 */ --kv-grass:#A5C456; /* 앞 언덕 */ --kv-title:url("../img/kv/title.svg"); --kv-name:url("../img/kv/subtitle.svg"); --kv-land:url("../img/kv/land-wide.svg"); --kv-wave:url("../img/kv/wave.svg"); --kv-ptn:url("../img/kv/pattern.svg"); --kv-cloud-a:url("../img/kv/cloud-a.svg"); --kv-cloud-b:url("../img/kv/cloud-b.svg"); --kv-fl-o:url("../img/kv/flower-o.svg"); --kv-fl-b:url("../img/kv/flower-b.svg"); --kv-fl-p:url("../img/kv/flower-p.svg"); --kv-people:url("../img/kv/people.svg"); --kv-bee:url("../img/kv/mascot.webp"); } /* ── 공통 모션 ──────────────────────────────────────────────────────────── 전부 transform/opacity 만 사용합니다 (리플로우 없음). */ @keyframes kvBob {0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-13px) rotate(-3deg)}} @keyframes kvFloat {0%,100%{transform:translateY(0) rotate(0) scale(1)} 50%{transform:translateY(-16px) rotate(18deg) scale(1.07)}} @keyframes kvCloud {from{transform:translateX(0)} to{transform:translateX(calc(100vw + 340px))}} @keyframes kvRise {from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}} @keyframes kvPop {from{opacity:0;transform:translateY(14px) scale(.94)} to{opacity:1;transform:none}} /* ── 캐릭터(꿀벌) ─────────────────────────────────────────────────────── */ .bee{position:absolute;z-index:4;pointer-events:none;-webkit-user-select:none;user-select:none;height:auto; filter:drop-shadow(0 16px 20px rgba(44,89,116,.18)); animation:kvBob 4.6s ease-in-out infinite;will-change:transform} /* ── 흩날리는 꽃 (히어로·서브비주얼 공통) ─────────────────────────────── */ .kvfl{position:absolute;background-repeat:no-repeat;background-size:contain; background-image:var(--kv-fl-o);pointer-events:none; animation:kvFloat 9s ease-in-out infinite;will-change:transform} .kvfl.b{background-image:var(--kv-fl-b)} .kvfl.p{background-image:var(--kv-fl-p)} /* ── 흐르는 구름 ─────────────────────────────────────────────────────── */ .kvcl{position:absolute;left:-340px;background-repeat:no-repeat;background-size:contain; background-image:var(--kv-cloud-a);pointer-events:none; animation:kvCloud 84s linear infinite;will-change:transform} .kvcl.b{background-image:var(--kv-cloud-b)} /* ========================================================================== 서브 페이지 상단 비주얼 (.sv) — 전 서브 페이지 18개에 공통 적용 ========================================================================== */ .sv{position:relative;overflow:hidden;border-bottom:0;color:var(--kv-ink); background:linear-gradient(180deg,var(--kv-sky-t) 0%,var(--kv-sky-b) 100%); padding:84px 0 clamp(96px,11vw,132px)} /* 꽃 패턴 — 글이 놓이는 왼쪽은 마스크로 비우고 오른쪽 여백만 채웁니다 */ .sv__ptn{position:absolute;inset:-40px -40px 0;background:var(--kv-ptn) 0 0/340px 340px repeat; opacity:.5; -webkit-mask-image:linear-gradient(102deg,transparent 20%,rgba(0,0,0,.45) 48%,#000 80%); mask-image:linear-gradient(102deg,transparent 20%,rgba(0,0,0,.45) 48%,#000 80%)} .sv__wave{position:absolute;left:0;right:0;bottom:-1px;height:clamp(58px,7.5vw,104px); background:var(--kv-wave) center bottom/100% 100% no-repeat} .sv .inner{position:relative;z-index:3} .sv .eyeb{color:var(--kv-green-d)} .sv .eyeb::before{background:var(--kv-green-d)} .sv h1{color:var(--kv-ink)} .sv p{color:#5A7280} /* 캐릭터 — 언덕 위에 살짝 올라선 모습 */ .sv__bee{right:clamp(14px,6vw,84px);bottom:clamp(24px,3.4vw,44px); width:clamp(76px,9.5vw,132px);animation-duration:5.2s} /* 메뉴별 코비 — 달력·지도·선물상자 같은 소품이 함께 있어 그림 폭이 넓습니다. 캐릭터 몸집이 기본 마스코트와 비슷해 보이도록 폭을 더 줍니다. (아홉 장 모두 같은 캔버스·같은 배율이라 페이지마다 크기가 달라지지 않습니다) */ .sv__bee--kobi{right:clamp(8px,4.4vw,72px);bottom:clamp(10px,1.5vw,22px); width:clamp(140px,19vw,255px)} /* 낱꽃 — 본문을 피해 오른쪽 여백에만 놓습니다 */ .sv .kvfl{width:clamp(20px,2.4vw,30px);height:clamp(20px,2.4vw,30px)} .sv .f1{top:18%;left:52%;animation-delay:0s} .sv .f2{top:62%;left:43%;animation-delay:1.4s;width:clamp(15px,1.7vw,21px);height:clamp(15px,1.7vw,21px)} .sv .f3{top:13%;right:11%;animation-delay:2.6s} .sv .f4{top:47%;right:29%;animation-delay:.8s;width:clamp(16px,1.9vw,24px);height:clamp(16px,1.9vw,24px)} .sv .kvcl{top:16%;width:clamp(120px,17vw,210px);height:clamp(62px,8.7vw,108px);opacity:.9; animation-duration:96s} .sv .c2{top:50%;animation-duration:128s;animation-delay:-46s;opacity:.66} @media (max-width:900px){ .sv .f1,.sv .f2{display:none} } @media (max-width:640px){ /* 좁은 화면에서는 문구가 전폭을 쓰므로 패턴을 옅게, 캐릭터는 모서리로 */ .sv{padding:60px 0 92px} .sv__ptn{opacity:.32} .sv p{max-width:76%} .sv__bee{width:64px;right:10px;bottom:14px} .sv__bee--kobi{width:132px;right:4px;bottom:4px} } /* 서브비주얼 다음에 붙는 경로 표시 — 언덕과 자연스럽게 이어지도록 */ .sv + .crumb{border-top:0} /* ========================================================================== 하단 CTA 배너 (.end) — 포스터 팔레트로 통일 ========================================================================== */ .end{background:linear-gradient(180deg,var(--kv-sky-t) 0%,var(--kv-sky-b) 100%); color:var(--kv-ink);padding:104px 0 clamp(120px,13vw,168px)} .end__bg{background-image:var(--kv-ptn);background-size:340px 340px;background-repeat:repeat; background-position:0 0;background-color:transparent;opacity:.46; -webkit-mask-image:linear-gradient(102deg,transparent 22%,rgba(0,0,0,.4) 50%,#000 82%); mask-image:linear-gradient(102deg,transparent 22%,rgba(0,0,0,.4) 50%,#000 82%)} .end__bg::after{display:none} .end__ppl{position:absolute;right:clamp(8px,3vw,56px);bottom:clamp(34px,5vw,62px);z-index:1; width:clamp(240px,34vw,470px);aspect-ratio:300/115; background:var(--kv-people) center bottom/contain no-repeat;pointer-events:none} .end__wave{position:absolute;left:0;right:0;bottom:-1px;height:clamp(62px,8vw,112px);z-index:0; background:var(--kv-wave) center bottom/100% 100% no-repeat} .end .inner{position:relative;z-index:2} .end .eyeb{color:var(--kv-green-d)} .end .eyeb::before{background:var(--kv-green-d)} .end h2{color:var(--kv-ink)} .end p{color:#4E6A76} .end .btns a{border-color:var(--kv-ink);color:var(--kv-ink)} .end .btns a:hover{background:var(--kv-ink);color:#fff} @media (max-width:1080px){ .end{padding:68px 0 clamp(96px,15vw,132px)} .end__ppl{opacity:.55;right:0;bottom:44px} } @media (max-width:640px){ .end__ppl{display:none} } /* ========================================================================== 흐르는 문구 띠 (.mq) — 구분점을 포스터 꽃으로 교체 ========================================================================== */ .mq{background:linear-gradient(90deg,#E9F4EF,#E4F0F6)} .mq__t span::after{width:15px;height:15px;border-radius:0;background:var(--kv-fl-o) center/contain no-repeat} /* ── 강조색을 포스터 주황(어르신)으로 맞춥니다 ────────────────────────── */ .h2 em{color:var(--kv-orange)} .quote mark{color:var(--kv-orange)} /* ── 모션 최소화 설정 존중 ───────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .bee,.kvfl,.kvcl,.sv__ptn,.end__bg{animation:none!important} .kvcl{display:none} }