@charset "utf-8";
/* 딸깍 기능 소개 페이지 공용(환경 설정 /settings 부터) — 생성기 _tools/feature_page.py 한 벌 · 접두 ft-(판) · vg-(움직이는 장면) */
/* 짜임은 리틀리 기능 페이지 결 — 첫 화면(떠 있는 카드) → 타일 묶음(타일 = 움직이는 장면 + 이름 · 두 줄) → 자주 묻는 질문 → 맺음 · 떠 있는 단추 */
/* 색 · 판 폭 · 문답(.bento)은 메인(index2.css) 것 그대로 — 여기서 다시 정하지 않는다 */

.ft-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ftp { background: var(--paper); }

/* ══════════════════ 첫 화면 — 가운데 제목 · 단추 + 둘레에 떠 있는 카드 ══════════════════ */
.ft-hero { position: relative; padding: calc(64px + clamp(40px, 6vw, 80px)) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.ft-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-eye { display: inline-flex; align-items: baseline; gap: .4em; padding: .3em .3em .3em .95em; border-radius: 999px; background: #0a0a0a; color: var(--lime); line-height: 1.2; font-size: clamp(14px, .7rem + .5vw, 18px); font-weight: 800; letter-spacing: -.02em; }
.ft-eye b { display: inline-block; padding: .2em .6em; line-height: 1.2; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-weight: 900; }
.ft-t { margin-top: clamp(14px, 2vw, 22px); font-size: clamp(34px, 1.2rem + 4.6vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -.055em; word-break: keep-all; text-wrap: balance; text-align: center; }
.ft-t b { background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); padding: 0 .04em; }
.ft-s { margin-top: clamp(12px, 2vw, 20px); max-width: 46ch; font-size: clamp(14px, .8rem + .4vw, 19px); line-height: 1.55; color: var(--ink-2); word-break: keep-all; text-wrap: balance; text-align: center; }
.ft-go { margin-top: clamp(28px, 3.4vw, 40px); }
/* 첫 화면 단추 — 검정 알약 · 글자만 가운데 · 요금제로 간다(화살표는 사용자 2026-10-21 「아이콘 삭제」) */
.ft-btn { display: inline-grid; place-items: center; min-width: 220px; min-height: 60px; padding: 0 32px; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.02em; transition: transform .2s, box-shadow .2s; }
.ft-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(10, 10, 10, .55); }
/* 떠 있는 카드 — 자리 넷(왼쪽 위 · 왼쪽 아래 · 오른쪽 위 · 오른쪽 아래) · 저마다 기울기 · 둥실 */
.ft-fl { position: absolute; z-index: 1; font-size: 15px; animation: vgFloat 6s ease-in-out infinite; }
.ft-fl > * { opacity: 1; }
.ft-fl--1 { left: max(2vw, calc(50% - 600px)); top: 22%; rotate: -8deg; }
.ft-fl--2 { left: max(5vw, calc(50% - 540px)); top: 58%; rotate: 6deg; animation-delay: -2s; }
.ft-fl--3 { right: max(2vw, calc(50% - 600px)); top: 20%; rotate: 7deg; animation-delay: -1s; }
.ft-fl--4 { right: max(5vw, calc(50% - 560px)); top: 60%; rotate: -5deg; animation-delay: -3s; }
@keyframes vgFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ══════════════════ 마디 · 타일 ══════════════════ */
/* 마디 위아래 여백 · 제목 아래 간격은 메인 .chap · .chap__head 가 맡는다(사용자 「메인 · 요금제와 일치」) */
.ft-sec--first { padding-top: 0; }
/* 세이지 면 — 밝은 면보다 한 단 누른 초록빛 회색 · 타일 판은 거꾸로 밝게(흰 면은 「안 어울린다」로 걷었다 2026-10-21) */
.ft-sec--sage { --paper: #e3e6d6; --paper-2: #f7f7f2; --rule: rgba(10, 10, 10, .14); }
/* 라임 면 위 장면 — 라임으로 칠한 조각(단추 줄 · 내 말풍선 · 라임 꼬리표)이 바탕에 묻히지 않게 검정 · 흰색으로 */
.sec--brand .vg-row--btn { background: #0a0a0a; color: #fff; }
.sec--brand .vg-row--btn .vg-ic { background: var(--lime); color: #0a0a0a; }
.sec--brand .vg-bub--r { background: #fff; }
.sec--brand .vg-tag--lime { background: #0a0a0a; color: var(--lime); }
.ft-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 24px); }
.ft-tile { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.ft-tile__n { margin-top: 22px; font-size: clamp(20px, .9rem + .7vw, 26px); font-weight: 800; letter-spacing: -.045em; text-align: center; }
.ft-tile__d { margin-top: 8px; max-width: 22em; font-size: 15px; line-height: 1.6; color: var(--ink-3); word-break: keep-all; text-wrap: balance; text-align: center; }
.ft-tiles > .ft-tile:nth-child(3n+2) { --i: 1; }
.ft-tiles > .ft-tile:nth-child(3n) { --i: 2; }

/* ══════════════════ vg — 움직이는 장면(타일 안 회색 판) · 안쪽은 판 폭에 맞춰 커진다 ══════════════════ */
.vg { position: relative; width: 100%; aspect-ratio: 33 / 27; border-radius: 28px; background: var(--paper-2); overflow: hidden; container-type: inline-size; }
.vg__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 9%; font-size: clamp(11px, 4.6cqw, 18px); color: #17170f; }
.ft-tiles--big .vg { aspect-ratio: 33 / 25; }
/* 카드 · 한 줄 · 아이콘 */
.vg-card { position: relative; display: flex; flex-direction: column; gap: .5em; padding: .9em 1em; border-radius: 1em; background: #fff; box-shadow: 0 1em 2em -1.2em rgba(10, 10, 10, .28), 0 0 0 1px rgba(10, 10, 10, .04); text-align: left; }
.vg-row { position: relative; display: flex; align-items: center; gap: .65em; width: 100%; max-width: 15em; padding: .62em .85em; border-radius: .95em; background: #fff; box-shadow: 0 .9em 1.8em -1.2em rgba(10, 10, 10, .3), 0 0 0 1px rgba(10, 10, 10, .04); font-weight: 700; letter-spacing: -.03em; text-align: left; }
/* 단추처럼 생긴 줄 — 라임 바탕 · 가운데 */
.vg-row--btn { justify-content: center; max-width: 11em; background: var(--lime); }
.vg-row--btn .vg-row__t { flex: none; }
.vg-row__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.vg-row small { display: block; font-size: .72em; font-weight: 600; color: #8b8b82; }
.vg-ic { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .55em; background: #0a0a0a; color: #fff; }
.vg-ic b { font-size: .95em; font-weight: 900; }
.vg-ic__s { width: 1.1em; height: 1.1em; }
.vg-ic--lime { background: var(--lime); color: #0a0a0a; }
.vg-ic--kakao { background: #fee500; color: #191600; }
.vg-ic--naver { background: #03c75a; }
.vg-ic--yt { background: #ff0000; }
.vg-ic--tt, .vg-ic--th { background: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.vg-ic--fb { background: #1877f2; }
.vg-ic--google { background: #fff; color: #4285f4; box-shadow: inset 0 0 0 1px #dadce0; }
.vg-ic--tg { background: #2aabee; }
.vg-ic--red { background: #ff5a5f; }
.vg-ic--blue { background: #3b82f6; }
.vg-ic--grey { background: #d9d9d2; color: #6b6b62; }
.vg-ic--line { background: #00b900; }
.vg-ic--wa { background: #25d366; }
.vg-ic--msgr { background: linear-gradient(135deg, #00b2ff, #a033ff 60%, #ff5c87); }
.vg-ic--insta { background: linear-gradient(135deg, #feda75, #d62976 55%, #4f5bd5); }
/* 스위치 · 꼬리표 · 말풍선 · 도장 · 돌아가는 글 · 커서 */
.vg-sw { position: relative; flex: none; width: 2.3em; height: 1.35em; border-radius: 999px; background: #d6d6ce; }
.vg-sw::after { content: ""; position: absolute; top: .17em; left: .17em; width: 1.01em; height: 1.01em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .25em rgba(0, 0, 0, .2); }
.vg-tag { flex: none; padding: .28em .6em; border-radius: 999px; font-size: .74em; font-weight: 800; white-space: nowrap; }
.vg-tag--lime { background: #eaf6b4; color: #3f5f00; }
.vg-tag--red { background: #ffe1e1; color: #c62828; }
.vg-tag--grey { background: #efefea; color: #77776e; }
.vg-tag--black { background: #0a0a0a; color: var(--lime); }
.vg-bub { position: relative; max-width: 12em; padding: .55em .85em; border-radius: 1em; background: #fff; font-weight: 700; letter-spacing: -.03em; box-shadow: 0 .8em 1.6em -1.1em rgba(10, 10, 10, .3); text-align: left; }
.vg-bub--l { align-self: flex-start; border-bottom-left-radius: .3em; }
.vg-bub--r { align-self: flex-end; border-bottom-right-radius: .3em; background: var(--lime); }
.vg-bub--k { background: #0a0a0a; color: #fff; }
.vg-stamp { position: absolute; z-index: 3; right: 4%; bottom: 2%; padding: .25em .7em; border: .16em solid currentColor; border-radius: .5em; font-size: 1.05em; font-weight: 900; letter-spacing: -.02em; rotate: -12deg; background: rgba(255, 255, 255, .85); }
.vg-stamp--red { color: #e5484d; }
.vg-stamp--lime { color: #5d8a00; }
.vg-cyc { position: relative; display: inline-grid; }
.vg-cyc > span { grid-area: 1 / 1; text-align: center; }
.vg-cur { position: absolute; z-index: 4; right: 12%; bottom: -.7em; width: 1.25em; height: 1.6em; pointer-events: none; filter: drop-shadow(0 .15em .2em rgba(0, 0, 0, .35)); }
.vg-cur::before { content: ""; position: absolute; inset: 0; background: #0a0a0a; clip-path: polygon(0 0, 0 72%, 26% 56%, 44% 96%, 62% 88%, 44% 50%, 74% 44%); }
.vg-cur::after { content: ""; position: absolute; left: -.55em; top: -.55em; width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(200, 240, 0, .55); scale: 0; }
/* 장면 안 자리 도우미 — 겹쳐 놓기 · 가로 줄 · 큰 글 */
.vg-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5em; width: 100%; }
.vg-line { display: flex; align-items: center; justify-content: center; gap: .5em; flex-wrap: wrap; }
.vg-big { font-size: 1.9em; font-weight: 900; letter-spacing: -.05em; }
.vg-mut { font-size: .8em; color: #8b8b82; font-weight: 600; }
.vg-bar { width: 100%; height: .45em; border-radius: 999px; background: #e3e3dc; overflow: hidden; }
.vg-bar i { display: block; height: 100%; width: 70%; border-radius: inherit; background: var(--lime); }
.vg-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78em; font-weight: 600; color: #4b5a14; }
.vg-strike { position: relative; }
.vg-strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .14em; border-radius: 2px; background: #e5484d; transform-origin: left; scale: 0 1; }

/* 큰 장면(vg--big) — 넓은 자리에서는 글자를 판 폭에 덜 매어 더 많이 담고, 휴대폰 · 관리자 창 · 입력 칸을 나란히 */
.vg--big .vg__in { font-size: clamp(10px, 2.7cqw, 18px); padding: 6%; }
.vg-duo { display: flex; align-items: center; justify-content: center; gap: 1.2em; width: 100%; }
/* 흐름 화살표 — 나란히 놓은 두 화면 사이 「이쪽에서 누르면 → 저쪽에 생긴다」 */
.vg-flow { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--lime); color: #0a0a0a; box-shadow: 0 .5em 1em -.5em rgba(10, 10, 10, .4); }
.vg-flow svg { width: 1.1em; height: 1.1em; }
.vg-win--wide { max-width: 24em; }
.vg-win { position: relative; display: flex; flex-direction: column; min-width: 0; flex: 1; max-width: 17em; border-radius: 1em; background: #fff; box-shadow: 0 1.2em 2.4em -1.4em rgba(10, 10, 10, .4), 0 0 0 1px rgba(10, 10, 10, .05); overflow: hidden; text-align: left; }
.vg-win__bar { display: flex; align-items: center; gap: .3em; padding: .55em .8em; background: #f4f4ef; border-bottom: 1px solid #ebebe4; }
.vg-win__bar i { width: .5em; height: .5em; border-radius: 50%; background: #d8d8d0; }
.vg-win__bar b { margin-left: .4em; font-size: .78em; font-weight: 800; color: #57574f; }
.vg-win__in { display: flex; flex-direction: column; gap: .45em; padding: .7em; font-size: .86em; }
.vg-win__in .vg-row { max-width: none; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); }
/* 창 안에 바로 놓인 꼬리표는 글자 폭만큼(세로 줄 칸에서 늘어나지 않게) */
.vg-win__in > .vg-tag { align-self: flex-start; }
.vg-fld { display: grid; gap: .15em; padding: .45em .65em; border-radius: .6em; background: #fff; box-shadow: inset 0 0 0 1px #e2e2da; text-align: left; }
.vg-fld em { font-style: normal; font-size: .72em; font-weight: 700; color: #8b8b82; }
.vg-fld b { font-size: .92em; font-weight: 700; letter-spacing: -.02em; }
.vg-fld.is-on { box-shadow: inset 0 0 0 1.5px #a3c700, 0 0 0 .2em rgba(200, 240, 0, .3); }
.vg-btn { display: grid; place-items: center; padding: .6em; border-radius: .7em; background: #0a0a0a; color: #fff; font-weight: 800; font-size: .95em; }
.vg-btn--lime { background: var(--lime); color: #0a0a0a; }
.vg-code6 { display: flex; gap: .3em; }
.vg-code6 i { display: grid; place-items: center; width: 1.6em; height: 2em; border-radius: .4em; background: #fff; box-shadow: inset 0 0 0 1px #e2e2da; font-style: normal; font-weight: 900; }

/* 장면 자세 — zoom(확대해 넘침) · base(아래 붙음) · top(위 붙음) · 없으면 가운데 */
.vg--zoom .vg__in { transform: scale(1.32); transform-origin: 34% 38%; }
.vg--big.vg--zoom .vg__in { transform: scale(1.22); transform-origin: 18% 30%; }
.vg--base .vg__in { justify-content: flex-end; padding-bottom: 7%; }
.vg--top .vg__in { justify-content: flex-start; padding-top: 7%; }

/* 언어 칩 — 왼쪽 국기 + 한국어 이름 · 지나가는 띠는 위 카드와 넉넉히 띄운다 */
.vg-lang { flex: none; display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em .35em .45em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .07); font-size: .8em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.vg-lang.is-on { background: #0a0a0a; color: #fff; box-shadow: none; }
.vg-flag { flex: none; width: 1.5em; height: 1em; border-radius: .2em; box-shadow: 0 0 0 1px rgba(10, 10, 10, .12); }
.vg-stack > .vg-mq--h, .vg__in > .vg-mq--h { margin-top: .9em; }
.vg-ic--flag { background: #fff; box-shadow: inset 0 0 0 1px #e2e2da; }
.vg-ic--flag .vg-flag { width: 1.35em; height: .9em; border-radius: .12em; box-shadow: 0 0 0 1px rgba(10, 10, 10, .1); }
/* 간편 로그인 정사각 여섯 — 3×2 · 브랜드 색 · 로고와 이름을 가운데 한 덩이로 · 카드 넘기듯 차례로 돌아 들어오고(vgSqIn) 한 칸씩 살짝 떠오르며 라임 테(vgSqUp · vgSqRing) */
.vg-sqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75em; width: 100%; max-width: 15.5em; perspective: 40em; }
.vg-sq { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; aspect-ratio: 1; padding: .6em; border-radius: 1.15em; box-shadow: 0 .7em 1.4em -1em rgba(10, 10, 10, .4); }
.vg-sq__ic { flex: none; width: 1.75em; height: 1.75em; }
.vg-sq i { font-style: normal; font-size: .72em; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.vg-sq--kakao { background: #fee500; color: #191600; }
.vg-sq--naver { background: #03c75a; color: #fff; }
.vg-sq--google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #dadce0, 0 .7em 1.4em -1em rgba(10, 10, 10, .4); }
.vg-sq--fb { background: #1877f2; color: #fff; }
.vg-sq--line { background: #00b900; color: #fff; }
.vg-sq--wechat { background: #2dc100; color: #fff; }
.vg-sq { animation: vgSqIn 4.5s cubic-bezier(.2, .8, .2, 1) infinite both, vgSqUp 4.5s cubic-bezier(.3, .7, .2, 1) infinite both; animation-play-state: paused; }
.vg-sq::after { content: ""; position: absolute; inset: -.28em; border-radius: 1.4em; box-shadow: 0 0 0 .16em var(--lime), 0 .6em 1.6em -.4em rgba(200, 240, 0, .55); opacity: 0; animation: vgSqRing 4.5s ease infinite both; animation-play-state: paused; }
.vg.is-on .vg-sq, .vg.is-on .vg-sq::after { animation-play-state: running; }
.vg-sq:nth-child(1) { animation-delay: 0s, 1s; } .vg-sq:nth-child(1)::after { animation-delay: 1s; }
.vg-sq:nth-child(2) { animation-delay: .08s, 1.5s; } .vg-sq:nth-child(2)::after { animation-delay: 1.5s; }
.vg-sq:nth-child(3) { animation-delay: .16s, 2s; } .vg-sq:nth-child(3)::after { animation-delay: 2s; }
.vg-sq:nth-child(4) { animation-delay: .24s, 2.5s; } .vg-sq:nth-child(4)::after { animation-delay: 2.5s; }
.vg-sq:nth-child(5) { animation-delay: .32s, 3s; } .vg-sq:nth-child(5)::after { animation-delay: 3s; }
.vg-sq:nth-child(6) { animation-delay: .4s, 3.5s; } .vg-sq:nth-child(6)::after { animation-delay: 3.5s; }
@keyframes vgSqIn { 0% { opacity: 0; rotate: y 75deg; } 12% { opacity: 1; rotate: y 0deg; } 92% { opacity: 1; rotate: y 0deg; } 100% { opacity: 0; rotate: y 0deg; } }
@keyframes vgSqUp { 0%, 2% { translate: 0 0; scale: 1; } 6%, 10% { translate: 0 -.3em; scale: 1.07; } 15%, 100% { translate: 0 0; scale: 1; } }
@keyframes vgSqRing { 0%, 2% { opacity: 0; } 6%, 10% { opacity: 1; } 15%, 100% { opacity: 0; } }
/* 흐르는 텔레그램 말풍선은 왼쪽에 붙는다(받은 말풍선 자리) */
.vg-mq__t > .vg-tg { align-self: stretch; width: auto; max-width: none; margin-left: .7em; }
/* 텔레그램 대화 — 봇 머리 · 연두 대화 바탕 · 흰 말풍선(왼쪽 꼬리) · 파란 보낸 이 · 오른쪽 아래 시각 · 아래 단추 */
.vg-tgc { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; min-height: 0; width: 100%; max-width: 17em; margin-inline: auto; border-radius: 1em; overflow: hidden; background: #fff; box-shadow: 0 1em 2em -1.4em rgba(10, 10, 10, .4), 0 0 0 1px rgba(10, 10, 10, .06); text-align: left; }
.vg-tgc__hd { display: flex; align-items: center; gap: .55em; padding: .55em .75em; border-bottom: 1px solid #e7e9ec; }
.vg-tgc__hd b { display: block; font-size: .82em; font-weight: 800; letter-spacing: -.02em; }
.vg-tgc__hd i { display: block; font-style: normal; font-size: .68em; color: #8a9199; }
.vg-tgc__av { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(140deg, #d6f93d, #8fb800); color: #0a0a0a; font-size: .8em; font-weight: 900; }
.vg-tgc__bd { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: .55em .55em 0; background: linear-gradient(160deg, #dce9cb 0%, #c7dbb2 100%); }
.vg-tgc__bd .vg-mq--v { -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.vg-tgc__bd .vg-mq__t { align-items: flex-start; }
.vg-tg { position: relative; flex: none; display: grid; gap: .1em; max-width: 92%; padding: .45em .65em .5em; border-radius: .85em .85em .85em .2em; background: #fff; box-shadow: 0 .15em .3em rgba(10, 10, 10, .12); font-size: .82em; text-align: left; }
.vg-tg::before { content: ""; position: absolute; left: -.42em; bottom: 0; width: .6em; height: .7em; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.vg-tg__who { font-size: .82em; font-weight: 800; color: #3390ec; }
.vg-tg b { font-size: .95em; font-weight: 800; letter-spacing: -.02em; text-align: left; }
.vg-tg__tx { font-size: .88em; line-height: 1.4; color: #222; padding-right: 2.6em; text-align: left; }
.vg-tg__t { position: absolute; right: .6em; bottom: .4em; font-size: .7em; color: #8ea08a; }
.vg-tg__kb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25em; width: 92%; margin-top: .25em; }
.vg-tg__kb i { font-style: normal; padding: .4em; border-radius: .55em; background: rgba(60, 90, 40, .28); color: #fff; font-size: .74em; font-weight: 800; text-align: center; }
/* 간편 로그인 단추 — 실제 로그인 화면처럼 세로로 · 제 브랜드 색 · 로고는 왼쪽 같은 자리 · 글은 가운데(여섯이 한 줄로 맞는다) */
.vg-lgs { display: flex; flex-direction: column; gap: .4em; width: 100%; max-width: 14.5em; }
.vg-lg { position: relative; display: grid; place-items: center; min-height: 2.75em; padding: 0 2.4em; border-radius: .6em; font-size: .86em; font-weight: 800; letter-spacing: -.02em; text-align: center; white-space: nowrap; box-shadow: 0 .5em 1.2em -1em rgba(10, 10, 10, .35); }
.vg-lg__ic { position: absolute; left: .85em; top: 50%; width: 1.15em; height: 1.15em; translate: 0 -50%; }
.vg-lg--kakao { background: #fee500; color: #191600; }
.vg-lg--naver { background: #03c75a; color: #fff; }
.vg-lg--google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #dadce0, 0 .5em 1.2em -1em rgba(10, 10, 10, .35); }
.vg-lg--fb { background: #1877f2; color: #fff; }
.vg-lg--line { background: #00b900; color: #fff; }
.vg-lg--wechat { background: #2dc100; color: #fff; }
.vg-lg .vg-cur { right: 8%; bottom: -.9em; }
.ft-tiles--big .vg-lgs { font-size: .9em; }
/* 계속 지나가는 줄(리틀리 결) — 위로 · 옆으로 · 반대로 · 두 줄 엇갈려 · 가장자리는 흐리게 · 보일 때만 돈다 */
.vg-mq { position: relative; overflow: hidden; width: 100%; }
.vg-mq__t { display: flex; gap: .5em; }
.vg-mq--v { flex: 1 1 auto; align-self: stretch; min-height: 0; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.vg-mq--v .vg-mq__t { flex-direction: column; align-items: center; padding-bottom: .5em; animation: vgMqV 11s linear infinite; }
.vg-mq--v .vg-row { flex: none; } .vg__in > .vg-mq--v { font-size: .8em; } .vg__in > .vg-mq--v .vg-row__t { line-height: 1.25; } .vg__in > .vg-mq--v .vg-row small { margin-top: .2em; }
.vg-mq--h { flex: none; width: 122%; margin-inline: -11%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.vg-mq--h .vg-mq__t { width: max-content; padding-right: .5em; animation: vgMqH 16s linear infinite; }
.vg-mq--h .vg-row, .vg-mq--h .vg-tag { flex: none; width: auto; }
.vg-mq.is-rev .vg-mq__t { animation-direction: reverse; }
.vg-mq.is-slow .vg-mq__t { animation-duration: 20s; }
.vg-mq.is-fast .vg-mq__t { animation-duration: 8s; }
.vg-mq-cols { display: flex; gap: .6em; flex: 1 1 auto; align-self: stretch; min-height: 0; width: 100%; }
.vg-mq-cols > .vg-mq { flex: 1; min-width: 0; }
.vg-mq-cols .vg-row { padding: .5em .6em; gap: .45em; font-size: .86em; }
/* 두 줄 위 머리표 — 줄마다 무엇인지(올림 · 막힘) */
.vg-mq-head { display: flex; gap: .6em; width: 100%; }
.vg-mq-head > * { flex: 1; text-align: center; }
.vg .vg-mq__t { animation-play-state: paused; }
.vg.is-on .vg-mq__t { animation-play-state: running; }
/* 흐르는 줄 안의 줄긋기는 늘 그어진 채 · 흐르는 줄을 담는 창은 판 높이를 채운다 */
.vg .vg-strike.is-static::after { animation: none; scale: 1 1; }
.vg-win--tall { align-self: stretch; height: 100%; }
.vg-win--tall .vg-win__in { flex: 1; min-height: 0; }
.vg-stack--fill { gap: 1.2em; }
@keyframes vgMqV { to { translate: 0 -50%; } }
@keyframes vgMqH { to { translate: -50% 0; } }

/* ══════════════════ 움직임 — 한 바퀴 4.5초(6초는 「느리다」 2026-10-21) · 타일이 화면에 보일 때만(.is-on) · 지연 d1~d6 ══════════════════ */
.vg [class*="a-"], .vg .vg-cyc > span, .vg .vg-strike::after, .vg .vg-cur::after { animation-duration: 4.5s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .7, .2, 1); animation-play-state: paused; }
.vg.is-on [class*="a-"], .vg.is-on .vg-cyc > span, .vg.is-on .vg-strike::after, .vg.is-on .vg-cur::after { animation-play-state: running; }
.a-up { animation-name: vgUp; }
.a-pop { animation-name: vgPop; outline: .26em solid transparent; outline-offset: .08em; }
.a-drop { animation-name: vgDrop; }
.a-fade { animation-name: vgFade; }
.a-sw { animation-name: vgSw; }
.a-sw::after { animation: vgKnob 4.5s infinite both; animation-play-state: inherit; animation-delay: inherit; }
.a-stamp { animation-name: vgStamp; }
.a-tap { animation-name: vgTap; }
.a-tap::after { animation-name: vgRing; animation-delay: inherit; }
.a-shake { animation-name: vgShake; }
.vg .vg-strike::after { animation-name: vgStrike; animation-delay: 1s; }
.vg .vg-cyc > span { animation-name: vgCyc; animation-timing-function: ease; }
.vg .vg-cyc > span:nth-child(2) { animation-delay: 1.5s; }
.vg .vg-cyc > span:nth-child(3) { animation-delay: 3s; }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .3s; } .d3 { animation-delay: .45s; }
.d4 { animation-delay: .6s; } .d5 { animation-delay: .8s; } .d6 { animation-delay: 1s; }
@keyframes vgUp { 0% { opacity: 0; translate: 0 .9em; } 8%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -.3em; } }
@keyframes vgPop { 0% { opacity: 0; scale: .8; outline-color: rgba(200, 240, 0, 0); } 7% { opacity: 1; scale: 1.08; outline-color: rgba(200, 240, 0, .9); } 13% { scale: 1; } 30% { outline-color: rgba(200, 240, 0, 0); } 92% { opacity: 1; scale: 1; outline-color: rgba(200, 240, 0, 0); } 100% { opacity: 0; scale: .96; outline-color: rgba(200, 240, 0, 0); } }
@keyframes vgDrop { 0% { opacity: 0; translate: 0 -1.4em; } 9%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -.4em; } }
@keyframes vgFade { 0% { opacity: 0; } 10%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vgSw { 0%, 16% { background: #d6d6ce; } 22%, 94% { background: #a3c700; } 100% { background: #d6d6ce; } }
@keyframes vgKnob { 0%, 16% { translate: 0 0; } 22%, 94% { translate: .95em 0; } 100% { translate: 0 0; } }
@keyframes vgStamp { 0%, 22% { opacity: 0; scale: 2.2; } 28% { opacity: 1; scale: .92; } 32%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes vgTap { 0% { opacity: 0; translate: 2.4em 2em; } 8% { opacity: 1; } 20% { translate: 0 0; scale: 1; } 24% { scale: .8; } 28%, 88% { translate: 0 0; scale: 1; opacity: 1; } 100% { opacity: 0; translate: .6em .8em; } }
@keyframes vgRing { 0%, 22% { scale: 0; opacity: 1; } 34% { scale: 1.8; opacity: 0; } 100% { scale: 0; opacity: 0; } }
@keyframes vgShake { 0%, 34%, 46%, 100% { translate: 0 0; } 37% { translate: -.2em 0; } 40% { translate: .2em 0; } 43% { translate: -.12em 0; } }
@keyframes vgStrike { 0%, 18% { scale: 0 1; } 28%, 92% { scale: 1 1; } 100% { scale: 0 1; } }
@keyframes vgCyc { 0% { opacity: 0; translate: 0 .5em; } 4%, 29% { opacity: 1; translate: 0 0; } 33%, 100% { opacity: 0; translate: 0 -.5em; } }

/* ══════════════════ 보여 주는 방식 넷 — 마디마다 달리(사용자 「섹션마다 보이는 방식이 너무 같다」) ══════════════════ */
/* ① rail — 넓은 화면(마우스)은 마디가 붙잡히고 내리는 만큼 카드 줄이 왼쪽으로 · html.ft-pin 은 feature.js 가 단다 · 손가락 화면은 옆으로 밀기 */
.ft-sec--rail { --edge: max(var(--s5), calc((100vw - var(--shell)) / 2 + var(--s5))); }
@media (min-width: 768px) { .ft-sec--rail { --edge: max(var(--s9), calc((100vw - var(--shell)) / 2 + var(--s9))); } }
.ft-rail__vp { overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
.ft-rail__vp::-webkit-scrollbar { display: none; }
.ft-rail__track { display: flex; gap: clamp(16px, 2vw, 24px); width: max-content; padding: 4px var(--edge) 8px; }
.ft-rail__it { flex: none; width: clamp(280px, 27vw, 380px); scroll-snap-align: start; }
.ft-rail__it .vg { aspect-ratio: 33 / 25; }   /* 요약 타일(.ft-tiles--big)과 같은 비율 */
.sec--ink .ft-rail__bar i { background: linear-gradient(90deg, var(--lime) calc(var(--p, 0) * 100%), rgba(255, 255, 255, .16) calc(var(--p, 0) * 100%)); }
.ft-rail__bar { margin-top: 28px; }
.ft-rail__bar i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #0a0a0a calc(var(--p, 0) * 100%), var(--rule) calc(var(--p, 0) * 100%)); }
.ft-pin .ft-sec--rail { padding: 0; }
.ft-pin .ft-rail__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; overflow: hidden; }
.ft-pin .ft-rail__vp { overflow: visible; }
.ft-pin .ft-rail__track { will-change: transform; }
/* 붙잡힌 동안은 카드 크기를 화면 높이에도 맞춘다 — 낮은 노트북 화면에서 제목 · 카드 · 설명 · 막대가 한 화면에 들어오게 */
.ft-pin .ft-rail__it { width: min(27vw, 380px, calc(46vh * 33 / 25)); }
html:not(.ft-pin) .ft-rail__bar { display: none; }

/* ② sticky — 왼쪽 붙박이(제목 + 목록) · 오른쪽 장면이 크게 · 가운데를 지나는 장면의 줄에 불 */
.ft-stk { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ft-stk__l { position: sticky; top: 112px; }
.ft-stk__head .chap__t, .ft-stk__head .chap__lead { text-align: left; margin-left: 0; }
.ft-stk__nav { display: grid; margin-top: var(--s9); padding: 0; list-style: none; counter-reset: stk; }
.ft-stk__n { position: relative; display: grid; gap: 4px; padding: 14px 0 14px 22px; counter-increment: stk; color: var(--ink-4); transition: color .3s; text-align: left; }
.ft-stk__n::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--rule); transition: background .3s; }
.ft-stk__n b { font-size: 19px; font-weight: 800; letter-spacing: -.035em; text-align: left; }
.ft-stk__n span { display: none; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); word-break: keep-all; text-align: left; }
.ft-stk__n.is-on { color: var(--ink); }
.ft-stk__n.is-on::before { background: var(--lime); }
.ft-stk__n.is-on span { display: block; }
.ft-stk__r { display: grid; gap: clamp(48px, 7vw, 96px); padding: 0; list-style: none; }
.ft-stk__it .vg { aspect-ratio: 33 / 24; border-radius: 32px; }
.ft-stk__cap { display: none; margin-top: 18px; text-align: left; }

/* ③ bento — 첫 칸 크게(2×2) · 글은 카드 안 아래 · 칸 판은 마디 면보다 한 단 눌러서 */
.ft-bt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; }
.ft-bt__it { display: flex; flex-direction: column; min-width: 0; border-radius: 28px; background: var(--paper-2); overflow: hidden; }
.ft-bt__it:first-child { grid-column: span 2; grid-row: span 2; }
.ft-bt__it .vg { flex: 1; aspect-ratio: 33 / 22; border-radius: 0; background: transparent; }
.ft-bt__it:first-child .vg { aspect-ratio: auto; min-height: 320px; }
.ft-bt__it:first-child .vg__in { font-size: clamp(12px, 3.4cqw, 22px); }
.ft-bt__cap { padding: 0 26px 24px; text-align: left; }
.ft-bt__cap h3 { font-size: clamp(19px, .9rem + .6vw, 24px); font-weight: 800; letter-spacing: -.04em; text-align: left; }
.ft-bt__cap p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); word-break: keep-all; text-align: left; }
.ft-bt__it:first-child .ft-bt__cap h3 { font-size: clamp(24px, 1rem + 1.2vw, 32px); }

/* ④ stack — 가로로 긴 검정 카드가 내리는 만큼 앞 카드 위로 차례로 쌓인다(붙박이 · 스크립트 없음) */
.ft-pile { display: grid; gap: 28px; padding: 0 0 40px; list-style: none; }
.ft-pile__it { position: sticky; top: calc(104px + var(--k, 0) * 22px); }
.ft-pile__it:nth-child(2) { --k: 1; } .ft-pile__it:nth-child(3) { --k: 2; } .ft-pile__it:nth-child(4) { --k: 3; }
.ft-pile__it:nth-child(5) { --k: 4; } .ft-pile__it:nth-child(6) { --k: 5; }
.ft-pile__card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 2.6vw, 32px); border-radius: 32px; background: #0a0a0a; color: #f4f4ee; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -18px 40px -24px rgba(10, 10, 10, .5); }
.ft-pile__tx { padding-left: clamp(4px, 1.5vw, 20px); text-align: left; }
.ft-pile__no { font-size: 15px; font-weight: 900; color: var(--lime); letter-spacing: .02em; }
.ft-pile__tx h3 { margin-top: 10px; font-size: clamp(24px, 1rem + 1.4vw, 36px); font-weight: 800; line-height: 1.2; letter-spacing: -.045em; color: #fff; word-break: keep-all; text-align: left; }
.ft-pile__tx p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: #b8b9ae; word-break: keep-all; text-align: left; }
.ft-pile__card .vg { aspect-ratio: 33 / 17; background: #1d1f14; }
/* 큰 장면 안 — 말풍선 칸은 폭을 묶고(창이 밀려나지 않게) · 흐르는 말풍선은 가운데 알맞은 폭으로 */
.vg-duo > .vg-stack { flex: 1 1 0; min-width: 0; max-width: 15em; width: auto; }
.vg-duo > .vg-stack .vg-tg, .vg-duo > .vg-stack .vg-tg__kb { width: 100%; max-width: none; }
.vg--big .vg__in > .vg-mq--v { max-width: 21em; margin-inline: auto; }
/* 검정 카드 안 — 검정으로 칠한 단추 줄은 라임으로(라임 면 덧칠보다 뒤에 와서 이긴다) */
.sec--brand .ft-pile__card .vg-row--btn { background: var(--lime); color: #0a0a0a; }
.sec--brand .ft-pile__card .vg-row--btn .vg-ic { background: #0a0a0a; color: var(--lime); }

/* ══════════════════ 떠 있는 단추 — 첫 화면을 지나면 화면 아래 가운데 ══════════════════ */
.ft-dock { position: fixed; z-index: 60; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px -16px rgba(10, 10, 10, .6); translate: -50% 140%; opacity: 0; transition: translate .35s cubic-bezier(.2, .7, .2, 1), opacity .35s; }
.ft-dock.is-show { translate: -50% 0; opacity: 1; }

/* ══════════════════ 반응형 — 1024 아래 두 칸 · 떠 있는 카드 걷음 · 600 아래 한 칸 · 320 까지 가로 넘침 0 ══════════════════ */
@media (max-width: 1180px) {
  .ft-fl--2, .ft-fl--4 { display: none; }
}
@media (max-width: 1023px) {
  .ft-stk { grid-template-columns: minmax(0, 1fr); }
  .ft-stk__l { position: static; }
  .ft-stk__head { margin-bottom: var(--s9); }
  .ft-stk__head .chap__t, .ft-stk__head .chap__lead { text-align: center; margin-left: auto; }
  .ft-stk__nav { display: none; }
  .ft-stk__cap { display: block; }
  .ft-stk__r { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 8px; }
  .ft-stk__it .vg { aspect-ratio: 33 / 27; border-radius: 28px; }
  .ft-bt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-pile__card { grid-template-columns: minmax(0, 1fr); }
  .ft-fl { display: none; }
  .ft-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-tiles > .ft-tile:nth-child(n) { --i: 0; }
}
@media (max-width: 599px) {
  .ft-stk__r { grid-template-columns: minmax(0, 1fr); }
  .ft-bt { grid-template-columns: minmax(0, 1fr); }
  .ft-bt__it:first-child { grid-column: auto; grid-row: auto; }
  .ft-bt__it:first-child .vg { min-height: 0; }
  .ft-bt__cap { padding: 16px 20px 20px; }
  .ft-bt__cap, .ft-bt__cap h3, .ft-bt__cap p { text-align: center; }
  /* 장면이 판 아래 끝까지 차 제목에 붙어 보였다 — 첫 칸(13개 언어)은 판을 조금 높게 · 문의 기록은 조금 작게 */
  .ft-bt__it:first-child .vg { aspect-ratio: 33 / 28; }
  .ft-bt .vg-inbox { font-size: .96em; }
  .ft-pile__it { position: static; }
  .ft-pile__card { border-radius: 24px; padding: 18px; }
  .ft-tiles { grid-template-columns: minmax(0, 1fr); }
  .vg { border-radius: 22px; }
  .ft-btn { min-width: 0; min-height: 46px; padding: 0 26px; font-size: 14.5px; }
  .ft-hero { padding-bottom: 32px; }
  .ft-go { margin-top: 22px; }
  /* 글자 크기 · 간격 — 메인(AI 서비스 카드 20/13.5) · 요금제와 맞춘다(2026-10-21 사용자) */
  .ft-tile__n { margin-top: 14px; font-size: 18px; line-height: 1.35; }
  .ft-tile__d { margin-top: 4px; font-size: 13.5px; line-height: 1.55; }
  .ft-stk__n b { font-size: 17px; }
  .ft-stk__n span { font-size: 13.5px; }
  .ft-bt__cap h3, .ft-bt__it:first-child .ft-bt__cap h3 { font-size: 18px; }
  .ft-bt__cap p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; }
  .ft-pile__no { font-size: 13px; }
  .ft-pile__tx h3 { margin-top: 6px; font-size: 21px; }
  .ft-pile__tx p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
  .ft-dock { min-height: 46px; padding: 0 24px; font-size: 14.5px; }
}
/* lang-pick */
.vg-lpk { transition: none; }
.vg-lpk__c { position: relative; right: auto; bottom: auto; flex: none; margin: .5em -.2em -.6em .2em; opacity: 0; }
.vg .vg-lpk, .vg .vg-lpk__c { animation-duration: 4.5s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease; animation-play-state: paused; }
.vg.is-on .vg-lpk, .vg.is-on .vg-lpk__c { animation-play-state: running; }
.vg .vg-lpk { animation-name: vgLpk; } .vg .vg-lpk__c { animation-name: vgLpc; }
.vg .vg-lpk--2, .vg .vg-lpk--2 .vg-lpk__c { animation-delay: 1.5s; } .vg .vg-lpk--3, .vg .vg-lpk--3 .vg-lpk__c { animation-delay: 3s; }
.vg .vg-lpk--4, .vg .vg-lpk--4 .vg-lpk__c { animation-delay: 4.5s; }
.vg .vg-lpk, .vg .vg-lpk__c, .vg .vg-cyc--4 > span, .vg .vg-6s [class*="a-"], .vg .vg-6s .vg-cyc > span { animation-duration: 6s; }
.vg .vg-cyc--4 > span { animation-name: vgCyc4; } .vg .vg-cyc--4 > span:nth-child(4) { animation-delay: 4.5s; }
.vg .vg-6s .vg-duo > [class*="a-"], .vg .vg-6s .vg-flow { animation: none; }
.vg .vg-6s .vg-big .vg-cyc > span, .vg .vg-6s .vg-mut .vg-cyc > span { justify-self: start; text-align: left; }
@keyframes vgCyc4 { 0% { opacity: 0; translate: 0 .5em; } 3%, 22% { opacity: 1; translate: 0 0; } 25%, 100% { opacity: 0; translate: 0 -.5em; } }
@keyframes vgLpk { 0%, 100% { background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); } 3%, 22% { background: #f1fbc9; box-shadow: 0 0 0 .14em #a3c700; } 25% { background: #fff; box-shadow: 0 0 0 1px rgba(10, 10, 10, .06); } }
@keyframes vgLpc { 0% { opacity: 0; translate: .9em .9em; scale: 1; } 2% { opacity: 1; translate: 0 0; } 4% { scale: .8; } 6% { scale: 1; } 21% { opacity: 1; translate: 0 0; } 24%, 100% { opacity: 0; translate: .4em .5em; } }
/* 움직임 줄이기 — 다 나타난 완성 상태로 멈춘다(커서 · 돌아가는 글의 둘째부터는 숨김) */
@media (prefers-reduced-motion: reduce) {
  .ft-fl, .vg [class*="a-"], .vg .vg-cyc > span, .vg .vg-strike::after, .vg .vg-cur::after, .vg .vg-mq__t, .vg .vg-lpk, .vg .vg-lpk__c { animation: none !important; }
  .vg .vg-lpk--1 { background: #f1fbc9; box-shadow: 0 0 0 .14em #a3c700; }
  .vg .a-sw { background: #a3c700; }
  .vg .a-sw::after { translate: .95em 0; }
  .vg .vg-strike::after { scale: 1 1; }
  .vg .vg-cur, .vg .vg-cyc > span:not(:first-child) { display: none; }
  .vg-sq, .vg-sq::after { animation: none; }
  .vg .a-pop { outline-color: transparent; }
  .ft-btn, .ft-dock, .ft-stk__n, .ft-stk__n::before { transition: none; }
}
/* ══════════════════ 짜임이 다른 장면 다섯(2026-10-21) — 기본 모양 = 다 된 모습(움직임 줄이기) · 움직임은 a-… 한 바퀴 4.5초 ══════════════════ */
/* 부채 — 가운데 손님 · 양쪽 아래로 날아가 기울어 앉는 카드 둘 */
.vg-fan { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; justify-items: center; gap: .7em .5em; width: 100%; max-width: 17em; }
.vg-fan__c { grid-column: 1 / -1; display: flex; align-items: center; gap: .5em; padding: .45em .9em .45em .45em; border-radius: 999px; background: #0a0a0a; color: #fff; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 .3em rgba(200, 240, 0, .25); }
.vg-fan__c .vg-ic { width: 1.9em; height: 1.9em; }
.vg-fan__l, .vg-fan__r { display: flex; flex-direction: column; width: 100%; padding: .5em; border-radius: .9em; text-align: left; box-shadow: 0 .8em 1.6em -1em rgba(10, 10, 10, .45); }
/* 왼쪽 = 카카오톡 대화창 바탕 · 오른쪽 = 텔레그램 대화창 바탕 — 안의 말풍선이 그 앱 모양 */
.vg-fan__l { background: #b2c7d9; rotate: -5deg; }
.vg-fan__r { gap: .35em; padding: 0 0 .45em; background: #cfe0b8; rotate: 5deg; font-size: .78em; overflow: hidden; }
.vg-fan__r .vg-tg { max-width: none; margin: 0 .5em 0 .9em; }
.vg-fan__r .vg-tg__kb { width: auto; margin: 0 .5em 0 .9em; }
/* 텔레그램 대화창 머리 — 봇 이름 줄(빈 바탕이 남지 않게) */
.vg-tgh { display: flex; align-items: center; gap: .35em; padding: .4em .6em; background: #fff; font-size: .85em; }
.vg-tgh i { width: 1.4em; height: 1.4em; border-radius: 50%; background: #2aabee; }
.vg-tgh b { font-weight: 800; }
.vg-tgh em { margin-left: auto; font-style: normal; font-size: .8em; color: #8a8b82; }
/* 양쪽 다 텔레그램(받는 사람마다 다른 소식) — 위에 받는 사람 이름표 */
.vg-fan--tg .vg-fan__l { background: #cfe0b8; font-size: .78em; gap: .35em; }
.vg-fan__who { align-self: flex-start; padding: .2em .6em; border-radius: 999px; background: #0a0a0a; color: var(--lime); font-size: .8em; font-weight: 800; }
.vg-fan__l .vg-tg, .vg-fan--tg .vg-fan__r .vg-tg { max-width: none; margin: 0 0 0 .4em; }
.vg-fan--tg .vg-fan__r { padding: .5em; justify-content: flex-start; }
/* 운영 보고 줄(rail) 장면 — 텔레그램 창 · 말풍선이 판에 비해 작았다 */
/* 라임 마디(운영 보고 줄)의 장면 판은 검정 — 라임 바탕 위에서 판이 또렷하게(사용자 2026-10-21) */
.ft-sec--rail.sec--brand .vg { background: #0a0a0a; }
.ft-sec--rail.sec--brand .vg-bub--k { background: var(--lime); color: #0a0a0a; }
.ft-sec--rail.sec--brand .vg-row--btn { background: var(--lime); color: #0a0a0a; }
.ft-sec--rail.sec--brand .vg-row--btn .vg-ic { background: #0a0a0a; color: var(--lime); }
.ft-rail__it .vg-tgc { font-size: .98em; }
/* 채팅 창 — 내가 보낸 말은 검정 말풍선 · 창이 판 안에 다 들어오게 */
.vg-win .vg-bub--r { background: #0a0a0a; color: #fff; }
.ft-rail__it .vg-win { font-size: .9em; }
.ft-rail__it .vg-fan--tg { font-size: 1.22em; max-width: 19em; }
/* 카카오 알림톡 말풍선 */
.vg-kk { display: grid; gap: .2em; font-size: .78em; }
.vg-kk__who { display: flex; align-items: center; gap: .3em; font-size: .8em; font-weight: 700; color: #3c4a56; }
.vg-kk__who i { width: 1.3em; height: 1.3em; border-radius: .45em; background: #0a0a0a; }
.vg-kk__b { border-radius: .2em .8em .8em .8em; background: #fff; overflow: hidden; }
.vg-kk__h { display: block; padding: .3em .6em; background: #fee500; color: #191600; font-size: .78em; font-weight: 800; }
.vg-kk__in { display: grid; gap: .15em; padding: .45em .6em .55em; }
.vg-kk__in b { font-size: .95em; font-weight: 800; }
.vg-kk__in > span { font-size: .8em; line-height: 1.4; color: #444; }
.vg-kk__btn { margin-top: .25em; padding: .35em; border-radius: .35em; background: #f2f2f2; font-style: normal; font-size: .78em; font-weight: 800; text-align: center; }
.a-fanc { animation-name: vgFanC; }
.a-fanl { animation-name: vgFanL; }
.a-fanr { animation-name: vgFanR; }
@keyframes vgFanC { 0% { opacity: 0; scale: .4; } 10% { opacity: 1; scale: 1.08; box-shadow: 0 0 0 .9em rgba(200, 240, 0, 0); } 16%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes vgFanL { 0%, 16% { opacity: 0; translate: 52% -95%; scale: .3; rotate: 0deg; } 34% { opacity: 1; translate: 0 0; scale: 1; rotate: -5deg; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vgFanR { 0%, 30% { opacity: 0; translate: -52% -95%; scale: .3; rotate: 0deg; } 48% { opacity: 1; translate: 0 0; scale: 1; rotate: 5deg; } 92% { opacity: 1; } 100% { opacity: 0; } }
/* 본인확인 화면 — 앱 화면 한 장 · 통신사 → 정보 → 인증번호 → 완료가 옆으로 넘어간다(위 점 넷이 지금 단계) */
.vg-pass { display: flex; flex-direction: column; width: 14em; border-radius: 1.1em; background: #fff; overflow: hidden; box-shadow: 0 1em 2em -1.2em rgba(10, 10, 10, .55); text-align: left; }
.vg-pass__bar { display: flex; align-items: center; gap: .45em; padding: .6em .8em; border-bottom: 1px solid #efefea; }
.vg-pass__bar > b { padding: .12em .45em; border-radius: .35em; background: #e8202a; color: #fff; font-size: .72em; font-weight: 900; letter-spacing: .02em; }
.vg-pass__bar > span { font-size: .8em; font-weight: 800; }
.vg-pass__dots { display: flex; gap: .25em; margin-left: auto; }
.vg-pass__dots i { width: .4em; height: .4em; border-radius: 50%; background: #e8202a; }
.vg-pass__vp { overflow: hidden; }
.vg-pass__tr { display: flex; width: 400%; translate: -75% 0; }
.vg-pass__p { flex: 0 0 25%; display: flex; flex-direction: column; gap: .3em; min-height: 7.6em; padding: .6em .8em .7em; }
.vg-pass__q { font-style: normal; font-size: .8em; font-weight: 800; color: #17170f; }
.vg-pass__car { display: grid; grid-template-columns: 1fr 1fr; gap: .35em; }
.vg-pass__car i { display: grid; place-items: center; height: 2.2em; border-radius: .55em; box-shadow: inset 0 0 0 1px #e1e2da; font-style: normal; font-size: .82em; font-weight: 800; }
.vg-pass__car i.a-passk { box-shadow: inset 0 0 0 .14em #e8202a; color: #e8202a; }
.vg-pass__f { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; padding: .35em .55em; border-radius: .5em; background: #f4f4f0; }
.vg-pass__f em { font-style: normal; font-size: .6em; font-weight: 700; color: #8a8b82; }
.vg-pass__f b { font-size: .8em; font-weight: 800; white-space: nowrap; }
.vg-pass__otp { display: flex; gap: .25em; }
.vg-pass__otp i { flex: 1; display: grid; place-items: center; height: 2.2em; border-radius: .45em; box-shadow: inset 0 0 0 1px #e1e2da; font-style: normal; }
.vg-pass__otp b { font-size: .95em; font-weight: 900; }
.vg-pass__otp i:nth-child(2) b { animation-delay: .1s; } .vg-pass__otp i:nth-child(3) b { animation-delay: .2s; } .vg-pass__otp i:nth-child(4) b { animation-delay: .3s; }
.vg-pass__otp i:nth-child(5) b { animation-delay: .4s; } .vg-pass__otp i:nth-child(6) b { animation-delay: .5s; }
.vg-pass__p--ok { align-items: center; justify-content: center; text-align: center; }
.vg-pass__p--ok > b { font-size: .9em; font-weight: 900; }
.vg-pass__ck { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--lime); }
.vg-pass__ck svg { width: 1.3em; height: 1.3em; fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vg-pass__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .25em; }
.vg-pass__chips em { display: inline-flex; align-items: center; height: 1.9em; padding: 0 .65em; line-height: 1; border-radius: 999px; background: #0a0a0a; color: var(--lime); font-style: normal; font-size: .62em; font-weight: 800; white-space: nowrap; }
.a-passt { animation-name: vgPassT; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.a-passk { animation-name: vgPassK; }
.a-passf { animation-name: vgPassF; }
.vg-pass__f:nth-child(3) { animation-delay: .15s; } .vg-pass__f:nth-child(4) { animation-delay: .3s; }
.a-passd { animation-name: vgPassD; }
.a-passc { animation-name: vgPassC; }
.a-pdot1 { animation-name: vgPDot1; } .a-pdot2 { animation-name: vgPDot2; } .a-pdot3 { animation-name: vgPDot3; } .a-pdot4 { animation-name: vgPDot4; }
@keyframes vgPassT { 0%, 20% { translate: 0 0; opacity: 1; } 25%, 43% { translate: -25% 0; } 48%, 66% { translate: -50% 0; } 71%, 94% { translate: -75% 0; opacity: 1; } 100% { translate: -75% 0; opacity: 0; } }
@keyframes vgPassK { 0%, 9% { box-shadow: inset 0 0 0 1px #e1e2da; color: #17170f; scale: 1; } 12% { scale: .92; } 15%, 100% { box-shadow: inset 0 0 0 .14em #e8202a; color: #e8202a; scale: 1; } }
@keyframes vgPassF { 0%, 26% { opacity: 0; translate: .6em 0; } 32%, 100% { opacity: 1; translate: 0 0; } }
@keyframes vgPassD { 0%, 50% { opacity: 0; scale: .3; } 55%, 100% { opacity: 1; scale: 1; } }
@keyframes vgPassC { 0%, 72% { opacity: 0; scale: .3; } 78% { opacity: 1; scale: 1.15; } 82%, 100% { opacity: 1; scale: 1; } }
@keyframes vgPDot1 { 0%, 22% { opacity: 1; } 23%, 100% { opacity: .25; } }
@keyframes vgPDot2 { 0%, 22% { opacity: .25; } 23%, 45% { opacity: 1; } 46%, 100% { opacity: .25; } }
@keyframes vgPDot3 { 0%, 45% { opacity: .25; } 46%, 68% { opacity: 1; } 69%, 100% { opacity: .25; } }
@keyframes vgPDot4 { 0%, 68% { opacity: .25; } 69%, 100% { opacity: 1; } }
/* 봉투 — 덮개가 열리고 편지가 오른 뒤 아래 칸에 한 자씩 · 다 차면 칸 줄이 라임으로 */
.vg-env { display: flex; flex-direction: column; align-items: center; gap: .8em; }
.vg-env__box { position: relative; width: 8.4em; height: 5.2em; margin-top: 2.4em; perspective: 30em; }
.vg-env__back { position: absolute; inset: 0; border-radius: .5em; background: #c9cbbf; }
.vg-env__lt { position: absolute; left: 8%; right: 8%; top: 10%; height: 85%; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: .45em; border-radius: .35em; background: #fff; translate: 0 -2.5em; box-shadow: 0 .3em .8em -.4em rgba(10, 10, 10, .4); }
.vg-env__lt em { font-style: normal; font-size: .66em; font-weight: 700; color: #7a7b72; }
.vg-env__lt b { font-size: 1.15em; font-weight: 900; letter-spacing: .04em; }
.vg-env__front { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; border-radius: 0 0 .5em .5em; background: #e3e5da; clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%); }
.vg-env__flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 0; background: #b9bbae; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: rotateX(180deg); }
.vg-otp { display: flex; gap: .3em; padding: .3em; border-radius: .7em; box-shadow: 0 0 0 .15em var(--lime); }
.vg-otp i { display: grid; place-items: center; width: 1.6em; height: 2em; border-radius: .4em; background: #fff; font-style: normal; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .12); }
.vg-otp b { font-size: 1em; font-weight: 900; }
.vg-otp i:nth-child(2) b { animation-delay: .1s; } .vg-otp i:nth-child(3) b { animation-delay: .2s; } .vg-otp i:nth-child(4) b { animation-delay: .3s; }
.vg-otp i:nth-child(5) b { animation-delay: .4s; } .vg-otp i:nth-child(6) b { animation-delay: .5s; }
.a-envf { animation-name: vgEnvF; }
.a-envl { animation-name: vgEnvL; }
.a-otp { animation-name: vgOtp; }
.a-otpok { animation-name: vgOtpOk; }
@keyframes vgEnvF { 0%, 6% { transform: rotateX(0deg); z-index: 3; } 20% { transform: rotateX(180deg); z-index: 0; } 92% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg); } }
@keyframes vgEnvL { 0%, 20% { translate: 0 0; } 38%, 92% { translate: 0 -2.5em; } 100% { translate: 0 0; } }
@keyframes vgOtp { 0%, 44% { opacity: 0; scale: .3; } 50%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes vgOtpOk { 0%, 62% { box-shadow: 0 0 0 .15em transparent; } 68%, 92% { box-shadow: 0 0 0 .15em var(--lime), 0 0 1.2em rgba(200, 240, 0, .5); } 100% { box-shadow: 0 0 0 .15em transparent; } }
/* 카드 더미 — 맨 위 카드에 도장 · 옆으로 넘기면 뒤 카드가 한 칸씩 올라온다 */
.vg-deck { position: relative; width: 13.5em; height: 5.6em; }
.vg-deck__c { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: .6em; padding: .7em .8em; border-radius: 1em; background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(10, 10, 10, .45); }
.vg-deck__c--1 { z-index: 3; }
.vg-deck__c--2 { z-index: 2; translate: 0 1em; scale: .93; }
.vg-deck__c--3 { z-index: 1; translate: 0 2em; scale: .86; opacity: .7; }
.vg-deck__av { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #ebece3; color: #45463e; }
.vg-deck__av svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vg-deck__t { display: grid; text-align: left; }
.vg-deck__t b { font-size: 1em; font-weight: 800; }
.vg-deck__t em { font-style: normal; font-size: .76em; color: #7a7b72; }
.vg-deck__st { position: absolute; right: .7em; top: 50%; translate: 0 -50%; padding: .25em .7em; font-size: 1.05em; border: .14em solid #6f8f00; border-radius: .4em; color: #4d6600; background: rgba(200, 240, 0, .35); font-weight: 900; rotate: -10deg; }
.a-deck1 { animation-name: vgDeck1; }
.a-deck2 { animation-name: vgDeck2; }
.a-deck3 { animation-name: vgDeck3; }
.a-deckst { animation-name: vgDeckSt; }
@keyframes vgDeck1 { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 6%, 34% { opacity: 1; translate: 0 0; rotate: 0deg; } 52%, 100% { opacity: 0; translate: 135% -.5em; rotate: 16deg; } }
@keyframes vgDeckSt { 0%, 16% { opacity: 0; scale: 1.8; } 24%, 100% { opacity: 1; scale: 1; } }
@keyframes vgDeck2 { 0%, 40% { translate: 0 1em; scale: .93; } 56%, 92% { translate: 0 0; scale: 1; } 100% { translate: 0 1em; scale: .93; } }
@keyframes vgDeck3 { 0%, 40% { translate: 0 2em; scale: .86; opacity: .7; } 56%, 92% { translate: 0 1em; scale: .93; opacity: 1; } 100% { translate: 0 2em; scale: .86; opacity: .7; } }
/* 약관 화면 — 탭 둘(이용약관 → 개인정보처리방침) · 조항 글이 스크롤 · 동의 줄 셋이 하나씩 체크 · 단추가 켜진다 */
.vg-doc { display: flex; flex-direction: column; gap: .4em; width: 14em; padding: .7em .8em .8em; border-radius: 1em; background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(10, 10, 10, .45); text-align: left; }
.vg-doc__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #ecece6; }
.vg-doc__tabs b { padding: .1em 0 .35em; font-size: .74em; font-weight: 800; text-align: center; color: #9a9b92; }
.vg-doc__tabs b:nth-child(2) { color: #17170f; }
.vg-doc__tabs i { position: absolute; left: 50%; bottom: -1px; width: 50%; height: .14em; background: #0a0a0a; }
.vg-doc__vp { position: relative; height: 3.3em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.vg-doc__ls { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: .26em; }
.vg-doc__ls b { margin-top: .15em; font-size: .62em; font-weight: 800; color: #17170f; }
.vg-doc__ls i { display: block; height: .26em; border-radius: .2em; background: #e6e7de; }
.vg-doc__ls i:nth-of-type(2n) { width: 76%; }
.vg-doc__ls.a-docs1 { opacity: 0; }
.vg-doc__ag { display: flex; align-items: center; gap: .4em; font-size: .7em; font-weight: 800; white-space: nowrap; }
.vg-doc__ag em { margin-left: auto; font-style: normal; font-size: .9em; font-weight: 700; color: #8a8b82; }
.vg-doc__cb { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: .35em; background: var(--lime); box-shadow: inset 0 0 0 .12em #0a0a0a; }
.vg-doc__cb svg { width: 1em; height: 1em; fill: none; stroke: #0a0a0a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.vg-doc__cb path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vg-doc__bt { display: grid; place-items: center; height: 2.1em; margin-top: .1em; border-radius: .6em; background: #0a0a0a; color: var(--lime); font-size: .82em; font-weight: 900; }
.a-doct1 { animation-name: vgDocT1; } .a-doct2 { animation-name: vgDocT2; } .a-docu { animation-name: vgDocU; }
.a-docs1 { animation-name: vgDocS1; animation-timing-function: ease-in-out; } .a-docs2 { animation-name: vgDocS2; animation-timing-function: ease-in-out; }
.a-docc1 { animation-name: vgDocC; } .a-docc2 { animation-name: vgDocC; animation-delay: .35s; } .a-docc3 { animation-name: vgDocC; animation-delay: .7s; }
.a-docc1 path, .a-docc2 path, .a-docc3 path { animation: vgDocK 4.5s infinite both; animation-delay: inherit; animation-play-state: inherit; }
.a-docb { animation-name: vgDocB; }
@keyframes vgDocT1 { 0%, 30% { color: #17170f; } 34%, 92% { color: #9a9b92; } 100% { color: #17170f; } }
@keyframes vgDocT2 { 0%, 30% { color: #9a9b92; } 34%, 92% { color: #17170f; } 100% { color: #9a9b92; } }
@keyframes vgDocU { 0%, 30% { left: 0; } 36%, 92% { left: 50%; } 100% { left: 0; } }
@keyframes vgDocS1 { 0% { opacity: 1; translate: 0 0; } 28% { opacity: 1; translate: 0 -2.4em; } 32%, 100% { opacity: 0; translate: 0 -2.4em; } }
@keyframes vgDocS2 { 0%, 31% { opacity: 0; translate: 0 0; } 35% { opacity: 1; translate: 0 0; } 56%, 92% { opacity: 1; translate: 0 -2.4em; } 100% { opacity: 0; } }
@keyframes vgDocC { 0%, 56% { background: #fff; scale: 1; } 59% { scale: .82; } 62%, 92% { background: var(--lime); scale: 1; } 100% { background: #fff; } }
@keyframes vgDocK { 0%, 58% { stroke-dashoffset: 1; } 66%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes vgDocB { 0%, 78% { background: #dcddd4; color: #8a8b82; } 83%, 94% { background: #0a0a0a; color: var(--lime); } 100% { background: #dcddd4; color: #8a8b82; } }
/* 용어집 — 견주기: 원문 → 자동 번역(틀린 낱말에 빨간 줄) → 용어집 규칙 → 정해 둔 말로 바뀐 번역 */
.vg-gloss { display: flex; flex-direction: column; gap: .3em; width: 15em; }
.vg-gloss__ln { display: flex; align-items: center; gap: .45em; padding: .45em .6em; border-radius: .7em; background: #fff; text-align: left; box-shadow: 0 .4em 1em -.7em rgba(10, 10, 10, .4); }
.vg-gloss__ln u { flex: none; width: 4.6em; white-space: nowrap; text-decoration: none; font-size: .62em; font-weight: 800; color: #8a8b82; }
.vg-gloss__ln b { font-size: .85em; font-weight: 800; white-space: nowrap; }
.vg-gloss__ln--auto b { color: #6b6c66; }
.vg-gloss__ln s { position: relative; text-decoration: none; color: #c03b3f; }
.vg-gloss__ln s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .13em; border-radius: 2px; background: #e5484d; transform-origin: left; }
.vg-gloss__rule { display: flex; align-items: center; justify-content: center; gap: .35em; padding: .35em .6em; border-radius: 999px; background: #0a0a0a; color: #d9dbd0; font-size: .74em; font-weight: 700; white-space: nowrap; }
.vg-gloss__rule svg { width: 1em; height: 1em; fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vg-gloss__rule b { color: var(--lime); font-weight: 900; }
.vg-gloss__ln--ok { box-shadow: inset 0 0 0 .14em var(--lime), 0 .4em 1em -.7em rgba(10, 10, 10, .4); }
.vg-gloss__ln--ok u { color: #4d6600; }
.vg-gloss__ln mark { padding: 0 .2em; border-radius: .25em; background: var(--lime); color: #0a0a0a; }
.a-gl1 { animation-name: vgGl1; } .a-gl2 { animation-name: vgGl2; } .a-gl3 { animation-name: vgGl3; } .a-gl4 { animation-name: vgGl4; }
.a-gls { animation-name: vgGlS; }
.a-gls::after { animation: vgGlSL 4.5s infinite both; animation-play-state: inherit; }
@keyframes vgGl1 { 0% { opacity: 0; translate: 0 .5em; } 6%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes vgGl2 { 0%, 12% { opacity: 0; translate: 0 .5em; } 20%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes vgGlS { 0%, 100% { color: #c03b3f; } }
@keyframes vgGlSL { 0%, 28% { scale: 0 1; } 36%, 92% { scale: 1 1; } 100% { scale: 0 1; } }
@keyframes vgGl3 { 0%, 40% { opacity: 0; scale: .7; } 48% { opacity: 1; scale: 1.08; } 52%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes vgGl4 { 0%, 58% { opacity: 0; translate: 0 .5em; } 66%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
/* 막대 — 달마다 차례로 솟고 이번 달은 라임 · 점선 = 무료 한도 */
.vg-meter { display: flex; flex-direction: column; gap: .5em; width: 13em; padding: .8em .9em; border-radius: 1em; background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(10, 10, 10, .4); text-align: left; }
.vg-meter__h { display: flex; align-items: baseline; justify-content: space-between; }
.vg-meter__h em { font-style: normal; font-size: .72em; font-weight: 700; color: #7a7b72; }
.vg-meter__h b { font-size: 1.2em; font-weight: 900; }
.vg-meter__b { position: relative; display: flex; align-items: flex-end; gap: .45em; height: 5em; padding-top: 1.3em; border-bottom: 1px solid #e4e5dc; }
.vg-meter__b i { flex: 1; border-radius: .3em .3em 0 0; background: #d9dbd0; transform-origin: 50% 100%; }
.vg-meter__b i.is-now { background: var(--lime); }
.vg-meter__b i.h20 { height: 20%; } .vg-meter__b i.h30 { height: 30%; } .vg-meter__b i.h40 { height: 40%; } .vg-meter__b i.h50 { height: 50%; }
.vg-meter__b i.h60 { height: 60%; } .vg-meter__b i.h70 { height: 70%; } .vg-meter__b i.h80 { height: 80%; } .vg-meter__b i.h90 { height: 90%; } .vg-meter__b i.h100 { height: 100%; }
/* 점선 = 무료 한도 · 글은 점선 위에(막대와 안 겹치게) */
.vg-meter__b u { position: absolute; left: 0; right: 0; top: 1.1em; display: flex; justify-content: flex-end; align-items: flex-end; height: 0; border-top: .12em dashed #b9bbae; text-decoration: none; font-size: .58em; font-weight: 700; line-height: 1.3; color: #8a8b82; }
.a-bar1 { animation-name: vgBar; } .a-bar2 { animation-name: vgBar; animation-delay: .12s; } .a-bar3 { animation-name: vgBar; animation-delay: .24s; }
.a-bar4 { animation-name: vgBar; animation-delay: .36s; } .a-bar5 { animation-name: vgBar; animation-delay: .48s; } .a-bar6 { animation-name: vgBar; animation-delay: .7s; }
@keyframes vgBar { 0%, 6% { transform: scaleY(0); } 22%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
/* 바로 연결 단추 목록 — 실제 사이트 목록(아이콘 · 이름 · 꺾쇠) · 아홉 줄이 위로 흐르고 · 아래 가운데 상담 단추가 눌린다 */
.vg-ctl { position: relative; display: flex; flex-direction: column; align-items: center; width: 14em; }
.vg-ctl__p { width: 100%; height: 9.6em; padding: 0 .5em; border-radius: 1.1em; background: #fff; overflow: hidden; box-shadow: 0 .9em 1.8em -1.1em rgba(10, 10, 10, .45);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); }
.vg-ctl__tr { display: flex; flex-direction: column; animation: vgCtlUp 13s linear infinite; animation-play-state: paused; }
.vg.is-on .vg-ctl__tr { animation-play-state: running; }
.vg-ctl__r { display: flex; align-items: center; gap: .55em; padding: .45em .2em; border-bottom: 1px solid #f0f0eb; text-align: left; }
.vg-ctl__r .vg-ic { width: 1.85em; height: 1.85em; border-radius: .55em; }
.vg-ctl__t { display: grid; min-width: 0; flex: 1; }
.vg-ctl__t b { font-size: .82em; font-weight: 800; white-space: nowrap; }
.vg-ctl__t em { font-style: normal; font-size: .64em; color: #8a8b82; }
.vg-ctl__r > i { font-style: normal; font-weight: 700; color: #b9bbae; }
.vg-ctl__fab { display: grid; place-items: center; width: 2.8em; height: 2.8em; margin-top: -1.4em; border-radius: 50%; background: var(--lime); box-shadow: 0 .6em 1.2em -.5em rgba(10, 10, 10, .5), 0 0 0 .25em #fff; }
.vg-ctl__fab svg { width: 1.3em; height: 1.3em; fill: none; stroke: #0a0a0a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a-ctlf { animation-name: vgCtlF; }
@keyframes vgCtlUp { to { translate: 0 -50%; } }
@keyframes vgCtlF { 0%, 70% { scale: 1; } 75% { scale: .86; } 82%, 100% { scale: 1; } }
.vg-ic--tel { background: #1fa463; }
.vg-ic--sms { background: #3ccf5a; }
.vg-ic--mail { background: #475569; }
@media (prefers-reduced-motion: reduce) { .vg-ctl__tr { animation: none; } }
/* 한곳 받은함 — 왼쪽 메신저에서 문의가 오른쪽 목록으로 하나씩 들어와 쌓인다 */
.vg-inbox { display: flex; align-items: center; gap: .45em; }
.vg-inbox__s { display: grid; gap: .3em; }
.vg-inbox__s i { font-style: normal; }
.vg-inbox__s .vg-ic { width: 1.8em; height: 1.8em; border-radius: 50%; }
.vg-inbox__ar { font-weight: 900; color: #8fb800; }
.vg-inbox__l { display: grid; gap: .22em; width: 11.5em; padding: .55em; border-radius: .9em; background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(10, 10, 10, .4); text-align: left; }
.vg-inbox__h { display: flex; align-items: center; justify-content: space-between; font-size: .74em; font-weight: 800; }
/* 아래 숫자 줄 — 단추만 누른 손님 · 실제로 메시지를 보낸 손님(라임 · 들어올 때 튄다) */
.vg-inbox__f { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; }
.vg-inbox__f > span { display: flex; align-items: baseline; justify-content: space-between; gap: .3em; padding: .3em .45em; border-radius: .5em; background: #f4f4f0; }
.vg-inbox__f > span.is-on { background: #0a0a0a; color: var(--lime); }
.vg-inbox__f em { font-style: normal; font-size: .6em; font-weight: 700; color: #8a8b82; white-space: nowrap; }
.vg-inbox__f .is-on em { color: #d9dbd0; }
.vg-inbox__f b { font-size: .85em; font-weight: 900; }
.vg-inbox__r { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .4em; align-items: center; padding: .22em .4em; border-radius: .55em; background: #f4f4f0; }
.vg-inbox__r .vg-ic { grid-row: span 2; width: 1.5em; height: 1.5em; border-radius: 50%; }
.vg-inbox__r b { font-size: .72em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-inbox__r em { font-style: normal; font-size: .6em; color: #8a8b82; }
.a-inb1 { animation-name: vgInb; } .a-inb2 { animation-name: vgInb; animation-delay: .5s; } .a-inb3 { animation-name: vgInb; animation-delay: 1s; }
.a-inbn { animation-name: vgInbN; }
@keyframes vgInb { 0%, 8% { opacity: 0; translate: -3em 0; scale: .7; } 20%, 92% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
@keyframes vgInbN { 0%, 16% { scale: 1; } 20% { scale: 1.4; } 26%, 38% { scale: 1; } 42% { scale: 1.4; } 48%, 60% { scale: 1; } 64% { scale: 1.4; } 70%, 100% { scale: 1; } }
/* 셋이 갈마듦 — 한국어 · 영어 · 일본어 페이지가 차례로 바뀌고 상담 단추도 그 나라 메신저로 */
.vg-tri { position: relative; display: grid; width: 13em; }
.vg-tri__s { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .45em; padding: .7em; border-radius: 1em; background: #fff; box-shadow: 0 .8em 1.6em -1em rgba(10, 10, 10, .4); text-align: left; opacity: 0; }
.vg-tri__s:last-child { opacity: 1; }
.vg-tri__bar { display: flex; align-items: center; gap: .4em; padding-bottom: .4em; border-bottom: 1px solid #ecece6; font-size: .8em; }
.vg-tri__bar b { font-weight: 800; }
.vg-tri__ln { display: grid; gap: .3em; }
.vg-tri__ln i { display: block; height: .3em; border-radius: .2em; background: #e6e7de; }
.vg-tri__ln i:nth-child(2) { width: 80%; } .vg-tri__ln i:nth-child(3) { width: 60%; }
.vg-tri__btn { align-self: flex-end; display: flex; align-items: center; gap: .3em; height: 2em; padding: 0 .7em 0 .25em; border-radius: 999px; background: #0a0a0a; color: #fff; font-size: .8em; font-weight: 800; }
.vg-tri__btn .vg-ic { width: 1.55em; height: 1.55em; border-radius: 50%; }
.a-tri1 { animation-name: vgTri1; } .a-tri2 { animation-name: vgTri2; } .a-tri3 { animation-name: vgTri3; }
@keyframes vgTri1 { 0% { opacity: 0; scale: .96; } 5%, 30% { opacity: 1; scale: 1; } 35%, 100% { opacity: 0; scale: .96; } }
@keyframes vgTri2 { 0%, 31% { opacity: 0; scale: .96; } 36%, 63% { opacity: 1; scale: 1; } 68%, 100% { opacity: 0; scale: .96; } }
@keyframes vgTri3 { 0%, 64% { opacity: 0; scale: .96; } 69%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
/* 번역 · 상담 칸의 장면은 판에 비해 작았다 — 크게(사용자 2026-10-21 「영상 내부 요소들이 컸으면」) */
.vg-gloss { font-size: 1.18em; }
.vg-meter { font-size: 1.3em; }
.vg-ctl { font-size: 1.15em; }
.vg-tri { font-size: 1.4em; }
.vg-inbox { font-size: 1.05em; }
/* 전달 — 손님이 문의를 보내면 신호 점이 점선을 타고 내려가 텔레그램 알림이 떨며 도착 · 옆에 걸린 시간 */
.vg-relay { display: flex; flex-direction: column; align-items: center; width: 14.5em; }
.vg-relay__src { display: grid; gap: .3em; width: 11em; padding: .55em .6em .6em; border-radius: .9em; background: #fff; text-align: left; box-shadow: 0 .6em 1.4em -.9em rgba(0, 0, 0, .6); }
.vg-relay__h { font-size: .7em; font-weight: 800; color: #17170f; }
.vg-relay__src > i { display: flex; justify-content: space-between; gap: .4em; padding: .25em .45em; border-radius: .4em; background: #f4f4f0; font-style: normal; }
.vg-relay__src > i em { font-style: normal; font-size: .58em; font-weight: 700; color: #8a8b82; }
.vg-relay__src > i b { font-size: .64em; font-weight: 800; white-space: nowrap; }
.vg-relay__btn { display: grid; height: 1.8em; border-radius: .5em; background: #0a0a0a; overflow: hidden; }
.vg-relay__btn b { grid-area: 1 / 1; display: grid; place-items: center; font-size: .72em; font-weight: 900; color: var(--lime); }
.vg-relay__btn b:last-child { background: var(--lime); color: #0a0a0a; }
.vg-relay__path { position: relative; width: 0; height: 2.1em; border-left: .12em dashed transparent; }
.vg-relay__path i { position: absolute; left: -.38em; top: 100%; width: .64em; height: .64em; border-radius: 50%; background: var(--lime); box-shadow: 0 0 .8em var(--lime); }
.vg-relay__path u { position: absolute; left: .7em; top: 50%; translate: 0 -50%; padding: .2em .55em; border-radius: 999px; background: var(--lime); color: #0a0a0a; text-decoration: none; font-size: .66em; font-weight: 900; white-space: nowrap; }
.vg-relay__dst { width: 100%; font-size: .9em; }
.vg-relay__dst .vg-tg { max-width: none; margin-left: .45em; }
.a-rls { animation-name: vgRlS; } .a-rlb1 { animation-name: vgRlB1; } .a-rlb2 { animation-name: vgRlB2; }
.a-rld { animation-name: vgRlD; animation-timing-function: cubic-bezier(.5, 0, .5, 1); } .a-rlc { animation-name: vgRlC; } .a-rlp { animation-name: vgRlP; } .a-rlt { animation-name: vgRlT; }
@keyframes vgRlS { 0% { opacity: 0; translate: 0 .6em; } 8%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
@keyframes vgRlB1 { 0%, 14% { opacity: 1; scale: 1; } 16% { scale: .9; } 19%, 100% { opacity: 0; scale: 1; } }
@keyframes vgRlB2 { 0%, 18% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes vgRlD { 0%, 20% { opacity: 0; top: 0; } 22% { opacity: 1; top: 0; } 40% { opacity: 1; top: 100%; } 44%, 100% { opacity: 0; top: 100%; } }
@keyframes vgRlT { 0%, 40% { opacity: 0; translate: 0 -.5em; rotate: 0deg; } 44% { opacity: 1; translate: 0 0; } 46% { rotate: -2.5deg; } 48% { rotate: 2.5deg; } 50% { rotate: -1.5deg; } 52%, 92% { opacity: 1; rotate: 0deg; } 100% { opacity: 0; } }
@keyframes vgRlP { 0%, 20% { border-left-color: transparent; } 23%, 40% { border-left-color: rgba(200, 240, 0, .55); } 46%, 100% { border-left-color: transparent; } }
@keyframes vgRlC { 0%, 46% { opacity: 0; scale: .6; } 52% { opacity: 1; scale: 1.1; } 56%, 92% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
/* 주기 — 세 칸 고르개(라임 칸이 미끄러짐) · 달력에서 그 주기의 날만 켜짐 · 다음 보고가 바뀜 */
.vg-cad { display: flex; flex-direction: column; gap: .5em; width: 14em; padding: .7em; border-radius: 1em; background: #fff; text-align: left; box-shadow: 0 .6em 1.4em -.9em rgba(0, 0, 0, .6); }
.vg-cad__tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: .2em; border-radius: .7em; background: #f0f0eb; }
.vg-cad__tabs b { position: relative; z-index: 1; padding: .3em 0; font-size: .74em; font-weight: 800; text-align: center; }
.vg-cad__tabs i { position: absolute; left: .2em; top: .2em; bottom: .2em; width: calc((100% - .4em) / 3); border-radius: .55em; background: var(--lime); translate: 200% 0; box-shadow: 0 .2em .5em -.2em rgba(10, 10, 10, .35); }
.vg-cad__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15em .2em; }
.vg-cad__cal em { font-style: normal; font-size: .54em; font-weight: 700; color: #9a9b92; text-align: center; }
.vg-cad__cal em:first-child { color: #d14343; }
.vg-cad__cal span { position: relative; display: grid; place-items: center; height: 1.55em; }
.vg-cad__cal span b { position: relative; font-size: .64em; font-weight: 800; color: #45463e; }
.vg-cad__cal span i { position: absolute; inset: .05em; border-radius: .45em; background: var(--lime); box-shadow: inset 0 0 0 .1em #0a0a0a; opacity: 0; }
.vg-cad__ft { display: flex; align-items: center; gap: .45em; padding-top: .45em; border-top: 1px solid #ecece6; }
.vg-cad__ft u { padding: .2em .5em; border-radius: 999px; background: #0a0a0a; color: var(--lime); text-decoration: none; font-size: .64em; font-weight: 900; white-space: nowrap; }
.vg-cad__nt { display: grid; }
.vg-cad__nt b { grid-area: 1 / 1; font-size: .7em; font-weight: 800; white-space: nowrap; opacity: 0; }
.vg-cad__nt b:last-child { opacity: 1; }
.a-cdi { animation-name: vgCdI; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.a-cd1, .a-cn1 { animation-name: vgCd1; } .a-cd2, .a-cn2 { animation-name: vgCd2; } .a-cd3 { animation-name: vgCd3; } .a-cn3 { animation-name: vgCn3; }
.vg-cad__cal span i.a-cd3 { opacity: 1; }
@keyframes vgCdI { 0%, 28% { translate: 0 0; } 34%, 61% { translate: 100% 0; } 67%, 94% { translate: 200% 0; } 100% { translate: 0 0; } }
@keyframes vgCd1 { 0%, 3% { opacity: 0; scale: .6; } 8%, 29% { opacity: 1; scale: 1; } 33%, 100% { opacity: 0; } }
@keyframes vgCd2 { 0%, 34% { opacity: 0; scale: .6; } 40%, 62% { opacity: 1; scale: 1; } 66%, 100% { opacity: 0; } }
@keyframes vgCd3 { 0%, 67% { opacity: 0; scale: .6; } 73%, 94% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes vgCn3 { 0%, 67% { opacity: 0; } 73%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* 마디마다 좌우 끝을 자른다 — 오른쪽에서 들어오는 칸(up--r)이 등장 전 화면 밖으로 나가 휴대폰(특히 아이폰)에서 페이지가 옆으로 밀렸다(2026-10-21) · clip 이라 붙잡기(sticky)는 그대로 */
.ft-sec { overflow-x: clip; }
/* 휴대폰 — 첫 요약 칸 셋(13개 언어 · 간편 로그인 · 텔레그램)은 세로로 쌓지 않고 옆으로 민다(메인 AI 서비스 카드 줄 결 · 2026-10-21 사용자) */
@media (max-width: 599px) {
  .ft-tiles--big { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(50% - 50vw); padding: 4px var(--s5, 20px) 10px; scroll-padding-inline: var(--s5, 20px); }
  .ft-tiles--big::-webkit-scrollbar { display: none; }
  .ft-tiles--big > .ft-tile { flex: 0 0 84%; scroll-snap-align: start; }
  /* 회원 줄(rail) — 요약 줄과 같은 폭 · 칸이 좀 더 꽉 차게 */
  .ft-rail__track { gap: 12px; padding: 4px var(--edge) 6px; }
  .ft-rail__it { width: 78vw; max-width: 320px; }
  .ft-rail__it .vg { border-radius: 22px; }
  .ft-rail__it .vg__in { padding: 6% 7%; font-size: clamp(10px, 4.3cqw, 14px); }
  .ft-rail__it .vg-stack { gap: .42em; }
}