/* [2026-09-29 SALES] 유료상품 판매 페이지 — 가치 → 누구에게 → 산출물 → 사례 → 절차 → 가격 기준 → 다음 행동.
   황토/흰색·승인된 사물 이미지·A 워드마크 유지. index 공용 CSS는 건드리지 않고 이 파일이 마지막에 로드된다.
   확정 가격·실적 수치·후기 요소 없음. 문의는 초안 작성 → 복사/이메일 앱(사이트 접수 아님). */
:root{--sales-main:var(--warm-main,#94580B);--sales-deep:var(--warm-deep,#7A4909);--sales-soft:var(--warm-soft,#FBF1E2);--sales-bg:var(--warm-bg,#FCF8F2);--sales-ink:var(--warm-ink,#2C2619);--sales-sub:var(--warm-sub,#6D6047);--sales-line:var(--warm-line,#EAE0D0)}

/* ---------- 공통 블록 ---------- */
.sales-block{margin:0 0 40px}
.sales-block .growth-section-head{margin-bottom:18px}
.sales-block .growth-section-head h2{font-size:22px;line-height:1.35;letter-spacing:-.5px;margin:0 0 6px}
.sales-block .growth-section-head p{margin:0;font-size:14px;line-height:1.7;color:var(--sales-sub)}
.sales-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sales-two>*{background:#fff;border:1px solid var(--sales-line);border-radius:14px;padding:20px 22px}
.sales-two h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 12px;letter-spacing:-.3px}
.sales-two h3 svg{width:16px;height:16px;color:var(--sales-main)}
.sales-two ul,.sales-two ol{margin:0;padding:0;list-style:none}
.sales-two li{position:relative;padding:8px 0 8px 18px;font-size:14px;line-height:1.65;border-top:1px solid var(--sales-line)}
.sales-two li:first-child{border-top:0;padding-top:0}
.sales-two li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--sales-main)}
.sales-two li:first-child::before{top:8px}
.sales-fit-yes{background:var(--sales-soft)}
.sales-fit-no li::before{background:var(--sales-sub);opacity:.6}
.sales-fit-no h3{color:var(--sales-sub)}
.sales-cta-note{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--sales-sub)}
.sales-cta{min-height:48px;padding:0 20px;font-size:15px}
.sales-cta-secondary,.sales-next-actions .secondary{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;border:1px solid var(--sales-line);border-radius:10px;background:#fff;color:var(--sales-deep);font-weight:650;text-decoration:none}
.sales-cta-secondary svg,.sales-next-actions .secondary svg{width:14px;height:14px}
.sales-cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}

/* ---------- 상세 히어로: 사진·본문·CTA 한 블록 ---------- */
.sales-detail{padding:0!important;overflow:hidden}
.sales-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:32px;align-items:center;padding:36px 36px 32px;border-bottom:1px solid var(--sales-line);background:#fff}
.sales-hero .sv-paid{margin-bottom:14px}
.sales-hero h1{font-size:32px;line-height:1.3;letter-spacing:-.8px;margin:0 0 12px}
.sales-lead{font-size:16px;line-height:1.7;color:var(--sales-sub);margin:0 0 14px}
.sales-audience{margin:0 0 14px;padding:12px 14px;background:var(--sales-soft);border-radius:10px;font-size:14px;line-height:1.65}
.sales-audience b{color:var(--sales-deep);margin-right:6px}
.sales-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sales-chips li{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--sales-line);border-radius:999px;font-size:13px;font-weight:600;background:#fff}
.sales-chips svg{width:14px;height:14px;color:var(--sales-main)}
.sales-figure{margin:0;position:relative;background:var(--sales-soft);border:1px solid var(--sales-line);border-radius:16px;overflow:hidden}
.sales-figure img{display:block;width:100%;height:auto}
.sales-figure figcaption{padding:10px 14px;font-size:12.5px;line-height:1.5;color:var(--sales-sub);background:#fff;border-top:1px solid var(--sales-line)}
.sales-figure--site .growth-browser-bar{position:static;display:flex;align-items:center;gap:6px;padding:8px 12px;background:#F3EDE3;font-size:12px;color:var(--sales-sub)}
.sales-figure--site .growth-browser-bar i{width:9px;height:9px;border-radius:50%;background:#D8CDBB;display:inline-block}
.sales-figure--site img{aspect-ratio:16/9;object-fit:cover;object-position:top}
.sales-figure--video img{aspect-ratio:16/9;object-fit:cover}
.sales-figure--video .growth-play{position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--sales-main);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.sales-figure--video .growth-play svg{width:22px;height:22px}
.sales-figure--cert{background:var(--sales-soft)}
.sales-figure--cert img{aspect-ratio:4/3;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.sales-body{padding:36px 36px 8px}

/* ---------- 산출물 ---------- */
.sales-included ol{counter-reset:o}
.sales-included li{padding-left:34px}
.sales-included li::before{content:counter(o);counter-increment:o;width:22px;height:22px;border-radius:50%;background:var(--sales-main);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;top:10px}
.sales-included li:first-child::before{top:2px}
.sales-included li b{display:block;font-size:14.5px;margin-bottom:2px}
.sales-included li span{display:block;font-size:13.5px;color:var(--sales-sub);line-height:1.6}
.sales-excluded{background:var(--sales-bg)}

/* ---------- 사례 + CTA 근접 배치 ---------- */
.sales-proof{margin:0 0 40px}
.sales-proof .growth-work,.sales-proof .growth-partner,.sales-proof .growth-cert-options,.sales-proof .growth-learn{margin-bottom:20px}
.sales-proof-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;border:1px solid var(--sales-line);border-left:5px solid var(--sales-main);border-radius:14px;background:#fff}
.sales-proof-cta p{margin:0;font-size:16px;font-weight:650;letter-spacing:-.3px}

/* ---------- 절차 ---------- */
.sales-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none;counter-reset:none}
.sales-steps li{position:relative;background:#fff;border:1px solid var(--sales-line);border-radius:14px;padding:18px 18px 16px}
.sales-steps li span{display:inline-block;font-size:12px;font-weight:700;color:var(--sales-main);letter-spacing:.5px;margin-bottom:8px}
.sales-steps li b{display:block;font-size:15px;margin-bottom:6px;letter-spacing:-.3px}
.sales-steps li p{margin:0;font-size:13.5px;line-height:1.65;color:var(--sales-sub)}
.sales-steps li+li::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:1px;background:var(--sales-line)}

/* ---------- 가격 기준 ---------- */
.sales-price-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:16px;align-items:start}
.sales-price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--sales-line);border-radius:14px;overflow:hidden;font-size:14px}
.sales-price-table th,.sales-price-table td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--sales-line);line-height:1.6}
.sales-price-table thead th{border-top:0;background:var(--sales-soft);color:var(--sales-deep);font-size:13px;font-weight:650}
.sales-price-table tbody th{font-weight:650;width:38%;white-space:normal}
.sales-price-table td{color:var(--sales-sub)}
.sales-price-note{background:var(--sales-soft);border:1px solid var(--sales-line);border-radius:14px;padding:18px 20px}
.sales-price-note h3{font-size:14.5px;margin:0 0 10px}
.sales-price-note ul{margin:0 0 12px;padding-left:18px;font-size:13.5px;line-height:1.7}
.sales-price-note p{margin:0;font-size:12.5px;line-height:1.6;color:var(--sales-sub)}
.sales-price-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sales-price-cols article{background:#fff;border:1px solid var(--sales-line);border-radius:14px;padding:18px 20px}
.sales-price-cols h3{font-size:15px;margin:0 0 10px}
.sales-price-cols ul{margin:0 0 12px;padding-left:18px;font-size:13.5px;line-height:1.7;color:var(--sales-sub)}
.sales-price-cols a{display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:13px;font-weight:650;color:var(--sales-deep);text-decoration:none}
.sales-price-cols a svg{width:13px;height:13px}

/* ---------- FAQ·다음 행동 ---------- */
.sales-faq details{background:#fff}
.sales-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 28px;background:var(--sales-soft);border:1px solid var(--sales-line);border-radius:16px}
.sales-next h2{font-size:20px;margin:0 0 10px;letter-spacing:-.4px}
.sales-next-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sales-next-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}
.sales-next-steps li b{flex:0 0 22px;height:22px;border-radius:50%;background:var(--sales-main);color:#fff;font-size:12px;display:grid;place-items:center;margin-top:1px}
.sales-next-steps li span{display:block;font-size:12.5px;color:var(--sales-sub)}
.sales-next-actions{display:flex;flex-direction:column;gap:10px;min-width:240px}
.sales-next-actions .primary,.sales-next-actions .secondary{width:100%;justify-content:center}

/* ---------- 카탈로그 카드 (누구에게·받는 것·사례·가격 기준·CTA) ---------- */
.sales-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 40px}
.sales-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sales-line);border-radius:16px;overflow:hidden}
.sales-card-link{display:block;text-decoration:none;color:inherit}
.sales-card-figure{position:relative;background:var(--sales-soft);aspect-ratio:16/10;overflow:hidden}
.sales-card-figure .growth-browser-bar{position:static;display:flex;align-items:center;gap:6px;padding:7px 12px;background:#F3EDE3;font-size:11.5px;color:var(--sales-sub)}
.sales-card-figure .growth-browser-bar i{width:8px;height:8px;border-radius:50%;background:#D8CDBB;display:inline-block}
.sales-card-figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sales-card-figure--video .growth-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--sales-main);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.sales-card-figure--video .growth-play svg{width:18px;height:18px}
.sales-card-figure--cert img{object-fit:contain;padding:14px;mix-blend-mode:multiply}
.sales-card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.sales-card-body h2{font-size:20px;margin:0 0 4px;letter-spacing:-.4px}
.sales-card-body h2 a{text-decoration:none;color:inherit}
.sales-card-short{margin:0 0 12px;font-size:14px;color:var(--sales-sub)}
.sales-card-facts{margin:0 0 16px;display:grid;gap:0;border-top:1px solid var(--sales-line)}
.sales-card-facts div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--sales-line);font-size:13px;line-height:1.55}
.sales-card-facts dt{color:var(--sales-sub);font-weight:600}
.sales-card-facts dd{margin:0}
.sales-card-actions{margin-top:auto;display:grid;gap:8px}
.sales-card-actions .primary{justify-content:center;min-height:46px;text-decoration:none}
.sales-card-contact.primary{background:#fff;color:var(--sales-deep);border:1px solid var(--sales-line);justify-content:center;min-height:44px}
.sales-card-contact.primary:hover{background:var(--sales-soft)}
.sales-catalog-hero{margin-bottom:24px}

/* ---------- 반응형 ---------- */
@media(max-width:1180px){.sales-steps{grid-template-columns:repeat(2,1fr)}.sales-steps li+li::before{display:none}.sales-catalog{grid-template-columns:1fr 1fr}}
@media(max-width:899px){
 .sales-hero{grid-template-columns:1fr;gap:20px;padding:22px 18px 22px}
 .sales-hero h1{font-size:25px}
 .sales-figure{order:-1}
 .sales-body{padding:22px 18px 4px}
 .sales-two,.sales-price-grid,.sales-price-cols,.sales-next{grid-template-columns:1fr}
 .sales-next{padding:20px 18px}
 .sales-next-actions{min-width:0}
 .sales-block{margin-bottom:30px}
 .sales-cta-row .primary,.sales-cta-row .secondary,.sales-cta-secondary{width:100%;justify-content:center}
 .sales-proof-cta{flex-direction:column;align-items:stretch}
 .sales-proof-cta .primary{justify-content:center}
 .sales-price-table tbody th{width:40%}
}
@media(max-width:640px){.sales-catalog{grid-template-columns:1fr}.sales-steps{grid-template-columns:1fr}.sales-card-facts div{grid-template-columns:60px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.sales-card-contact,.sales-cta{transition:none}}

/* 기존 파트너 블록·텍스트 링크의 터치 높이(상담 전 확인 링크가 24~28px였음) */
.growth-partner figcaption a,.growth-partner .growth-text-link,.growth-learn a,.growth-work-copy .growth-text-link,.growth-channel{min-height:36px;display:inline-flex;align-items:center;gap:4px}

/* 카드 보조 CTA: 공용 .primary(황토 채움)보다 우선해 흰 바탕·진한 글자로 — 기존 규칙 특이성이 높아 !important */
html[data-palette] .sales-card-contact.primary,.sales-card-contact.primary{background:#fff!important;color:var(--sales-deep)!important;border:1px solid var(--sales-line)!important}
html[data-palette] .sales-card-contact.primary:hover,.sales-card-contact.primary:hover{background:var(--sales-soft)!important}
/* 모바일 히어로: 이미지 → 제목 → 누구에게 → CTA를 첫 화면 안에, 설명·산출물 칩은 CTA 아래로 */
@media(max-width:899px){
 .sales-hero{padding:18px 16px 20px;gap:14px}
 .sales-hero-copy{display:flex;flex-direction:column}
 .sales-hero-copy .sv-paid{order:0;margin-bottom:10px}
 .sales-hero-copy h1{order:1;font-size:24px;margin-bottom:8px}
 .sales-hero-copy .sales-audience{order:2;margin-bottom:10px}
 .sales-hero-copy .sales-cta-row{order:3;margin-top:4px}
 .sales-hero-copy .sales-cta-note{order:4}
 .sales-hero-copy .sales-lead{order:5;margin:14px 0 8px;font-size:15px}
 .sales-hero-copy .sales-chips{order:6}
 .sales-figure figcaption{padding:8px 12px;font-size:12px}
}

/* 히어로 CTA가 화면에 보이는 동안 하단 고정 CTA 숨김(중복·가림 방지). 동작 줄이기 설정이면 전환 없이 즉시 */
.sv-bottom-cta{transition:opacity .2s,transform .2s}
.sv-bottom-cta.sales-bar-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
@media(prefers-reduced-motion:reduce){.sv-bottom-cta{transition:none}}

/* 모바일 첫 화면: 하단 고정 메뉴(약 64px) 위에 주 CTA 전체가 들어오도록 히어로를 더 압축 */
@media(max-width:899px){
 .sales-hero{padding:12px 14px 18px}
 .sales-figure figcaption{display:none}
 .sales-hero-copy h1{font-size:22px;line-height:1.3}
 .sales-hero-copy .sv-paid{margin-bottom:8px}
 .sales-hero-copy .sales-audience{padding:10px 12px;font-size:13.5px}
}