/* 재빗 텀블벅 상세페이지 공통 스타일
   기준: B2C-Jabbit-Asset Management new_v1/web/styles.css (제안안) 의 색·글꼴·둥글기를 그대로 가져옴
   캔버스: 가로 620px 로 작업 → 2배(1240px) PNG 로 내보냄
   글자  h1 44 · h2 34 · h3 26 · 본문 19 · 보조 16 · 배지 14   (PNG 가 모바일에서 줄어들어 보이므로 앱보다 크게)
   굵기  400 · 600 · 800(헤드라인만)     둥글기 8 · 12 · 20(목업 카드) · 999     여백 8 · 16 · 24 · 40 · 64
   색    바탕 흰색/연회색/검정 3가지만 · 강조는 브랜드 파랑 하나(#2D6CF6, 검정 바탕 #6C9CFF) · 빨강은 문제 제기에만 */
:root {
  /* 재빗 브랜드 컬러 가이드 v2 — 강조색은 보라 하나, 나머지는 회색 */
  --ink: #1B1B24;          /* 제목 */
  --ink-2: #4D4D5C;        /* 본문 */
  --ink-3: #6B6B7C;        /* 보조 글 */
  --primary: #6952D9;
  --indigo: #5440B8;       /* 보조 글자(진한 보라) */
  --indigo-tint: #F4F1FF;
  --point: #6952D9;        /* 메인 보라: 누를 곳·가장 중요한 숫자 */
  --point-strong: #5440B8;
  --point-ink: #3F2F8E;    /* 연한 보라 배경 위 글자 */
  --point-bg: #F4F1FF;     /* 연한 배경(배지·아이콘 원) */
  --point-2: #B6A8FF;      /* 보조 단계 */
  --point-3: #E9E4FF;
  --red: #D9363E;          /* 위험(거의 안 씀) */
  --red-bg: #FDEDEE;
  --line: #E6E6EE;
  --bg: #FFFFFF;
  --bg-alt: #F8F8FB;       /* 섹션 교차 배경 */
  /* 다크 섹션 */
  --dark: #121218;
  --dark-2: #1A1A22;
  --on-dark: #F2F2F7;
  --on-dark-2: #D2D2DD;
  --point-on-dark: #9484FF;
  --on-point-dark: #14112A;

  --r-sm: 8px; --r: 12px; --r-lg: 20px; --r-pill: 999px;
  --font: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --canvas: 620px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #D9DCE1; color: var(--ink); font-family: var(--font); font-size: 19px; line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.32; }

/* ---------- 캔버스·섹션 ---------- */
.canvas { width: var(--canvas); margin: 0 auto; background: var(--bg); }
.sec { position: relative; padding: 64px 40px; text-align: center; overflow: hidden; }
.sec.light { background: var(--bg); }
.sec.alt { background: var(--bg-alt); }
.sec.dark { background: var(--dark); color: var(--on-dark); }
.sec.tight { padding-top: 40px; padding-bottom: 40px; }
.sec > * + * { margin-top: 24px; }

/* ---------- 글자 ---------- */
.h1 { font-size: 44px; font-weight: 800; }
.h2 { font-size: 34px; font-weight: 800; }
.h3 { font-size: 26px; font-weight: 700; }
.body { font-size: 19px; color: var(--ink-2); }
.dark .body { color: var(--on-dark-2); }
.small { font-size: 16px; color: var(--ink-3); }
.dark .small { color: var(--on-dark-2); }
.eyebrow { font-size: 16px; font-weight: 700; color: var(--point); letter-spacing: 0; }
.dark .eyebrow { color: var(--point-on-dark); }

/* 강조 3종: 초록 글자 · 형광펜 밑줄 · 손글씨 동그라미 */
.hl { color: var(--point); }
.dark .hl { color: var(--point-on-dark); }
.mark { background: linear-gradient(transparent 58%, #E9E4FF 58%, #E9E4FF 92%, transparent 92%); padding: 0 2px; }
.circled { position: relative; display: inline-block; padding: 0 6px; }
.circled svg { position: absolute; left: -8px; top: -6px; width: calc(100% + 16px); height: calc(100% + 12px); overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }

/* ---------- 배지·공지 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; background: var(--point-bg); color: var(--point); }
.dark .badge { background: rgba(148, 132, 255, .18); color: var(--point-on-dark); }
.notice { position: relative; margin: 0 auto; max-width: 480px; padding: 28px 24px 22px; border-radius: var(--r); background: var(--dark); color: var(--on-dark); font-size: 18px; font-weight: 700; line-height: 1.5; }
.notice .icon { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 44px; line-height: 1; }

/* 3D 아이콘 자리(이미지 받으면 <img class="icon3d"> 로 교체) */
.icon3d { width: 120px; height: 120px; margin-left: auto; margin-right: auto; display: grid; place-items: center; font-size: 84px; line-height: 1; }
.icon3d.placeholder { border: 2px dashed currentColor; border-radius: var(--r); opacity: .55; font-size: 13px; font-weight: 600; }

/* ---------- 앱 화면 목업 ---------- */
.mock { margin-left: auto; margin-right: auto; border-radius: var(--r-lg); background: #fff; padding: 10px; box-shadow: 0 20px 48px rgba(27, 27, 36, .18); }
.dark .mock { box-shadow: 0 20px 48px rgba(0, 0, 0, .5); }
.mock .bar { display: flex; gap: 6px; padding: 4px 6px 10px; }
.mock .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock img { border-radius: var(--r); border: 1px solid var(--line); }
.mock.phone { width: 260px; border-radius: 36px; padding: 10px; background: var(--dark-2); }
.mock.phone img { border-radius: 28px; border: 0; }

/* ---------- 후기 말풍선(첨부 레퍼런스 구조) ---------- */
.quotes { display: grid; gap: 28px; text-align: left; }
.quote { position: relative; background: var(--bg); border-radius: var(--r-lg); padding: 30px 24px 22px; box-shadow: 0 6px 20px rgba(27, 27, 36, .06); }
.quote .who { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; font-size: 14px; color: var(--ink-3); margin-bottom: 10px; }
.quote .avatar { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--bg-alt); display: grid; place-items: center; font-size: 30px; }
.quote .say { display: block; background: var(--point); color: #fff; border-radius: var(--r-sm); padding: 12px 18px; font-size: 18px; font-weight: 700; }

/* ---------- 기능 소개 ---------- */
.point { text-align: left; }
.point .num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.dark .point .num { background: var(--point-on-dark); color: var(--ink); }
.point .h3 + .body { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { padding: 8px 14px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink-2); }

/* ---------- 문제 제기 / 비교 ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.vs > div { border-radius: var(--r); padding: 20px; }
.vs .bad { background: var(--red-bg); }
.vs .good { background: var(--point-bg); }
.vs .label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.vs .bad .label { color: var(--red); }
.vs .good .label { color: var(--point); }
.vs ul { margin: 0; padding-left: 18px; font-size: 16px; color: var(--ink-2); }

/* ---------- 리워드 카드 ---------- */
.reward { text-align: left; background: var(--bg); border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 28px; }
.reward .tag { display: inline-block; padding: 4px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }
.reward .price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; }
.reward .price s { font-size: 20px; font-weight: 400; color: var(--ink-3); margin-right: 8px; }
.reward .price .off { font-size: 20px; color: var(--red); margin-right: 6px; }
.reward ul { margin: 16px 0 0; padding: 0; list-style: none; font-size: 17px; color: var(--ink-2); display: grid; gap: 8px; }
.reward li::before { content: "✓"; color: var(--point); font-weight: 800; margin-right: 8px; }

/* ---------- 색종이(검정 섹션 장식) ---------- */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; opacity: .9; }
.sec > .confetti + * { margin-top: 0; }
.sec > .confetti ~ * { position: relative; }

/* ---------- 작업용 표시(내보내기 때 숨김) ---------- */
.guide { width: var(--canvas); margin: 24px auto; padding: 24px; background: #fff; border-radius: var(--r); font-size: 15px; }
.guide h2 { font-size: 20px; margin-bottom: 12px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatches div { border-radius: var(--r-sm); padding: 40px 8px 8px; font-size: 12px; border: 1px solid var(--line); }
.sec-label { position: absolute; left: 8px; top: 8px; z-index: 5; font: 700 12px/1 var(--font); padding: 4px 8px; border-radius: 6px; background: #FDE047; color: #111; }
.exporting .guide, .exporting .sec-label { display: none !important; }
.exporting body, body.exporting { background: #fff; }

/* ---------- 시안용 추가 부품 ---------- */
/* 이미지 자리 표시 */
.ph { display: grid; place-items: center; min-height: 220px; border: 2px dashed #AFAFBE; border-radius: var(--r); background: rgba(175, 175, 190, .08); color: var(--ink-3); font-size: 15px; font-weight: 600; padding: 16px; line-height: 1.45; }
.dark .ph { color: var(--on-dark-2); border-color: #4D4D5C; }
.ph.sm { min-height: 140px; }
.ph b { display: block; font-size: 13px; color: var(--indigo); margin-bottom: 4px; }
.dark .ph b { color: #9484FF; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 문제 카드 */
.probs { display: grid; gap: 16px; text-align: left; }
.prob { background: var(--bg); border-radius: var(--r-lg); padding: 24px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.prob .ico { width: 64px; height: 64px; border-radius: var(--r); background: var(--red-bg); display: grid; place-items: center; font-size: 32px; }
.prob .t { font-size: 13px; font-weight: 700; color: var(--red); }
.prob h3 { font-size: 21px; font-weight: 700; margin: 2px 0 10px; }
.prob .q { font-size: 17px; font-weight: 700; color: var(--ink); background: var(--bg-alt); border-radius: var(--r-sm); padding: 8px 12px; display: inline-block; margin-bottom: 8px; }
.prob p { font-size: 16px; color: var(--ink-2); }

/* 변화 블록 */
.change { text-align: left; }
.change + .change { margin-top: 56px; }
.change .h3 { margin: 8px 0 8px; }
.change .ph, .change .mock { margin-top: 20px; }
.who-badges { display: flex; gap: 8px; margin-top: 16px; }
.who-badges span { padding: 6px 14px; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; }

/* 단계 흐름 */
.steps { display: grid; gap: 0; text-align: left; }
.step { background: var(--bg); border-radius: var(--r-lg); padding: 24px; }
.step .tag { font-size: 14px; font-weight: 800; color: var(--indigo); }
.step .h3 { font-size: 22px; margin: 4px 0 6px; }
.step .ph, .step .duo { margin-top: 16px; }
.arrow { text-align: center; font-size: 28px; color: var(--ink-3); padding: 8px 0; }

/* 기능 리스트(가치 스택) */
.feats { display: grid; gap: 28px; text-align: left; }
.feat { display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.feat .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; font-weight: 800; }
.dark .feat .num { background: var(--point-on-dark); color: var(--ink); }
.feat h3 { font-size: 22px; font-weight: 700; }
.feat p { font-size: 17px; color: var(--ink-2); margin-top: 4px; }
.dark .feat p { color: var(--on-dark-2); }
.feat .ph { margin-top: 12px; min-height: 120px; }

/* 요금제 카드 */
.plans { display: grid; gap: 14px; text-align: left; }
.plan { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.plan.best { border: 2px solid var(--point); }
.plan .name { font-size: 14px; font-weight: 800; color: var(--indigo); letter-spacing: .02em; }
.plan h3 { font-size: 24px; font-weight: 800; margin: 2px 0 6px; }
.plan p { font-size: 16px; color: var(--ink-2); }
.plan .inc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); display: grid; gap: 4px; }
.plan .inc b { color: var(--ink); }
.plan .price { color: var(--ink); font-size: 30px; font-weight: 800; margin-top: 10px; letter-spacing: -0.02em; }
.plan .price small { font-size: 15px; font-weight: 600; color: var(--ink-3); margin-left: 6px; }
.periods { display: grid; gap: 10px; text-align: left; }
.periods div { background: var(--bg-alt); border-radius: var(--r); padding: 14px 18px; font-size: 16px; color: var(--ink-2); }
.periods b { color: var(--ink); margin-right: 6px; }

/* 표 */
.tbl { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: var(--r); overflow: hidden; font-size: 15px; }
.tbl th, .tbl td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 14px; color: var(--ink-2); }
.tbl thead th { background: var(--ink); color: #fff; font-weight: 700; }
.tbl thead th:first-child { color: #fff; }
.tbl td.b { font-weight: 800; color: var(--ink); }
.tbl tr.sub td { font-size: 13px; color: var(--ink-3); padding-top: 4px; }
.tbl tr.save td { background: var(--point-bg); color: var(--point); font-weight: 800; }
.tbl .y { color: var(--point); font-weight: 800; }
.tbl .n { color: #D2D2DD; }
/* 재빗만의 기능(S11): 행을 연한 보라로 칠하고 이름 옆에 '재빗 only' 배지 */
.tbl tr.only td { background: var(--point-bg); }
.tbl tr.only td:first-child { color: var(--point-ink); font-weight: 800; box-shadow: inset 3px 0 0 var(--point); }
.only-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--point); color: #fff; font-size: 11px; font-weight: 400; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }

/* FAQ */
.faq { display: grid; gap: 12px; text-align: left; }
.faq div { background: var(--bg); border-radius: var(--r); padding: 20px 22px; }
.faq h3 { font-size: 18px; font-weight: 700; }
.faq h3::before { content: "Q. "; color: var(--point); }
.faq p { font-size: 16px; color: var(--ink-2); margin-top: 8px; }
.cta { display: inline-block; padding: 16px 32px; border-radius: var(--r-pill); background: var(--point-on-dark); color: var(--ink); font-size: 20px; font-weight: 800; }

/* ---------- S1 히어로(레퍼런스: 사진 → 동그라미 헤드라인 → 속마음 말풍선 → 고민 궤도 → 전환 카피) ---------- */
.sec.hero { padding: 0 0 72px; background: linear-gradient(180deg, #F8F8FB 0%, #F8F8FB 45%, #F4F1FF 70%, #F8F8FB 100%); }
.sec.hero > * { margin-left: 40px; margin-right: 40px; }
.sec.hero > * + * { margin-top: 0; }
.hero-photo { margin: 0 !important; height: 330px; border-radius: 0; border: 0; border-bottom: 2px dashed #AFAFBE; background: #E6E6EE; }
.hero-title { margin-top: 96px !important; font-size: 40px; font-weight: 800; line-height: 1.38; letter-spacing: -0.03em; }
.hero .quotes { margin-top: 72px !important; gap: 36px; }
.hero .quote { background: rgba(255, 255, 255, .85); }
.hero .quote .avatar { left: auto; right: 150px; transform: none; background: var(--point-bg); }
.hero .quote .who { min-height: 20px; }
.hero .quote .say { background: var(--point); text-align: center; line-height: 1.5; padding: 14px 18px; }
.orbit { position: relative; height: 460px; margin-top: 96px !important; }
.orbit .ring { position: absolute; left: 50%; top: 50%; border: 1.5px dashed #B6A8FF; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit .face { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; display: grid; place-items: center; font-size: 110px; line-height: 1; }
.orbit .face.placeholder { border: 2px dashed #AFAFBE; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--ink-3); text-align: center; }
.orbit .tag { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 8px 16px; border-radius: var(--r-pill); background: #E9E4FF; border: 1px solid #E9E4FF; color: var(--ink); font-size: 16px; font-weight: 600; }
.hero-bridge { margin-top: 72px !important; font-size: 30px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); }
.hero-promise { margin-top: 88px !important; font-size: 44px; font-weight: 800; line-height: 1.32; letter-spacing: -0.03em; }
.hero-promise .grad { background: linear-gradient(90deg, var(--point-strong), #9484FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin-top: 24px !important; font-size: 19px; color: var(--ink-2); }
.hero-worry { margin-top: 28px !important; font-size: 72px; line-height: 1; }
.hero .quotes { margin-top: 48px !important; gap: 16px; }
.hero .quote { padding: 18px; }
.sec.hero { padding-bottom: 0; }
.hero-photo.bottom { margin-top: 64px !important; border-bottom: 0; border-top: 2px dashed #AFAFBE; }

/* ---------- S2 문제 제기: 문제마다 '겪어 본 장면' + 공감 체크 ---------- */
.s2-lead { font-size: 19px; color: var(--ink-2); }
.scenes { display: grid; gap: 20px; text-align: left; margin-top: 48px !important; }
.scene { background: var(--bg); border-radius: var(--r-lg); padding: 26px 24px 24px; }
.scene-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.scene-head .no { font-size: 14px; font-weight: 800; color: var(--red); }
.scene-head h3 { font-size: 23px; font-weight: 800; line-height: 1.38; margin-top: 4px; }
.me-too { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--point); color: var(--point); font-size: 14px; font-weight: 700; white-space: nowrap; }
.me-too i { width: 18px; height: 18px; border-radius: 5px; background: var(--point); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.scene-box { margin-top: 18px; background: var(--bg-alt); border-radius: var(--r); padding: 18px; }
.scene p.desc { margin-top: 14px; font-size: 16px; color: var(--ink-2); line-height: 1.6; }

/* 1. 메신저 */
.chat { display: grid; gap: 8px; }
.chat .from { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.chat .b { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.chat .them { background: #fff; border-top-left-radius: 4px; justify-self: start; }
.chat .mine { background: #F4F1FF; border-top-right-radius: 4px; justify-self: end; color: #1B1B24; }
.hops { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); flex-wrap: wrap; }
.hops span { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; }
.hops em { font-style: normal; color: var(--ink-3); }

/* 2. 월말 체크리스트 */
.todo { display: grid; gap: 10px; font-size: 17px; font-weight: 600; }
.todo div { display: flex; align-items: center; gap: 10px; }
.todo .ck { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.todo .done .ck { background: var(--ink); color: #fff; }
.todo .done { color: var(--ink-3); text-decoration: line-through; }
.todo .q .ck { border: 2px dashed var(--red); color: var(--red); }
.todo .q { color: var(--ink); }

/* 3. 계산 메모 */
.memo { background: #F8F8FB; border: 1px solid #E6E6EE; border-radius: var(--r); padding: 16px 18px; font-size: 18px; font-weight: 700; line-height: 1.9; }
.memo .ok { color: var(--ink); }
.memo .ok b { color: var(--point); }
.memo .minus { color: var(--red); }
.memo .line { border-top: 2px solid var(--ink); margin: 6px 0; }
.memo .huh { font-size: 22px; color: var(--red); }

/* 4. 선택지 */
.choices { display: grid; gap: 8px; }
.choices span { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 14px; font-size: 16px; font-weight: 700; }
.choices span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D2D2DD; flex: none; }
.choices .think { text-align: center; font-size: 15px; color: var(--ink-3); font-weight: 600; margin-top: 4px; }

.s2-close { margin-top: 48px !important; font-size: 26px; font-weight: 800; line-height: 1.45; }
.s2-close .hl-box { color: var(--point); }
.s2-answer { margin-top: 28px !important; font-size: 40px; font-weight: 800; line-height: 1.35; letter-spacing: -0.03em; }
.s2-answer .key { color: #fff; background: var(--point); padding: 2px 14px 4px; border-radius: var(--r-sm); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- S9 이용권 가격: 월 가격 할인 강조(레퍼런스: 옵션 카드 + 정상가/할인가 + 할인율 원) ---------- */
.price-plan { font-size: 15px; font-weight: 800; color: var(--point); letter-spacing: .04em; }
.opts { display: grid; gap: 16px; text-align: left; }
.opt { position: relative; display: grid; grid-template-columns: 1fr 150px; align-items: center; background: var(--bg); border-radius: var(--r-lg); padding: 28px 24px 28px 28px; box-shadow: 0 4px 16px rgba(27, 27, 36, .05); }
.opt .tag { font-size: 15px; font-weight: 800; color: var(--point-strong); }
.opt h3 { font-size: 26px; font-weight: 800; margin: 4px 0 2px; }
.opt .sub { font-size: 16px; color: var(--ink-2); }
.opt .rows { display: grid; gap: 8px; margin-top: 18px; }
.opt .row { display: flex; align-items: center; gap: 12px; }
.opt .pill { display: inline-grid; place-items: center; min-width: 68px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; }
.opt .pill.base { background: #F2F2F7; color: var(--ink-2); }
.opt .pill.sale { background: var(--point); color: #fff; }
.opt .was { font-size: 20px; color: #AFAFBE; text-decoration: line-through; font-weight: 600; }
.opt .now { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--point); line-height: 1.1; }
.opt .now.plain { color: var(--ink); }
.opt .total { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.opt .period { text-align: center; color: #E9E4FF; font-weight: 800; line-height: 1; }
.opt .period b { display: block; font-size: 76px; letter-spacing: -0.04em; }
.opt .period span { font-size: 20px; color: #B6A8FF; }
.opt .off { position: absolute; right: 18px; top: -12px; width: 76px; height: 76px; border-radius: 50%; background: #6952D9; color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; box-shadow: 0 6px 14px rgba(105, 82, 217, .3); }
.opt.best { outline: 2.5px solid var(--point); }
/* S11 가격 카드: 1년권 월 가격 + 1개월 대비 할인 금액 */
.plan .yr { margin-top: 14px; }
.plan .yr .price { margin-top: 0; color: var(--point); font-size: 34px; }
.plan .yr .price small { color: var(--ink-3); }
.plan .cut { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.plan .cut s { font-size: 17px; color: #AFAFBE; font-weight: 600; }
.plan .save { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); background: #6952D9; color: #fff; font-size: 15px; font-weight: 800; }
.s11-note { margin-top: 10px !important; font-size: 16px; color: var(--ink-3); }

/* ---------- 요금제 고르기 '부터' 가격 · 기간 고르기 ---------- */
.plan .price.from { color: var(--point); font-size: 32px; margin-top: 14px; }
.plan .price.from small { color: var(--ink-2); font-size: 17px; margin-left: 4px; }
.plan .name { color: var(--point-strong); }
.save-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.save-card { background: var(--bg); border-radius: var(--r-lg); padding: 22px 16px; border: 2px solid var(--point-bg); }
.save-card.big { border-color: var(--point); }
.save-card .per { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: var(--point-bg); color: var(--point-strong); font-size: 15px; font-weight: 800; }
.save-card p { margin-top: 10px; font-size: 20px; font-weight: 700; }
.save-card p b { display: block; font-size: 36px; font-weight: 800; color: #6952D9; letter-spacing: -0.02em; line-height: 1.2; }
.ptbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg); border-radius: var(--r-lg); overflow: hidden; margin-top: 32px !important; }
.ptbl th, .ptbl td { padding: 16px 6px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptbl tbody tr:last-child th, .ptbl tbody tr:last-child td { border-bottom: 0; }
.ptbl thead th { font-size: 18px; font-weight: 800; background: #F2F2F7; color: var(--ink); }
.ptbl thead th.on { background: var(--point); color: #fff; }
.ptbl thead small { display: block; font-size: 12px; font-weight: 600; opacity: .8; margin-top: 2px; }
.ptbl tbody th { font-size: 15px; font-weight: 800; color: var(--ink-2); text-align: left; padding-left: 16px; }
.ptbl td b { display: block; font-size: 18px; font-weight: 800; }
.ptbl td:nth-child(3) b, .ptbl td:nth-child(4) b { color: var(--point); }
.ptbl td small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ---------- S8 요금제 YES/NO 테스트 ---------- */
.yn-top { font-size: 17px; font-weight: 700; color: var(--ink-2); }
.yn-top b { color: var(--point); }
.yn-legend { display: flex; justify-content: center; gap: 18px; font-size: 15px; font-weight: 800; }
.yn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.yn-legend i { width: 12px; height: 12px; border-radius: 50%; }
.flow { position: relative; width: 540px; height: 620px; margin: 28px auto 0 !important; }
.flow svg { position: absolute; inset: 0; overflow: visible; }
.flow .q { position: absolute; width: 220px; height: 128px; background: var(--bg); border-radius: var(--r-lg); display: grid; place-items: center; padding: 14px 16px; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--ink-2); box-shadow: 0 4px 14px rgba(27, 27, 36, .06); }
.flow .q b { color: var(--ink); font-weight: 800; }
.flow .q .qn { position: absolute; top: -12px; left: 16px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.flow .r { position: absolute; top: 420px; width: 170px; height: 200px; border-radius: var(--r-lg); padding: 18px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.flow .r .letter { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #fff; }
.flow .r .pn { margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.flow .r h3 { font-size: 17px; font-weight: 800; line-height: 1.35; margin-top: 4px; color: var(--ink); }
.flow .r .pp { margin-top: auto; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.flow .r .pp small { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.flow .r1 { left: 0; background: #fff; border: 2px solid #E6E6EE; }
.flow .r1 .letter { background: #B6A8FF; } .flow .r1 .pn, .flow .r1 .pp { color: #6B6B7C; }
.flow .r2 { left: 185px; background: #fff; border: 2px solid #B6A8FF; }
.flow .r2 .letter { background: #B6A8FF; } .flow .r2 .pn, .flow .r2 .pp { color: #5440B8; }
.flow .r3 { left: 370px; background: var(--point); border: 2px solid var(--point); }
.flow .r3 .letter { background: #fff; color: var(--point); } .flow .r3 .pn, .flow .r3 h3, .flow .r3 .pp { color: #fff; } .flow .r3 .pp small { color: #E9E4FF; }
.yn-note { font-size: 15px; color: var(--ink-3); }
/* S8 결과 카드: 플랜명만 */
.flow { height: 560px; }
.flow .r { height: 140px; justify-content: center; }
.flow .r .pn { font-size: 22px; letter-spacing: .02em; margin-top: 12px; }

/* ---------- S9 플랜 소개(테스트 결과 색과 연결) ---------- */
.pis { display: grid; gap: 16px; text-align: left; }
.pi { border-radius: var(--r-lg); padding: 26px 24px; background: var(--bg-alt); border: 2px solid transparent; }
.pi-head { display: flex; align-items: center; gap: 12px; }
.pi .letter { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 900; color: #fff; flex: none; }
.pi .pn { display: block; font-size: 22px; font-weight: 800; letter-spacing: .02em; line-height: 1.2; }
.pi .kind { display: block; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.pi h3 { font-size: 23px; font-weight: 800; margin-top: 16px; }
.pi p { font-size: 16px; color: var(--ink-2); margin-top: 4px; }
.pi-feat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pi-feat span { padding: 6px 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--ink); }
.pi-feat .base { background: transparent; border-color: transparent; color: var(--ink-3); padding-left: 0; }
.pi-r1 .letter { background: #B6A8FF; } .pi-r1 .pn { color: #6B6B7C; }
.pi-r2 { border-color: #B6A8FF; } .pi-r2 .letter { background: #B6A8FF; } .pi-r2 .pn { color: #5440B8; }
.pi-r3 { background: var(--point); } .pi-r3 .letter { background: #fff; color: var(--point); }
.pi-r3 .pn, .pi-r3 h3 { color: #fff; } .pi-r3 .kind, .pi-r3 p, .pi-r3 .pi-feat .base { color: #E9E4FF; }
.pi-r3 .pi-feat span:not(.base) { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.pi .letter.num { font-size: 17px; letter-spacing: -0.02em; }

/* ---------- 여백 넓히기(2026-11-02): 섹션 위아래 64 → 112, 섹션 안 요소 사이 24 → 36, 카드 사이 16 → 24 ---------- */
.sec { padding-top: 112px; padding-bottom: 112px; }
.sec.tight { padding-top: 64px; padding-bottom: 64px; }
.sec > * + * { margin-top: 36px; }
.sec.hero { padding-top: 0; padding-bottom: 0; }
.sec.hero > * + * { margin-top: 0; }
.scenes, .pis, .opts, .plans, .faq, .quotes { gap: 24px; }
.feats { gap: 40px; }
.change + .change { margin-top: 80px; }
.hero .quotes { gap: 20px; }
.ptbl-note { font-size: 15px; color: var(--ink-3); }
.ptbl-note + .ptbl { margin-top: 12px !important; }
.save-card .year-total { margin-top: 14px; padding: 10px 8px; border-radius: var(--r); background: #F4F1FF; font-size: 17px; font-weight: 700; color: var(--ink); }
.save-card .year-total b { display: inline; font-size: 20px; color: #6952D9; }

/* S12 1개월권 대비 비교(계단 막대: 오래 쓸수록 월 가격이 낮아짐) */
.cmp { background: var(--bg); border-radius: var(--r-lg); padding: 24px 18px 22px; }
.cmp-cap { font-size: 16px; font-weight: 700; color: var(--ink-3); }
.cmp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; margin-top: 18px; }
.cmp-col { display: flex; flex-direction: column; align-items: center; }
.cmp-col .per { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 10px; order: 0; }
.cmp-col .bar { width: 100%; border-radius: 12px 12px 4px 4px; background: #E9E4FF; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; }
.cmp-col .bar em { font-style: normal; font-size: 17px; font-weight: 800; color: #fff; }
.cmp-col.base .bar { background: #E6E6EE; }
.cmp-col:not(.base):not(.best) .bar { background: #B6A8FF; }
.cmp-col.best .bar { background: var(--point); }
.cmp-col .v { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ink-2); min-height: 24px; }
.cmp-col .v b { color: #6952D9; font-weight: 800; }
.cmp-col.base .v { color: var(--ink-3); }
.cmp-col .yt { margin-top: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: #F4F1FF; font-size: 14px; font-weight: 700; color: var(--ink); }
.cmp-col .yt b { color: #6952D9; }
.cmp-col:not(.best) { padding-bottom: 34px; }
.cmp-col .bar em { display: flex; flex-direction: column; align-items: center; line-height: 1.25; font-size: 19px; }
.cmp-col .bar em small { font-size: 13px; font-weight: 700; opacity: .9; }
.cmp-col .bar em.b0 { color: var(--ink-3); font-size: 15px; }
.cmp-col:not(.best) { padding-bottom: 0; }
.cmp-cols { align-items: start; }
.cmp-col { justify-content: flex-end; height: 100%; }
.cmp-col .yt { position: absolute; }
.cmp-cols { position: relative; padding-bottom: 44px; }
.cmp-col.best { position: static; }
.cmp-col.best .yt { bottom: 0; right: 0; width: calc((100% - 24px) / 3); text-align: center; padding: 6px 4px; }
.cmp-cols { align-items: end; }
.cmp-col.best .yt { width: auto; white-space: nowrap; padding: 6px 14px; right: 0; bottom: 0; }
.cmp-cols { padding-bottom: 48px; }

/* S14 마무리 넛지: 검정 바탕 + 아래 사진으로 끝 */
.sec.closing { padding-bottom: 0; }
.closing .cta { background: var(--point); color: #fff; }
.closing-photo { margin: 72px -40px 0 !important; height: 360px; border-radius: 0; border: 0; border-top: 2px dashed #4D4D5C; background: #1A1A22; }


/* ================= 브랜드 가이드 v2 적용(2026-11-02) ================= */
/* 규칙: 보라는 누를 곳·가장 중요한 숫자에만 / 위계는 회색·굵기 / 빨강·노랑·파랑·초록 안 씀 / 연한 보라는 배경으로만 / 보라 버튼 글자는 흰색 */
.badge { background: var(--point-bg); color: var(--point-ink); }
.dark .badge { background: rgba(148, 132, 255, .16); color: var(--point-on-dark); }
.circled path { stroke: var(--point); }
.cta { background: var(--point); color: #fff; }
.dark .cta, .closing .cta { background: var(--point-on-dark); color: var(--on-point-dark); }
.dark .feat .num, .dark .point .num { color: var(--on-point-dark); }
/* S1: 말풍선은 연한 보라 배경 + 기본 글자, 보라 강조는 동그라미·약속 문구 두 곳만 */
.hero .quote .say { background: var(--point-bg); color: var(--ink); }
.hero-promise .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--point); }
.orbit .tag { background: var(--point-bg); border-color: var(--point-3); }
/* S2: 문제 라벨·메모는 회색 위계로 */
.scene-head .no { color: var(--ink-3); }
.todo .q .ck { border-color: var(--ink-3); color: var(--ink-3); }
.memo .minus { color: var(--ink-2); }
.memo .huh { color: var(--ink); }
.memo .ok b { color: var(--point); }
.chat .mine { color: var(--ink); }
/* 단계 구분(A/B/C · 1/3/12개월 · 막대): 연보라 → 보라 단계 → 메인 보라 */
.flow .r1 { border-color: var(--line); } .flow .r1 .letter, .pi-r1 .letter { background: var(--point-3); color: var(--point-ink); }
.flow .r1 .pn, .pi-r1 .pn { color: var(--ink-3); }
.flow .r2 { border-color: var(--point-2); } .flow .r2 .letter, .pi-r2 .letter { background: var(--point-2); color: var(--point-ink); }
.flow .r2 .pn, .pi-r2 .pn { color: var(--point-strong); }
.pi-r2 { border-color: var(--point-2); }
.flow .r3 .pp small, .pi-r3 .kind, .pi-r3 p { color: #E9E4FF; }
.cmp-col.base .bar { background: var(--line); }
.cmp-col:not(.base):not(.best) .bar { background: var(--point-2); }
.cmp-col:not(.base):not(.best) .bar em { color: var(--point-ink); }
.cmp-col .yt { background: var(--point-bg); }
.cmp-col .yt b { color: var(--point); }
/* 카드 배경: 흰 섹션 위에선 연회색, 연회색 섹션 위에선 흰색 */
.light .scene, .light .plan, .light .faq div, .light .step, .light .quote, .light .cmp, .light .ptbl, .light .prob { background: var(--bg-alt); }
.alt .pi { background: var(--bg); }
.light .pi { background: var(--bg-alt); }
.light .pi-r3, .alt .pi-r3 { background: var(--point); }

/* ================= 생동감(정지 이미지용): 기울기·겹침·말풍선 꼬리·반짝이·손그림 화살표 ================= */
/* 반짝이(4각 별) — 제목 양옆 장식, 보라 보조 단계 */
.spark { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.spark path { fill: var(--point-2); }
.dark .spark path { fill: var(--point-on-dark); opacity: .7; }
.deco { position: relative; display: inline-block; }
.deco .spark.l { left: -34px; top: -6px; transform: rotate(-12deg); }
.deco .spark.r { right: -30px; bottom: 4px; width: 16px; height: 16px; transform: rotate(10deg); }

/* S1 말풍선: 카드 상자 대신 대화처럼 좌우로 엇갈리고 살짝 기울임 + 꼬리 */
.hero .quotes { gap: 18px; }
.hero .quote { background: none; box-shadow: none; padding: 0; display: flex; }
.hero .quote .say { position: relative; max-width: 86%; border-radius: 22px; padding: 16px 22px; box-shadow: 0 8px 20px rgba(105, 82, 217, .12); background: #fff; border: 1.5px solid var(--point-3); }
.hero .quote:nth-child(odd) { justify-content: flex-start; }
.hero .quote:nth-child(even) { justify-content: flex-end; }
.hero .quote:nth-child(1) .say { transform: rotate(-1.6deg); }
.hero .quote:nth-child(2) .say { transform: rotate(1.4deg); }
.hero .quote:nth-child(3) .say { transform: rotate(-0.8deg); }
.hero .quote .say::after { content: ""; position: absolute; bottom: -9px; width: 18px; height: 18px; background: #fff; border-right: 1.5px solid var(--point-3); border-bottom: 1.5px solid var(--point-3); transform: rotate(45deg); }
.hero .quote:nth-child(odd) .say::after { left: 34px; }
.hero .quote:nth-child(even) .say::after { right: 34px; }
/* 걱정 이모지 주변 물음표 */
.hero-worry { position: relative; display: inline-block; }
.hero-worry .qm { position: absolute; font-size: 26px; font-weight: 800; color: var(--ink-3); opacity: .55; }
.hero-worry .qm.a { left: -34px; top: -6px; transform: rotate(-18deg); }
.hero-worry .qm.b { right: -30px; top: -14px; font-size: 20px; transform: rotate(14deg); }
.hero-worry .qm.c { right: -42px; top: 30px; font-size: 16px; transform: rotate(24deg); }
/* 고민 궤도 칩: 조금씩 기울여 떠다니는 느낌 */
.orbit .tag:nth-of-type(odd) { rotate: -4deg; }
.orbit .tag:nth-of-type(even) { rotate: 3deg; }
.orbit .tag { box-shadow: 0 4px 12px rgba(105, 82, 217, .10); }
/* 걱정 이모지 뒤 옅은 보라 원 */
.orbit .face::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, #E9E4FF 0%, rgba(233, 228, 255, 0) 70%); z-index: -1; }
.orbit .face { isolation: isolate; }

/* 앱 화면 목업: 뒤에 기울어진 연보라 카드를 겹쳐 깊이감 */
.mock { position: relative; isolation: isolate; }
.mock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--point-3); transform: rotate(2.6deg) translate(6px, 8px); z-index: -1; }
.dark .mock::before { background: rgba(148, 132, 255, .28); }
.duo .mock::before { transform: rotate(-2.4deg) translate(-4px, 6px); }

/* S2 마무리: '내 얘기네' → '자산관리 방법'을 잇는 손그림 화살표 */
.hand-arrow { display: block; width: 90px; height: 70px; margin: 8px auto -8px !important; }
.hand-arrow path { fill: none; stroke: var(--point); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s2-answer .key { display: inline-block; transform: rotate(-2deg); box-shadow: 0 10px 22px rgba(105, 82, 217, .28); }

/* S2 장면 카드: 번갈아 아주 살짝 기울여 쌓인 메모 느낌 */
.scene:nth-child(odd) { transform: rotate(-0.5deg); }
.scene:nth-child(even) { transform: rotate(0.5deg); }
.scene { box-shadow: 0 6px 18px rgba(27, 27, 36, .05); }

/* S8 선물·S9 결과·버튼: 빛과 그림자 */
.icon3d { position: relative; isolation: isolate; }
.icon3d::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(148, 132, 255, .45) 0%, rgba(148, 132, 255, 0) 65%); z-index: -1; }
.flow .r3 { transform: scale(1.05); box-shadow: 0 14px 30px rgba(105, 82, 217, .35); }
.cta { box-shadow: 0 10px 24px rgba(105, 82, 217, .35); }
.dark .cta, .closing .cta { box-shadow: 0 0 0 8px rgba(148, 132, 255, .16), 0 12px 30px rgba(148, 132, 255, .35); }
.cta::after { content: " →"; }

/* S10 플랜 소개·S12 이용권 소개: 가장 진한 카드만 살짝 들어 올림 */
.pi-r3 { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(105, 82, 217, .30); }

/* S13 막대: 1개월 → 1년 내려가는 점선 추세선 */
.cmp-cols { isolation: isolate; }
.cmp-trend { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 48px); pointer-events: none; z-index: 2; overflow: visible; }
.cmp-trend path { fill: none; stroke: var(--point); stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.cmp-trend circle { fill: #fff; stroke: var(--point); stroke-width: 2.5; }

/* S2 문제 카드 구분 강화: 흰 섹션 위 연회색 카드 → 흰 카드 + 테두리 + 그림자, 안쪽 장면 상자는 연회색 유지 */
.light .scene { background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(27, 27, 36, .07); }
.light .scene .scene-box { background: var(--bg-alt); }
.light .scene .scene-box[style*="transparent"] { background: transparent; }
.light .scene .memo { background: var(--bg-alt); }
.scenes { gap: 32px; }

/* 앱 화면 캡처(S4~S6): 흰 카드 + 얇은 테두리. 세로로 긴 화면은 narrow로 폭을 줄여 가운데 */
.cap { margin: 12px 0 0; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(27, 27, 36, .08); }
.cap img { display: block; width: 100%; height: auto; }
.cap.narrow { max-width: 300px; margin-left: auto; margin-right: auto; }
.step .cap, .step .duo { margin-top: 16px; }
.duo .cap { margin-top: 0; align-self: start; }
.dark .cap { border-color: #2E2E39; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }

.cap.chip { width: 300px; box-shadow: none; }

/* ---------- S11 업그레이드 기능(Plus·Premium 전용 3가지) ---------- */
.ups { display: grid; gap: 64px; text-align: left; margin-top: 56px !important; }
.up-tag { display: flex; align-items: center; gap: 10px; }
.up-plan { padding: 4px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.up-plan.plus { background: rgba(148, 132, 255, .18); color: var(--point-on-dark); }
.up-plan.premium { background: var(--point-on-dark); color: var(--on-point-dark); }
.up-feat { font-size: 15px; font-weight: 700; color: var(--on-dark-2); }
.up h3 { font-size: 28px; font-weight: 800; line-height: 1.38; letter-spacing: -0.03em; color: var(--on-dark); margin-top: 14px; }
.up p { font-size: 17px; color: var(--on-dark-2); margin-top: 8px; }
.ph.gif { margin-top: 22px; min-height: 0; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: var(--dark-2); border-color: #3A3A48; }
.dark .ph.gif b { color: var(--point-on-dark); }

/* S11 업그레이드 기능 v2: 밝은 배경 + 카드마다 강조(Plus = 연보라 테두리, Premium = 메인 보라 테두리·그림자) */
.upgrade .ups { gap: 32px; }
.upgrade .up { position: relative; background: var(--bg); border: 1.5px solid var(--point-3); border-radius: 24px; padding: 28px 24px 24px; overflow: hidden;
  background-image: linear-gradient(180deg, var(--point-bg) 0, #fff 150px); box-shadow: 0 12px 32px rgba(105, 82, 217, .10); }
.upgrade .up.premium { border: 2px solid var(--point); box-shadow: 0 18px 40px rgba(105, 82, 217, .24); }
.upgrade .up-plan.plus { background: var(--point-3); color: var(--point-ink); }
.upgrade .up-plan.premium { background: var(--point); color: #fff; }
.upgrade .up-feat { color: var(--ink-3); }
.upgrade .up h3 { color: var(--ink); }
.upgrade .up p { color: var(--ink-2); }
/* GIF 자리: 흰 프레임 + 뒤에 기울어진 연보라 판 */
.upgrade .ph.gif { position: relative; isolation: isolate; background: var(--bg-alt); border: 1.5px dashed var(--point-2); color: var(--ink-3); box-shadow: 0 8px 20px rgba(27, 27, 36, .06); }
.upgrade .ph.gif b { color: var(--point); }
.upgrade .ph.gif::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--point-3); transform: rotate(2deg) translate(6px, 8px); z-index: -1; }
.upgrade .up.premium .ph.gif::before { background: var(--point-2); }
/* 기울어진 판이 GIF 자리 '뒤'로 가도록: 쌓임 기준을 카드(.up)로 */
.upgrade .ph.gif { isolation: auto; }
.upgrade .up { isolation: isolate; }

/* ---------- 사용자 제공 GIF(800×400, 2:1) ---------- */
.hero-gif { margin: 0 !important; line-height: 0; background: var(--bg-alt); }
.hero-gif img { width: 100%; height: auto; display: block; }
.hero-gif.bottom { margin-top: 64px !important; }
.mock.gif img { border-radius: var(--r); }
/* S11 카드 안 GIF: 흰 프레임 + 뒤에 기울어진 보라 판(GIF 자리와 같은 모양) */
.upgrade .gif-frame { position: relative; margin-top: 22px; border-radius: var(--r-lg); background: #fff; padding: 6px; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(27, 27, 36, .08); line-height: 0; }
.upgrade .gif-frame img { width: 100%; height: auto; border-radius: 14px; }
.upgrade .gif-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--point-3); transform: rotate(2deg) translate(6px, 8px); z-index: -1; }
.upgrade .ph.gif { aspect-ratio: 2 / 1; }

/* S1 GIF: 노트북 화면 틀 — '실제 앱 화면'으로 읽히게 */
.sec.hero .device { position: relative; margin: 0 40px !important; isolation: isolate; }
.sec.hero .device.top { margin-top: 56px !important; }
.sec.hero .device.bottom { margin-top: 64px !important; margin-bottom: 72px !important; }
.device-bezel { background: #1B1B24; border-radius: 18px 18px 6px 6px; padding: 12px 12px 14px; box-shadow: 0 24px 48px rgba(27, 27, 36, .22); line-height: 0; }
.device-bezel img { width: 100%; height: auto; border-radius: 6px; display: block; }
.device-bezel::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: #4D4D5C; margin: -6px auto 6px; }
.device-base { height: 14px; margin: 0 -28px; background: linear-gradient(180deg, #D2D2DD, #AFAFBE); border-radius: 0 0 14px 14px; position: relative; }
.device-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 90px; height: 6px; transform: translateX(-50%); background: #AFAFBE; border-radius: 0 0 8px 8px; }
/* 뒤에 옅은 보라 원으로 화면을 띄움 */
.sec.hero .device::before { content: ""; position: absolute; inset: -30px -10px -20px; background: radial-gradient(ellipse at center, #E9E4FF 0%, rgba(233, 228, 255, 0) 70%); z-index: -1; }

/* 마무리 넛지: 사진 자리 → 노트북 틀 속 대시보드(S1 히어로와 같은 틀) */
.sec.closing { padding-bottom: 112px; }
.closing-device { position: relative; margin: 72px 12px 0 !important; isolation: isolate; }
.closing-device .device-bezel { border: 1px solid #33333F; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.closing-device::before { content: ""; position: absolute; inset: -40px -20px -30px; background: radial-gradient(ellipse at center, rgba(148, 132, 255, .35) 0%, rgba(148, 132, 255, 0) 70%); z-index: -1; }

/* ---------- S7 AI 재무코치: 범용 AI 챗봇과의 비교 + 3가지 학습 ---------- */
.vs-ai { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg); font-size: 15px; }
.vs-ai th, .vs-ai td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.45; }
.vs-ai tbody tr:last-child th, .vs-ai tbody tr:last-child td { border-bottom: 0; }
.vs-ai thead th { font-size: 15px; font-weight: 800; background: var(--bg-alt); color: var(--ink-3); }
.vs-ai thead th.me { background: var(--point); color: #fff; }
.vs-ai tbody th { width: 26%; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.vs-ai td { color: var(--ink-3); width: 30%; }
.vs-ai td.me { background: var(--point-bg); color: var(--ink); font-weight: 700; width: 44%; }
.ai-pillars { display: grid; gap: 14px; text-align: left; }
.pillar { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 20px 74px; box-shadow: 0 8px 22px rgba(27, 27, 36, .06); }
.alt .pillar, .alt .vs-ai { background: var(--bg); }
.pillar .pi-no { position: absolute; left: 20px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: var(--point-bg); color: var(--point-ink); display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.pillar h3 { font-size: 20px; font-weight: 800; }
.pillar p { font-size: 16px; color: var(--ink-2); margin-top: 4px; }
.pillar small { font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.aicoach .ai-gif { aspect-ratio: 2 / 1; min-height: 0; background: var(--bg); border-color: var(--point-2); }
.aicoach .ai-gif b { color: var(--point); }
.vs-ai thead th small { display: block; font-size: 11px; font-weight: 600; opacity: .85; margin-top: 2px; }

/* ---------- S7 AI 재무코치 v2: 같은 질문 비교 + ✕/✓ 비교표 ---------- */
.ai-name { display: inline-block; padding: 0 12px 2px; border-radius: 12px; background: var(--point); color: #fff; transform: rotate(-1.5deg); box-shadow: 0 10px 22px rgba(105, 82, 217, .28); }
.same-q { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 26px 20px 18px; box-shadow: 0 10px 28px rgba(27, 27, 36, .06); }
.sq-label { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.sq-ask { display: inline-block; margin-top: 10px; padding: 12px 18px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: #fff; font-size: 18px; font-weight: 700; }
.sq-answers { display: grid; gap: 12px; margin-top: 18px; text-align: left; }
.sq-a { border-radius: 18px; padding: 16px 18px; font-size: 16px; line-height: 1.6; }
.sq-a .who { display: inline-block; font-size: 13px; font-weight: 800; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--r-pill); }
.sq-a.other { background: var(--bg-alt); color: var(--ink-3); border: 1px solid var(--line); }
.sq-a.other .who { background: #E6E6EE; color: var(--ink-3); }
.sq-a.ours { background: var(--point-bg); color: var(--ink); border: 1.5px solid var(--point); box-shadow: 0 10px 24px rgba(105, 82, 217, .16); }
.sq-a.ours .who { background: var(--point); color: #fff; }
.sq-a.ours b { color: var(--point-strong); }
.sq-note { margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.cmp-ai { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; text-align: left; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: 76px 1fr 1.25fr; }
.cmp-head span { padding: 14px 12px; font-size: 14px; font-weight: 800; }
.cmp-head .no { color: var(--ink-3); background: var(--bg-alt); }
.cmp-head .yes { color: #fff; background: var(--point); }
.cmp-row { border-top: 1px solid var(--line); }
.cmp-row .k { padding: 16px 0 16px 14px; font-size: 13px; font-weight: 800; color: var(--ink-3); align-self: center; }
.cmp-row .no, .cmp-row .yes { display: flex; gap: 8px; align-items: flex-start; padding: 16px 12px; font-size: 15px; line-height: 1.45; }
.cmp-row .no { color: var(--ink-3); background: var(--bg-alt); }
.cmp-row .yes { color: var(--ink); font-weight: 700; background: var(--point-bg); }
.cmp-row i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; margin-top: 1px; }
.cmp-row .no i { background: #D2D2DD; color: #fff; }
.cmp-row .yes i { background: var(--point); color: #fff; }
.cmp-row .yes small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 2px; }

/* ---------- S7 지식 흐름도: 여러 지식 → CFP AI → 전문가식 답 ---------- */
.kflow { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 22px 18px 24px; box-shadow: 0 12px 32px rgba(27, 27, 36, .06); }
.kf-tag { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 800; background: #E6E6EE; color: var(--ink-3); }
.kf-tag.ours { background: var(--point); color: #fff; }
.kf-other { padding: 6px 0 4px; }
.kf-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.kf-box { padding: 10px 16px; border-radius: 12px; border: 1.5px dashed #AFAFBE; color: var(--ink-3); font-size: 15px; font-weight: 700; background: var(--bg-alt); }
.kf-arrow { color: #AFAFBE; font-weight: 800; }
.kf-other p { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.kf-vs { margin: 18px auto 14px !important; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; }
.kf-ours { border-radius: 20px; padding: 18px 0 6px; background: linear-gradient(180deg, var(--point-bg) 0%, #fff 70%); }
.kf-diagram { position: relative; width: 504px; height: 600px; margin: 14px auto 0; }
.kf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kf-wires path { fill: none; stroke: var(--point-2); stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.kf-wires path[marker-end] { stroke: var(--point); stroke-dasharray: none; stroke-width: 2; }
.srcs { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.src { background: #fff; border: 1.5px solid var(--point-3); border-radius: 16px; padding: 12px 8px 10px; text-align: center; box-shadow: 0 6px 14px rgba(105, 82, 217, .10); }
.src .ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--point-bg); }
.src .ico svg { width: 20px; height: 20px; fill: none; stroke: var(--point); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.src b { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--ink); }
.src small { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.src.s6 { border-color: var(--point-2); background: var(--point-bg); }
.core { position: absolute; left: 50%; top: 262px; width: 168px; height: 168px; transform: translateX(-50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #8B78F0 0%, #6952D9 55%, #5440B8 100%); box-shadow: 0 0 0 10px rgba(105, 82, 217, .12), 0 0 0 22px rgba(105, 82, 217, .06), 0 18px 40px rgba(105, 82, 217, .45); }
.core-in { text-align: center; color: #fff; line-height: 1.15; }
.core-in small { display: block; font-size: 12px; font-weight: 700; opacity: .85; }
.core-in b { display: block; font-size: 32px; font-weight: 900; letter-spacing: -0.02em; }
.core-in span { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 700; }
.loop { position: absolute; left: 50%; top: 444px; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--point-3); color: var(--point-ink); font-size: 13px; font-weight: 800; box-shadow: 0 6px 14px rgba(105, 82, 217, .10); }
.loop small { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.steps-o { position: absolute; left: 0; right: 0; top: 530px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.step-o { background: var(--point); color: #fff; border-radius: 14px; padding: 10px 4px; text-align: center; }
.step-o b { display: block; font-size: 16px; font-weight: 800; }
.step-o small { display: block; font-size: 11px; opacity: .85; margin-top: 2px; }
.kf-out { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.kf-out b { color: var(--point-strong); }
/* 흔한 '자산관리 AI': 회색 채팅 아이콘 + 모델 이름은 글자로만 */
.kf-box { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kf-box small { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.kf-chat { width: 20px; height: 20px; fill: none; stroke: #8C8C9D; stroke-width: 1.8; stroke-linejoin: round; }
.kf-chat circle { fill: #8C8C9D; stroke: none; }
.em-line { font-weight: 800; color: var(--point); }
.upgrade .up.premium .gif-frame::before { background: var(--point-2); }

/* ---------- 2026-11-04 이용 기간 3개월·6개월·1년 ---------- */
.cmp-cols.four { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cmp-cols.four .per { font-size: 15px; }
.cmp-cols.four .bar em { font-size: 16px; }
.cmp-col.mid .bar { background: #8E7CF0; }
.cmp-col.mid .bar em { color: #fff; }
.cmp-col.base .per { color: var(--ink-3); }
.cmp-base { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.ptbl thead th.on { background: var(--point-2); color: var(--point-ink); }
.ptbl thead th.top { background: var(--point); color: #fff; }
.ptbl td:nth-child(2) b, .ptbl td:nth-child(3) b { color: var(--ink); }
.ptbl td:nth-child(4) b { color: var(--point); }
/* S9 얼리버드 */
.eb { background: #1A1A22; border: 1px solid #33333F; border-radius: 24px; padding: 22px 18px 18px; }
.eb-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; color: var(--on-dark); }
.eb-tag { padding: 4px 12px; border-radius: 999px; background: var(--point-on-dark); color: var(--on-point-dark); font-size: 13px; font-weight: 900; }
.eb-limit { padding: 4px 10px; border-radius: 999px; border: 1px solid #9484FF; color: #9484FF; font-size: 12px; font-weight: 800; }
.eb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.eb-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 6px 14px; border-radius: 16px; background: #121218; border: 1px solid #33333F; }
.eb-card.pick { border: 2px solid var(--point-on-dark); box-shadow: 0 0 24px rgba(148, 132, 255, .3); }
.eb-rec { position: absolute; top: -10px; padding: 2px 10px; border-radius: 999px; background: var(--point-on-dark); color: var(--on-point-dark); font-size: 11px; font-weight: 900; }
.eb-plan { font-size: 15px; font-weight: 800; color: var(--on-dark); }
.eb-card s { margin-top: 6px; font-size: 13px; color: #8C8C9D; }
.eb-card b { font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.eb-card em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--point-on-dark); }
.eb-note { margin-top: 12px; font-size: 12px; color: #8C8C9D; }
.cmp-cols.four .cmp-col.mid:not(.base):not(.best) .bar { background: #8E7CF0; }
.cmp-cols.four .cmp-col.mid:not(.base):not(.best) .bar em { color: #fff; }

/* S8 시작 지원: 세팅 가이드 영상(웨비나) 플레이어 목업 — 특정 영상 서비스 로고는 쓰지 않음 */
.vplayer { border-radius: 20px; overflow: hidden; background: #1B1B24; box-shadow: 0 24px 50px rgba(27, 27, 36, .25); text-align: left; }
.vp-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #F2F2F7; font-size: 15px; }
.vp-dot { width: 10px; height: 10px; border-radius: 50%; background: #9484FF; box-shadow: 0 0 0 4px rgba(148, 132, 255, .25); }
.vp-live { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #33333F; color: #D2D2DD; font-size: 12px; font-weight: 700; }
.vp-screen { position: relative; line-height: 0; }
.vp-screen > img { width: 100%; display: block; filter: brightness(.82); }
.vp-cam { position: absolute; right: 14px; bottom: 54px; width: 128px; height: 96px; border-radius: 14px; background: linear-gradient(160deg, #5440B8, #3F2F8E); border: 2px solid #fff; display: grid; place-items: center; align-content: center; gap: 4px; line-height: 1.2; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.vp-cam svg { width: 40px; height: 40px; fill: none; stroke: #E9E4FF; stroke-width: 1.6; }
.vp-cam span { font-size: 11px; font-weight: 700; color: #fff; }
.vp-play { position: absolute; left: 50%; top: 44%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(105, 82, 217, .92); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .18); }
.vp-play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.vp-cap { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: 8px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
.vp-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; color: #D2D2DD; font-size: 13px; }
.vp-btn { font-size: 13px; color: #fff; }
.vp-track { flex: 1; height: 5px; border-radius: 999px; background: #33333F; overflow: hidden; }
.vp-track i { display: block; height: 100%; background: #9484FF; border-radius: inherit; }
.vp-time { font-variant-numeric: tabular-nums; }