/* ==========================================================================
   자동입찰 (AdSolution > ProService*) 공용 디자인 시스템 — PC
   서비스 소개 / 기능 안내 / 요금 안내 3개 페이지 공용

   타이포 원칙
   - 본문·제목 모두 Pretendard 단일 서체, 위계는 크기 + 굵기로만
     (광고솔루션 형제 페이지 — 키워드분석·순위추적·스마트MD — 와 동일 규칙)
   - 수치(주기·순위·금액·통계)와 eyebrow는 모노스페이스로 조판
     (순위추적 .rt-eyebrow / --rt-mono 와 동일 패턴)
   - 전역 스타일 간섭은 #ab-page 스코프로 차단
   ========================================================================== */

#ab-page {
    /* ---- color ----
       무채색이 바탕이고 색은 데이터에만 쓴다.
       액센트는 브랜드 보라가 아니라 순수에 가까운 검정. */
    --ab-ink: #16191d;
    /* 자동입찰 고유 키컬러 — AdGen AI 계열.
       다크 캔버스 위에서만 성립하는 무지갯빛 그라데이션이라
       히어로와 성과 구간을 어둡게 두고 정보 구간은 밝게 유지한다. */
    --ab-key: #6831fa;         /* CTA 솔리드 바이올렛 */
    --ab-key-lift: #9384fe;
    --ab-key-wash: #f0ecfe;

    /* 다크 캔버스 */
    --ab-night: #080a0d;
    --ab-glass: rgba(28, 35, 43, 0.8);
    --ab-glass-line: rgba(255, 255, 255, 0.1);

    /* 헤드라인용 무지갯빛 — 검정 위에서만 읽힌다 */
    /* 하나의 색 여정(마젠타 → 바이올렛 → 블루)을 두 벌로 나눠 둔다.
       어두운 면에는 파스텔, 밝은 면에는 같은 색상환의 짙은 값. */
    --ab-iri: linear-gradient(to right, #f2b9ff, #9384fe 36%, #80b4ff 72%, #cadde9);
    --ab-iri-ink: linear-gradient(96deg, #c026d3 0%, #6831fa 48%, #2563eb 100%);
    --ab-deep: #080a0d;        /* 딥 밴드 — --ab-night 과 같은 값 */

    /* 보라는 키컬러 한 종만 쓴다.
       #6831fa / #7c3aed / #5048d7 세 가지가 섞여 있어, 특히 중첩된 두 탭
       시스템이 서로 다른 보라를 써서 구분이 아니라 오류로 보였다.
       기능·요금 페이지가 참조하는 이름은 별칭으로 남기고 값만 키컬러에 맞춘다. */
    --ab-violet: var(--ab-key);
    --ab-violet-lift: var(--ab-key-lift);
    --ab-violet-wash: var(--ab-key-wash);
    --ab-mint: #00c73c;
    --ab-paper: #f7f8f9;       /* 옅은 웜그레이 */
    --ab-line: #e4e6e9;
    --ab-line-soft: #eff1f3;
    --ab-key-line: #cfc9f2;    /* 키컬러 계열의 옅은 선·점 */
    --ab-body: #5b6670;
    --ab-muted: #9099a3;

    /* ---- type ---- */
    --ab-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    /* 한글은 Pretendard로 떨어지고 숫자·영문만 모노로 잡히도록 스택 구성 */
    --ab-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Roboto Mono', Consolas, 'Pretendard', monospace;

    /* 제목 스케일 — 52 / 40 / 34 / 28 / 24 / 20 / 18 / 16 */
    --ab-t1: 52px;
    --ab-t2: 40px;
    --ab-t3: 34px;
    --ab-t4: 28px;
    --ab-t5: 24px;
    --ab-t6: 20px;
    --ab-t7: 18px;
    --ab-t8: 16px;

    /* 본문 스케일 — 18 / 17 / 16 / 15 / 14 / 13 / 12 */
    --ab-b1: 18px;
    --ab-b2: 17px;
    --ab-b3: 16px;
    --ab-b4: 15px;
    --ab-b5: 14px;
    --ab-b6: 13px;
    --ab-b7: 12px;

    /* ---- radius ---- */
    --ab-r-xs: 10px;
    --ab-r-sm: 12px;
    --ab-r-md: 20px;
    --ab-r-lg: 28px;
    --ab-r-pill: 999px;

    /* ---- spacing ---- */
    --ab-sp-section: 110px;
    --ab-sp-section-sm: 84px;
    --ab-sp-block: 72px;
    --ab-sp-stack: 32px;

    --ab-shadow: 0 24px 60px -24px rgba(22, 25, 29, 0.16);
    --ab-shadow-lift: 0 18px 36px -12px rgba(104, 49, 250, 0.6);

    position: relative;
    background: #fff;
    color: var(--ab-ink);
    font-family: var(--ab-sans);
    word-break: keep-all;

    /* .ab-free 의 풀블리드(margin: 0 calc(50% - 50vw))가 세로 스크롤바 폭만큼
       가로로 넘치는 것을 잘라 내기 위한 것이다.
       단 overflow: hidden 은 스크롤 컨테이너를 만들어 내부의 position: sticky
       (요금 안내 .ab-calc__out)를 무력화한다 — 실측으로 확인했다.
       overflow: clip 은 같은 클리핑을 하면서 스크롤 컨테이너를 만들지 않는다.
       hidden 을 먼저 두어 clip 미지원 브라우저에서도 클리핑은 유지된다. */
    overflow: hidden;
    overflow: clip;
}

#ab-page *,
#ab-page *::before,
#ab-page *::after {
    box-sizing: border-box;
}

/* 전역 .content h1/h3 장식(가운데 정렬·밑줄·!important 마진) 무력화 */
#ab-page h1,
#ab-page h2,
#ab-page h3,
#ab-page h4 {
    margin: 0 !important;
    padding: 0;
    text-align: left;
    letter-spacing: -0.03em;
    line-height: 1.24;
    color: var(--ab-ink);
    font-weight: 800;
}

#ab-page h1::after,
#ab-page h2::after,
#ab-page h3::after,
#ab-page h4::after {
    display: none !important;
}

#ab-page p {
    margin: 0;
    color: var(--ab-body);
    letter-spacing: -0.01em;
    line-height: 1.7;
    word-break: keep-all !important;
}

#ab-page ul,
#ab-page ol,
#ab-page dl {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ab-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

#ab-page button {
    font-family: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   서브 헤더 (자동입찰 + 3탭)
   -------------------------------------------------------------------------- */

#content .ab-sub {
    padding: 68px 0 0 !important;
    text-align: center;
    background: #fff;
}

#content .ab-sub .content_title {
    margin-bottom: 22px !important;
    font-family: 'Pretendard', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em;
    color: #14122b !important;
}

#content .ab-sub .content_tab {
    margin-bottom: 0 !important;
}

#content .ab-sub .content_tab ul li a {
    font-size: 16px;
    font-weight: 500;
    color: #8a88a6;
}

#content .ab-sub .content_tab ul li.on a {
    color: #14122b;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   공용 레이아웃 / 타이포
   -------------------------------------------------------------------------- */

#ab-page .ab-wrap {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

#ab-page .ab-section {
    position: relative;
    padding: var(--ab-sp-section) 0;
}

#ab-page .ab-section--tight {
    padding: var(--ab-sp-section-sm) 0;
}

#ab-page .ab-section--flush-top {
    padding-top: 0;
}

#ab-page .ab-section--paper {
    background: var(--ab-paper);
}

/* 한글 eyebrow 에 uppercase 는 효과가 없고 넓은 자간만 남아 어정쩡해진다.
   변환을 빼고 자간을 좁힌 뒤, 필 배지로 만들어 위계를 준다. */
#ab-page .ab-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-key-wash);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--ab-key);
}

#ab-page .ab-head {
    max-width: 680px;
    margin-bottom: 56px;
}

#ab-page .ab-head--center {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 배지가 되면서 block 이면 폭 전체로 늘어난다.
   가운데 정렬은 부모의 text-align 이 처리하므로 inline-block 이어야 한다. */
#ab-page .ab-head--center .ab-eyebrow {
    display: inline-block;
}

#ab-page .ab-head h2 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.24;
}

#ab-page .ab-head--center h2 {
    text-align: center;
}

#ab-page .ab-head p {
    margin-top: 16px;
    font-size: var(--ab-b2);
}

/* 지마켓 .gm-gradient-text — 헤드라인 강조부를 그라데이션으로 */
/* 히어로 헤드라인과 같은 색 여정. 면이 밝으므로 짙은 값 세트를 쓴다. */
#ab-page .ab-accent {
    background: var(--ab-iri-ink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   버튼
   -------------------------------------------------------------------------- */

#ab-page .ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-size: var(--ab-b3);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

#ab-page .ab-btn:hover {
    transform: translateY(-2px);
}

#ab-page .ab-btn:focus-visible {
    outline: 3px solid rgba(104, 49, 250, 0.5);
    outline-offset: 3px;
}

/* 다크 히어로에서는 보라 링이 검정에 묻혀 포커스가 보이지 않았다 */
#ab-page .ab-hero .ab-btn:focus-visible {
    outline-color: rgba(255, 255, 255, 0.85);
}

#ab-page .ab-btn--primary {
    background: var(--ab-key);
    color: #fff;
    box-shadow: 0 14px 30px -12px rgba(104, 49, 250, 0.55);
}

#ab-page .ab-btn--primary:hover {
    background: #7643ff;
    color: #fff;
    box-shadow: var(--ab-shadow-lift);
}

#ab-page .ab-btn--ghost {
    border-color: var(--ab-line);
    background: #fff;
    color: var(--ab-ink);
}

#ab-page .ab-btn--ghost:hover {
    border-color: #c9ced4;
    color: var(--ab-ink);
}

#ab-page .ab-btn--light {
    background: #fff;
    color: var(--ab-ink);
}

#ab-page .ab-btn--light:hover {
    color: var(--ab-ink);
}

#ab-page .ab-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#ab-page .ab-btn-row--center {
    justify-content: center;
}

/* 콘텐츠 뒤에 오는 버튼 줄 */
#ab-page .ab-steps + .ab-btn-row,
#ab-page .ab-btn-row--after {
    margin-top: 40px;
}

/* --------------------------------------------------------------------------
   스크롤 등장
   -------------------------------------------------------------------------- */

#ab-page .ab-reveal {
    opacity: 1;
    transform: none;
}

.ab-motion #ab-page .ab-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ab-motion #ab-page .ab-reveal.is-in {
    opacity: 1;
    transform: none;
}

.ab-motion #ab-page .ab-delay-1.is-in { transition-delay: 0.08s; }
.ab-motion #ab-page .ab-delay-2.is-in { transition-delay: 0.16s; }

/* --------------------------------------------------------------------------
   유의사항 / 안내 박스
   -------------------------------------------------------------------------- */

#ab-page .ab-note {
    display: flex;
    gap: 16px;
    margin-top: var(--ab-sp-stack);
    padding: 26px 28px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
}

#ab-page .ab-note__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ab-r-xs);
    background: var(--ab-violet-wash);
    color: var(--ab-violet);
}

#ab-page .ab-note__icon svg {
    width: 19px;
    height: 19px;
}

#ab-page .ab-note h3 {
    margin-bottom: 10px !important;
    font-size: var(--ab-t8);
    font-weight: 700;
}

#ab-page .ab-note li {
    position: relative;
    padding-left: 14px;
    font-size: var(--ab-b5);
    line-height: 1.75;
    color: var(--ab-body);
}

#ab-page .ab-note li + li {
    margin-top: 6px;
}

#ab-page .ab-note li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ab-key-line);
}

#ab-page .ab-note .ab-point {
    color: var(--ab-violet);
    font-weight: 700;
}

/* ==========================================================================
   1) 서비스 소개
   ========================================================================== */

/* ---- Hero ---- */

/* 히어로는 페이지에서 유일하게 어두운 면이다. 콘솔이 흰 바탕 위의 섬처럼
   떠 있던 문제를 없애고, 이 밴드 자체를 제품의 바탕으로 삼는다. */
/* 지마켓 .gm-hero — 흰 바탕 중앙 정렬 + 오로라 */
/* 하단 여백은 밴드의 마지막 요소인 칩 스트립이 갖는다 (.ab-hero .ab-chips) */
#ab-page .ab-hero {
    position: relative;
    padding: 96px 0 0;
    background: var(--ab-night);
    color: #fff;
    text-align: center;
}

#ab-page .ab-hero__glow {
    position: absolute;
    inset: -180px -10% auto;
    height: 560px;
    background:
        radial-gradient(520px 340px at 22% 26%, rgba(253, 61, 255, 0.22), transparent 70%),
        radial-gradient(560px 360px at 78% 20%, rgba(104, 49, 250, 0.34), transparent 70%),
        radial-gradient(420px 280px at 55% 66%, rgba(128, 180, 255, 0.18), transparent 72%);
    pointer-events: none;
}

#ab-page .ab-hero .ab-wrap {
    position: relative;
    z-index: 1;
}

/* 좌우 2단을 버리고 세로 1단 중앙으로. 한 번에 하나만 보여준다 */
/* 콘솔 아래 여백은 계기판(.ab-readout)의 margin-top 하나로만 만든다.
   여기 있던 padding-bottom: 96px 이 계기판 margin 40px 과 더해져 136px 이 되어,
   콘솔과 계기판 사이가 빈 구멍처럼 벌어져 있었다. */
#ab-page .ab-hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
}

/* 제목은 절제하고 숫자를 키우는 것이 레퍼런스의 규칙이다 */
/* 애플 한국어 페이지 실측: 48px / 600 / line-height 1.19 / 자간 normal.
   한글은 음수 자간을 주면 오히려 답답해진다. */
#ab-page .ab-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    /* 전역 #ab-page h1 의 text-align: left 를 히어로에서만 되돌린다 */
    text-align: center;
}

/* 유지되는 값 — 한 톤 내려 앉힌다 */
#ab-page .ab-hero__title--hold {
    font-weight: 800;
    color: #fff;
}

/* 올라가는 값 — 시선이 여기서 멈추게 한다 */
/* 강조 줄은 무지갯빛 그라데이션 텍스트 */
#ab-page .ab-hero__title--lift {
    font-weight: 800;
    background: var(--ab-iri);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#ab-page .ab-hero__lead {
    max-width: 620px;
    margin-top: 22px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.62);
}

#ab-page .ab-hero .ab-btn-row {
    justify-content: center;
    margin-top: 38px;
}

/* 콘솔은 헤드라인 아래 중앙에서 화면을 넓게 쓴다 */
#ab-page .ab-hero .ab-console {
    width: 100%;
    max-width: 860px;
    margin-top: 84px;
}

/* 밴드 바닥 계기판 — 폭 전체를 가로질러 히어로에 바닥선을 만든다.
   라벨을 위, 수치를 아래로 두어 콘솔의 메타 조판과 같은 규칙을 쓴다. */
/* 콘솔과 같은 폭·같은 축. 히어로 안의 세로 기준선을 하나로 모은다. */
#ab-page .ab-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 860px;
    margin: 56px auto 0;
}

#ab-page .ab-readout li {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 24px 22px;
    border-radius: var(--ab-r-md);
}

#ab-page .ab-readout b {
    font-family: var(--ab-mono);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ab-ink);
}

#ab-page .ab-readout span {
    font-size: var(--ab-b6);
    font-weight: 500;
    color: var(--ab-muted);
}

/* --------------------------------------------------------------------------
   히어로 콘솔 — 목표 순위를 유지하려 입찰가를 올리고 내리는 과정을 그대로 보여준다
   밝은 면 위의 옅은 회색 패널. 그림자 없이 면과 라운드만으로 세운다.
   -------------------------------------------------------------------------- */

#ab-page .ab-console {
    position: relative;
    margin: 0;
    padding: 26px 28px 28px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
    box-shadow: var(--ab-shadow);
    color: var(--ab-ink);
    text-align: left;
}

#ab-page .ab-console__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ab-line-soft);
}

#ab-page .ab-console__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--ab-b6);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ab-body);
}

#ab-page .ab-console__clock {
    font-family: var(--ab-mono);
    font-size: var(--ab-b6);
    font-variant-numeric: tabular-nums;
    color: var(--ab-muted);
}

#ab-page .ab-console__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0 16px;
}

#ab-page .ab-console__kw {
    margin: 0;
    font-size: var(--ab-t5);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ab-ink);
}

#ab-page .ab-console__kw::before {
    content: "키워드";
    display: block;
    margin-bottom: 4px;
    font-size: var(--ab-b7);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ab-muted);
}

#ab-page .ab-console__meta {
    display: flex;
    gap: 22px;
    margin: 0;
}

#ab-page .ab-console__meta dt {
    margin-bottom: 4px;
    font-size: var(--ab-b7);
    font-weight: 500;
    color: var(--ab-muted);
}

/* 값은 크게, 기준은 분모처럼 작게 붙인다 */
#ab-page .ab-console__meta dd {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-family: var(--ab-mono);
    font-variant-numeric: tabular-nums;
}

#ab-page .ab-console__meta dd b {
    font-size: var(--ab-b2);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ab-ink);
}

#ab-page .ab-console__meta dd span {
    font-size: 11px;
    font-weight: 500;
    color: var(--ab-muted);
}

/* ---- 순위 추이 ---- */
#ab-page .ab-console__chart {
    position: relative;
    height: 112px;
    margin-bottom: 18px;
}

#ab-page .ab-console__chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#ab-page .ab-console__target {
    stroke: var(--ab-mint);
    stroke-width: 1;
    stroke-dasharray: 3 5;
    opacity: 0.8;
    vector-effect: non-scaling-stroke;
}

#ab-page .ab-console__line {
    fill: none;
    stroke: var(--ab-key);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* 목표선(3위)은 y=48 → 42.86% */
#ab-page .ab-console__goal {
    position: absolute;
    right: 0;
    top: 42.86%;
    transform: translateY(-50%) translateY(-13px);
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    color: #00a532;
}

/* 목표선 하나만 있어 첫 점(y=82)이 몇 위인지 읽을 수 없었다.
   위·아래 끝에 축 기준을 둔다. 위로 갈수록 상위 순위다. */
/* 라벨은 균등 배치가 아니라 자기 순위선 위에 정확히 앉아야 한다.
   1위=14.29% / 6위=85.71% (= 16/112, 96/112) 를 인라인 top 으로 받는다. */
#ab-page .ab-console__scale {
    position: absolute;
    left: -26px;
    top: 0;
    bottom: 0;
    width: 26px;
    font-family: var(--ab-mono);
    font-size: 11px;
    line-height: 1;
    color: var(--ab-muted);
    pointer-events: none;
}

#ab-page .ab-console__scale i {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-style: normal;
    white-space: nowrap;
}

/* 축 라벨 자리를 차트 왼쪽에 만든다. padding 이 아니라 margin 이어야 한다 —
   padding 을 주면 절대배치된 .ab-console__pts(inset:0, 패딩 박스 기준)와
   정상 흐름의 svg(콘텐츠 박스)가 어긋나 점이 선에서 밀린다. */
#ab-page .ab-console__chart {
    margin-left: 26px;
}

#ab-page .ab-console__pts {
    position: absolute;
    inset: 0;
}

#ab-page .ab-console__pts li {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--ab-key);
    box-shadow: 0 0 0 3px rgba(104, 49, 250, 0.22);
}

#ab-page .ab-console__pts li.is-now {
    background: var(--ab-mint);
    box-shadow: 0 0 0 4px rgba(0, 199, 60, 0.2);
}

/* ---- 입찰 로그 ---- */
#ab-page .ab-console__log {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--ab-line-soft);
}

#ab-page .ab-console__log li {
    display: grid;
    grid-template-columns: 46px 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--ab-r-xs);
    font-family: var(--ab-mono);
    font-size: var(--ab-b6);
    font-variant-numeric: tabular-nums;
}

#ab-page .ab-console__log li:last-child {
    background: var(--ab-paper);
}

#ab-page .ab-console__log b {
    font-weight: 500;
    color: var(--ab-muted);
}

#ab-page .ab-console__log span {
    font-weight: 700;
    color: var(--ab-ink);
}

#ab-page .ab-console__log em {
    font-style: normal;
    font-weight: 600;
    color: var(--ab-body);
}

#ab-page .ab-console__log i {
    font-style: normal;
    font-weight: 700;
    color: var(--ab-muted);
}

#ab-page .ab-console__log i.is-up { color: var(--ab-key); }
#ab-page .ab-console__log i.is-down { color: #00a532; }

/* 재생 중에는 새로 붙는 줄만 부드럽게 들어온다 */
.ab-motion #ab-page .ab-console__log li.is-new {
    animation: ab-logline 0.42s ease both;
}

@keyframes ab-logline {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

#ab-page .ab-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--ab-mint);
}

.ab-motion #ab-page .ab-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ab-mint);
    animation: ab-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ab-ping {
    0% { transform: scale(1); opacity: 0.6; }
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ---- 기능 칩 스트립 ---- */

#ab-page .ab-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 30px;
}

#ab-page .ab-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-pill);
    background: #fff;
    font-size: var(--ab-b5);
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--ab-ink);
}

#ab-page .ab-chips li::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c73c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 가치 제안 (교차 배치) ---- */

/* 애플식: 한 블록에 메시지 하나. 좌우로 쪼개지 않고 세로로 흐른다 */
#ab-page .ab-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 48px;
}

#ab-page .ab-split + .ab-split {
    margin-top: 140px;
}

/* 중앙 1단이라 좌우 뒤집기는 의미가 없다. 비주얼은 항상 본문 아래에 온다 */
#ab-page .ab-split__media {
    order: 2;
    width: 100%;
    max-width: 780px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* 지원 매체 대표 이미지 */
#ab-page .ab-split__body {
    max-width: 720px;
}

/* 섹션 eyebrow(주요 기능·지원 매체…)와 블록 eyebrow(입찰 스케줄·전략·알림)가
   똑같은 배지라서 두 레벨이 구분되지 않았다. 배지는 섹션에만 남기고
   블록은 텍스트 라벨로 낮춘다. */
#ab-page .ab-split__body .ab-eyebrow {
    margin-bottom: 12px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: var(--ab-b5);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ab-key);
}

#ab-page .ab-split__body h3 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.24;
    text-align: center;
}

#ab-page .ab-split__body p {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 500;
}

#ab-page .ab-split__body p span {
    display: block;
}

/* ---- 매체별 스펙시트 ---- */

#ab-page .ab-mediagroup + .ab-mediagroup {
    margin-top: var(--ab-sp-block);
}

/* 블록 헤더 — 서비스 소개의 .ab-head--center 와 같은 조판으로 맞춘다.
   기능·요금 안내는 좌측 정렬 28px 이어서 같은 서비스인데도
   페이지마다 헤더 체계가 달라 보였다. (.ab-section--tight 의 32px 규칙에 맞춤) */
#ab-page .ab-block__head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

#ab-page .ab-block__head h2 {
    font-size: 32px;
    line-height: 1.24;
    text-align: center;
}

#ab-page .ab-block__head p {
    margin-top: 14px;
    font-size: var(--ab-b2);
}

#ab-page .ab-block__sub {
    margin-bottom: 14px !important;
    font-size: var(--ab-t6);
    font-weight: 700;
}

#ab-page .ab-seg {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 34px;
    padding: 5px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-pill);
    background: #fff;
}

#ab-page .ab-seg button {
    padding: 11px 22px;
    border: 0;
    border-radius: var(--ab-r-pill);
    background: transparent;
    font-size: var(--ab-b4);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ab-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

#ab-page .ab-seg button:hover {
    color: var(--ab-ink);
}

#ab-page .ab-seg button[aria-selected="true"] {
    background: var(--ab-violet);
    color: #fff;
    box-shadow: 0 10px 20px -12px rgba(104, 49, 250, 0.8);
}

#ab-page .ab-seg button:focus-visible {
    outline: 3px solid rgba(104, 49, 250, 0.5);
    outline-offset: 2px;
}

/* 상품 탭을 바꿀 때 카드 높이가 519~615px 로 96px 튀었다.
   원인이 둘 — 제공 기능 줄 수(텍스트 열 374~533px)와
   PNG 세로 비율 차이(이미지 열 437~465px).
   가장 큰 패널(네이버 파워링크 615px)에 최소 높이를 맞춘다.
   min-height 이므로 내용이 더 늘어나면 카드가 자연히 커진다 —
   그때는 이 값을 다시 재서 올려야 점프가 다시 생기지 않는다.

   align-items 를 stretch 로 둬서 두 열이 카드 높이를 채우고,
   짧은 패널에서 남는 여백이 아래로만 쏠리지 않게 이미지를 수직 중앙에 놓는다. */
#ab-page .ab-media {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 48px;
    align-items: stretch;
    min-height: 620px;
    padding: 40px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
    box-shadow: var(--ab-shadow);
}

/* 매체 노출 예시는 실제 화면이라 이미지를 유지한다.
   PNG 안에 이미 기기 프레임이 들어 있어 판까지 두면 액자가 겹치므로,
   판을 걷어내고 매체 브랜드색 광원 위에 띄운다. */
#ab-page .ab-media__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 30px;
    border: 0;
    border-radius: var(--ab-r-md);
    background: none;
}

#ab-page .ab-media__panel::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ab-brand, rgba(104, 49, 250, 0.16)), transparent);
    pointer-events: none;
}

#ab-page .ab-media__panel img {
    position: relative;
    border-radius: var(--ab-r-sm);
}

#ab-page .ab-media__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px !important;
    font-size: var(--ab-t5);
    font-weight: 700;
}

#ab-page .ab-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-ink);
    font-size: var(--ab-b7);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

#ab-page .ab-spec + .ab-spec {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--ab-line-soft);
}

/* 한글 라벨이라 uppercase 는 아무 효과가 없고 넓은 자간만 남아 헐거워진다.
   .ab-eyebrow 와 같은 규칙(변환 제거 + 자간 조임)을 적용한다. */
#ab-page .ab-spec__label {
    display: block;
    margin-bottom: 14px;
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ab-muted);
}

#ab-page .ab-spec li {
    position: relative;
    padding-left: 26px;
    font-size: var(--ab-b3);
    line-height: 1.7;
    letter-spacing: -0.02em;
    color: var(--ab-body);
}

#ab-page .ab-spec li + li {
    margin-top: 10px;
}

#ab-page .ab-spec li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ab-key-line);
}

/* 라벤더(--ab-key-wash) 큰 면이 페이지에 두 곳이었다 — 이 판 7개와 ⑦ 혜택 밴드.
   면적이 큰 쪽을 중립 회색으로 빼서 보라가 다시 "강조"로 기능하게 한다.
   판 안의 보라 체크 아이콘만 색으로 남는다. */
#ab-page .ab-spec--auto {
    padding: 24px 26px;
    border-radius: var(--ab-r-md);
    background: var(--ab-paper);
    border-top: 0;
}

#ab-page .ab-spec--auto .ab-spec__label {
    color: var(--ab-key);
}

#ab-page .ab-spec--auto li {
    color: var(--ab-ink);
}

/* 강조판이 키컬러이므로 그 안의 체크도 키컬러로 맞춘다.
   초록은 이 페이지에서 "목표 도달·절감"이라는 뜻으로 쓰므로 항목 표시에는 쓰지 않는다. */
/* 판이 회색(--ab-paper)이 되면서 흰 칩(#fff)이 배경과 8단위밖에 차이나지 않아
   칩 형태가 사라졌다. 칩을 아예 걷고 보라 체크만 남긴다.
   16px 박스는 유지해 좌측 정렬(padding-left: 26px)과 수직 중심이 그대로 간다.
   칩이 없어졌으므로 글리프는 10px → 13px 로 키워 또렷하게 만든다. */
#ab-page .ab-spec--auto li::before {
    top: 8px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236831fa' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

/* ---- 추천 대상 ---- */

#ab-page .ab-who {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ab-r-lg);
}

#ab-page .ab-who li {
    padding: 40px 32px 36px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
    text-align: center;
}

/* 이 카드는 링크가 아니다. 호버로 들어 올리면 누를 수 있는 것처럼 보여
   눌러도 아무 일이 없는 잘못된 어포던스가 된다. 반응을 두지 않는다.
   (실제 버튼인 .ab-mediatab 의 호버는 그대로 유지한다) */

/* 3D 클립아트 대신, 각 고민을 데이터 비주얼로 직접 보여준다 */
#ab-page .ab-who__art {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    margin-bottom: 26px;
    padding: 18px 20px;
    border-radius: var(--ab-r-md);
    border: 1px solid #e7e1fc;
    background: linear-gradient(158deg, #f6f4ff 0%, #eae4fd 100%);
    overflow: hidden;
}

/* 비주얼 뒤에 옅은 광원을 깔아 밝은 면에서도 입체감이 생기게 한다 */
#ab-page .ab-who__art::after {
    content: "";
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 120px;
    background: radial-gradient(closest-side, rgba(104, 49, 250, 0.2), transparent);
    pointer-events: none;
}

#ab-page .ab-who__viz {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

#ab-page .ab-who__art img {
    max-height: 100%;
    width: auto;
}

#ab-page .ab-who p {
    font-size: var(--ab-b4);
    color: var(--ab-muted);
}

#ab-page .ab-who h3 {
    margin-top: 6px !important;
    font-size: var(--ab-t6);
    font-weight: 700;
    text-align: center;
}

/* ---- 성과 스트립 (잉크) ---- */

/* 지마켓 .gm-finale 와 동일한 딥 밴드 */
#ab-page .ab-stats {
    position: relative;
    padding: var(--ab-sp-section) 0;
    background:
        radial-gradient(680px 380px at 12% 0%, rgba(253, 61, 255, 0.24), transparent 70%),
        radial-gradient(560px 340px at 88% 34%, rgba(104, 49, 250, 0.4), transparent 70%),
        radial-gradient(720px 360px at 50% 100%, rgba(128, 180, 255, 0.2), transparent 70%),
        var(--ab-deep);
}

#ab-page .ab-stats .ab-wrap {
    position: relative;
}

#ab-page .ab-stats .ab-head h2 {
    color: #fff;
}

#ab-page .ab-stats .ab-eyebrow {
    background: rgba(255, 255, 255, 0.09);
    color: #b7a6ff;
}

#ab-page .ab-stats .ab-head p {
    color: rgba(255, 255, 255, 0.72);
}

#ab-page .ab-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#ab-page .ab-stats__grid li {
    padding: 34px 26px 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

#ab-page .ab-stats__grid li:last-child {
    border-right: 0;
}

#ab-page .ab-stats__label {
    display: block;
    margin-bottom: 12px;
    font-size: var(--ab-b5);
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.62);
}

/* 히어로 헤드라인과 같은 무지갯빛으로 페이지의 수치 조판을 통일한다 */
#ab-page .ab-stats__value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--ab-mono);
    font-size: 46px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: #fff;
}

/* 큰 숫자는 흰색으로 또렷하게, 단위에만 무지갯빛을 남긴다 */
#ab-page .ab-stats__value em {
    font-style: normal;
    font-size: 22px;
    background: var(--ab-iri);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- 이용 방법 (실제 순서 → 넘버링) ---- */

/* 서비스 이용 방법 —
   박스 4개 + 화살표는 가장 흔한 프로세스 표현이고, 이 페이지는 이미 카드가 많다.
   박스를 걷어내고 연결선 위의 노드로 두어 "흐름"을 형태로 보여준다. */
#ab-page .ab-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

/* 아이콘 중심을 가로지르는 진행선. 아이콘의 흰 배경이 선을 끊어 노드처럼 보인다. */
#ab-page .ab-steps::before {
    content: "";
    position: absolute;
    top: 34px;
    right: 12%;
    left: 12%;
    height: 2px;
    background: linear-gradient(to right, #ded6fb 0%, var(--ab-key) 100%);
}

#ab-page .ab-steps li {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}

#ab-page .ab-steps__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 24px;
    border: 2px solid #ded6fb;
    border-radius: 50%;
    background: var(--ab-paper);
    color: var(--ab-key);
    transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

/* 마지막 단계가 목적지이므로 채워서 도착점으로 읽히게 한다 */
#ab-page .ab-steps li:last-child .ab-steps__art {
    border-color: var(--ab-key);
    background: var(--ab-key);
    color: #fff;
}

#ab-page .ab-steps li:hover .ab-steps__art {
    transform: translateY(-4px);
    border-color: var(--ab-key);
}

#ab-page .ab-steps__art svg {
    width: 30px;
    height: 30px;
}

/* 번호는 노드 좌상단에 얹는다. 흐름선 위에 있으므로 배경으로 선을 가린다. */
#ab-page .ab-steps__no {
    position: absolute;
    top: -6px;
    left: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ab-paper);
    border-radius: 50%;
    background: var(--ab-key);
    font-family: var(--ab-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

#ab-page .ab-steps li:last-child .ab-steps__no {
    background: var(--ab-ink);
}


/* 전역 #ab-page h3 의 text-align: left 를 노드 정렬에 맞춰 되돌린다 */
#ab-page .ab-steps h3 {
    font-size: var(--ab-t7);
    font-weight: 700;
    text-align: center;
}

#ab-page .ab-steps p {
    margin-top: 8px;
    font-size: var(--ab-b4);
    color: var(--ab-muted);
}

/* ---- 광고주 무료 혜택 ---- */

/* 페이지를 닫는 혜택 밴드.
   원래 히어로와 같은 다크 캔버스였는데, 그러면 어두운 면이 히어로·성과·혜택
   세 번이 되고 ⑤성과(다크) → ⑥이용 방법(84px) → ⑦혜택(다크) 로 촘촘히 붙어
   성과 밴드가 한 번 더 나온 것처럼 보였다. 어두운 앵커는 히어로와 성과 둘로 두고,
   여기는 같은 색 여정을 옅게 깐 밝은 면으로 바꿔 오퍼임을 색으로 알린다.
   .ab-wrap 안에 있지만 좌우로 뻗어 나가 화면 폭 전체를 채운다. */
#ab-page .ab-free {
    position: relative;
    overflow: hidden;
    margin: 0 calc(50% - 50vw);
    padding: 120px calc(50vw - 50% + 24px);
    background:
        radial-gradient(620px 380px at 18% 0%, rgba(253, 61, 255, 0.10), transparent 70%),
        radial-gradient(680px 400px at 82% 30%, rgba(104, 49, 250, 0.16), transparent 70%),
        radial-gradient(720px 380px at 50% 108%, rgba(128, 180, 255, 0.12), transparent 70%),
        var(--ab-key-wash);
    text-align: center;
}

/* 장식 원 — 밝은 면으로 바뀌었으므로 흰 선이 아니라 옅은 보라 선이어야 보인다 */
#ab-page .ab-free::before {
    content: "";
    position: absolute;
    top: -110px;
    right: -70px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(104, 49, 250, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

#ab-page .ab-free::after {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -60px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(104, 49, 250, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

#ab-page .ab-free h2 {
    position: relative;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -0.03em;
    text-align: center;
    color: var(--ab-ink);
}

/* 히어로 헤드라인과 같은 색 여정으로 시작과 끝을 묶는다.
   밝은 면이므로 파스텔(--ab-iri) 이 아니라 짙은 값 세트(--ab-iri-ink) 를 쓴다. */
#ab-page .ab-free h2 .ab-free__hl {
    display: block;
    margin-top: 10px;
    background: var(--ab-iri-ink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#ab-page .ab-free p {
    position: relative;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ab-body);
}

#ab-page .ab-free p span {
    display: block;
}

/* 마감 밴드의 상담 CTA — 밝은 면이므로 솔리드 보라가 가장 강하다 */
#ab-page .ab-free .ab-btn-row {
    position: relative;
    margin-top: 34px;
}

/* 마감 밴드 다음에 오는 유의사항은 흰 바탕에서 조용히 받는다 */
#ab-page .ab-free + .ab-note {
    margin-top: 64px;
}

/* ==========================================================================
   2) 기능 안내
   ========================================================================== */

#ab-page .ab-fn {
    padding: var(--ab-sp-section-sm) 0 var(--ab-sp-section);
}

#ab-page .ab-fn__tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 46px;
}

#ab-page .ab-fn__tabs .ab-seg {
    margin-bottom: 0;
}

#ab-page .ab-fn__list {
    display: grid;
    gap: var(--ab-t6);
}

.ab-motion #ab-page .ab-fn__list.is-swap {
    animation: ab-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ab-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* 서비스 소개의 .ab-media 와 같은 판 규칙 — 흰 면 + 테두리 + 상시 그림자.
   호버 때만 그림자가 생기던 방식은 소개 페이지 카드들과 결이 달랐다. */
#ab-page .ab-fn-card {
    overflow: hidden;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
    box-shadow: var(--ab-shadow);
}

/* 그라데이션 헤드와 4px 보라 바는 소개 페이지에 없는 장치라 걷어낸다 */
#ab-page .ab-fn-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 32px;
    border-bottom: 1px solid var(--ab-line-soft);
    background: #fff;
}

#ab-page .ab-fn-card__head h3 {
    font-size: var(--ab-t6);
    font-weight: 700;
}

/* 카드 높이가 상품마다 377~446px 로 69px 튀어, 스크롤하며 읽을 때
   카드 크기가 계속 변했다. 기능 줄 수가 가장 많은 카드(라이브 7줄 + 레귤러 4줄)에
   맞춰 본문 최소 높이를 고정한다. 서비스 소개의 .ab-media 와 같은 처리다.
   min-height 이므로 줄이 더 늘면 카드가 자연히 커진다 —
   그때는 이 값을 다시 재서 올려야 점프가 다시 생기지 않는다. */
#ab-page .ab-fn-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 380px;
}

#ab-page .ab-fn-col {
    padding: 28px 32px 32px;
}

/* #fcfcff 는 흰색과 거의 같아 의미 없는 미세 차이였다. 구분선만 남긴다. */
#ab-page .ab-fn-col + .ab-fn-col {
    border-left: 1px solid var(--ab-line-soft);
    background: #fff;
}

#ab-page .ab-fn-col__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
}

#ab-page .ab-fn-col__title h4 {
    font-size: var(--ab-t8);
    font-weight: 700;
    letter-spacing: -0.02em;
}

#ab-page .ab-fn-col__title svg {
    width: 17px;
    height: 17px;
}

/* 상품별 입찰 최소 주기 — 라벨에 "최소"가 박혀 있어야 유의사항의
   등급 하한과 함께 읽어도 오해가 없다. 값은 모노로 조판한다. */
#ab-page .ab-fn-cycle {
    margin-left: auto;
    padding: 5px 11px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-key-wash);
    font-size: var(--ab-b7);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--ab-key);
}

#ab-page .ab-fn-cycle b {
    font-family: var(--ab-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#ab-page .ab-fn-col--live .ab-fn-col__title svg {
    color: var(--ab-violet);
}

#ab-page .ab-fn-col--regular .ab-fn-col__title svg {
    color: var(--ab-muted);
}

/* 테두리 칩을 걷고 서비스 소개의 "제공 기능"과 같은 체크 목록으로 조판한다.
   칩은 이 페이지에만 있던 형태여서 세 페이지의 목록 언어가 어긋나 있었다. */
#ab-page .ab-fn-feature {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

#ab-page .ab-fn-feature li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--ab-b4);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.7;
    color: var(--ab-ink);
}

#ab-page .ab-fn-feature svg {
    width: 14px;
    height: 14px;
    margin-top: 5px;
    flex: none;
}

/* 라이브 입찰이 주력이므로 소개 페이지의 강조판(--ab-paper)과 같은 무게를 준다.
   레귤러는 평문으로 두어 두 열의 위계가 드러나게 한다. */
#ab-page .ab-fn-col--live .ab-fn-feature {
    padding: 20px 22px;
    border-radius: var(--ab-r-md);
    background: var(--ab-paper);
}

#ab-page .ab-fn-col--live .ab-fn-feature svg {
    color: var(--ab-key);
}

/* 민트는 이 시스템에서 "목표 도달·절감" 뜻으로 쓰므로 기능 표시에는 쓰지 않는다.
   --ab-muted 는 흰 바탕에서 2.89:1 로 아이콘 기준(3:1)도 못 넘겨 --ab-body 를 쓴다. */
#ab-page .ab-fn-col--regular .ab-fn-feature svg {
    color: var(--ab-body);
}

#ab-page .ab-fn-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border: 1px dashed var(--ab-line);
    border-radius: var(--ab-r-sm);
    background: #fff;
    font-size: var(--ab-b5);
    color: var(--ab-muted);
}

#ab-page .ab-fn-empty svg {
    width: 15px;
    height: 15px;
    flex: none;
}

/* ==========================================================================
   3) 요금 안내
   ========================================================================== */

#ab-page .ab-fee {
    padding: var(--ab-sp-section-sm) 0 var(--ab-sp-section);
}

#ab-page .ab-block + .ab-block {
    margin-top: var(--ab-sp-section-sm);
}

/* .ab-eyebrow 와 같은 역할이므로 조판도 같게 둔다 (모노 12px → 산세리프 13px).
   같은 화면에서 두 라벨 시스템이 미묘하게 달라 보이던 것을 없앤다. */
#ab-page .ab-tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-key-wash);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ab-key);
}

/* ---- 플랜 카드 ---- */

#ab-page .ab-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

#ab-page .ab-plan {
    display: flex;
    flex-direction: column;
    padding: 34px 30px 32px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#ab-page .ab-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--ab-shadow);
}

/* 다크 레시피를 소개 페이지의 다크 밴드와 같은 계열로 맞춘다 —
   베이스는 --ab-night(#080a0d), 광원은 마젠타 → 바이올렛 순서의 같은 색 여정.
   밴드용 그라데이션 크기를 그대로 쓰면 카드에서 잘리므로 크기만 컴포넌트에 맞춘다.
   (이전에는 베이스 --ab-ink + 토큰 밖 #7c6cff 로 별개 레시피였다) */
#ab-page .ab-plan--free {
    border-color: transparent;
    background:
        radial-gradient(300px 200px at 15% -10%, rgba(253, 61, 255, 0.16), transparent 70%),
        radial-gradient(360px 260px at 85% 10%, rgba(104, 49, 250, 0.4), transparent 72%),
        var(--ab-night);
}

/* .ab-eyebrow / .ab-tag 와 같은 라벨 역할이므로 조판을 통일한다.
   모노 + 0.08em 이라 "서비스 타입 x 서비스 등급" 같은 한글이 헐겁게 벌어졌다. */
#ab-page .ab-plan__tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 13px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-key-wash);
    font-size: var(--ab-b6);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ab-key);
}

/* 소개 페이지의 다크면 라벨(.ab-stats .ab-eyebrow)과 같은 처리.
   #d8ffef 민트-화이트는 시스템 밖 색이었다. */
#ab-page .ab-plan--free .ab-plan__tag {
    background: rgba(255, 255, 255, 0.09);
    color: #b7a6ff;
}

#ab-page .ab-plan h3 {
    font-size: var(--ab-t5);
}

#ab-page .ab-plan--free h3 {
    color: #fff;
}

#ab-page .ab-plan__for {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--ab-b4);
    color: var(--ab-muted);
}

#ab-page .ab-plan--free .ab-plan__for {
    color: rgba(255, 255, 255, 0.7);
}

/* 툴팁 */
#ab-page .ab-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--ab-key-line);
    background: none;
    padding: 0;
    font-family: var(--ab-sans);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--ab-muted);
}

#ab-page .ab-plan--free .ab-tip {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
}

#ab-page .ab-tip__body {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 5;
    width: 246px;
    padding: 14px 16px;
    border-radius: var(--ab-r-sm);
    background: var(--ab-ink);
    box-shadow: 0 18px 40px -18px rgba(20, 18, 43, 0.6);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

#ab-page .ab-tip:hover .ab-tip__body,
#ab-page .ab-tip:focus-visible .ab-tip__body {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

#ab-page .ab-tip__body strong {
    display: block;
    margin-bottom: 5px;
    font-size: var(--ab-b5);
    color: #fff;
}

#ab-page .ab-tip__body span {
    display: block;
    font-size: var(--ab-b6);
    line-height: 1.6;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

#ab-page .ab-plan__price {
    margin: 24px 0 20px;
    padding: 20px 0;
    border-top: 1px solid var(--ab-line-soft);
    border-bottom: 1px solid var(--ab-line-soft);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--ab-b5);
    color: var(--ab-muted);
}

#ab-page .ab-plan--free .ab-plan__price {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.62);
}

#ab-page .ab-plan__price b {
    font-family: var(--ab-mono);
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: var(--ab-ink);
}

#ab-page .ab-plan--free .ab-plan__price b {
    color: #fff;
}

#ab-page .ab-plan__strike {
    font-family: var(--ab-mono);
    font-size: var(--ab-b4);
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.45);
}

#ab-page .ab-plan .ab-btn {
    width: 100%;
    margin-bottom: 24px;
}

#ab-page .ab-plan dl dt {
    margin-bottom: 8px;
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ab-muted);
}

#ab-page .ab-plan--free dl dt {
    color: rgba(255, 255, 255, 0.55);
}

#ab-page .ab-plan dl dt ~ dt {
    margin-top: 20px;
}

#ab-page .ab-plan dl dd {
    margin: 0;
    font-size: var(--ab-b4);
    line-height: 1.65;
    letter-spacing: -0.02em;
    color: var(--ab-ink);
}

#ab-page .ab-plan--free dl dd {
    color: rgba(255, 255, 255, 0.9);
}

#ab-page .ab-plan dl dd + dd {
    margin-top: 4px;
}

#ab-page .ab-plan dl dd b {
    font-weight: 700;
}

#ab-page .ab-plan dl dd.ab-plan__sub {
    font-size: var(--ab-b6);
    color: var(--ab-muted);
}

#ab-page .ab-plan--free dl dd.ab-plan__sub {
    color: rgba(255, 255, 255, 0.62);
}

/* ---- 표 ---- */

#ab-page .ab-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
}

#ab-page .ab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ab-b4);
}

#ab-page .ab-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#ab-page .ab-table th,
#ab-page .ab-table td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--ab-line-soft);
    text-align: center;
    letter-spacing: -0.02em;
    vertical-align: middle;
}

#ab-page .ab-table thead th {
    background: var(--ab-paper);
    font-size: var(--ab-b5);
    font-weight: 700;
    color: var(--ab-ink);
    border-bottom: 1px solid var(--ab-line);
}

#ab-page .ab-table tbody th {
    background: #fcfcff;
    font-weight: 600;
    color: var(--ab-ink);
    text-align: left;
}

#ab-page .ab-table tbody td {
    font-family: var(--ab-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ab-body);
}

#ab-page .ab-table tbody tr:last-child th,
#ab-page .ab-table tbody tr:last-child td {
    border-bottom: 0;
}

#ab-page .ab-table tbody tr:hover td {
    background: #fbfaff;
}

#ab-page .ab-table .ab-cell-hl {
    color: var(--ab-violet);
    font-weight: 700;
}

#ab-page .ab-table s {
    display: block;
    font-size: var(--ab-b6);
    color: var(--ab-muted);
}

#ab-page .ab-table s + span {
    display: block;
    margin-top: 3px;
    font-weight: 600;
    color: var(--ab-ink);
}

#ab-page .ab-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
}

#ab-page .ab-rating i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* 서비스 등급 이름이 곧 색(블랙·퍼플·레드·블루·그린)이라 색 자체는 바꿀 수 없다.
   대신 시스템에 있는 것은 토큰으로 맞춘다 — 특히 퍼플이 구 보라(#7c3aed)라
   통일한 브랜드 보라 옆에서 "틀린 색"으로 보였다.
   레드·블루는 대응 토큰이 없어 그대로 둔다 (콘텐츠가 요구하는 색). */
#ab-page .ab-rating i.is-black { background: var(--ab-ink); }
#ab-page .ab-rating i.is-purple { background: var(--ab-key); }
#ab-page .ab-rating i.is-red { background: #ef4444; }
#ab-page .ab-rating i.is-blue { background: #3b82f6; }
#ab-page .ab-rating i.is-green { background: var(--ab-mint); }

#ab-page .ab-tablenote {
    margin-top: 16px;
}

#ab-page .ab-tablenote li {
    position: relative;
    padding-left: 12px;
    font-size: var(--ab-b5);
    line-height: 1.7;
    color: var(--ab-muted);
}

#ab-page .ab-tablenote li::before {
    content: "-";
    position: absolute;
    left: 0;
}

#ab-page .ab-tablenote li.is-point {
    color: var(--ab-violet);
}

#ab-page .ab-vat {
    display: block;
    margin-bottom: 10px;
    font-family: var(--ab-mono);
    font-size: var(--ab-b6);
    color: var(--ab-muted);
    text-align: right;
}

/* 기간 탭 */
#ab-page .ab-fee__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

#ab-page .ab-fee__bar .ab-seg {
    margin-bottom: 0;
}

#ab-page .ab-fee__bar .ab-vat {
    margin-bottom: 0;
}

#ab-page .ab-panel {
    display: none;
}

#ab-page .ab-panel.is-active {
    display: block;
}

/* 요금 안내 하단 배너 */
#ab-page .ab-banner {
    display: block;
    margin-top: 40px;
    overflow: hidden;
    border-radius: var(--ab-r-md);
}

/* 배너 이미지 원본이 1080px 인데 본문 폭은 1132px 이라, max-width: 100% 만으로는
   확대되지 않아 오른쪽에 52px 이 비고 위 요금표와 오른쪽 끝이 어긋났다.
   4.8% 확대되지만 이 이미지는 이미 1배 해상도로 쓰이고 있어 체감 차이가 없다.
   근본 해결은 배너를 2264x252(본문 폭의 2배)로 다시 만드는 것이다. */
#ab-page .ab-banner img {
    width: 100%;
}

/* --------------------------------------------------------------------------
   요금 계산기 — 왼쪽에서 조건을 고르면 오른쪽 리드아웃에 금액이 찍힌다
   -------------------------------------------------------------------------- */

/* 좌우 패널의 바닥을 맞춘다 (align-items: start 였을 때 우측이 51px 짧아
   하단선이 어긋났다).
   높이를 맞추면 우측의 position: sticky 는 움직일 공간이 0 이 되어 무의미해지므로
   함께 걷어냈다 — 원래도 가용 여유가 51px 뿐이라 실효가 거의 없었고,
   계산기 전체가 450px 로 한 화면에 들어온다. */
#ab-page .ab-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: stretch;
}

#ab-page .ab-calc [hidden] {
    display: none !important;
}

/* ---- 왼쪽: 조건 선택 ---- */
#ab-page .ab-calc__set {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 34px 32px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
}

#ab-page .ab-calc__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: opacity 0.2s ease;
}

/* 레귤러 선택 시 등급·타입은 요금에 영향을 주지 않으므로 흐리게 잠근다 */
#ab-page .ab-calc__field.is-locked {
    opacity: 0.36;
}

#ab-page .ab-calc__field legend {
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 13px;
    padding: 0;
    font-size: var(--ab-b4);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ab-ink);
}

#ab-page .ab-calc__field legend span {
    margin-left: 8px;
    font-size: var(--ab-b6);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ab-muted);
}

#ab-page .ab-calc__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    clear: both;
}

#ab-page .ab-calc__opts input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#ab-page .ab-calc__opts label {
    /* 칩이 한 줄을 고르게 채워 조작 패널처럼 정렬되게 한다 */
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 17px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-pill);
    background: #fff;
    font-size: var(--ab-b4);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ab-body);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

#ab-page .ab-calc__opts--type label {
    flex-direction: column;
    gap: 1px;
    padding: 7px 12px;
}

#ab-page .ab-calc__opts label small {
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ab-muted);
    transition: color 0.18s ease;
}

#ab-page .ab-calc__opts label i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* 위 .ab-rating 과 같은 등급 색 (퍼플·그린은 토큰으로) */
#ab-page .ab-calc__opts label i.is-purple { background: var(--ab-key); }
#ab-page .ab-calc__opts label i.is-red { background: #ef4444; }
#ab-page .ab-calc__opts label i.is-blue { background: #3b82f6; }
#ab-page .ab-calc__opts label i.is-green { background: var(--ab-mint); }

/* :not(:checked) 가 없으면 이 규칙의 명세(1,3,2)가 아래 :checked 규칙(1,2,2)을 이겨,
   이미 선택된 보라 칩에 호버할 때 글자가 잉크색으로 바뀌었다 — 보라 위 2.86:1 로
   AA 미달이고 배경과도 부딪혔다. 선택되지 않은 칩에만 적용한다. */
#ab-page .ab-calc__opts input:not(:disabled):not(:checked) + label:hover {
    border-color: var(--ab-key-lift);
    color: var(--ab-ink);
}

/* 선택된 칩의 호버는 배경만 한 단계 밝게 — .ab-btn--primary:hover 와 같은 값 */
#ab-page .ab-calc__opts input:checked + label:hover {
    border-color: #7643ff;
    background: #7643ff;
    color: #fff;
}

#ab-page .ab-calc__opts input:checked + label {
    border-color: var(--ab-violet);
    background: var(--ab-violet);
    color: #fff;
    box-shadow: 0 10px 20px -12px rgba(104, 49, 250, 0.8);
}

/* 0.72 는 키컬러 위에서 3.82:1 로 12px 부제 기준 미달. 0.88 이면 5.01:1 */
#ab-page .ab-calc__opts input:checked + label small {
    color: rgba(255, 255, 255, 0.88);
}

#ab-page .ab-calc__opts input:focus-visible + label {
    outline: 3px solid rgba(104, 49, 250, 0.5);
    outline-offset: 2px;
}

#ab-page .ab-calc__opts input:disabled + label {
    cursor: default;
}

/* ---- 오른쪽: 금액 리드아웃 ---- */
#ab-page .ab-calc__out {
    display: flex;
    flex-direction: column;
    padding: 30px 28px 26px;
    border-radius: var(--ab-r-lg);
    /* 광고주 전용 플랜 카드와 같은 다크 레시피 (--ab-night + 바이올렛 광원).
       이전 #2a2559 는 네이비-바이올렛으로 소개 페이지 어디에도 없는 색이었다. */
    background:
        radial-gradient(340px 240px at 100% 0%, rgba(104, 49, 250, 0.42), transparent 72%),
        var(--ab-night);
    color: #fff;
    box-shadow: var(--ab-shadow);
}

#ab-page .ab-calc__combo {
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--ab-mono);
    font-size: var(--ab-b5);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.66);
}

#ab-page .ab-calc__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#ab-page .ab-calc__price s {
    font-family: var(--ab-mono);
    font-size: var(--ab-b4);
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.42);
}

#ab-page .ab-calc__price strong {
    display: block;
    font-family: var(--ab-mono);
    font-size: 42px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #fff;
}

#ab-page .ab-calc__price strong.is-ask {
    font-family: var(--ab-sans);
    font-size: var(--ab-t4);
    font-weight: 800;
    letter-spacing: -0.03em;
}

#ab-page .ab-calc__price strong em {
    margin-left: 3px;
    font-family: var(--ab-sans);
    font-size: var(--ab-t6);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 민트가 #00b985 / #4fe0b4 / --ab-mint 세 갈래였다.
   "절감"은 이 시스템에서 --ab-mint 의 뜻이고, 검정 위 8.8:1 로 대비도 충분하다. */
#ab-page .ab-calc__save {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--ab-r-pill);
    background: rgba(0, 199, 60, 0.16);
    font-size: var(--ab-b6);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ab-mint);
}

#ab-page .ab-calc__spec {
    margin: 24px 0 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#ab-page .ab-calc__spec div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

#ab-page .ab-calc__spec div + div {
    margin-top: 11px;
}

#ab-page .ab-calc__spec dt {
    font-size: var(--ab-b5);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
}

#ab-page .ab-calc__spec dd {
    margin: 0;
    font-family: var(--ab-mono);
    font-size: var(--ab-b4);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #fff;
}

/* 좌측과 높이를 맞추며 남는 공간을 스펙 목록 아래로 밀어,
   CTA 와 안내문이 패널 바닥에 붙게 한다 */
#ab-page .ab-calc__out .ab-btn {
    display: block;
    width: 100%;
    margin-top: auto;
    background: var(--ab-violet-lift);
    border-color: var(--ab-violet-lift);
}

#ab-page .ab-calc__out .ab-btn:hover {
    background: #8f80ff;
    border-color: #8f80ff;
}

#ab-page .ab-calc__vat {
    margin: 14px 0 0;
    font-size: var(--ab-b7);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   반응형 (PC 우선 — 좁은 창 대응)
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    /* .ab-hero__grid / .ab-split 은 flex 세로 스택이라 좁혀도 열 수가 변하지 않는다.
       (여기 있던 grid-template-columns 와 .ab-split--flip 규칙은 무효라 걷어냈다) */
    #ab-page .ab-split {
        gap: 40px;
    }

    #ab-page .ab-hero__title {
        font-size: var(--ab-t2);
    }

    #ab-page .ab-head h2 {
        font-size: var(--ab-t3);
    }

    #ab-page .ab-media {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #ab-page .ab-stats__grid,
    #ab-page .ab-steps,
    #ab-page .ab-who,
    #ab-page .ab-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #ab-page .ab-stats__grid li:nth-child(2n) {
        border-right: 0;
    }

    #ab-page .ab-calc {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    #ab-page .ab-section {
        padding: var(--ab-sp-section-sm) 0;
    }

    #ab-page .ab-hero__title {
        font-size: var(--ab-t3);
    }

    #ab-page .ab-stats__grid,
    #ab-page .ab-steps,
    #ab-page .ab-who,
    #ab-page .ab-plans,
    #ab-page .ab-fn-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    #ab-page .ab-stats__grid li {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    #ab-page .ab-fn-col + .ab-fn-col {
        border-left: 0;
        border-top: 1px solid var(--ab-line-soft);
    }

    #ab-page .ab-free {
        padding: 76px calc(50vw - 50% + 20px);
    }

    #ab-page .ab-calc__set {
        padding: 26px 20px;
        gap: 24px;
    }

    #ab-page .ab-calc__opts label {
        min-height: 42px;
        padding: 0 14px;
        font-size: var(--ab-b5);
    }

    #ab-page .ab-calc__opts--type label {
        padding: 6px 14px;
    }

    #ab-page .ab-calc__out {
        padding: 26px 22px 24px;
    }

    #ab-page .ab-calc__price strong {
        font-size: var(--ab-t3);
    }
}

/* 첫 화면 요소는 등장 연출 없이 즉시 확정된 상태로 그린다 */
.ab-motion #ab-page .ab-reveal.is-instant {
    transition: none;
    animation: none;
}

/* --------------------------------------------------------------------------
   입찰 스케줄 매트릭스 — 설정 화면이 아니라 설정 결과를 그림으로 보여준다
   -------------------------------------------------------------------------- */

#ab-page .ab-sched {
    margin: 0;
    padding: 34px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
    box-shadow: var(--ab-shadow);
}

#ab-page .ab-sched__grid {
    display: grid;
    grid-template-columns: 24px repeat(24, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
}

#ab-page .ab-sched__day {
    font-size: var(--ab-b7);
    font-weight: 600;
    color: var(--ab-muted);
}

/* 사각 셀이 아니라 점으로 찍는다. 인쇄물의 하프톤처럼 읽히는 것이 핵심이다 */
#ab-page .ab-sched__grid i {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* 목표 순위가 높을수록 진하게 — 색의 농도가 곧 데이터다 */
#ab-page .ab-sched i.is-l0 { background: #e9eaee; }
#ab-page .ab-sched i.is-l1 { background: #d9d2fb; }
#ab-page .ab-sched i.is-l2 { background: #9d86f7; }
#ab-page .ab-sched i.is-l3 { background: var(--ab-key); }

/* space-between 으로 균등 배치하면 0/6/12/18/23시가 25% 간격으로 놓이는데
   실제 열 중심은 2.1 / 27.1 / 52.1 / 77.1 / 97.9% 라 약 2% 어긋났다.
   격자와 같은 24열 그리드에 얹어 각 라벨을 자기 열 위에 세운다. */
#ab-page .ab-sched__axis {
    display: grid;
    grid-template-columns: 24px repeat(24, minmax(0, 1fr));
    gap: 4px;
    margin: 12px 0 0;
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    color: var(--ab-muted);
}

/* 0 · 6 · 12 · 18 · 23 시 — 1번 칸은 요일 라벨 자리라 비운다 */
#ab-page .ab-sched__axis span {
    justify-self: center;
    white-space: nowrap;
}

#ab-page .ab-sched__axis span:nth-child(1) { grid-column: 2; }
#ab-page .ab-sched__axis span:nth-child(2) { grid-column: 8; }
#ab-page .ab-sched__axis span:nth-child(3) { grid-column: 14; }
#ab-page .ab-sched__axis span:nth-child(4) { grid-column: 20; }
#ab-page .ab-sched__axis span:nth-child(5) { grid-column: 25; }

#ab-page .ab-sched__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ab-line-soft);
}

#ab-page .ab-sched__legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ab-b7);
    color: var(--ab-body);
}

#ab-page .ab-sched__legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


/* --------------------------------------------------------------------------
   입찰 설정 스펙시트 / 입찰 알림 카드
   스케줄 매트릭스와 같은 흰 패널 규칙을 쓰고, 값은 모노로 조판한다
   -------------------------------------------------------------------------- */

#ab-page .ab-setup,
#ab-page .ab-alarm {
    margin: 0;
    padding: 34px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
    box-shadow: var(--ab-shadow);
}

#ab-page .ab-setup figcaption {
    margin-bottom: 6px;
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ab-violet);
}

#ab-page .ab-setup dl > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--ab-line-soft);
}

#ab-page .ab-setup dl > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#ab-page .ab-setup dt {
    font-size: var(--ab-b5);
    color: var(--ab-muted);
}

#ab-page .ab-setup dd {
    margin: 0;
    font-family: var(--ab-mono);
    font-size: var(--ab-b3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ab-ink);
}

#ab-page .ab-setup dd i {
    margin: 0 8px;
    font-style: normal;
    color: var(--ab-line);
}

#ab-page .ab-setup__on {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-key-wash);
    font-size: var(--ab-b6);
    font-weight: 700;
    color: var(--ab-key);
}

/* ---- 알림 카드 ---- */
#ab-page .ab-alarm__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

#ab-page .ab-alarm__ch {
    padding: 4px 10px;
    border: 1px solid var(--ab-line);
    background: #fff;
    border-radius: var(--ab-r-pill);
    font-size: var(--ab-b7);
    font-weight: 600;
    color: var(--ab-body);
}

#ab-page .ab-alarm__time {
    margin-left: auto;
    font-family: var(--ab-mono);
    font-size: var(--ab-b6);
    font-variant-numeric: tabular-nums;
    color: var(--ab-muted);
}

#ab-page .ab-alarm__title {
    font-size: var(--ab-t7);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ab-ink);
}

#ab-page .ab-alarm__plan {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 4px 11px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-violet-wash);
    font-size: var(--ab-b7);
    font-weight: 700;
    color: var(--ab-violet);
}

#ab-page .ab-alarm__stat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ab-line-soft);
}

#ab-page .ab-alarm__stat li {
    display: flex;
    flex-direction: column-reverse;
    gap: 5px;
    padding-right: 12px;
}

#ab-page .ab-alarm__stat li + li {
    padding-left: 18px;
    border-left: 1px solid var(--ab-line-soft);
}

#ab-page .ab-alarm__stat b {
    font-family: var(--ab-mono);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ab-ink);
}

#ab-page .ab-alarm__stat span {
    font-size: var(--ab-b7);
    color: var(--ab-muted);
}

/* ==========================================================================
   다크 히어로 위 요소 재정의
   콘솔·계기판·칩은 히어로 안에만 있으므로 다크 기준으로 덮어쓴다.
   (밝은 정보 구간의 패널 규칙은 그대로 유지된다)
   ========================================================================== */

#ab-page .ab-hero .ab-console {
    border: 1px solid var(--ab-glass-line);
    background: var(--ab-glass);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
    color: #fff;
    backdrop-filter: blur(14px);
}

#ab-page .ab-hero .ab-console__bar,
#ab-page .ab-hero .ab-console__log {
    border-color: var(--ab-glass-line);
}

/* 보조 텍스트 알파 하한은 0.5 —
   검정(#080a0d) 위에서 0.5 가 약 4.9:1 로 WCAG AA(4.5:1)를 겨우 넘긴다.
   0.38~0.46 이던 값들은 3.2~4.3:1 로 모두 미달이었고,
   히어로 글로우가 배경 명도를 올리는 구간에서는 더 낮아졌다. */
#ab-page .ab-hero .ab-console__status { color: rgba(255, 255, 255, 0.78); }
#ab-page .ab-hero .ab-console__clock { color: rgba(255, 255, 255, 0.5); }
#ab-page .ab-hero .ab-console__kw { color: #fff; }
#ab-page .ab-hero .ab-console__kw::before,
#ab-page .ab-hero .ab-console__meta dt { color: rgba(255, 255, 255, 0.5); }
#ab-page .ab-hero .ab-console__meta dd b { color: #fff; }
#ab-page .ab-hero .ab-console__meta dd span { color: rgba(255, 255, 255, 0.5); }

#ab-page .ab-hero .ab-console__line { stroke: var(--ab-key-lift); }
#ab-page .ab-hero .ab-console__pts li {
    background: var(--ab-key-lift);
    box-shadow: 0 0 0 3px rgba(147, 132, 254, 0.28);
}
#ab-page .ab-hero .ab-console__pts li.is-now {
    background: #80b4ff;
    box-shadow: 0 0 0 4px rgba(128, 180, 255, 0.3);
}
#ab-page .ab-hero .ab-console__target { stroke: #80b4ff; }
#ab-page .ab-hero .ab-console__goal { color: #80b4ff; }

#ab-page .ab-hero .ab-console__log li:last-child { background: rgba(255, 255, 255, 0.06); }
#ab-page .ab-hero .ab-console__log b { color: rgba(255, 255, 255, 0.5); }
#ab-page .ab-hero .ab-console__log span { color: #fff; }
#ab-page .ab-hero .ab-console__log em { color: rgba(255, 255, 255, 0.76); }
#ab-page .ab-hero .ab-console__log i { color: rgba(255, 255, 255, 0.5); }
#ab-page .ab-hero .ab-console__log i.is-up { color: #b7a6ff; }
#ab-page .ab-hero .ab-console__log i.is-down { color: #80b4ff; }

/* 계기판 */
#ab-page .ab-hero .ab-readout b { color: #fff; }
#ab-page .ab-hero .ab-readout span { color: rgba(255, 255, 255, 0.5); }

/* 고스트 버튼 */
#ab-page .ab-hero .ab-btn--ghost {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #fff;
}

#ab-page .ab-hero .ab-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* 매체 그룹은 탭 패널이므로 그룹 간 여백이 필요 없다 */
#ab-page .ab-mediagroup.ab-panel {
    margin-top: 0;
}

/* 주요 기능 강약 —
   2열로 나란히 놓으면 가운데 정렬 텍스트가 둘이 되어 시선의 중심이 갈린다.
   세로 스택은 유지하고, 첫 블록(스케줄 격자)보다 뒤 두 블록의 비주얼을 좁혀 위계를 만든다. */
#ab-page .ab-split--sm .ab-split__media {
    max-width: 620px;
}

#ab-page .ab-split--sm .ab-split__body h3 {
    font-size: 28px;
}

/* 히어로 하단 — 콘솔·계기판·칩의 좌우 축을 하나로 모으고,
   수치(계기판)와 기능(칩)의 무게를 벌려 위계를 만든다. */
#ab-page .ab-hero .ab-readout li {
    border: 1px solid var(--ab-glass-line);
    background: rgba(255, 255, 255, 0.03);
}

/* 칩 7개는 860px에 안 들어간다. 콘솔·계기판(860)이 주 축이고
   칩은 그 아래 한 단계 넓은 보조 띠로 둔다. */
#ab-page .ab-hero .ab-chips {
    gap: 8px;
    padding: 26px 0 88px;
}

/* 계기판보다 한 단계 조용하게 — 같은 무게로 보이면 수치가 죽는다.
   0.62 는 검정 위에서 약 7.5:1 로 AA 를 통과한다. */
#ab-page .ab-hero .ab-chips li {
    gap: 6px;
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, 0.13);
    background: transparent;
    font-size: var(--ab-b6);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
}

#ab-page .ab-hero .ab-chips li::before {
    width: 13px;
    height: 13px;
    opacity: 0.7;
}

/* ==========================================================================
   히어로 마감 — 질감 · 광택 · 생동 · 스크롤 유도
   ========================================================================== */

/* ① 미세 그리드
   완전한 단색 검정은 얇아 보인다. 아주 옅은 격자를 깔아 깊이를 주되,
   가장자리로 갈수록 마스크로 사라지게 해 격자가 주인공이 되지 않게 한다. */
#ab-page .ab-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(115% 85% at 50% 26%, #000 0%, transparent 70%);
    mask-image: radial-gradient(115% 85% at 50% 26%, #000 0%, transparent 70%);
    pointer-events: none;
}

/* ② 콘솔 상단 광택
   유리 패널은 빛을 받는 위쪽 모서리가 밝아야 떠 보인다. */
#ab-page .ab-hero .ab-console::after {
    content: "";
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
}

/* ③ 현재 순위 지점 펄스 — 주인공인 차트가 살아 있음을 보여준다 */
.ab-motion #ab-page .ab-hero .ab-console__pts li.is-now::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #80b4ff;
    animation: ab-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   지원 매체 — 카드형 매체 탭
   알약 탭은 폭이 남고 계층이 안 보였다. 컨테이너를 4등분한 카드로 바꾼다.
   선택 여부는 채움(보라)으로만 알린다 — 매체별 색점은 걷어냈다.
   ========================================================================== */

#ab-page .ab-mediatabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

#ab-page .ab-mediatab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px 22px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

#ab-page .ab-mediatab:hover {
    transform: translateY(-3px);
    border-color: #c9bcfb;
}

#ab-page .ab-mediatab b {
    font-size: var(--ab-t7);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ab-ink);
}

/* 12px 부제라 --ab-muted(#9099a3) 는 흰 바탕에서 2.89:1 로 AA 미달이었다.
   --ab-body(#5b6670) 는 5.85:1 로 통과한다. */
#ab-page .ab-mediatab span {
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    color: var(--ab-body);
}

/* 위계 —
   상위(매체 카드)가 옅은 배경, 하위(상품 seg)가 꽉 찬 보라였다. 계층상 위에 있는
   쪽이 더 조용해서 "지금 어느 매체를 보는지"가 "어느 상품을 보는지"보다 덜 읽혔다.
   강약을 뒤집어 매체 카드를 채우고, 상품 탭은 아래에서 한 단계 낮춘다. */
#ab-page .ab-mediatab[aria-selected="true"] {
    border-color: var(--ab-key);
    background: var(--ab-key);
    box-shadow: 0 14px 30px -14px rgba(104, 49, 250, 0.55);
}

#ab-page .ab-mediatab[aria-selected="true"] b {
    color: #fff;
}

/* 키컬러 위 흰 72% 는 3.89:1 로 미달. 0.88 이면 5.01:1 로 통과한다. */
#ab-page .ab-mediatab[aria-selected="true"] span {
    color: rgba(255, 255, 255, 0.88);
}


#ab-page .ab-mediatab:focus-visible {
    outline: 3px solid rgba(104, 49, 250, 0.5);
    outline-offset: 2px;
}

/* 상품 탭이 매체 카드 바로 아래에 붙어 계층이 보이게 한다 */
#ab-page .ab-mediagroup .ab-seg {
    margin-top: 28px;
    margin-bottom: 28px;
}

/* 두 계층을 농도로 가른다 —
     매체 카드(상위) : 솔리드 보라 + 흰 글자
     상품 탭 (하위)  : 라벤더 + 보라 글자
   상품이 하나뿐인 매체도 같은 상품 탭 구조를 쓰므로, 예전처럼
   눌리지 않는 정적 라벨(.ab-media__only)을 따로 둘 필요가 없어졌다.

   여기서만 바꾼다 — 기능 안내·요금 안내에서는 .ab-seg 가 그 페이지의
   주 탭이므로 꽉 찬 보라를 그대로 써야 한다.
   box-shadow: none 은 테두리가 아니라 상위 규칙의 보라 드롭섀도를 끄는 것이다. */
#ab-page .ab-mediagroup .ab-seg button[aria-selected="true"] {
    background: var(--ab-key-wash);
    box-shadow: none;
    color: var(--ab-key);
}

/* ==========================================================================
   지원 매체 — 매체별 정체성과 전환
   ========================================================================== */

/* 매체마다 고유 광원색. 로고를 쓰지 않고도 패널마다 분위기가 달라진다. */
#ab-page #ab-m-naver { --ab-brand: rgba(3, 199, 90, 0.18); }
#ab-page #ab-m-google { --ab-brand: rgba(66, 133, 244, 0.18); }
#ab-page #ab-m-gmarket { --ab-brand: rgba(255, 72, 0, 0.16); }
#ab-page #ab-m-11st { --ab-brand: rgba(255, 0, 56, 0.14); }

/* 탭 전환이 즉시 바뀌어 뚝뚝 끊겼다. 들어오는 패널만 부드럽게 올린다. */
.ab-motion #ab-page .ab-panel.is-active {
    animation: ab-panelin 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ab-panelin {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* 밝은 면의 수치도 히어로와 같은 색 여정으로 */
/* ==========================================================================
   섹션 위계 — 여백과 제목 크기로 리듬을 만든다
   모든 섹션이 110px / 40px 로 같아 7,600px를 내려가는 동안 변화가 없었다.

   1단 핵심 주장 : 주요 기능 · 성과      여백 150 / 제목 48
   2단 정보·증거 : 지원 매체             여백 110 / 제목 40  (기본)
   3단 보조      : 추천 대상 · 이용 방법  여백 84  / 제목 32
   ========================================================================== */

#ab-page .ab-section--lead {
    padding: 150px 0;
}

#ab-page .ab-section--lead .ab-head {
    margin-bottom: 76px;
}

#ab-page .ab-section--lead .ab-head h2 {
    font-size: 48px;
    line-height: 1.2;
}

#ab-page .ab-section--tight .ab-head {
    margin-bottom: 44px;
}

#ab-page .ab-section--tight .ab-head h2 {
    font-size: 32px;
}

/* 성과는 페이지의 두 번째 어두운 앵커라 1단으로 다룬다 */
#ab-page .ab-stats {
    padding: 150px 0;
}

#ab-page .ab-stats .ab-head h2 {
    font-size: 48px;
    line-height: 1.2;
}

/* 섹션 여백이 넓어졌으므로 섹션 안 블록 간격은 조인다 */
#ab-page .ab-split + .ab-split {
    margin-top: 118px;
}

/* ==========================================================================
   본문 스크롤 반응
   히어로만 살아 있고 본문은 정적이었다. 두 시그니처 요소가 시야에 들어올 때
   "그려지는" 과정을 보여 준다. 모션이 꺼진 사용자에게는 완성 상태로 남는다.
   ========================================================================== */

/* 스케줄 매트릭스 — 168칸이 물결처럼 채워진다 */
.ab-motion #ab-page .ab-sched__grid i {
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ab-motion #ab-page .ab-sched__grid.is-armed i {
    opacity: 0;
    transform: scale(0.35);
}

/* 이용 방법 — 진행선이 왼쪽에서 그려지고 노드가 순서대로 올라온다 */
.ab-motion #ab-page .ab-steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ab-motion #ab-page .ab-steps.is-drawn::before {
    transform: scaleX(1);
}

.ab-motion #ab-page .ab-steps.is-armed li {
    opacity: 0;
    transform: translateY(12px);
}

.ab-motion #ab-page .ab-steps li {
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ab-motion #ab-page .ab-steps.is-drawn li:nth-child(1) { transition-delay: 0.18s; }
.ab-motion #ab-page .ab-steps.is-drawn li:nth-child(2) { transition-delay: 0.34s; }
.ab-motion #ab-page .ab-steps.is-drawn li:nth-child(3) { transition-delay: 0.5s; }
.ab-motion #ab-page .ab-steps.is-drawn li:nth-child(4) { transition-delay: 0.66s; }