/* ==========================================================================
   자동입찰 (ServiceInfo > ServiceIndex / ServiceFunction / ServiceCharge) — 모바일
   PC(css/AdSolution/AutoBid.css)와 동일 규칙, 모바일 퍼스트 사이징

   - 제목·본문 모두 Pretendard, 위계는 크기 + 굵기로만
   - 수치와 eyebrow는 모노스페이스 (순위추적 --rt-mono 와 동일 패턴)
   - 전역 .content h1~h4 장식 간섭은 #ab-page ID 스코프로 차단
   ========================================================================== */

/* 페이지 탭 (서비스 소개 / 기능 안내 / 요금 안내)
   공통 CSS 가 position: sticky; top: 50px 로 헤더 아래에 붙이려 하지만
   z-index 가 없다. #ab-page 도 position: relative; z-index: auto 라
   DOM 순서상 뒤에 오는 #ab-page 가 탭 위에 그려져 탭이 가려진다.
   헤더(9999)보다는 낮고 본문·상품 스트립보다는 높게 올린다.
   이 파일은 자동입찰 3개 페이지에서만 로드되므로 다른 페이지에는 영향이 없다. */
.content_tab {
    z-index: 30;
}

#ab-page {
    /* ---- color ----
       PC 리뉴얼과 같은 팔레트로 맞춘다.
       원칙은 "무채색이 바탕이고 색은 데이터에만 쓴다" — 기존 모바일 값은
       ink·paper·line 이 모두 보라 기운을 띠어 면 전체가 물들어 있었다.
       사이즈·라운드·여백 토큰은 모바일 값을 그대로 유지한다. */
    --ab-ink: #16191d;

    /* 키컬러 한 종만 쓴다. --ab-violet* 은 기존 규칙이 참조하는 이름이라
       별칭으로 남기고 값만 키컬러에 맞춘다. */
    --ab-key: #6831fa;
    --ab-key-lift: #9384fe;
    --ab-key-wash: #f0ecfe;
    --ab-key-line: #cfc9f2;    /* 키컬러 계열의 옅은 선·점 */
    --ab-night: #080a0d;       /* 다크 면 베이스 */

    /* 헤드라인용 무지갯빛 — 하나의 색 여정(마젠타 → 바이올렛 → 블루)을 두 벌로.
       어두운 면에는 파스텔(--ab-iri), 밝은 면에는 같은 색상환의 짙은 값(--ab-iri-ink). */
    --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-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-body: #5b6670;
    --ab-muted: #9099a3;

    --ab-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --ab-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Roboto Mono', Consolas, 'Pretendard', monospace;

    /* 제목 스케일 (모바일) */
    --ab-t1: 30px;
    --ab-t2: 26px;
    --ab-t3: 24px;
    --ab-t4: 22px;
    --ab-t5: 20px;
    --ab-t6: 18px;
    --ab-t7: 17px;
    --ab-t8: 16px;

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

    --ab-r-xs: 10px;
    --ab-r-sm: 12px;
    --ab-r-md: 16px;
    --ab-r-lg: 20px;
    --ab-r-pill: 999px;

    --ab-sp-section: 64px;
    --ab-sp-section-sm: 52px;
    --ab-sp-block: 44px;
    --ab-sp-stack: 24px;

    --ab-shadow: 0 20px 46px -26px rgba(22, 25, 29, 0.16);
    --ab-shadow-lift: 0 26px 58px -28px rgba(104, 49, 250, 0.6);

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

    /* overflow: hidden 은 스크롤 컨테이너를 만들어 내부 position: sticky
       (.ab-calc__out 금액 리드아웃)를 무력화한다. clip 은 같은 클리핑을 하면서
       스크롤 컨테이너를 만들지 않는다. hidden 을 먼저 둬 미지원 브라우저 폴백. */
    overflow: hidden;
    overflow: clip;
}

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

#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.32;
    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.02em;
    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;
}

/* --------------------------------------------------------------------------
   공용
   -------------------------------------------------------------------------- */

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

#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 는 효과가 없고 넓은 자간만 남아 어정쩡해진다.
   PC 와 같이 변환을 빼고 자간을 좁힌 뒤, 필 배지로 만들어 위계를 준다. */
#ab-page .ab-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-key-wash);
    font-size: var(--ab-b7);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ab-key);
}

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

/* 섹션 eyebrow(배지)와 구분되도록 블록 eyebrow 는 텍스트 라벨로 낮춘다 */
#ab-page .ab-split__body .ab-eyebrow {
    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-head {
    margin-bottom: 32px;
}

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

#ab-page .ab-head h2 {
    font-size: var(--ab-t2);
    line-height: 1.34;
}

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

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

/* PC 와 같이 헤드라인 강조부를 그라데이션 텍스트로.
   면이 밝으므로 짙은 값 세트(--ab-iri-ink)를 쓴다. */
#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;
    width: 100%;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: var(--ab-r-pill);
    background: none;
    font-size: var(--ab-b1);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: transform 0.18s ease;
}

#ab-page .ab-btn:active {
    transform: scale(0.98);
}

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

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

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

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

#ab-page .ab-btn-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#ab-page .ab-btn-row form {
    display: flex;
}

#ab-page .ab-btn-row form .ab-btn {
    flex: 1;
}

#ab-page .ab-steps + .ab-btn-row,
#ab-page .ab-btn-row--after {
    margin-top: 32px;
}

/* 스크롤 등장 */
#ab-page .ab-reveal {
    opacity: 1;
    transform: none;
}

.ab-motion #ab-page .ab-reveal {
    opacity: 0;
    transform: translateY(20px);
    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-page .ab-note {
    display: flex;
    gap: 14px;
    margin-top: var(--ab-sp-stack);
    padding: 22px 20px;
    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: 30px;
    height: 30px;
    border-radius: var(--ab-r-xs);
    background: var(--ab-violet-wash);
    color: var(--ab-violet);
}

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

#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: 13px;
    font-size: var(--ab-b6);
    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: 10px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ab-key-line);
}

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

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

/* 히어로는 페이지에서 유일하게 어두운 시작면이다 (PC 와 같은 캔버스).
   밝은 히어로였을 때는 콘솔이 흰 바탕 위의 섬처럼 떠 있었다.
   광원은 마젠타 → 바이올렛 → 블루의 같은 색 여정, 크기만 모바일에 맞춘다. */
#ab-page .ab-hero {
    position: relative;
    padding: 44px 0 var(--ab-sp-section);
    background: var(--ab-night);
    color: #fff;
    text-align: center;
}

#ab-page .ab-hero__glow {
    position: absolute;
    inset: -110px -20% auto;
    height: 420px;
    background:
        radial-gradient(300px 220px at 20% 26%, rgba(253, 61, 255, 0.2), transparent 70%),
        radial-gradient(320px 240px at 80% 20%, rgba(104, 49, 250, 0.34), transparent 70%),
        radial-gradient(260px 200px at 55% 68%, rgba(128, 180, 255, 0.16), transparent 72%);
    pointer-events: none;
}

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

/* ---- 다크 히어로 위 요소 재정의 ----
   보조 텍스트 알파 하한은 0.5 — 검정 위에서 약 4.9:1 로 WCAG AA 를 넘긴다. */
#ab-page .ab-hero__lead {
    color: rgba(255, 255, 255, 0.62);
}

#ab-page .ab-hero__kicker {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

#ab-page .ab-hero .ab-readout {
    border-top-color: rgba(255, 255, 255, 0.14);
}

#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-chips li {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
}

/* 콘솔은 유리 패널로 */
#ab-page .ab-hero .ab-console {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(28, 35, 43, 0.8);
}

#ab-page .ab-hero .ab-console__status {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(28, 35, 43, 0.95);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.85);
}

/* 다크 히어로 위 콘솔 — 보조 텍스트 알파 하한은 0.5 (검정 위 약 4.9:1, AA) */
#ab-page .ab-hero .ab-console__head,
#ab-page .ab-hero .ab-console__log {
    border-color: rgba(255, 255, 255, 0.1);
}

#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__scale { 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__target { stroke: #80b4ff; }
#ab-page .ab-hero .ab-console__goal { color: #80b4ff; }

#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__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-btn--ghost {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #fff;
}

#ab-page .ab-hero .ab-btn:focus-visible {
    outline-color: rgba(255, 255, 255, 0.85);
}

#ab-page .ab-hero h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#ab-page .ab-hero__kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-pill);
    background: #fff;
    font-size: var(--ab-b6);
    font-weight: 600;
    color: var(--ab-body);
}

/* 카피 자체가 "그대로 vs 최고로"의 대조라, 유지되는 쪽은 조용히,
   올라가는 쪽은 무지갯빛으로 잡아 문장의 뜻을 조판으로 드러낸다. */
#ab-page .ab-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--ab-t1);
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -0.035em;
    text-align: center;
}

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

/* 올라가는 값 — 시선이 여기서 멈추게 한다. 검정 위이므로 파스텔 세트. */
#ab-page .ab-hero__title--lift {
    background: var(--ab-iri);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

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

#ab-page .ab-hero .ab-btn-row {
    margin-top: 26px;
}

#ab-page .ab-readout {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ab-line);
}

#ab-page .ab-readout li {
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

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

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

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

/* ---- 콘솔 헤드 (키워드 + 현재값) ----
   PC 는 3칸(순위·입찰가·주기)이지만 모바일 폭에서는 2칸까지가 읽힌다.
   입찰 주기는 위 계기판이 이미 "3분 / 최소 입찰 주기"로 보여 준다. */
#ab-page .ab-console__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--ab-line-soft);
}

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

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

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

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

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

#ab-page .ab-console__meta dd b {
    font-size: var(--ab-b4);
    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: 92px;
    margin: 14px 0 12px 24px;
}

#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;
}

/* 목표선만 있으면 첫 점이 몇 위인지 읽을 수 없다. 위·아래 기준을 둔다. */
#ab-page .ab-console__scale {
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 24px;
    font-family: var(--ab-mono);
    font-size: 10px;
    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;
}

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

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

#ab-page .ab-console__pts li {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    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: 12px;
    border-top: 1px solid var(--ab-line-soft);
}

#ab-page .ab-console__log li {
    display: grid;
    grid-template-columns: 40px 30px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--ab-r-xs);
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    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-console__status {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-pill);
    background: #fff;
    box-shadow: 0 8px 18px -12px rgba(22, 25, 29, 0.4);
    white-space: nowrap;
    font-size: var(--ab-b7);
    font-weight: 600;
    color: var(--ab-ink);
}

#ab-page .ab-dot {
    position: relative;
    width: 7px;
    height: 7px;
    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; }
}

/* 기능 칩 */
/* --------------------------------------------------------------------------
   입찰 스케줄 매트릭스 — 설정 화면이 아니라 설정 결과를 그림으로 보여준다
   PC는 24열이지만 모바일 폭(360px 기준 본문 약 280px)에서는 셀이 9px까지
   좁아져 읽히지 않는다. 2시간 단위 12열로 접어 셀을 두 배로 키운다.
   -------------------------------------------------------------------------- */

#ab-page .ab-sched {
    margin: 0;
    padding: 20px 16px 16px;
    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: 20px repeat(12, 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); }

/* 축 라벨을 격자와 같은 12열 그리드에 얹어 각 시각을 자기 열 위에 세운다.
   0 · 6 · 12 · 18 · 22시 → 12열에서 1 · 4 · 7 · 10 · 12번째 칸 */
#ab-page .ab-sched__axis {
    display: grid;
    grid-template-columns: 20px repeat(12, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
    font-family: var(--ab-mono);
    font-size: 10px;
    color: var(--ab-muted);
}

#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: 5; }
#ab-page .ab-sched__axis span:nth-child(3) { grid-column: 8; }
#ab-page .ab-sched__axis span:nth-child(4) { grid-column: 11; }
#ab-page .ab-sched__axis span:nth-child(5) { grid-column: 13; }

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

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

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

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

#ab-page .ab-setup,
#ab-page .ab-alarm {
    margin: 0;
    padding: 20px 16px;
    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: 4px;
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ab-violet);
}

/* 라벨 열은 모바일 폭에 맞춰 PC 96px → 84px */
#ab-page .ab-setup dl > div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 12px 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-b6);
    color: var(--ab-muted);
}

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

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

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

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

#ab-page .ab-alarm__ch {
    padding: 3px 9px;
    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-b7);
    font-variant-numeric: tabular-nums;
    color: var(--ab-muted);
}

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

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

/* 3칸이 좁은 폭에서 눌리지 않게 라벨은 줄바꿈을 허용한다 */
#ab-page .ab-alarm__stat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ab-line-soft);
}

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

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

#ab-page .ab-alarm__stat b {
    font-family: var(--ab-mono);
    font-size: var(--ab-t5);
    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: 11px;
    line-height: 1.35;
    color: var(--ab-muted);
}

/* 스케줄 매트릭스 — 시야에 들어올 때 왼쪽에서 오른쪽으로 물결치듯 채운다 */
.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-page .ab-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 26px;
}

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

#ab-page .ab-chips li::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b985' 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 + .ab-split {
    margin-top: 44px;
}

#ab-page .ab-split__media {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: linear-gradient(150deg, #fbfaff, #f1effc);
}

#ab-page .ab-mediahero {
    margin-bottom: var(--ab-sp-block);
}

#ab-page .ab-split__body h3 {
    font-size: var(--ab-t4);
}

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

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

/* 매체 스펙시트 */
/* --------------------------------------------------------------------------
   지원 매체 — sticky 스크롤 스파이 스트립
   매체를 숨기지 않고 전부 나열하고, 스트립이 현재 위치를 알려 준다.
   탭-패널이 아니므로 눌러도 내용이 사라지지 않는다 (앵커 이동).
   -------------------------------------------------------------------------- */

#ab-page .ab-medianav {
    position: sticky;
    /* 위쪽에 sticky 가 두 겹 있다. 사이트 헤더 50px(z-index 9999) +
       페이지 탭 41px(.content_tab, z-index 9). 그 아래에 붙여야 가려지지 않는다.
       z-index 는 둘보다 낮게 둬서 스크롤 시 위 두 겹을 덮지 않게 한다. */
    top: 91px;
    z-index: 8;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 -20px 20px;
    padding: 10px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 흰 배경으로 아래 내용이 스트립을 통과해 보이지 않게 한다 */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ab-line-soft);
}

#ab-page .ab-medianav::-webkit-scrollbar {
    display: none;
}

#ab-page .ab-medianav button {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-pill);
    background: #fff;
    font-size: var(--ab-b5);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--ab-muted);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 현재 보고 있는 매체 — 채움 보라 (기능 안내 활성 탭과 같은 무게) */
#ab-page .ab-medianav button.is-on {
    border-color: var(--ab-key);
    background: var(--ab-key);
    color: #fff;
}

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

/* 스트립이 sticky 로 덮으므로 상품 제목이 그 아래로 숨지 않게 여백을 확보한다 */
/* 헤더 50px + 페이지 탭 41px + 스트립 55px + 여유 */
#ab-page .ab-mediaitem {
    scroll-margin-top: 159px;
}

/* 상품을 나열하므로 블록 사이 간격이 필요하다 (탭 패널일 때는 하나만 보였다) */
#ab-page .ab-mediaitem + .ab-mediaitem {
    margin-top: 16px;
}

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

#ab-page .ab-block__head {
    margin-bottom: 20px;
}

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

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

/* 상품 탭이 4개면 좁은 폭에서 2~3줄로 접혀 탭 줄이 뭉개졌다.
   한 줄을 유지하고 가로로 스크롤한다 (모바일 탭 스트립의 표준 형태).
   부분만 보이는 탭이 스크롤 가능함을 알린다. */
#ab-page .ab-seg {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
}

#ab-page .ab-seg::-webkit-scrollbar {
    display: none;
}

/* nowrap + 스크롤이므로 버튼은 자기 폭을 지킨다 (1 1 auto 면 눌려 찌그러진다) */
#ab-page .ab-seg button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--ab-r-xs);
    background: transparent;
    font-size: var(--ab-b6);
    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[aria-selected="true"] {
    background: var(--ab-violet);
    color: #fff;
}

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

#ab-page .ab-media {
    padding: 22px 20px 24px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
    box-shadow: var(--ab-shadow);
}

#ab-page .ab-media__panel {
    margin-bottom: 22px;
    padding: 18px;
    border-radius: var(--ab-r-md);
    background: linear-gradient(150deg, #fbfaff, #f1effc);
}

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

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

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

#ab-page .ab-spec__label {
    display: block;
    margin-bottom: 12px;
    font-family: var(--ab-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ab-muted);
}

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

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

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

/* PC 와 같이 "제공 기능"은 회색 강조판에 담는다. 판 안의 보라 체크만 색으로 남는다.
   (모바일에는 이 판 규칙이 없어 평문 목록으로 보였다) */
#ab-page .ab-spec--auto {
    padding: 18px 16px;
    border-radius: var(--ab-r-md);
    background: var(--ab-paper);
    border-top: 0;
}

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

#ab-page .ab-spec--auto li::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 5px;
    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 / 12px 12px no-repeat;
}

/* 추천 대상 */
#ab-page .ab-who {
    display: grid;
    gap: 14px;
}

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

/* 3D 클립아트 대신 데이터 비주얼(SVG)을 옅은 판 위에 올린다 (PC 와 같은 규칙) */
#ab-page .ab-who__art {
    position: relative;
    display: block;
    width: 100%;
    height: 108px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #e7e1fc;
    border-radius: var(--ab-r-md);
    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: 90px;
    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: 5px !important;
    font-size: var(--ab-t6);
    font-weight: 700;
    text-align: center;
}

/* 성과 */
#ab-page .ab-stats {
    position: relative;
    overflow: hidden;
    padding: var(--ab-sp-section) 0;
    /* 히어로와 같은 딥 밴드 — 페이지의 두 번째 어두운 앵커.
       베이스는 --ab-night, 광원은 마젠타 → 바이올렛 → 블루 3중. */
    background:
        radial-gradient(420px 260px at 12% 0%, rgba(253, 61, 255, 0.24), transparent 70%),
        radial-gradient(380px 240px at 88% 34%, rgba(104, 49, 250, 0.4), transparent 70%),
        radial-gradient(440px 240px at 50% 100%, rgba(128, 180, 255, 0.2), transparent 70%),
        var(--ab-night);
}

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

/* 다크면 라벨 — PC 와 같은 처리 (배지 배경 + 연보라 글자) */
#ab-page .ab-stats .ab-eyebrow {
    background: rgba(255, 255, 255, 0.09);
    color: #b7a6ff;
}

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

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

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

#ab-page .ab-stats__label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--ab-b7);
    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: var(--ab-t2);
    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: var(--ab-b1);
    color: var(--ab-mint);
}

/* 이용 방법 */
#ab-page .ab-steps {
    display: grid;
    gap: 12px;
}

#ab-page .ab-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 20px 18px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
}

/* 번호는 노드 좌상단에 얹고 흰 테두리로 띄운다.
   색 선언이 두 번 있어 뒤의 var(--ab-violet)이 흰색을 덮는 바람에
   보라 배경 위 보라 글자가 되어 안 보였다 — 하나로 정리한다. */
#ab-page .ab-steps__no {
    position: absolute;
    top: -5px;
    left: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ab-key);
    font-family: var(--ab-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* PC 는 노드 4개를 가로 진행선에 꿰지만, 360px 에서 4개를 늘어놓으면
   노드당 90px 로 좁아진다. 같은 개념(연결선 위의 노드)을 세로로 세운다. */
#ab-page .ab-steps__art {
    position: relative;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #ded6fb;
    border-radius: 50%;
    background: #fff;
    color: var(--ab-key);
}

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

/* 마지막 단계가 목적지이므로 채워서 도착점으로 읽히게 한다 */
#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:last-child .ab-steps__no {
    background: var(--ab-ink);
}

/* 노드를 잇는 세로 진행선 — 노드의 흰 배경이 선을 끊어 노드처럼 보인다 */
#ab-page .ab-steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: -12px;
    width: 2px;
    background: #ded6fb;
}

#ab-page .ab-steps h3 {
    font-size: var(--ab-t7);
    font-weight: 700;
}

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

/* 광고주 혜택 */
/* PC 와 같은 라이트 마감 밴드.
   보라 그라데이션 카드였을 때는 같은 자리의 PC 와 성격이 달랐다.
   .ab-wrap 안에 있지만 좌우로 뻗어 화면 폭 전체를 채운다. */
#ab-page .ab-free {
    position: relative;
    overflow: hidden;
    margin: 0 calc(50% - 50vw);
    padding: 48px calc(50vw - 50% + 20px);
    background:
        radial-gradient(300px 190px at 15% 0%, rgba(253, 61, 255, 0.10), transparent 70%),
        radial-gradient(340px 210px at 85% 30%, rgba(104, 49, 250, 0.16), transparent 70%),
        radial-gradient(360px 200px 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: -80px;
    right: -60px;
    width: 200px;
    height: 200px;
    border: 1.5px solid rgba(104, 49, 250, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

#ab-page .ab-free h2 {
    position: relative;
    font-size: var(--ab-t3);
    line-height: 1.36;
    text-align: center;
    color: var(--ab-ink);
}

/* 히어로 헤드라인과 같은 색 여정으로 시작과 끝을 묶는다.
   밝은 면이므로 파스텔이 아니라 짙은 값 세트(--ab-iri-ink)를 쓴다. */
#ab-page .ab-free h2 .ab-free__hl {
    display: block;
    margin-top: 5px;
    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: 14px;
    font-size: var(--ab-b3);
    color: var(--ab-body);
}

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

/* ==========================================================================
   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: 30px;
}

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

#ab-page .ab-fn__list {
    display: grid;
    gap: 14px;
}

.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(12px); }
    to { opacity: 1; transform: none; }
}

#ab-page .ab-fn-card {
    overflow: hidden;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
}

/* 그라데이션 헤드와 4px 보라 바는 서비스 소개에 없는 장치라 걷어낸다 */
#ab-page .ab-fn-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    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;
}

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

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

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

#ab-page .ab-fn-col__title h4 {
    font-size: var(--ab-b1);
    font-weight: 700;
}

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

#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: 8px;
}

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

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

/* 라이브 입찰이 주력이므로 소개 페이지의 강조판(--ab-paper)과 같은 무게를 준다 */
#ab-page .ab-fn-col--live .ab-fn-feature {
    padding: 16px 18px;
    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-cycle {
    margin-left: auto;
    padding: 4px 10px;
    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-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 16px;
    border: 1px dashed var(--ab-line);
    border-radius: var(--ab-r-sm);
    background: #fff;
    font-size: var(--ab-b6);
    color: var(--ab-muted);
}

#ab-page .ab-fn-empty svg {
    width: 14px;
    height: 14px;
    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-page .ab-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-violet-wash);
    font-family: var(--ab-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ab-violet);
}

#ab-page .ab-plans {
    display: grid;
    gap: 14px;
}

#ab-page .ab-plan {
    display: flex;
    flex-direction: column;
    padding: 26px 22px 24px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-lg);
    background: #fff;
}

/* 다크 레시피를 PC 와 같은 계열로 — 베이스 --ab-night,
   광원은 마젠타 → 바이올렛의 같은 색 여정 (크기만 모바일에 맞춘다).
   이전에는 베이스 --ab-ink + 토큰 밖 rgba(124,108,255) 로 별개 레시피였다. */
#ab-page .ab-plan--free {
    border-color: transparent;
    background:
        radial-gradient(220px 150px at 15% -10%, rgba(253, 61, 255, 0.16), transparent 70%),
        radial-gradient(260px 190px at 85% 8%, rgba(104, 49, 250, 0.4), transparent 72%),
        var(--ab-night);
}

#ab-page .ab-plan__tag {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 5px 11px;
    border-radius: var(--ab-r-pill);
    background: var(--ab-violet-wash);
    font-family: var(--ab-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ab-violet);
}

#ab-page .ab-plan--free .ab-plan__tag {
    background: rgba(255, 255, 255, 0.14);
    color: #b7a6ff;
}

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

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

#ab-page .ab-plan__for {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    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-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% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 5;
    width: 230px;
    padding: 12px 14px;
    border-radius: var(--ab-r-sm);
    background: var(--ab-ink);
    box-shadow: 0 16px 34px -18px rgba(22, 25, 29, 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: 4px;
    font-size: var(--ab-b6);
    color: #fff;
}

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

#ab-page .ab-plan__price {
    margin: 18px 0 16px;
    padding: 16px 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: 5px;
    font-size: var(--ab-b6);
    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: var(--ab-t3);
    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-b6);
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.45);
}

#ab-page .ab-plan .ab-btn {
    margin-bottom: 20px;
}

#ab-page .ab-plan dl dt {
    margin-bottom: 7px;
    font-family: var(--ab-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    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: 16px; }

#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: 3px; }
#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;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
}

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

#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: 12px 10px;
    border-bottom: 1px solid var(--ab-line-soft);
    text-align: center;
    letter-spacing: -0.02em;
    vertical-align: middle;
    white-space: nowrap;
}

#ab-page .ab-table thead th {
    background: var(--ab-paper);
    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;
    position: sticky;
    left: 0;
}

#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 .ab-cell-hl {
    color: var(--ab-violet);
    font-weight: 700;
}

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

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

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

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

#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: 14px;
}

#ab-page .ab-tablenote li {
    position: relative;
    padding-left: 11px;
    font-size: var(--ab-b7);
    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: 8px;
    font-family: var(--ab-mono);
    font-size: 11px;
    color: var(--ab-muted);
    text-align: right;
}

#ab-page .ab-fee__bar {
    margin-bottom: 16px;
}

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

#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: 28px;
    overflow: hidden;
    border-radius: var(--ab-r-md);
}

/* --------------------------------------------------------------------------
   요금 계산기 — 좁은 화면에서는 금액이 위에 붙어 따라온다
   -------------------------------------------------------------------------- */

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

/* 리드아웃을 고정 영역(헤더 50px + 페이지 탭 41px) 바로 아래에 물린다.
   z-index 는 탭(30)·헤더(9999)보다 낮게 둬서 위 두 겹을 덮지 않게 한다. */
#ab-page .ab-calc__out {
    position: sticky;
    top: 91px;
    z-index: 8;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: var(--ab-r-md);
    /* 광고주 전용 플랜과 같은 다크 레시피. #221d4e 는 네이비-바이올렛으로
       PC·모바일 어디에도 없는 색이었다. */
    background:
        radial-gradient(240px 170px at 100% 0%, rgba(104, 49, 250, 0.42), transparent 72%),
        var(--ab-night);
    color: #fff;
    box-shadow: 0 18px 34px -20px rgba(8, 10, 13, 0.7);
}

#ab-page .ab-calc__combo {
    margin: 0 0 6px;
    font-family: var(--ab-mono);
    font-size: var(--ab-b7);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
}

#ab-page .ab-calc__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

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

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

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

#ab-page .ab-calc__price strong em {
    margin-left: 2px;
    font-family: var(--ab-sans);
    font-size: var(--ab-b3);
    font-style: normal;
    font-weight: 700;
}

#ab-page .ab-calc__save {
    order: 3;
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: var(--ab-b7);
    font-weight: 700;
    letter-spacing: -0.02em;
    /* "절감"은 이 시스템에서 --ab-mint 의 뜻이다. #4fe0b4 는 시스템 밖 청록이었고,
       --ab-mint(#00c73c)는 --ab-night 위에서 8.8:1 로 대비도 충분하다. */
    color: var(--ab-mint);
}

/* ---- 조건 선택 ---- */
#ab-page .ab-calc__set {
    padding: 20px 16px 18px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-md);
    background: #fff;
}

#ab-page .ab-calc__field {
    min-width: 0;
    margin: 0 0 20px;
    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 10px;
    padding: 0;
    font-size: var(--ab-b5);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ab-ink);
}

#ab-page .ab-calc__field legend span {
    margin-left: 6px;
    font-size: var(--ab-b7);
    font-weight: 500;
    color: var(--ab-muted);
}

#ab-page .ab-calc__opts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    clear: both;
}

/* 타입은 6개라 한 줄에 넣으면 글자가 뭉개진다 */
#ab-page .ab-calc__opts--type {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 플랜은 2개뿐이라 4열에 두면 오른쪽 절반이 빈다 */
#ab-page .ab-calc__opts--plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#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);
}

#ab-page .ab-calc__opts label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 46px;
    padding: 6px 4px;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-r-sm);
    background: #fff;
    font-size: var(--ab-b5);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ab-body);
    cursor: pointer;
}

#ab-page .ab-calc__opts label small {
    font-family: var(--ab-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ab-muted);
}

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

#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); }

#ab-page .ab-calc__opts input:checked + label {
    border-color: var(--ab-violet);
    background: var(--ab-violet);
    color: #fff;
}

#ab-page .ab-calc__opts input:checked + label small {
    color: rgba(255, 255, 255, 0.72);
}

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

/* ---- 부가 정보 ---- */
#ab-page .ab-calc__spec {
    margin: 0 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ab-line-soft);
}

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

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

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

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

#ab-page .ab-calc__set .ab-btn {
    display: block;
    width: 100%;
}

#ab-page .ab-calc__vat {
    margin: 12px 0 0;
    font-size: var(--ab-b7);
    line-height: 1.6;
    color: var(--ab-muted);
}

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