/* 질문형 랜딩(home/voice_landing) 전용 — 2026-09-13 시안 검토에서 고른 조합. 모눈 격자 · 입체 그림자 · 한 글자씩 타이핑 · 답 획 긋기 · 제임스 커서. 움직임은 voice_landing_controller.js 가 클래스를 붙였다 뗐다 하는 것으로만 일어난다. Tailwind 유틸리티는 @layer 안에 있어서, 레이어 밖인 이 파일이 같은 속성을 덮어쓴다 — 클래스 이름은 vl- 로만. */ /* 바탕 네이비와 회색 단계는 사이트 전체 값이라 app/assets/tailwind/application.css 의 @theme 으로 옮겼다 (2026-09-13). */ /* ── 모눈 ── 굵은 선 124px · 가는 선 31px. 가운데 기준으로 깔아서 lg(본문 992px)에서 본문 양 끝이 굵은 선 위에 떨어진다 (496 = 124 × 4). 히어로와 마지막 CTA 에만 깐다. */ .vl-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgb(255 255 255 / .085) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / .085) 1px, transparent 1px), linear-gradient(to right, rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 124px 124px, 124px 124px, 31px 31px, 31px 31px; background-position: calc(50% + 62px) 0, 0 0, calc(50% + 15.5px) 0, 0 0; } .vl-grid-hero { -webkit-mask-image: radial-gradient(ellipse 72% 90% at 28% 36%, #000 22%, transparent 80%); mask-image: radial-gradient(ellipse 72% 90% at 28% 36%, #000 22%, transparent 80%); } .vl-grid-cta { -webkit-mask-image: radial-gradient(ellipse 70% 120% at 22% 100%, #000 12%, transparent 72%); mask-image: radial-gradient(ellipse 70% 120% at 22% 100%, #000 12%, transparent 72%); } /* 폼·긴 글 화면 — 글 기둥은 바탕색으로 덮고 양옆에만 보이게 쓴다. 위에서 아래로 사라진다. */ .vl-grid-page { -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 90%); mask-image: linear-gradient(to bottom, #000 10%, transparent 90%); } /* 랜딩 히어로 — 배경을 따낸 제임스 사진 뒤로도 모눈이 보이게, 제목 쪽 타원(vl-grid-hero)에 사진 자리 타원을 하나 겹친다. 한 겹의 모눈에 마스크만 더하는 것이라 선이 어긋나지 않는다. 좁은 화면은 사진이 제목 아래(가운데 아래), lg 는 오른쪽. */ .vl-grid-portrait { -webkit-mask-image: radial-gradient(ellipse 72% 90% at 28% 36%, #000 22%, transparent 80%), radial-gradient(ellipse 70% 32% at 50% 76%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 72% 90% at 28% 36%, #000 22%, transparent 80%), radial-gradient(ellipse 70% 32% at 50% 76%, #000 30%, transparent 78%); } @media (min-width: 1024px) { .vl-grid-portrait { -webkit-mask-image: radial-gradient(ellipse 72% 90% at 28% 36%, #000 22%, transparent 80%), radial-gradient(ellipse 32% 72% at 80% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 72% 90% at 28% 36%, #000 22%, transparent 80%), radial-gradient(ellipse 32% 72% at 80% 50%, #000 30%, transparent 80%); } } /* ── 입체 그림자 ── 글자 크기에 따라 em 으로 여섯 겹. 색은 인물 패널(#1C1917)의 stone 계열. */ .vl-extrude { text-shadow: .012em .012em 0 #57534e, .024em .024em 0 #4a4541, .036em .036em 0 #3d3834, .048em .048em 0 #312c29, .06em .06em 0 #26221f, .072em .072em 0 #1c1917; } /* ── 첫 페인트 깜빡임 방지 ── 인라인 스크립트가 에 vl-motion 을 붙이면 컨트롤러가 붙기 전까지 히어로를 숨긴다. JS 가 끝내 안 뜨면 2.5초 뒤 스스로 보인다. */ .vl-motion .vl-prehide:not(.vl-ready) { opacity: 0; animation: vl-failsafe .01s linear 2.5s forwards; } @keyframes vl-failsafe { to { opacity: 1; } } /* ── 타이핑 ── */ .vl-armed .vl-ch { opacity: 0; } .vl-armed .vl-ch.vl-on { opacity: 1; } .vl-ch.vl-caret { position: relative; } .vl-ch.vl-caret::after { content: ""; position: absolute; left: 100%; top: .14em; bottom: .06em; width: .075em; margin-left: .03em; background: #f97316; animation: vl-blink .9s steps(1, end) infinite; } @keyframes vl-blink { 50% { opacity: 0; } } /* ── 히어로 나머지 (설명·버튼·사진) ── */ .vl-rest-armed .vl-hero-rest { opacity: 0; transform: translateY(12px); } .vl-rest-armed .vl-hero-rest.vl-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); } /* ── 답 획 긋기 ── */ .vl-bar { transform-origin: left center; } .vl-ans-armed .vl-bar { transform: scaleX(0); } .vl-ans-armed .vl-answer > :not(.vl-bar) { opacity: 0; transform: translateY(12px); } .vl-ans-armed.vl-ans-in .vl-bar { transform: scaleX(1); transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .vl-ans-armed.vl-ans-in .vl-answer > :not(.vl-bar) { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: .22s; } .vl-ans-armed.vl-ans-in .vl-answer > :nth-child(3) { transition-delay: .32s; } .vl-ans-armed.vl-ans-in .vl-answer > :nth-child(4) { transition-delay: .42s; } .vl-ans-armed.vl-ans-in .vl-answer > :nth-child(n+5) { transition-delay: .52s; } /* ── 「4시간」 손글씨 밑줄 — 커서가 긋는다 ── */ .vl-mark { position: relative; white-space: nowrap; } .vl-mark-line { position: absolute; left: -.05em; bottom: -.17em; width: calc(100% + .1em); height: .24em; overflow: visible; opacity: 0; pointer-events: none; } .vl-mark-line.vl-show { opacity: 1; } .vl-mark-line path { fill: none; stroke: #f97316; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .vl-mark-line.vl-drawn path { stroke-dashoffset: 0; } /* ── 제임스 커서 ── 화면 공유 때 보이는 이름표 커서 */ .vl-cursor { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform; } .vl-cursor.vl-cursor-on { opacity: 1; } .vl-cursor-inner { display: flex; align-items: flex-start; transform-origin: 2px 2px; } .vl-cursor.vl-idle .vl-cursor-inner { animation: vl-drift 3.4s ease-in-out infinite; } @keyframes vl-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 2px); } } .vl-cursor svg { display: block; width: 22px; height: 24px; filter: drop-shadow(0 2px 5px rgb(0 0 0 / .55)); } .vl-cursor-label { margin: 17px 0 0 -5px; padding: 3px 8px 4px; border-radius: 0 6px 6px 6px; background: #f97316; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .vl-pointed { background-color: #fb923c; box-shadow: 0 0 0 5px rgb(249 115 22 / .22); } @media (prefers-reduced-motion: reduce) { .vl-cursor.vl-idle .vl-cursor-inner, .vl-ch.vl-caret::after { animation: none; } }