/* 안전인 위탁선임 랜딩(운영 /consign) · 2026-10-22
   🟣 연한 보라 판(10-22 대표 「쨍한 보라색 배경 말고 연한 보라색 그라데이션」): 흰색 → 연보라 잔잔한 그라데이션 + 위쪽 연보라 빛 · 진한 글자(#191F28) · 한 구절 보라(#4C00FF) ·
   흰 칸(연보라 테 · 연한 보라 그림자) · 보라 꽉 찬 단추 · 폰 = 흰 테 · 조각 = 화면 속 같은 픽셀에서 떠오름 · 로고 = 진한 글자 판(lockup-dark.svg).
   1. 바탕 · 공통 부품   2. 첫 화면   3. 판   3-0 비교 · 선정   3-0-1 혜택 고르기   3-1 함께 챙겨요   3-2 후기 · 질문   4. 마무리   5. 태블릿 · 휴대폰   5-1 PC 웹 창   6. 움직임 줄이기
   움직임(대표 「각 페이지마다 애니메이션 모션그래픽」): 첫 화면 들어오기 · 판마다 스크롤에 묶인 폰/창 올라옴 + 조각 떠오름 · 숫자 올라가기(300곳 · 평균 7건) ·
   사진 스크롤 당김 · 네 칸 부품 떠오름 · 별 채워짐 · 질문 차례로 · 로고 흐름. 11-03 더함(5-3): 제목 줄 떠오름 · 보라 낱말 칠해짐 · 선임 신고 체크 줄 ·
   견적 도착 + 지도 물결 · 공정 적힘 · 혜택 숫자 · 따라다니는 견적 단추. 번쩍임 · 발광 없음 · 되풀이는 화면 안에 있는 장면만(로고 띠 흐름은 키트 그대로). */

/* 글꼴 = 사이트 기본(Pretendard · var(--cm-font)) 하나. 스토어 이미지의 Paperlogy 는 쓰지 않음(10-22 대표 「폰트 일반적으로 · 기교 안 부려도 될듯」) */

/* ---- 1. 바탕 · 공통 ---------------------------------------------------------------- */
.ab-page { --v1: #4C00FF; --v2: #5D2AFF; --hl: #4C00FF; --ink: #191F28; --line: #ECE6FF; --sh: 0 18px 44px rgba(76, 0, 255, .10), 0 4px 12px rgba(76, 0, 255, .06); --bz: 5px; --ab-ease: cubic-bezier(.22, 1, .36, 1); }
/* 고정 헤더: 키트 기본 = 흰 78% + 흐림 → 보라 판이 비쳐 지금 메뉴 글자(#6929FF) 대비 4.07:1 → 이 페이지만 흰 바탕(10-22 재검증) */
.ab-page .cm-nav { background: #fff; }
/* 머리 [상담받기](11-02 대표 'CTA 상담받기는 어디갔냐') = [실시간 견적받기] 앞 보조 단추 · 메뉴가 빠듯한 폭에서는 뺌(떠 있는 단추에 늘 있음) */
.ab-page .min-hd__cta.cm-btn--weak { height: 40px; min-height: 40px; margin-right: 6px; padding: 0 14px; font-size: 14px; font-weight: 600; }
@media (max-width: 1099px) { .ab-page .min-hd__cta.cm-btn--weak { display: none; } }
.ab-page main { background: linear-gradient(180deg, #F3EEFF 0%, #FBF9FF 22%, #F5F1FF 48%, #FFFFFF 70%, #F1EBFF 100%); color: var(--ink); overflow-x: clip; }
.ab-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: max(var(--cm-gutter, 20px), var(--min-safe-l, 0px)); }
.ab-cap { margin: 0; font-family: var(--cm-font); font-weight: 700; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); word-break: keep-all; }
.ab-cap em { font-style: normal; color: var(--hl); }
.ab-nb { white-space: nowrap; }
.ab-cap .ab-nb { display: block; }   /* 제목은 어느 폭에서나 두 줄(스토어 문법) */
.ab-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.ab-chips li { display: inline-flex; align-items: center; height: 2.17em; padding: 0 .89em; border-radius: 999px; background: #fff; border: 1.5px solid #DCD2FF;
  font: 600 16px/1 var(--cm-font); letter-spacing: -0.01em; color: #4C00FF; white-space: nowrap; }
.ab-chips--center { justify-content: center; }
.ab-badge { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px; margin: 0 0 24px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh); white-space: nowrap; }
.ab-badge img { height: 30px; width: auto; display: block; }
.ab-badge i { flex: none; width: 2px; height: 16px; border-radius: 1px; background: #E5E8EB; }
.ab-badge img { flex: none; }
.ab-badge span { font: 600 16px/1 var(--cm-font); letter-spacing: -0.01em; color: #191F28; }
.ab-lock { display: block; height: 34px; width: auto; margin: 0 0 24px; }   /* 연한 판 = 진한 글자 로고(lockup-dark.svg · 심볼은 원래 보라) */
.ab-actions { display: flex; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.ab-actions--center { justify-content: center; }
.ab-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 210px; height: 62px; padding: 0 30px; border-radius: 16px; background: #4C00FF; color: #fff;
  font: 700 18px/1 var(--cm-font); letter-spacing: -0.01em; text-decoration: none; box-shadow: 0 14px 32px rgba(76, 0, 255, .22);
  transition: transform .14s var(--ab-ease), background-color .2s ease; }
.ab-btn:active { transform: scale(.97); }
.ab-btn:focus-visible { outline: 3px solid #4C00FF; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .ab-btn:hover { background: #3700B8; } }
/* 보조 단추 [상담받기] · 10-25 첫 화면 · 마무리 = [실시간 견적받기](주) + [상담받기](보조) 나란히 */
.ab-btn--weak { min-width: 150px; background: #fff; color: #4C00FF; box-shadow: inset 0 0 0 1.5px rgba(76, 0, 255, .24), 0 8px 22px rgba(76, 0, 255, .08); }
@media (hover: hover) and (pointer: fine) { .ab-btn--weak:hover { background: #F4F0FF; } }

/* 한 줄 카피(제목 아래 · 흰 글 · 회색 설명 문단 아님) · 세 줄 제목 */
.ab-lead { margin: clamp(16px, 2vw, 22px) 0 0; font: 600 clamp(18px, 1.6vw, 22px)/1.45 var(--cm-font); letter-spacing: -0.01em; color: var(--ink); word-break: keep-all; }
/* 11월 혜택 띠지(11-02 대표 '혜택 띠지를 띄어놓는 식' → '글이 너무 많다 · 요약 · 혜택 아이콘') · 머리줄 바로 아래 붙어 따라옴 · 입체 선물 + 한 줄 · 누르면 혜택 칸(#benefit) */
.ab-band { position: sticky; top: calc(var(--min-hd-h, 64px) + var(--min-safe-t, 0px)); z-index: 45; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; background: linear-gradient(90deg, #4C00FF, #6A2BFF); color: #fff; text-decoration: none; font: 600 15px/1 var(--cm-font); letter-spacing: -0.01em; }
.ab-band__ic { flex: none; width: 26px; height: 26px; }
.ab-band__msg { min-width: 0; white-space: nowrap; }
.ab-band b { font-weight: 700; }
.ab-band i { display: inline-block; width: 1.5px; height: 14px; margin: 0 12px; vertical-align: -2px; background: rgba(255, 255, 255, .5); }
.ab-band em { font-style: normal; font-weight: 700; color: #8FD8FF; }
.ab-band__go { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ab-ease); }
.ab-band:focus-visible { outline: 3px solid #8FD8FF; outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .ab-band:hover .ab-band__go { transform: translateX(3px); } }
.ab-band + .ab-hero { padding-top: clamp(28px, 3.6vw, 56px); }   /* 띠지 높이만큼 첫 화면 위 여백을 덜어 노트북 첫 화면 그대로 */
/* 로고 띠 = 첫 화면 바로 아래 흰 카드 · 키트 .min-logos 가 저절로 흐름 */
.ab-logos { position: relative; padding: 8px 0 0; }
/* 제목 아래 작은 알약(10-22 대표 '24시간내에 평균7건 도착! 밑에 작게') */
.ab-note { display: inline-flex; align-items: center; height: 40px; margin: clamp(16px, 2vw, 22px) 0 0; padding: 0 16px; border-radius: 999px;
  background: #fff; border: 1.5px solid #DCD2FF; font: 600 15px/1 var(--cm-font); letter-spacing: -0.01em; color: #4C00FF; white-space: nowrap; box-shadow: var(--sh); }
.ab-logos .min-logos__track { animation-duration: 18s; }   /* 키트 기본 44초 → 더 빠르게(10-22 대표) */
.ab-logos__card { padding: clamp(18px, 2vw, 24px) 0; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); overflow: hidden; }

/* 폰 = 반투명 흰 테(스토어 비율: 테 = 화면 폭의 1.4% · 화면 모서리 8.6%) */
.ab-device { margin: 0; padding: var(--bz) var(--bz) 0; border-radius: 37px 37px 0 0; background: #fff; border: 1.5px solid #E4DCFF; border-bottom: 0; }
.ab-screen { overflow: hidden; border-radius: 30px 30px 0 0; background: #fff; }
.ab-screen :is(img, .ab-ci), .ab-screen picture { display: block; width: 100%; height: auto; }
.ab-bar { display: none; }   /* 브라우저 창 머리줄 = PC 에서만(아래 5-1) */
/* 캔버스 그림(10-22 대표 「각 섹션 모션그래픽 · html 로 못 가져가게 · AI 는 읽게」) = 그림마다 캔버스 하나 · 한 번만 그림(anjeonin-wtak.js) · 움직임은 CSS(이동 · 투명도 = 그래픽 카드)
   캔버스 폭 · 높이 속성 = 그림 원래 크기 → 그림처럼 비율 유지 · 스크립트가 없으면(ab-js 없음) 캔버스를 숨기고 <noscript> 그림 · 떠오르는 조각은 숨김 */
.ab-ci { display: block; width: 100%; height: auto; }
html:not(.ab-js) .ab-ci, html:not(.ab-js) .ab-frag { display: none !important; }

/* ---- 2. 첫 화면 ---------------------------------------------------------------- */
.ab-hero { position: relative; overflow: hidden; padding-top: clamp(48px, 6vw, 88px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent); }
.ab-glow { position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 22% -8%, rgba(124, 92, 255, .16), rgba(124, 92, 255, .05) 55%, transparent 78%),
              radial-gradient(ellipse 40% 50% at 82% -10%, rgba(73, 140, 255, .10), rgba(73, 140, 255, .03) 55%, transparent 78%); }
.ab-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.ab-hero__text { position: relative; z-index: 2; padding-top: clamp(16px, 4vw, 72px); padding-bottom: 220px; }   /* 아래 200px 은 판 바탕으로 녹는 자리 · 단추가 녹지 않게 */
.ab-hero .ab-cap { font-size: clamp(38px, 4.5vw, 66px); }
.ab-hero__stage { position: relative; height: clamp(560px, 50vw, 720px); }
.ab-device--kv { position: absolute; left: 50%; top: 0; width: clamp(330px, 30vw, 410px); translate: -42% 0; padding-bottom: var(--bz);
  border-radius: 37px; border-bottom: 1.5px solid #E4DCFF; transform-origin: 50% 30%; transform: rotate(-14deg);
  box-shadow: 0 60px 120px rgba(76, 0, 255, .16), 0 18px 44px rgba(76, 0, 255, .10);
  animation: ab-kv 1.1s var(--ab-ease) .1s backwards; }
.ab-device--kv .ab-screen { border-radius: 30px; }
/* 큰 폰: 이 페이지 스크립트(anjeonin-wtak.js)가 그림이 아직이고 움직임도 시작 전일 때만 is-wait 로 멈춰 두고, 그림이 오면(또는 1.5초) is-in 으로 이어서 돎.
   스크립트가 늦거나 못 오면 멈춤 자체가 없어서 CSS 만으로 끝까지 돎(공유 min.js 의 cm-js 와 묶지 않음 · 10-22 재검증) */
.ab-hero.is-wait:not(.is-in) .ab-device--kv { animation-play-state: paused; }
@keyframes ab-kv { from { opacity: 0; transform: translateY(90px) rotate(-20deg); } }
/* 글: 그림을 기다리지 않고 첫 그림부터 한 번 떠오름(스크립트 없이 CSS 만) */
.ab-in { animation: ab-rise .7s var(--ab-ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes ab-rise { from { opacity: 0; transform: translateY(16px); } }

/* ---- 3. 판 -------------------------------------------------------------------------
   글(칩 · 배지 · 두 줄 제목) 한 칸 + 폰 한 칸 · 판마다 좌우를 바꿈 · 폰 아래쪽은 판 바탕으로 녹음(판 사이 이음매 없음).
   --p(0 → 1) = 조각 가운데가 화면 아래 끝 → 화면 55% 높이에 오는 동안(anjeonin-wtak.js): 폰이 120px 아래에서 올라오고,
   조각이 화면 속 제자리(같은 픽셀 · 크기 1/k)에서 k 배로 떠올라 기울고 그림자가 짙어진다. */
.ab-panel { position: relative; padding-top: clamp(88px, 10vw, 140px); --p: 1; }
.ab-panel__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 6vw, 96px); }
.ab-panel__text { padding-bottom: clamp(60px, 8vw, 120px); }
.ab-panel--flip .ab-panel__text { order: 2; }
.ab-panel__stage { position: relative; align-self: end; display: flex; justify-content: center; }
/* 폰 뒤 흰 빛 = 가장자리까지 투명으로 끝나서 판 사이 이음매가 생기지 않음(판은 잘라 내지 않음 · 가로는 main 이 자름) */
.ab-panel__stage::before { content: ""; position: absolute; left: 50%; top: 34%; width: 130%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .12), rgba(124, 92, 255, .04) 50%, transparent); }
.ab-phone { position: relative; width: clamp(280px, 26vw, 370px); transform: translateY(calc((1 - var(--p)) * 120px)); will-change: transform; }
.ab-shell { filter: drop-shadow(0 30px 54px rgba(76, 0, 255, .16)); }
.ab-shell .ab-device { --fade: 200px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); }
.ab-frag { position: absolute; z-index: 2; left: 50%; top: calc(var(--bz) + 1.5px + var(--cy) * (100% - var(--bz) - 1.5px)); width: calc(var(--w) * (100% - 2 * var(--bz) - 3px));
  margin: 0; overflow: hidden; background: #fff; border-radius: 20px;
  transform: translate(-50%, -50%) rotate(calc(var(--rot) * var(--p))) scale(calc(1 / var(--k) + (1 - 1 / var(--k)) * var(--p)));
  opacity: clamp(0, calc((var(--p) - .05) * 4), 1); will-change: transform, opacity;
  border: 1px solid var(--line);
  box-shadow: 0 36px 72px rgba(76, 0, 255, .18), 0 10px 24px rgba(76, 0, 255, .10); }   /* 그림자는 고정(스크롤마다 다시 칠하지 않음 · 10-22 '렉') · 나타남은 투명도로 */
.ab-frag :is(img, .ab-ci) { display: block; width: 100%; height: auto; }

/* ---- 3-1. 함께 챙겨요(위탁하면 함께 하는 네 가지) ---------------------------------------------
   10-22 대표 "월 2회방문, 선임의무해소, 정기위험성평가, 보고서전달을 함께" · 칸 = 이름 한 줄 + 안전인 실제 화면 부품(흰 칸 · 같은 높이 칸 안에 가운데).
   11-03 시안 = 두 칸(월 2회 방문 · 보고서 전달) · 선임 의무 · 위험성평가는 따로 칸이 있어 뺌.
   설명 글줄 없음(서브텍스트 금지) · PC 한 줄 두 칸 · 휴대폰 한 줄 한 칸 · 들어올 때 차례로 한 번(data-reveal). */
.ab-inc { position: relative; padding: clamp(96px, 11vw, 150px) 0 clamp(24px, 4vw, 48px); text-align: center; }
.ab-inc .ab-cap { margin-bottom: clamp(32px, 4vw, 52px); }
.ab-inc__photo { max-width: 1080px; margin: 0 auto clamp(14px, 1.6vw, 20px); overflow: hidden; border-radius: 24px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh); }
.ab-inc__photo :is(img, .ab-ci) { display: block; width: 100%; height: auto; }
.ab-inc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.ab-inc__card { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 30px); border-radius: 24px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh); }
.ab-inc__t { font: 700 clamp(21px, 1.9vw, 26px)/1.3 var(--cm-font); letter-spacing: -0.02em; color: #191F28; }
.ab-inc__ui { position: relative; aspect-ratio: 29 / 10; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid #F2F4F6; }
.ab-inc__ui :is(img, .ab-ci) { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; }   /* 칸 기준으로 맞춤(잘림 없음) · 부품 비율 2.6~3.1 */
@media (max-width: 640px) {
  .ab-inc { padding-top: 84px; }
  .ab-inc__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-inc__card { gap: 14px; padding: 20px; border-radius: 20px; }
  .ab-inc__photo { border-radius: 20px; }
  .ab-inc__t { font-size: 21px; }
  .ab-inc__ui { border: 0; border-radius: 0; }
  .ab-inc__ui :is(img, .ab-ci) { inset: 0; width: 100%; height: 100%; }   /* 휴대폰: 부품을 칸 폭에 꽉(글자 9px 이상) */
}

/* ---- 3-2. 고객사 후기(10-22 대표 '진짜 후기형 · 별점') · 후기 앱처럼: 별점 줄 · 보통 굵기 글 · 이니셜 + 담당자 + 이용 서비스 ----------- */
.ab-rev { position: relative; padding: clamp(96px, 10vw, 140px) 0 0; }
.ab-rev .ab-cap { text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.ab-rev__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 16px); max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
.ab-rev__card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); }
.ab-rev__top { display: flex; align-items: center; gap: 8px; }
.ab-rev__stars { display: inline-flex; gap: 2px; }
.ab-rev__stars i { width: 18px; height: 18px; background: #FFB800;
  clip-path: polygon(50% 0%, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0% 35.4%, 38.2% 35.4%); }
.ab-rev__score { font: 700 15px/1 var(--cm-font); color: #191F28; }
.ab-rev__q { margin: 0; font: 400 17px/1.6 var(--cm-font); color: #191F28; word-break: keep-all; }
.ab-rev__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ab-rev__av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #F4F0FF; font: 700 13px/1 var(--cm-font); color: #4C00FF; }
.ab-rev__name { font: 600 14px/1 var(--cm-font); color: #333D4B; }
.ab-rev__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: #F2F4F6; font: 500 12px/1 var(--cm-font); color: #4E5968; }
@media (max-width: 899px) { .ab-rev__list { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 640px) { .ab-rev { padding-top: 84px; } .ab-rev__card { padding: 20px; } .ab-rev__q { font-size: 16px; } }

/* ---- 3-2. 자주 묻는 질문(10-22 대표 'geo용 질의') · 흰 칸 접기 · 화면 글 = FAQPage 글 --------------------------- */
.ab-faq { position: relative; padding: clamp(96px, 10vw, 140px) 0 0; }
.ab-faq .ab-cap { text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }
.ab-faq__list { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.ab-faq__item { border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); }
.ab-faq__item summary { position: relative; display: block; padding: 22px 56px 22px 24px; cursor: pointer; list-style: none;
  font: 700 clamp(16px, 1.4vw, 18px)/1.45 var(--cm-font); letter-spacing: -0.01em; color: #191F28; }
.ab-faq__item summary::-webkit-details-marker { display: none; }
.ab-faq__item summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid #6B7684; border-bottom: 2px solid #6B7684; transform: rotate(45deg); transition: transform .2s var(--ab-ease); }
.ab-faq__item[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.ab-faq__item summary:focus-visible { outline: 3px solid #4C00FF; outline-offset: 3px; border-radius: 18px; }
.ab-faq__item p { margin: 0; padding: 0 24px 22px; font: 400 16px/1.7 var(--cm-font); color: #333D4B; word-break: keep-all; }
@media (max-width: 640px) {
  .ab-faq { padding-top: 84px; }
  .ab-faq__item summary { padding: 18px 48px 18px 18px; font-size: 16px; }
  .ab-faq__item summary::after { right: 20px; }
  .ab-faq__item p { padding: 0 18px 18px; font-size: 15px; }
}

/* ---- 3-0. 견적 비교 · 업체 선정(11-02 대표 '업체 비교하는 ui 나오고 업체 선정하면 혜택 고르는 ui') ----------
   화면 한 장이 저절로 바뀜(anjeonin-wtak.js 5번 · data-step 0 비교 · 1 고름) · 누르는 자리 = 물결(.ab-tap) · 누르라고 시키는 표시 없음 */
.ab-pick__scr { position: relative; }
.ab-pick__s1 { position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; }
.ab-pick[data-step="1"] .ab-pick__s1 { opacity: 1; }
.ab-tap { position: absolute; z-index: 4; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(25, 31, 40, .18); pointer-events: none; opacity: 0; }
.ab-tap.is-on { animation: ab-tap .6s ease-out forwards; }
@keyframes ab-tap { from { transform: scale(.25); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
/* 휴대폰 = 화면 끝까지 온전한 폰(확정 단추가 맨 아래라 녹이지 않음) */
.ab-pick .ab-phone { width: clamp(262px, 74vw, 340px); margin-bottom: 18px; }
.ab-pick .ab-shell .ab-device { padding-bottom: var(--bz); border-bottom: 1.5px solid #E4DCFF; border-radius: 37px; -webkit-mask-image: none; mask-image: none; }
.ab-pick .ab-shell .ab-screen { border-radius: 30px; }

/* ---- 3-0-1. 혜택 고르기(11-02 대표 '혜택처럼 안 느껴지고 · 같이하니까 지나치지 않나 · 글자가 바뀌는건 모바일뷰에서 못 볼 것') ----------
   혜택만 다루는 칸 · 하늘색 판으로 앞뒤 칸과 갈림(대표 혜택 쪽 결 '상쾌한 톤') · 혜택 고르기 창이 주인공 · 처음부터 보임 · 상품권 ↔ 할인 번갈아(data-step 1 · 2) */
.ab-perk { --pad: clamp(72px, 8vw, 112px); position: relative; margin-top: clamp(64px, 8vw, 110px); padding: var(--pad) 0; scroll-margin-top: calc(44px - var(--pad));   /* 띠지 누름 = 혜택 창이 머리 · 띠지 바로 아래 오게(키트 scroll-padding-top 80px 포함) */
  background: linear-gradient(180deg, rgba(214, 240, 255, 0) 0%, #D6F0FF 16%, #E2F5FF 84%, rgba(226, 245, 255, 0) 100%); }
.ab-perk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text sheet" "plus sheet"; align-items: center; column-gap: clamp(32px, 6vw, 96px); row-gap: 24px; }
.ab-perk__text { grid-area: text; align-self: end; }
.ab-perk .ab-cap { font-size: clamp(36px, 3.7vw, 56px); }
.ab-perk .ab-cap em { color: #0A7BEB; }
.ab-note--perk { height: 50px; padding: 0 22px; font-size: 19px; border-color: #BFE5FF; color: #0A68D1; box-shadow: 0 12px 28px rgba(10, 123, 235, .12); }
.ab-note--perk b { margin: 0 .28em; font-weight: 800; color: #0A7BEB; }
.ab-perk__sheet { grid-area: sheet; position: relative; justify-self: end; width: min(100%, 480px); margin: 0; overflow: hidden; border-radius: 6.2%; background: #fff; box-shadow: 0 40px 90px rgba(10, 100, 200, .24), 0 14px 32px rgba(10, 100, 200, .12); }
.ab-perk__sheet .ab-ci { display: block; width: 100%; height: auto; }
/* 함께 드리는 것(대표 '위험성평가 솔루션까지 무상 · 전자서명 · 보고서 · 일정관리도 같이') = 글 칸 아래 흰 칸 하나 · 휴대폰은 혜택 창 아래 */
.ab-perk__plus { grid-area: plus; align-self: start; justify-self: start; display: grid; gap: 12px; box-sizing: border-box; max-width: 100%; padding: 18px 22px; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(10, 123, 235, .12); }
.ab-perk__free, .ab-perk__fn { display: flex; align-items: center; margin: 0; white-space: nowrap; font-family: var(--cm-font); letter-spacing: -0.015em; color: var(--ink); }
.ab-perk__free { gap: 8px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; }
.ab-perk__free b { font-weight: 800; color: #0A7BEB; }
.ab-perk__free img { flex: none; width: 30px; height: 30px; }
.ab-perk__fn { gap: 12px; font-size: clamp(15px, 1.25vw, 17px); font-weight: 600; }
.ab-perk__fn span { display: inline-flex; align-items: center; gap: 5px; }
.ab-perk__fn img { flex: none; width: 24px; height: 24px; }
.ab-sheet__2 { position: absolute; inset: 0; opacity: 0; transition: opacity .16s ease; }
.ab-perk[data-step="2"] .ab-sheet__2 { opacity: 1; }

/* ---- 4. 마무리 -------------------------------------------------------------------- */
.ab-close { position: relative; padding: clamp(110px, 12vw, 160px) 0 clamp(120px, 13vw, 180px); text-align: center; }
.ab-close::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 150vw); height: 120%; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .14), rgba(124, 92, 255, .04) 55%, transparent); }
.ab-close .ab-wrap { position: relative; }
.ab-lock--close { height: 44px; margin: 0 auto 28px; }

/* ---- 5. 태블릿 · 휴대폰 ------------------------------------------------------------- */
@media (max-width: 899px) {
  .ab-hero__grid, .ab-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-hero__text, .ab-panel__text { text-align: center; padding-bottom: 40px; }
  .ab-hero__text { padding-top: 8px; }
  .ab-hero__text .ab-lock { margin-inline: auto; }
  .ab-actions, .ab-chips { justify-content: center; }
  .ab-lead { text-align: center; }
  .ab-panel--flip .ab-panel__text { order: 0; }
  .ab-hero__stage { height: clamp(430px, 112vw, 640px); }
  .ab-device--kv { width: clamp(250px, 62vw, 340px); translate: -50% 0; top: 16px; }
  .ab-phone { width: clamp(250px, 68vw, 330px); }
  .ab-perk__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "sheet" "plus"; row-gap: 24px; text-align: center; }
  .ab-perk__sheet { justify-self: center; width: min(100%, 430px); }
  .ab-perk__plus { justify-self: center; width: min(100%, 430px); justify-items: center; padding: 16px; }
  .ab-close .ab-chips { display: none; }   /* 11-02 대표 '텍스트가 너무 많다 · 이것도 삭제 · 모바일뷰에서' */
  .ab-band { height: 40px; padding: 0 10px; gap: 6px; font-size: 14px; }
  .ab-band__ic { width: 24px; height: 24px; }
  .ab-band i { height: 12px; margin: 0 9px; vertical-align: -1px; }
}
@media (max-width: 640px) {
  .ab-page { --bz: 4px; }
  .ab-cap .ab-nb { white-space: normal; }
  .ab-hero { padding-top: 36px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent); }
  .ab-hero .ab-cap { font-size: clamp(30px, 8.6vw, 40px); }
  .ab-cap { font-size: clamp(28px, 7.8vw, 36px); }
  .ab-lock { height: 28px; margin-bottom: 18px; }
  .ab-badge { gap: 10px; padding: 10px 16px; margin-bottom: 18px; } .ab-badge img { height: 24px; } .ab-badge span { font-size: 14px; }
  .ab-chips { gap: 8px; margin-bottom: 18px; } .ab-chips li { font-size: 14px; }
  .ab-actions { margin-top: 26px; }
  .ab-band + .ab-hero { padding-top: 24px; }
  .ab-btn { width: 100%; min-width: 0; height: 58px; font-size: 17px; }
  .ab-actions--pair { gap: 10px; }
  .ab-actions--pair .ab-btn { flex: 1.55 1 0; width: auto; padding: 0 12px; }   /* 휴대폰도 나란히 · 주 단추를 더 넓게 */
  .ab-actions--pair .ab-btn--weak { flex: 1 1 0; }
  .ab-device { border-radius: 26px 26px 0 0; } .ab-screen { border-radius: 21px 21px 0 0; }
  .ab-device--kv { border-radius: 27px; } .ab-device--kv .ab-screen { border-radius: 22px; }
  .ab-frag { border-radius: 14px; }
  .ab-panel { padding-top: 76px; }
  .ab-perk { --pad: 60px; margin-top: 56px; padding-bottom: 56px; }
  .ab-perk .ab-cap { font-size: clamp(30px, 8.6vw, 38px); }
  .ab-note--perk { height: 44px; padding: 0 18px; font-size: 16px; }
  .ab-perk__free { font-size: 16px; } .ab-perk__free img { width: 26px; height: 26px; }
  .ab-perk__fn { gap: 8px; font-size: 13.5px; } .ab-perk__fn span { gap: 3px; } .ab-perk__fn img { width: 19px; height: 19px; }
  .ab-shell .ab-device { --fade: 130px; }
  .ab-lock--close { height: 34px; }
}
@media (max-width: 374px) {
  .ab-band { gap: 4px; font-size: 13px; } .ab-band i { margin: 0 7px; } .ab-band__ic { width: 22px; height: 22px; }
  .ab-note--perk { height: 40px; padding: 0 14px; font-size: 15px; }
  .ab-perk__plus { padding: 14px 10px; }
  .ab-perk__free { font-size: 15px; }
  .ab-perk__fn { font-size: 12.5px; gap: 6px; }
  /* 320 ~ 374 폭: 배지가 넘치지 않게 고용노동부 로고는 상징만 보임(글은 alt 그대로) */
  .ab-badge { gap: 8px; padding: 9px 14px 9px 10px; } .ab-badge span { font-size: 13px; }
  .ab-badge img[src*="moel"] { width: 24px; height: 24px; object-fit: cover; object-position: left center; }
}
@media (max-width: 339px) { .ab-band { padding: 0 6px; font-size: 12px; } .ab-band i { margin: 0 5px; } .ab-band__go { display: none; } }
@media (max-width: 359px) {
  .ab-perk__fn img { display: none; }
  .ab-chips li { font-size: 13px; }
}

/* ---- 5-1. PC = 웹 형태(10-22 대표 "웹인데 웹형태가 맞지않냐" · "모바일에선 모바일 뷰") -----------------------
   900px 이상: 폰 대신 브라우저 창 + 안전인 웹 PC 화면(개편안 작동판 1120×700 실캡처 · tools/capture-pc.cjs → assets-web.py).
   첫 화면은 같은 figure 를 창으로 바꿔 그림(picture 로 PC 화면만 받음) · 판은 .ab-win(창 + 같은 화면에서 자른 조각)이 보이고 .ab-phone 은 숨김.
   창 머리줄 = 안전인 탭 하나(주소 글 · 점 장식 없음). 조각 자리 = 창 기준 --cx · --cy(화면 속 같은 픽셀) · --w(화면 폭 비율 × k). */
.ab-win { display: none; }
.ab-window { margin: 0; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(76, 0, 255, .14), 0 12px 32px rgba(76, 0, 255, .08); }
.ab-bar { height: 40px; align-items: center; padding: 0 14px; background: #fff; border-bottom: 1px solid #EEF0F3; }
.ab-tab { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px 0 10px; border-radius: 8px; background: #F2F4F6; font: 500 13px/1 var(--cm-font); color: #4E5968; }
.ab-tab img { display: block; width: 16px; height: 16px; }
.ab-wscreen :is(img, .ab-ci) { display: block; width: 100%; height: auto; }
@media (min-width: 900px) and (min-height: 540px) {   /* 가로로 눕힌 휴대폰(높이 ~430)은 모바일 뷰 그대로(대표 「모바일에선 모바일 뷰」) */
  .ab-bar { display: flex; }
  /* 첫 화면: 글 가운데 · 그 아래 큰 창(아래쪽은 판 바탕으로 녹음) */
  .ab-hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ab-hero { padding-top: clamp(24px, 4vh, 56px); }
  .ab-hero__text { padding-top: 0; padding-bottom: clamp(28px, 4vh, 44px); }
  .ab-hero .ab-cap { font-size: clamp(38px, min(3.8vw, 6.4vh), 60px); }
  .ab-hero .ab-lock { height: 30px; margin-bottom: 16px; }
  .ab-hero .ab-badge { margin-bottom: 18px; }
  .ab-hero .ab-actions { margin-top: clamp(20px, 3vh, 32px); }
  .ab-hero__text .ab-lock { margin-inline: auto; }
  .ab-hero .ab-actions { justify-content: center; }
  .ab-hero__stage { width: 100%; height: auto; }
  .ab-device--kv { position: relative; left: auto; top: auto; translate: none; transform: none; width: min(1040px, 100%); margin: 0 auto; padding: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px; background: #fff; animation-name: ab-win; }
  .ab-device--kv .ab-screen { border-radius: 0; }
  .ab-hero { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent); padding-bottom: 0; }   /* 창 아래 끝 = 녹는 끝(이음매 없음) */
  /* 판: 글 4 · 창 8(판마다 좌우 바꿈) */
  .ab-panel .ab-wrap { max-width: 1320px; }
  .ab-panel__grid { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); column-gap: clamp(40px, 4.5vw, 72px); }
  .ab-panel--flip .ab-panel__grid { grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); }
  .ab-panel .ab-cap { font-size: clamp(34px, 3.2vw, 50px); }   /* 판 제목 한 줄이 글 칸(9) 안에 들어오게 */
  .ab-panel__text { padding-bottom: 0; }
  .ab-panel__stage { align-self: center; display: block; }
  .ab-panel__stage::before { top: 50%; width: 110%; }
  .ab-phone { display: none; }
  .ab-win { display: block; position: relative; transform: translateY(calc((1 - var(--p)) * 80px)); will-change: transform; }
  .ab-win .ab-frag { left: calc(var(--cx) * 100%); top: calc(40px + var(--cy) * (100% - 40px)); width: calc(var(--w) * 100%); border-radius: 12px; }
}
/* 900~1199: 두 칸이면 창이 너무 작아짐(PC 화면이 절반 아래로 줄어 글자가 안 읽힘) → 글 위 · 창 아래로 쌓음 */
@media (min-width: 900px) and (max-width: 1199px) and (min-height: 540px) {
  .ab-panel__grid, .ab-panel--flip .ab-panel__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .ab-panel__text { text-align: center; }
  .ab-panel .ab-chips { justify-content: center; }
  .ab-panel--flip .ab-panel__text { order: 0; }
  .ab-win { width: min(100%, 860px); margin-inline: auto; }   /* 오른쪽 조각이 화면 끝에 닿지 않게 */
}
@keyframes ab-win { from { opacity: 0; transform: translateY(60px); } }

/* 긴 목록이 창 · 폰 안에서 흘러감(300곳 판) · --q(0 → 1) = 판이 화면에 들어와서 지나가는 동안(anjeonin-wtak.js [data-ab-roll]) */
.ab-roll { position: relative; overflow: hidden; aspect-ratio: var(--ar); --q: 0; }
.ab-roll :is(img, .ab-ci) { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(calc(var(--q) * -1 * var(--roll))); will-change: transform; }

/* ---- 5-2. 칸마다 움직임(10-22 대표 「각 페이지마다 애니메이션 모션그래픽」) -------------------------------
   숫자 올라가기 = anjeonin-wtak.js([data-ab-count] · 화면에 들어오면 0 → 끝값 한 번 · 글은 처음부터 끝값이라 스크립트 없어도 맞음)
   사진 = 스크롤에 묶여 1.1배 → 1배로 천천히 당겨짐(--z) · 네 칸 = 칸이 떠오른 뒤 화면 부품이 칸 안에서 한 번 더 떠오름 ·
   후기 = 별이 왼쪽부터 회색 → 노랑으로 채워짐 · 질문 = 차례로 떠오름 · 펼칠 때 높이가 부드럽게(지원 브라우저만) */
/* 조각 줄이 하나씩(실시간 도착 업체 · 적은 공정) = 같은 그림을 줄마다 잘라 겹치고 --p 에 맞춰 차례로 · 되돌리면 되돌아감 */
.ab-seqfrag > :is(img, .ab-ci):first-child { visibility: hidden; }
.ab-seq { position: absolute; inset: 0; }
.ab-seq :is(img, .ab-ci) { display: block; width: 100%; height: 100%; will-change: opacity, transform; clip-path: inset(calc(var(--a) * 100%) 0 calc((1 - var(--b)) * 100%) 0);
  opacity: clamp(0, calc((var(--p) - var(--t)) * 6), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - var(--t)) * 6), 1)) * 12px)); }
.ab-inc__photo { --z: 1; }
.ab-inc__photo :is(img, .ab-ci) { transform: scale(calc(1.1 - .1 * var(--z))); transform-origin: 50% 60%; will-change: transform; }
.cm-js .ab-inc__card .ab-inc__ui :is(img, .ab-ci) { clip-path: inset(0 100% 0 0 round 12px); transition: clip-path 1.1s var(--ab-ease) .25s; }   /* 왼쪽부터 채워짐(위험성평가 막대가 차오름) */
.cm-js .ab-inc__card.is-in .ab-inc__ui :is(img, .ab-ci) { clip-path: inset(0 0 0 0 round 12px); }
.cm-js .ab-rev__card .ab-rev__stars i { background: #E5E8EB; transition: background-color .3s ease; }
.cm-js .ab-rev__card.is-in .ab-rev__stars i { background: #FFB800; }
.ab-rev__stars i:nth-child(1) { transition-delay: .25s !important; } .ab-rev__stars i:nth-child(2) { transition-delay: .35s !important; }
.ab-rev__stars i:nth-child(3) { transition-delay: .45s !important; } .ab-rev__stars i:nth-child(4) { transition-delay: .55s !important; }
.ab-rev__stars i:nth-child(5) { transition-delay: .65s !important; }
.ab-faq { interpolate-size: allow-keywords; }
.ab-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .32s var(--ab-ease), content-visibility .32s allow-discrete; }
.ab-faq__item[open]::details-content { block-size: auto; }
[data-ab-count] { font-variant-numeric: tabular-nums; }

/* ---- 5-3. 11-03 움직임 더하기(대표 「애니메이션 잘 주고 · 모션그래픽 줄거는 주고 · cta따라다니게」) ---------------------
   제목 = 줄마다 아래에서 떠오름(0.8초 · 90ms 간격) + 보라 낱말이 왼쪽부터 칠해짐(글자 바탕 그라데이션 · 안 되는 브라우저는 원래 보라 글자) ·
   창 · 폰 = 올라오며 0.96 → 1 · 장면 번호 --s 로 줄이 하나씩(실시간 도착 · 적은 공정 · anjeonin-wtak.js) · 선임 신고 = 바뀔 때마다 진행 세 줄 차례로(is-swap) ·
   지도 물결 = 견적이 도착한 업체 자리 · 혜택 창 = 아래에서 떠오름 · 함께 드리는 것 · 마무리 칩 = 차례로 톡 ·
   따라다니는 견적 단추 = 첫 화면 단추([data-hero])가 사라지는 순간부터 · 크게 · 휴대폰은 폭 가득 */
.cm-js .ab-page .ab-cap[data-reveal] { opacity: 1; transform: none; transition: none; }
.cm-js .ab-page .ab-cap[data-reveal] .ab-nb { opacity: 0; transform: translateY(.5em);
  transition: opacity .5s var(--ab-ease), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 40ms); }
.cm-js .ab-page .ab-cap[data-reveal] .ab-nb + .ab-nb { transition-delay: calc(var(--i, 0) * 40ms + 90ms); }
.cm-js .ab-page .ab-cap[data-reveal] .ab-nb + .ab-nb + .ab-nb { transition-delay: calc(var(--i, 0) * 40ms + 180ms); }
.cm-js .ab-page .ab-cap[data-reveal].is-in .ab-nb { opacity: 1; transform: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-cap em { --em0: var(--ink); --em1: var(--hl); color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(90deg, var(--em1) 45%, var(--em0) 55%); background-size: 220% 100%; background-position: 0 0; }
  .ab-perk .ab-cap em { --em1: #0A7BEB; }
  .cm-js .ab-page .ab-cap[data-reveal] em { background-position: 100% 0; transition: background-position .75s var(--ab-ease) calc(var(--i, 0) * 40ms + .42s); }
  .cm-js .ab-page .ab-cap[data-reveal].is-in em { background-position: 0 0; }
  .ab-hero .ab-cap em { animation: ab-sweep .8s var(--ab-ease) .75s backwards; }
}
@keyframes ab-sweep { from { background-position: 100% 0; } }
.ab-phone { transform: translateY(calc((1 - var(--p)) * 120px)) scale(calc(.96 + .04 * var(--p))); transform-origin: 50% 100%; }
@media (min-width: 900px) and (min-height: 540px) {
  .ab-win { transform: translateY(calc((1 - var(--p)) * 90px)) scale(calc(.96 + .04 * var(--p))); transform-origin: 50% 100%; }
}
/* 줄이 장면 번호대로 하나씩(실시간 도착 · 적은 공정) · --n = 줄 번호(0 = 머리 · 늘 보임) · 스크립트가 없으면 --s 가 없어 전부 보임 */
.ab-seqfrag--step .ab-seq :is(img, .ab-ci) { --on: clamp(0, calc(var(--s, 9) - var(--n, 0) + 1), 1);
  opacity: var(--on); transform: translateY(calc((1 - var(--on)) * -10px));
  transition: opacity .3s var(--ab-ease), transform .5s cubic-bezier(.34, 1.4, .5, 1); }
[data-ab-file].is-swap .ab-tick .ab-seq :is(img, .ab-ci) { animation: ab-tick .5s var(--ab-ease) backwards; animation-delay: calc(var(--n, 0) * 150ms + 120ms); }
@keyframes ab-tick { from { opacity: .2; transform: translateX(-12px); } }   /* 바뀔 때 줄이 사라지지 않고 흐려졌다가 차례로 다시 체크(빈 칸 깜빡임 없음) */
[data-ab-file].is-swap .ab-swap > .ab-ci { animation: ab-swap .5s var(--ab-ease) .1s backwards; }
@keyframes ab-swap { from { opacity: .25; transform: translateY(40%); } }
.ab-live__scr { position: relative; }
.ab-ping { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2.5px solid rgba(76, 0, 255, .7); background: rgba(124, 92, 255, .2); }
.ab-ping.is-on { animation: ab-ping 1.2s var(--ab-ease) forwards; }
@keyframes ab-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(2); opacity: 0; } }
@media (max-width: 899px) { .ab-ping { width: 36px; height: 36px; margin: -18px 0 0 -18px; } }
.cm-js .ab-perk__sheet[data-reveal] { transform: translateY(32px) scale(.96); transition: opacity .45s var(--ab-ease), transform .85s cubic-bezier(.16, 1, .3, 1); }
.cm-js .ab-perk__sheet[data-reveal].is-in { transform: none; }
.cm-js .ab-perk__plus[data-reveal] img { opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .42s cubic-bezier(.34, 1.4, .5, 1); }
.cm-js .ab-perk__plus[data-reveal].is-in img { opacity: 1; transform: none; }
.cm-js .ab-perk__plus[data-reveal] .ab-perk__free img { transition-delay: .12s; }
.cm-js .ab-perk__plus[data-reveal] .ab-perk__fn span:nth-child(1) img { transition-delay: .24s; }
.cm-js .ab-perk__plus[data-reveal] .ab-perk__fn span:nth-child(2) img { transition-delay: .32s; }
.cm-js .ab-perk__plus[data-reveal] .ab-perk__fn span:nth-child(3) img { transition-delay: .4s; }
.cm-js .ab-close .ab-chips[data-reveal] { opacity: 1; transform: none; }
.cm-js .ab-close .ab-chips[data-reveal] li { opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .26s var(--ab-ease), transform .42s cubic-bezier(.34, 1.4, .5, 1); }
.cm-js .ab-close .ab-chips[data-reveal].is-in li { opacity: 1; transform: none; }
.cm-js .ab-close .ab-chips[data-reveal] li:nth-child(2) { transition-delay: .06s; }
.cm-js .ab-close .ab-chips[data-reveal] li:nth-child(3) { transition-delay: .12s; }
.cm-js .ab-close .ab-chips[data-reveal] li:nth-child(4) { transition-delay: .18s; }
/* 따라다니는 견적 단추 = 키트 독(min.js · 나오고 숨는 때는 그대로) · 이 쪽만 크게 · 아래에서 톡 올라옴 */
.ab-page .min-dock { bottom: calc(18px + var(--min-safe-b)); transform: translateY(26px) scale(.96); }
.ab-page .min-dock[data-on] { transform: none; transition: opacity .26s var(--ab-ease), transform .45s cubic-bezier(.34, 1.4, .5, 1), visibility 0s; }
.ab-page .min-dock__pill { gap: 6px; padding: 7px; background: rgba(255, 255, 255, .96); border-color: #E4DCFF;
  box-shadow: 0 18px 44px rgba(76, 0, 255, .18), 0 4px 12px rgba(76, 0, 255, .08); }
.ab-page .min-dock .cm-btn { min-height: 52px; padding: 0 28px; font-size: 16px; font-weight: 700; }
.ab-page .min-dock .cm-btn--weak { font-weight: 600; }
@media (max-width: 899px) {
  .ab-page .min-dock { left: 12px; right: 12px; width: auto; max-width: none; margin: 0; bottom: calc(10px + var(--min-safe-b)); }
  .ab-page .min-dock__pill { width: 100%; box-sizing: border-box; }
  .ab-page .min-dock .cm-btn { flex: 1.55 1 0; min-width: 0; min-height: 50px; padding: 0 10px; font-size: 16px; line-height: 1; white-space: nowrap; }
  .ab-page .min-dock .cm-btn--weak { flex: 1 1 0; }
}
@media (max-width: 359px) { .ab-page .min-dock .cm-btn { padding: 0 8px; font-size: 15px; } }

/* ---- 6. 움직임 줄이기 = 끝 모습 · 들어올 때 움직임 없음 ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ab-panel { --p: 1 !important; }
  .ab-device--kv, .ab-in { animation: none !important; }
  .ab-pick__s1, .ab-sheet__2 { transition: none !important; }
  .ab-inc__photo { --z: 1 !important; }
  .cm-js .ab-inc__card .ab-inc__ui :is(img, .ab-ci) { clip-path: none; transition: none; }
  .cm-js .ab-rev__card .ab-rev__stars i { background: #FFB800; transition: none; }
  .ab-faq__item::details-content { transition: none; }
  .cm-js .ab-page .ab-cap[data-reveal] .ab-nb { transform: none; transition: opacity .2s ease; }
  .cm-js .ab-page .ab-cap[data-reveal] em { transition: none; background-position: 0 0; }
  .ab-hero .ab-cap em { animation: none; }
  .ab-seqfrag--step .ab-seq :is(img, .ab-ci) { transition: none; }
  .ab-ping { display: none; }
  .cm-js .ab-perk__sheet[data-reveal] { transform: none; }
  .cm-js .ab-perk__plus[data-reveal] img, .cm-js .ab-close .ab-chips[data-reveal] li { transform: none; transition: opacity .2s ease; }
  .ab-page .min-dock, .ab-page .min-dock[data-on] { transform: none; transition: opacity 160ms ease, visibility 0s; }
}