/* ============================================================
   SellerPilot — theme-sp
   구조 기준: 토스페이먼츠 (챕터 단위 구성, 절제된 타이포)

   - 얇은 배경 밴드 교차 대신 "큰 챕터" 단위 구성
   - 자간은 normal (한글에 음수 자간 쓰지 않음)
   - 폰트 웨이트는 400 / 500 / 700 만 사용
   - 컨테이너 1110px, radius 8 / 20 / 32 3단계
   - 보조 버튼은 테두리가 아니라 브랜드색 연한 채움

   landing.css 위에 얹히며 모든 규칙은 body.theme-sp 로 스코프.
   ============================================================ */

/* ------------------------------------------------------------
   1. 토큰
   ------------------------------------------------------------ */
body.theme-sp {
    /* 브랜드 — 로고 그린 계열, 흰 글씨가 얹힐 만큼 어둡게 */
    --brand:       #0B7A55;
    --brand-hover: #096444;
    --brand-lift:  #17A56D;   /* 어두운 지면 위 강조 */
    --brand-wash:  #E7F4EE;

    /* 잉크 & 지면 */
    --ink:    #14181B;
    --ink-2:  #3F474D;
    --ink-3:  #6B7580;
    --mist:   #F9FAFB;
    --mist-2: #F2F4F7;
    --line:   #E7E9EC;
    --line-2: #F0F2F4;

    /* 상태 */
    --gain: #0B7A55;
    --drop: #B4531F;
    --wait: #8A6A1E;

    /* landing.css 의 :root 변수도 함께 덮어써서 기존 규칙을 끌어온다 */
    --green:       var(--brand);
    --green-dark:  var(--brand-hover);
    --green-light: var(--brand-wash);
    --navy:        var(--ink);
    --bg:          #FFFFFF;
    --card-bg:     var(--mist-2);
    --text-sub:    var(--ink-3);
    --border:      var(--line);

    --shadow:    0 1px 2px rgba(20, 24, 27, .04), 0 6px 20px -10px rgba(20, 24, 27, .12);
    --shadow-lg: 0 2px 4px rgba(20, 24, 27, .04), 0 24px 48px -24px rgba(20, 24, 27, .22);

    --r-sm: 8px;
    --r-md: 20px;
    --r-lg: 32px;
    --radius:    8px;   /* landing.css 호환 */
    --radius-lg: 20px;

    --transition: .18s ease;
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --font-display: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard',
                    -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Pretendard', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', sans-serif;

    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: normal;
}

/* ------------------------------------------------------------
   2. 타이포그래피 — 자간 normal, 웨이트 3단계
   ------------------------------------------------------------ */
body.theme-sp h1,
body.theme-sp h2,
body.theme-sp h3,
body.theme-sp h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: normal;
    color: inherit;
}

body.theme-sp h1 {
    font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.5rem);   /* 30 → 40 */
    line-height: 1.32;
}

body.theme-sp h2 {
    font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);  /* 24 → 36 */
    line-height: 1.38;
}

body.theme-sp h3 {
    font-size: 1.25rem;
    line-height: 1.5;
}

body.theme-sp p {
    color: var(--ink-3);
    font-size: 1rem;
    line-height: 1.72;
    letter-spacing: normal;
}

body.theme-sp strong,
body.theme-sp b { font-weight: 700; }

/* 금액·수치 */
body.theme-sp .num,
body.theme-sp .cbtable,
body.theme-sp .cbpanel-foot,
body.theme-sp .calc-breakdown-item .value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
body.theme-sp .num {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: normal;
}
body.theme-sp .num .u {
    font-size: .5em;
    font-weight: 700;
    margin-left: .1em;
}

/* 공통 래퍼 */
body.theme-sp .wrap,
body.theme-sp .container {
    width: 100%;
    max-width: 1110px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ------------------------------------------------------------
   3. 접근성
   ------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    transition: top .18s var(--ease-out);
}
.skip-link:focus-visible { top: 16px; }

body.theme-sp :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
}
body.theme-sp :focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    body.theme-sp *,
    body.theme-sp *::before,
    body.theme-sp *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    body.theme-sp .fade-up { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   4. 버튼 — 작고, radius 8, 보조는 브랜드 연한 채움
   ------------------------------------------------------------ */
body.theme-sp .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 22px;
    border: 0;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                transform .1s var(--ease-out);
}

body.theme-sp .btn-lg {
    padding: 16px 28px;
    font-size: 1rem;
}

body.theme-sp .btn-primary {
    background: var(--brand);
    color: #fff;
}
body.theme-sp .btn-primary:hover { background: var(--brand-hover); transform: none; box-shadow: none; }
body.theme-sp .btn-primary:active { transform: scale(.985); }

body.theme-sp .btn-soft {
    background: var(--brand-wash);
    color: var(--brand);
}
body.theme-sp .btn-soft:hover { background: #DBEDE4; }
body.theme-sp .btn-soft:active { transform: scale(.985); }

body.theme-sp .btn-invert {
    background: #fff;
    color: var(--ink);
}
body.theme-sp .btn-invert:hover { background: #EDEFF2; }
body.theme-sp .btn-invert:active { transform: scale(.985); }

/* landing.css 의 outline 버튼도 soft 로 통일 */
body.theme-sp .btn-outline {
    background: var(--brand-wash);
    color: var(--brand);
    border: 0;
}
body.theme-sp .btn-outline:hover { background: #DBEDE4; color: var(--brand); }

body.theme-sp .btn-ai {
    background: var(--ink);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
}
body.theme-sp .btn-ai:hover { background: var(--brand); opacity: 1; }

/* ------------------------------------------------------------
   5. 헤더
   ------------------------------------------------------------ */
body.theme-sp .header {
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: border-color var(--transition);
}
body.theme-sp .header.scrolled {
    border-bottom-color: var(--line);
    box-shadow: none;
}
body.theme-sp .header .container {
    height: 64px;
    gap: 28px;
}
body.theme-sp .logo { height: 28px; }

body.theme-sp .nav-links { gap: 24px; }

body.theme-sp .nav-links a:not(.btn) {
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--ink-2);
    transition: color var(--transition);
}
body.theme-sp .nav-links a:not(.btn):hover { color: var(--brand); }
body.theme-sp .nav-links a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 700; }

body.theme-sp .nav-login {
    color: var(--ink-2) !important;
    font-weight: 500 !important;
}
body.theme-sp .nav-login:hover { color: var(--brand) !important; }

body.theme-sp .nav-cta {
    padding: 9px 16px !important;
    font-size: .875rem !important;
    border-radius: var(--r-sm);
}

body.theme-sp .nav-account { display: flex; align-items: center; gap: 10px; }

body.theme-sp .nav-user-chip {
    background: var(--mist-2);
    border: 0;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.theme-sp .nav-user-chip:hover { background: var(--brand-wash); color: var(--brand); }
body.theme-sp .nav-user-avatar { background: #fff; border-radius: 4px; }

body.theme-sp .nav-user-menu {
    border-radius: var(--r-md);
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
}
body.theme-sp .nav-user-menu a,
body.theme-sp .nav-user-menu .nav-user-logout { border-radius: var(--r-sm); }
body.theme-sp .nav-user-menu a:hover { background: var(--mist-2); color: var(--brand); }

body.theme-sp .mobile-toggle span { background: var(--ink); }

/* ------------------------------------------------------------
   6. CHAPTER 0 — 히어로
   ------------------------------------------------------------ */
body.theme-sp .hero {
    padding: 0;
    background: var(--mist-2);
    overflow: hidden;   /* 우측으로 넘치는 패널을 화면 밖에서 자른다 */
}

body.theme-sp .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1110px;
    margin-inline: auto;
    padding: 148px 24px 96px;
}

body.theme-sp .hero-copy h1 { margin-bottom: 20px; color: var(--ink); }

body.theme-sp .hero-copy > p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 32px;
}

body.theme-sp .hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

body.theme-sp .hero-note {
    margin-top: 20px;
    font-size: .875rem;
    color: var(--ink-3);
}

/* 제품 패널 — 셀 폭보다 넓게 잡아 우측으로 흘려보낸다 */
body.theme-sp .hero-shot { position: relative; }

body.theme-sp .cbpanel {
    /* 좌측 카피(480) + gap(40) + 컨테이너 패딩(24) 을 뺀 나머지 =
       뷰포트 우측 끝에 정확히 닿는 폭. 잘리지 않으면서 화면 끝까지 뻗는다. */
    width: calc(50vw + 11px);
    min-width: 640px;
    max-width: none;
    background: #fff;
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: 0 2px 6px rgba(20, 24, 27, .04), 0 30px 60px -30px rgba(20, 24, 27, .28);
    overflow: hidden;
    transform: none;
    margin: 0;
}

body.theme-sp .cbpanel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line-2);
    background: none;
}
body.theme-sp .cbpanel-head .t {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}
body.theme-sp .cbpanel-head .p {
    font-size: .8125rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

body.theme-sp .cbpanel-sum {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px 22px;
}
body.theme-sp .cbpanel-sum .k {
    display: block;
    font-size: .875rem;
    color: var(--ink-3);
    margin-bottom: 6px;
}
body.theme-sp .cbpanel-sum .v {
    display: block;
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--brand);
}
body.theme-sp .cbpanel-sum .side {
    flex-shrink: 0;
    text-align: right;
    font-size: .8125rem;
    line-height: 1.8;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
body.theme-sp .cbpanel-sum .side b { color: var(--ink); }

body.theme-sp .cbtable {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
body.theme-sp .cbtable th {
    padding: 10px 28px;
    text-align: left;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-3);
    background: var(--mist);
    border-block: 1px solid var(--line-2);
    white-space: nowrap;
}
body.theme-sp .cbtable td {
    padding: 15px 28px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}
body.theme-sp .cbtable tr:last-child td { border-bottom: 0; }
body.theme-sp .cbtable .r { text-align: right; }

body.theme-sp .cb-name {
    display: block;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 2px;
}
body.theme-sp .cb-sub {
    display: block;
    font-size: .75rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
body.theme-sp .cb-amt { color: var(--ink-3); }
body.theme-sp .cb-back { font-weight: 700; color: var(--gain); }
body.theme-sp .cb-extra {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--drop);
}

body.theme-sp .badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    border: 0;
}
body.theme-sp .badge-done { background: var(--brand-wash); color: var(--brand); }
body.theme-sp .badge-wait { background: #F6F0DD; color: var(--wait); }
body.theme-sp .badge-drop { background: #F9EBE2; color: var(--drop); }

body.theme-sp .cbpanel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 28px;
    border-top: 1px solid var(--line-2);
    background: var(--mist);
    font-size: .875rem;
    color: var(--ink-3);
}
body.theme-sp .cbpanel-foot b { color: var(--ink); font-weight: 700; }
body.theme-sp .cbpanel-foot .go {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand);
}

/* 마켓 로고 스트립 */
body.theme-sp .hero-marks { border-top: 1px solid var(--line); }
body.theme-sp .hero-marks .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-block: 24px;
    flex-wrap: wrap;
}
body.theme-sp .hero-marks .t {
    font-size: .875rem;
    color: var(--ink-3);
    flex-shrink: 0;
}
body.theme-sp .hero-marks .marks {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
body.theme-sp .hero-marks img {
    height: 20px;
    width: auto;
    opacity: .75;
    transition: opacity var(--transition);
}
body.theme-sp .hero-marks img:hover { opacity: 1; }

/* ------------------------------------------------------------
   7. 챕터 골격
   ------------------------------------------------------------ */
body.theme-sp .ch { padding: 120px 0; }

body.theme-sp .ch-plain { background: #fff; }
body.theme-sp .ch-mist  { background: var(--mist); }

/* 반전 텍스트는 챕터 헤드와 CTA 에만 적용한다.
   챕터 안에 놓이는 흰 카드(.slide / .calc) 내부까지 흰 글씨가 번지면 안 된다. */
body.theme-sp .ch-ink {
    background: var(--ink);
    color: #fff;
}
body.theme-sp .ch-ink > .wrap > .ch-head h2,
body.theme-sp .ch-cta h2 { color: #fff; }
body.theme-sp .ch-ink > .wrap > .ch-head p,
body.theme-sp .ch-cta .wrap > p { color: rgba(255, 255, 255, .66); }
body.theme-sp .ch-ink .ch-eyebrow { color: var(--brand-lift); }

body.theme-sp .ch-brand {
    background: var(--brand);
    color: #fff;
}
body.theme-sp .ch-brand > .wrap > .ch-head h2 { color: #fff; }
body.theme-sp .ch-brand > .wrap > .ch-head p { color: rgba(255, 255, 255, .78); }
body.theme-sp .ch-brand .ch-eyebrow { color: rgba(255, 255, 255, .8); }

body.theme-sp .ch-head {
    max-width: 44rem;
    margin-bottom: 56px;
}
body.theme-sp .ch-head.is-center {
    margin-inline: auto;
    text-align: center;
}

body.theme-sp .ch-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: normal;
}

body.theme-sp .ch-desc {
    margin-top: 16px;
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 38rem;
}
body.theme-sp .ch-head.is-center .ch-desc { margin-inline: auto; }

/* ------------------------------------------------------------
   8. CHAPTER 1 — 흰 카드 스택
   ------------------------------------------------------------ */
body.theme-sp .slides {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.theme-sp .slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    align-items: center;
    gap: 40px;
    padding: 48px 52px;
    background: #fff;
    border-radius: var(--r-lg);
}

body.theme-sp .slide-copy h3 {
    font-size: 1.625rem;
    line-height: 1.42;
    color: var(--ink);
    margin-bottom: 14px;
}
body.theme-sp .slide-copy p {
    color: var(--ink-3);
    font-size: 1rem;
    line-height: 1.75;
}

body.theme-sp .slide-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-left: 40px;
    border-left: 1px solid var(--line);
}
body.theme-sp .slide-figure .v {
    font-size: 3rem;
    line-height: 1.1;
    color: var(--brand);
}
body.theme-sp .slide-figure .k {
    font-size: .875rem;
    color: var(--ink-3);
}

/* ------------------------------------------------------------
   9. CHAPTER 2 — 환급 구조 (카드 없이 표 형태)
   ------------------------------------------------------------ */
body.theme-sp .flow {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

body.theme-sp .flow-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 17rem);
    align-items: baseline;
    gap: 24px;
    padding: 30px 20px;
    margin-inline: -20px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: background var(--transition);
}
body.theme-sp .flow-row:hover { background: var(--mist); }

body.theme-sp .flow-n {
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

body.theme-sp .flow-body h3 {
    font-size: 1.1875rem;
    color: var(--ink);
    margin-bottom: 8px;
}
body.theme-sp .flow-body p {
    font-size: .9375rem;
    line-height: 1.7;
    max-width: 34rem;
}

body.theme-sp .flow-meta {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ink-3);
    text-align: right;
    text-wrap: pretty;
}
body.theme-sp .flow-meta.is-gain { color: var(--brand); font-weight: 700; }
body.theme-sp .flow-meta.is-brand { color: var(--brand); font-weight: 700; }

/* 우리가 처리하는 단계 */
body.theme-sp .flow-row.is-ours { background: var(--brand-wash); }
body.theme-sp .flow-row.is-ours:hover { background: #DBEDE4; }
body.theme-sp .flow-row.is-ours .flow-n { color: var(--brand); }

/* ------------------------------------------------------------
   10. CHAPTER 3 — 계산기 (브랜드 챕터 위 흰 카드)
   ------------------------------------------------------------ */
body.theme-sp .calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 44px;
    align-items: start;
    padding: 44px;
    background: #fff;
    border-radius: var(--r-lg);
}

body.theme-sp .calc-form .input-group { margin-bottom: 20px; }

body.theme-sp .calc-form label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
}

body.theme-sp .calc-form input[type="number"],
body.theme-sp .calc-form select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
body.theme-sp .calc-form input[type="number"]:hover,
body.theme-sp .calc-form select:hover { border-color: #D5D9DE; }
body.theme-sp .calc-form input:focus,
body.theme-sp .calc-form select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(11, 122, 85, .12);
}

body.theme-sp .input-hint {
    margin-top: 6px;
    font-size: .8125rem;
    color: var(--ink-3);
}
body.theme-sp .input-hint.is-error { color: #C0392B; }

body.theme-sp .calc-submit { width: 100%; margin-top: 4px; }

body.theme-sp .calc-result {
    padding: 32px 28px;
    background: var(--mist);
    border-radius: var(--r-md);
    text-align: left;
}
body.theme-sp .calc-result-label {
    font-size: .9375rem;
    color: var(--ink-3);
    margin-bottom: 10px;
}
body.theme-sp .calc-result-amount {
    font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3rem);
    line-height: 1.1;
    color: var(--brand);
    margin-bottom: 10px;
}
body.theme-sp .calc-result-detail {
    font-size: .9375rem;
    color: var(--ink-3);
    margin-bottom: 24px;
    font-variant-numeric: tabular-nums;
}
body.theme-sp .calc-result-detail strong { color: var(--ink); }

body.theme-sp .calc-breakdown {
    margin: 0;
    border-top: 1px solid var(--line);
}
body.theme-sp .calc-breakdown-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
}
body.theme-sp .calc-breakdown-item .label { color: var(--ink-3); margin: 0; }
body.theme-sp .calc-breakdown-item .value { color: var(--ink); font-weight: 700; margin: 0; }

body.theme-sp .calc-disclaimer {
    margin-top: 18px;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--ink-3);
}

/* ------------------------------------------------------------
   11. CHAPTER 4 — 시작하기 + 후기
   ------------------------------------------------------------ */
body.theme-sp .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.theme-sp .steps::before { display: none; }

body.theme-sp .step {
    text-align: left;
    padding-top: 24px;
    border-top: 2px solid var(--ink);
    background: none;
    border-radius: 0;
}

body.theme-sp .step-n {
    display: block;
    margin-bottom: 14px;
    font-size: .9375rem;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

body.theme-sp .step h3 {
    font-size: 1.1875rem;
    color: var(--ink);
    margin-bottom: 8px;
}
body.theme-sp .step p {
    font-size: .9375rem;
    line-height: 1.7;
    max-width: none;
    margin: 0;
}

/* 후기 — 카드 없이 구분선으로만 */
body.theme-sp .voices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 96px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

body.theme-sp .voices-title {
    grid-column: 1 / -1;
    margin-bottom: 32px;
    font-size: 1.25rem;
    color: var(--ink);
}

body.theme-sp .voice {
    margin: 0;
    padding-inline: 32px;
    border-left: 1px solid var(--line);
}
body.theme-sp .voice:first-of-type { padding-left: 0; border-left: 0; }

body.theme-sp .voice blockquote {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.78;
    color: var(--ink-2);
}
body.theme-sp .voice blockquote::before { content: '“'; }
body.theme-sp .voice blockquote::after  { content: '”'; }

body.theme-sp .voice figcaption {
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
}
body.theme-sp .voice figcaption span {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 400;
    color: var(--ink-3);
}

/* ------------------------------------------------------------
   12. CHAPTER 5 — FAQ
   ------------------------------------------------------------ */
body.theme-sp .faq-list {
    max-width: 100%;
    margin: 0;
    display: block;
    border-top: 1px solid var(--line);
}

body.theme-sp .faq-item {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
body.theme-sp .faq-item.active { background: none; box-shadow: none; }

body.theme-sp .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 26px 4px;
    background: none;
    border: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition);
}
body.theme-sp .faq-question:hover { color: var(--brand); }

body.theme-sp .faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ink-3);
    background: none;
    border: 0;
    transition: transform var(--transition), color var(--transition);
}
body.theme-sp .faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--brand);
}

body.theme-sp .faq-answer-inner {
    padding: 0 60px 26px 4px;
    font-size: 1rem;
    line-height: 1.78;
    color: var(--ink-3);
    max-width: 52rem;
}

/* ------------------------------------------------------------
   13. CHAPTER 6 — CTA
   ------------------------------------------------------------ */
body.theme-sp .ch-cta { padding: 110px 0; text-align: center; }
body.theme-sp .ch-cta h2 { margin-bottom: 16px; }
body.theme-sp .ch-cta p {
    font-size: 1.0625rem;
    margin-bottom: 32px;
}
body.theme-sp .ch-cta .btn { padding: 16px 32px; font-size: 1rem; }

/* ------------------------------------------------------------
   14. 푸터
   ------------------------------------------------------------ */
body.theme-sp .footer {
    padding: 64px 0 32px;
    background: #fff;
    border-top: 1px solid var(--line);
}

body.theme-sp .footer-top {
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 48px;
}

body.theme-sp .footer-brand .logo { height: 26px; margin-bottom: 14px; }
body.theme-sp .footer-brand p { font-size: .875rem; max-width: 20rem; }

body.theme-sp .footer-col h4 {
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
    margin-bottom: 14px;
}

body.theme-sp .footer-col a {
    font-size: .875rem;
    color: var(--ink-3);
    padding: 6px 0;
    width: fit-content;
}
body.theme-sp .footer-col a:hover { color: var(--brand); }

body.theme-sp .footer-soon {
    display: block;
    width: fit-content;
    padding: 6px 0;
    font-size: .875rem;
    color: #A9B0B8;
}

body.theme-sp .footer-business {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    font-size: .75rem;
    line-height: 1.9;
}
body.theme-sp .footer-business p { color: var(--ink-3); font-size: .75rem; }

body.theme-sp .footer-bottom {
    border-top: 1px solid var(--line);
    margin-top: 20px;
    padding-top: 20px;
    font-size: .75rem;
    color: var(--ink-3);
}

/* ------------------------------------------------------------
   15. 스크롤 진입
   ------------------------------------------------------------ */
body.theme-sp .fade-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
body.theme-sp .fade-up.visible { opacity: 1; transform: none; }
body.theme-sp .slides > .fade-up:nth-child(2) { transition-delay: .06s; }
body.theme-sp .slides > .fade-up:nth-child(3) { transition-delay: .12s; }

/* ------------------------------------------------------------
   16. 반응형
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    body.theme-sp .ch { padding: 88px 0; }

    body.theme-sp .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 120px 24px 72px;
        text-align: left;
    }
    body.theme-sp .hero-copy { max-width: 36rem; }
    body.theme-sp .hero-copy > p { margin-left: 0; margin-right: 0; }
    body.theme-sp .hero-actions { justify-content: flex-start; }
    body.theme-sp .cbpanel { width: 100%; min-width: 0; max-width: 620px; }

    body.theme-sp .slide {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 32px;
    }
    body.theme-sp .slide-figure {
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid var(--line);
        width: 100%;
    }
    body.theme-sp .slide-figure .v { font-size: 2.25rem; }

    body.theme-sp .flow-row {
        grid-template-columns: 3rem minmax(0, 1fr);
        row-gap: 10px;
    }
    body.theme-sp .flow-meta { grid-column: 2; text-align: left; }

    body.theme-sp .calc { grid-template-columns: 1fr; gap: 32px; padding: 32px; }

    body.theme-sp .steps { grid-template-columns: 1fr; gap: 28px; }

    body.theme-sp .voices { grid-template-columns: 1fr; margin-top: 72px; }
    body.theme-sp .voice {
        padding: 26px 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    body.theme-sp .voice:first-of-type { padding-top: 0; border-top: 0; }
}

@media (max-width: 768px) {
    body.theme-sp .wrap,
    body.theme-sp .container { padding-inline: 20px; }

    body.theme-sp .ch { padding: 72px 0; }
    body.theme-sp .ch-head { margin-bottom: 36px; }

    body.theme-sp .hero-inner { padding: 104px 20px 56px; gap: 40px; }
    body.theme-sp .hero-actions { flex-direction: column; align-items: stretch; }

    body.theme-sp .hero-marks .wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    body.theme-sp .hero-marks .marks { gap: 20px; }
    body.theme-sp .hero-marks img { height: 17px; }

    body.theme-sp .cbpanel-sum { flex-direction: column; align-items: flex-start; gap: 12px; }
    body.theme-sp .cbpanel-sum .side { text-align: left; }
    body.theme-sp .cbpanel-head,
    body.theme-sp .cbpanel-sum,
    body.theme-sp .cbpanel-foot { padding-inline: 20px; }
    body.theme-sp .cbtable th,
    body.theme-sp .cbtable td { padding-inline: 20px; }
    body.theme-sp .hide-sm { display: none; }

    body.theme-sp .slide { padding: 28px 24px; border-radius: var(--r-md); }
    body.theme-sp .slide-copy h3 { font-size: 1.375rem; }

    body.theme-sp .flow-row { padding: 24px 16px; margin-inline: -16px; }

    body.theme-sp .calc { padding: 24px 20px; border-radius: var(--r-md); }
    body.theme-sp .calc-result { padding: 26px 22px; }

    body.theme-sp .faq-question { font-size: 1rem; padding: 22px 0; }
    body.theme-sp .faq-answer-inner { padding: 0 12px 22px 0; font-size: .9375rem; }

    body.theme-sp .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
    body.theme-sp .footer-brand { grid-column: 1 / -1; }

    body.theme-sp .nav-links.open {
        top: 64px;
        background: #fff;
        border-bottom-color: var(--line);
        gap: 4px;
        align-items: stretch;
    }
    body.theme-sp .nav-links.open > a { padding: 10px 0; }
    body.theme-sp .nav-links.open .nav-cta { text-align: center; }
    body.theme-sp .nav-account { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ============================================================
   17. AI-OMS (/ai-oms)
   히어로는 랜딩과 같은 .hero / .hero-inner / .hero-shot 을 공유하고,
   이 절은 그 위에 올라가는 전용 컴포넌트만 정의한다.
   (aioms.css 의 .aioms-* 규칙은 마크업에서 해당 클래스를 쓰지 않으므로 비활성)
   ============================================================ */

/* 보라색 그라데이션 텍스트 제거 */
body.theme-sp .ai-highlight {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--brand);
}

/* ------------------------------------------------------------
   17.1 AI 처리 패널 (히어로)
   ------------------------------------------------------------ */
body.theme-sp .ai-panel {
    /* 랜딩 히어로 패널과 동일한 규칙 — 뷰포트 우측 끝에 닿는다 */
    width: calc(50vw + 11px);
    min-width: 620px;
    max-width: none;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 2px 6px rgba(20, 24, 27, .04), 0 30px 60px -30px rgba(20, 24, 27, .28);
    overflow: hidden;
}

body.theme-sp .hero-panel-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 24px;
    background: var(--mist);
    border-bottom: 1px solid var(--line-2);
}
body.theme-sp .hero-panel-bar i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #D9DEE3;
}
body.theme-sp .hero-panel-bar span {
    margin-left: 10px;
    font-size: .75rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

body.theme-sp .ai-panel-body { padding: 24px 28px 22px; }

body.theme-sp .ai-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
body.theme-sp .ai-panel-head .t {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

body.theme-sp .hero-panel-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--brand-wash);
    font-size: .75rem;
    font-weight: 500;
    color: var(--brand);
}
body.theme-sp .hero-panel-live i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
    animation: sp-pulse 1.8s ease-in-out infinite;
}
@keyframes sp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

body.theme-sp .ai-steps {
    display: flex;
    flex-direction: column;
    margin: 0; padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-2);
}
body.theme-sp .ai-step {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: .875rem;
}
body.theme-sp .ai-step-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--mist-2);
    color: transparent;
}
body.theme-sp .ai-step.done .ai-step-mark { background: var(--brand); color: #fff; }
body.theme-sp .ai-step-mark .spin {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #D9DEE3;
    border-top-color: var(--brand);
    animation: sp-spin .8s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

body.theme-sp .ai-step-k { color: var(--ink); font-weight: 500; }
body.theme-sp .ai-step.wait .ai-step-k { color: var(--ink-3); }
body.theme-sp .ai-step-v { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
body.theme-sp .ai-step-v.strong { font-size: 1rem; font-weight: 700; color: var(--brand); }
body.theme-sp .ai-step.busy .ai-step-v { color: var(--brand); font-weight: 500; }

body.theme-sp .ai-panel-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
body.theme-sp .ai-panel-foot .k { font-size: .8125rem; color: var(--ink-3); }
body.theme-sp .ai-panel-foot .v { font-size: 1.75rem; color: var(--brand); }

/* ------------------------------------------------------------
   17.2 처리 시간 비교 — 진회색 챕터 위 흰 카드
   ------------------------------------------------------------ */
body.theme-sp .tl {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 36px;
    background: #fff;
    border-radius: var(--r-lg);
}
body.theme-sp .tl-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}
body.theme-sp .tl-head { display: flex; flex-direction: column; gap: 2px; }
body.theme-sp .tl-name { font-size: .875rem; font-weight: 500; color: var(--ink-3); }
body.theme-sp .tl-time { font-size: 1.75rem; line-height: 1.2; color: var(--ink); }
body.theme-sp .tl-row.is-after .tl-name,
body.theme-sp .tl-row.is-after .tl-time { color: var(--brand); }

body.theme-sp .tl-track { display: flex; gap: 3px; height: 48px; }
body.theme-sp .tl-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: 6px;
    border-radius: 6px;
    background: #E4E7EB;
}
body.theme-sp .tl-seg em {
    font-style: normal;
    font-size: .75rem;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-sp .tl-seg-brand { background: var(--brand); }
body.theme-sp .tl-seg-brand em { color: #fff; font-weight: 700; }
body.theme-sp .tl-rest {
    display: flex;
    align-items: center;
    padding-inline: 16px;
    border-radius: 6px;
    background: var(--brand-wash);
    font-size: .8125rem;
    color: var(--brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 챕터 하단 지표 — 카드 없이 구분선으로만 */
body.theme-sp .ch-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 40px 0 0;
    border-top: 1px solid var(--line);
}
body.theme-sp .ch-stat { padding: 24px 24px 0 0; }
body.theme-sp .ch-stat + .ch-stat {
    padding-left: 24px;
    border-left: 1px solid var(--line);
}
body.theme-sp .ch-stat .v {
    display: block;
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ink);
}
body.theme-sp .ch-stat .v b { font-weight: 700; color: var(--brand); }
body.theme-sp .ch-stat .v .arrow { color: var(--ink-3); font-weight: 400; }
body.theme-sp .ch-stat .k { display: block; margin-top: 6px; font-size: .875rem; color: var(--ink-3); }

/* 진회색 챕터 위에서의 반전 */
body.theme-sp .ch-ink .ch-stats { border-top-color: rgba(255, 255, 255, .16); }
body.theme-sp .ch-ink .ch-stat + .ch-stat { border-left-color: rgba(255, 255, 255, .16); }
body.theme-sp .ch-ink .ch-stat .v { color: #fff; }
body.theme-sp .ch-ink .ch-stat .v b { color: var(--brand-lift); }
body.theme-sp .ch-ink .ch-stat .v .arrow { color: rgba(255, 255, 255, .4); }
body.theme-sp .ch-ink .ch-stat .k { color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------
   17.3 핵심 기능 — 브랜드색 챕터 위 흰 카드
   ------------------------------------------------------------ */
body.theme-sp .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body.theme-sp .card {
    padding: 32px 28px;
    background: #fff;
    border-radius: var(--r-md);
}

body.theme-sp .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: var(--r-sm);
    background: var(--brand-wash);
    color: var(--brand);
}

body.theme-sp .card h3 {
    font-size: 1.0625rem;
    color: var(--ink);
    margin-bottom: 8px;
}
body.theme-sp .card p {
    font-size: .9375rem;
    line-height: 1.72;
    color: var(--ink-3);
}

/* ------------------------------------------------------------
   17.4 연동 플랫폼
   ------------------------------------------------------------ */
body.theme-sp .channels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 40px;
    align-items: start;
}

body.theme-sp .channel h3 {
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

body.theme-sp .chips { display: flex; flex-wrap: wrap; gap: 8px; }

body.theme-sp .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    background: var(--mist-2);
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink);
    transition: background var(--transition), color var(--transition);
}
body.theme-sp .chip:hover { background: var(--brand-wash); color: var(--brand); }
body.theme-sp .chip img { height: 16px; width: auto; }

/* ------------------------------------------------------------
   17.5 요금제
   ------------------------------------------------------------ */
body.theme-sp .plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 800px;
    align-items: stretch;
}

body.theme-sp .plan {
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    background: #fff;
    border-radius: var(--r-lg);
}
body.theme-sp .plan.is-featured { background: var(--ink); }

body.theme-sp .plan-badge {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--brand-lift);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
}
/* 배지가 없는 카드에 같은 높이의 자리를 만들어 제목·가격·항목 라인을 맞춘다 */
body.theme-sp .plan:not(.is-featured)::before {
    content: '';
    display: block;
    height: 27px;
    margin-bottom: 14px;
}

body.theme-sp .plan h3 { font-size: 1.125rem; color: var(--ink); margin-bottom: 12px; }
body.theme-sp .plan-price {
    margin: 0 0 2px;
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--ink);
}
body.theme-sp .plan-period {
    margin: 0 0 24px;
    font-size: .875rem;
    color: var(--ink-3);
}

body.theme-sp .plan-features {
    margin: 0 0 28px;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--line);
}
body.theme-sp .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    font-size: .9375rem;
    color: var(--ink-2);
}
body.theme-sp .plan-features li::before {
    content: "\2713";
    flex-shrink: 0;
    color: var(--brand);
    font-weight: 700;
    line-height: 1.6;
}

body.theme-sp .plan .btn { margin-top: auto; }

body.theme-sp .plan.is-featured h3,
body.theme-sp .plan.is-featured .plan-price { color: #fff; }
body.theme-sp .plan.is-featured .plan-period,
body.theme-sp .plan.is-featured .plan-features li { color: rgba(255, 255, 255, .74); }
body.theme-sp .plan.is-featured .plan-features { border-top-color: rgba(255, 255, 255, .16); }
body.theme-sp .plan.is-featured .plan-features li::before { color: var(--brand-lift); }

/* ------------------------------------------------------------
   17.6 CTA 보조 문구
   ------------------------------------------------------------ */
body.theme-sp .ch-cta .cta-sub {
    margin-top: -18px;
    margin-bottom: 32px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------------------
   17.7 반응형
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    body.theme-sp .ai-panel { width: 100%; min-width: 0; max-width: 560px; }
    body.theme-sp .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.theme-sp .channels { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    body.theme-sp .tl { padding: 24px 20px; }
    body.theme-sp .tl-row { grid-template-columns: 1fr; gap: 10px; }
    body.theme-sp .tl-head { flex-direction: row; align-items: baseline; gap: 10px; }
    body.theme-sp .tl-track { height: 40px; }

    body.theme-sp .ch-stats { grid-template-columns: 1fr; }
    body.theme-sp .ch-stat { padding: 20px 0; border-bottom: 1px solid var(--line); }
    body.theme-sp .ch-stat + .ch-stat { padding-left: 0; border-left: 0; }
    body.theme-sp .ch-ink .ch-stat { border-bottom-color: rgba(255, 255, 255, .16); }

    body.theme-sp .cards { grid-template-columns: 1fr; }
    body.theme-sp .card { padding: 26px 24px; }

    body.theme-sp .plans { grid-template-columns: 1fr; }
    body.theme-sp .plan { padding: 28px 24px; border-radius: var(--r-md); }
}