/* 헬퍼 1기 모집 랜딩 (/helper) — AiApp 사이트 디자인으로 맞추는 층.
   helper.css(시안을 옮긴 것) 다음에 읽는다. 기준은 모두의창업 페이지(modoo.css)의 색 · 글자 · 버튼 · 카드 규칙.
   - 파랑 #3b82f6 · 강조 그라데이션 #3b82f6 → #8b5cf6 · 본문 #0f0e0e · 보조 #64748b · 선 #e6ecf5 · 옅은 바탕 #f8fafc
   - 섹션 머리: 알약 꼬리표 → 가운데 제목 44px → 설명 18px
   크기는 px — 사이트가 태블릿 50% · 휴대폰 40%로 rem 기준을 줄이므로 rem 을 쓰면 휴대폰 글자가 너무 작아진다.
   선택자는 .helper-page.hp-site 로 시작해 시안 규칙(.helper-page …)보다 항상 앞선다. */

.helper-page.hp-site {--blue:#3b82f6; --ink:#0f0e0e; --muted:#64748b; --line:#e6ecf5; --surface:#f8fafc; color:#0f0e0e; background:#fff;}

/* ── 시안에만 있던 장식 글자 · 번호는 뺀다 (사이트 페이지엔 없는 결) ── */
.helper-page.hp-site .hero-editorial,
.helper-page.hp-site .cohort-index,
.helper-page.hp-site .dashboard-top,
.helper-page.hp-site .showcase-intro > span {display:none;}

/* ── 섹션 간격 · 바탕: 흰 바탕과 옅은 바탕을 번갈아 ── */
.helper-page.hp-site .section {padding:120px 0;}
/* 맨 위는 사이트 공통 배경(SiteBackdrop — 홈과 같은 흐르는 파랑)이 비치게 투명. 다른 메뉴 페이지와 같은 처리(site-backdrop.css). */
.helper-page.hp-site {background:transparent;}
.helper-page.hp-site .brand-hero {padding:80px 0 100px; background:transparent;}
.helper-page.hp-site .hero-halo {display:none;}
.helper-page.hp-site .workflow-section {background:#fff;}
.helper-page.hp-site .hp-showcase {background:#f8fafc; overflow:hidden;}
.helper-page.hp-site .cohort-section {background:#fff;}
.helper-page.hp-site .actual-pricing {background:#f8fafc;}
.helper-page.hp-site .role-section {background:#fff;}
.helper-page.hp-site .faq-section {background:#f8fafc;}

/* ── 실제 화면 이미지 ── */
.helper-page.hp-site .hp-shot {display:block; width:100%; height:auto; object-fit:cover; object-position:top left;}
.helper-page.hp-site .preview-browser .hp-shot {aspect-ratio:16/10;}
.helper-page.hp-site .hp-shot--draft {margin:18px 0 14px; border:1px solid #e6ecf5; border-radius:14px; box-shadow:0 8px 24px rgba(15,23,42,.08); aspect-ratio:16/9;}

/* ── AiApp 으로 만든 사이트 흘러가는 줄 (모두의창업 페이지와 같은 모양) ── */
.helper-page.hp-site .hp-showcase .center-heading {margin-bottom:50px;}
.helper-page.hp-site .hp-showcase-rows {display:flex; flex-direction:column; gap:24px;}
.helper-page.hp-site .hp-marquee {display:flex; width:max-content; list-style:none; margin:0; padding:0;}
.helper-page.hp-site .hp-marquee li {flex-shrink:0; margin-right:24px;}
.helper-page.hp-site .hp-marquee img {display:block; width:380px; height:238px; object-fit:cover; object-position:top; border-radius:14px; border:1px solid #e6ecf5; box-shadow:0 8px 24px rgba(15,23,42,.08); background:#fff;}
.helper-page.hp-site .hp-marquee--1 {animation:hpMarquee 60s linear infinite;}
.helper-page.hp-site .hp-marquee--2 {animation:hpMarquee 80s linear infinite reverse;}
.helper-page.hp-site .hp-showcase-rows:hover .hp-marquee {animation-play-state:paused;}
.helper-page.hp-site .hp-showcase-more {text-align:center; margin-top:40px;}
@keyframes hpMarquee {from {transform:translateX(0);} to {transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce) {.helper-page.hp-site .hp-marquee {animation:none;}}
.helper-page.hp-site .center-heading {margin-bottom:60px; text-align:center;}

/* ── 알약 꼬리표 (섹션 이름 · 모집 중 · 배지) ── */
.helper-page.hp-site .section-label,
.helper-page.hp-site .launch-label,
.helper-page.hp-site .soft-badge {display:inline-flex; align-items:center; gap:6px; width:auto; font-size:14px; font-weight:800; letter-spacing:0; line-height:1.4; color:#3b82f6; background:rgba(59,130,246,.1); border:0; padding:5px 16px; border-radius:999px; margin:0 0 18px; box-shadow:none; text-transform:none;}
.helper-page.hp-site .section-label::before {display:none;}
.helper-page.hp-site .launch-label i {width:6px; height:6px; border-radius:50%; background:#3b82f6;}
.helper-page.hp-site .reservation .launch-label,
.helper-page.hp-site .growth-panel .section-label {color:#93c5fd; background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.45);}

/* ── 제목 · 설명 ── */
.helper-page.hp-site .brand-hero h1 {font-size:64px; font-weight:800; line-height:1.3; letter-spacing:-.03em; color:#0f0e0e; margin:0 0 26px;}
.helper-page.hp-site .center-heading h2,
.helper-page.hp-site .cohort-section h2,
.helper-page.hp-site .pricing-heading h2,
.helper-page.hp-site .calculator-copy h2,
.helper-page.hp-site .faq-section h2,
.helper-page.hp-site .reserve-copy h2 {font-size:44px; font-weight:800; line-height:1.35; letter-spacing:-.02em; color:#0f0e0e; margin:0 0 20px; text-wrap:balance;}
.helper-page.hp-site .workflow-copy h3 {font-size:32px; font-weight:800; line-height:1.35; color:#0f0e0e;}
.helper-page.hp-site .brand-hero h1 em,
.helper-page.hp-site h2 em,
.helper-page.hp-site h2 span,
.helper-page.hp-site .workflow-copy h3 em {font-style:normal; color:transparent; background:linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.helper-page.hp-site .hero-description,
.helper-page.hp-site .center-heading > p:not(.section-label),
.helper-page.hp-site .section-description,
.helper-page.hp-site .pricing-heading > p:not(.section-label),
.helper-page.hp-site .calculator-copy > p:not(.section-label) {font-size:18px; line-height:1.7; color:#64748b; text-wrap:pretty;}
.helper-page.hp-site .hero-note {font-size:14px; color:#94a3b8; margin-top:18px;}
.helper-page.hp-site .hero-note span {white-space:nowrap;} /* 좁은 화면에서 한 항목이 두 줄로 쪼개지지 않게 */

/* ── 버튼 ── */
.helper-page.hp-site .button {gap:10px; min-height:auto; padding:15px 32px; font-size:17px; font-weight:700; line-height:1.2; border-radius:12px; border:1px solid transparent; box-shadow:none; transition:background .3s, color .3s, border-color .3s;}
.helper-page.hp-site .button svg {width:18px; height:18px;}
.helper-page.hp-site .button.primary {background:#3b82f6; border-color:#3b82f6; color:#fff;}
.helper-page.hp-site .button.primary:hover {background:#fff; color:#3b82f6; transform:none; box-shadow:none;}
.helper-page.hp-site .button.secondary {background:#fff; border-color:#d6dce5; color:#424242;}
.helper-page.hp-site .button.secondary:hover {border-color:#3b82f6; color:#3b82f6;}
.helper-page.hp-site .text-link {color:#3b82f6; font-weight:700; font-size:16px;}

/* ── 카드: 흰 바탕 · 옅은 선 · 둥근 모서리 · 약한 그림자 ── */
.helper-page.hp-site .hero-product,
.helper-page.hp-site .studio-demo,
.helper-page.hp-site .cohort-compare,
.helper-page.hp-site .revenue-types article,
.helper-page.hp-site .plan-table-panel,
.helper-page.hp-site .income-preview,
.helper-page.hp-site .role-grid article,
.helper-page.hp-site .reserve-form-panel {background:#fff; border:1px solid #e6ecf5; border-radius:20px; box-shadow:0 6px 24px rgba(15,23,42,.05);}
.helper-page.hp-site .workflow-layout {background:#f8fafc; border:1px solid #eef2f7; border-radius:24px; box-shadow:none;}
.helper-page.hp-site .revenue-message {background:#f8fafc; border:1px solid #e6ecf5; border-radius:20px;}
.helper-page.hp-site .role-section .revenue-message {background:#fff;}
.helper-page.hp-site .revenue-types article strong {color:#3b82f6;}
.helper-page.hp-site .revenue-types article.is-cohort {border:2px solid #3b82f6; box-shadow:0 14px 40px rgba(59,130,246,.15);}

/* ── 수익: 1명만 모셔도 · 세 가지 수익 · 계산기 · 1년 막대 · 비즈니스 권유 ──
   숫자는 크고 진하게, 「1년」은 파랑 바탕으로 가장 눈에 띄게. 색은 파랑(수수료) · 보라(축하 지원금) 두 가지만 쓴다. */
.helper-page.hp-site .pricing-heading {text-align:center; margin-bottom:48px;}
.helper-page.hp-site .hp-one {background:linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%); border:1px solid #dbe7fb; border-radius:24px; padding:36px 40px; margin-bottom:24px; text-align:center;}
.helper-page.hp-site .hp-one-lead {font-size:22px; font-weight:700; color:#0f0e0e; margin-bottom:24px;}
.helper-page.hp-site .hp-one-lead b {color:#3b82f6;}
.helper-page.hp-site .hp-one-nums {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.helper-page.hp-site .hp-one-nums > div {background:#fff; border:1px solid #e6ecf5; border-radius:18px; padding:22px 18px; display:flex; flex-direction:column; gap:6px;}
.helper-page.hp-site .hp-one-nums > div > span {font-size:15px; font-weight:700; color:#64748b;}
.helper-page.hp-site .hp-one-nums strong {font-size:34px; font-weight:800; color:#0f0e0e; letter-spacing:-.02em; line-height:1.2;}
.helper-page.hp-site .hp-one-nums strong small {font-size:18px; font-weight:700; margin-left:2px;}
.helper-page.hp-site .hp-one-nums em {font-style:normal; font-size:13px; color:#94a3b8;}
.helper-page.hp-site .hp-one-nums .is-year {background:#3b82f6; border-color:#3b82f6; box-shadow:0 14px 34px rgba(59,130,246,.28);}
.helper-page.hp-site .hp-one-nums .is-year > span,
.helper-page.hp-site .hp-one-nums .is-year em {color:rgba(255,255,255,.85);}
.helper-page.hp-site .hp-one-nums .is-year strong {color:#fff;}
.helper-page.hp-site .hp-one-more {font-size:17px; color:#475569; margin-top:22px;}
.helper-page.hp-site .hp-one-more b {color:#0f0e0e;}

.helper-page.hp-site .revenue-types.is-three {grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:56px;}
.helper-page.hp-site .revenue-types article strong {font-size:26px; line-height:1.3;}
.helper-page.hp-site .revenue-types article p {font-size:15px; color:#475569;}
.helper-page.hp-site .revenue-types article small {font-size:13px; color:#94a3b8;}

.helper-page.hp-site .hp-calc {background:#fff; border:1px solid #e6ecf5; border-radius:24px; box-shadow:0 6px 24px rgba(15,23,42,.05); padding:40px; margin-bottom:56px; scroll-margin-top:100px;}
.helper-page.hp-site .hp-calc-head {text-align:center; margin-bottom:28px;}
.helper-page.hp-site .hp-calc-head h3 {font-size:30px; font-weight:800; color:#0f0e0e; margin:0 0 10px;}
.helper-page.hp-site .hp-calc-head > p:not(.section-label) {font-size:16px; color:#64748b;}
.helper-page.hp-site .hp-calc-controls {display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start;}
.helper-page.hp-site .hp-plan-tabs {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.helper-page.hp-site .hp-plan-tabs button {text-align:left; background:#f8fafc; border:1.5px solid #e6ecf5; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s, background .2s;}
.helper-page.hp-site .hp-plan-tabs button b {font-size:17px; color:#0f0e0e; display:flex; align-items:center; gap:6px;}
.helper-page.hp-site .hp-plan-tabs button b i {font-style:normal; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg, #3b82f6, #8b5cf6); padding:2px 8px; border-radius:999px;}
.helper-page.hp-site .hp-plan-tabs button span {font-size:12.5px; color:#64748b;}
.helper-page.hp-site .hp-plan-tabs button.is-on {background:#eff6ff; border-color:#3b82f6;}
.helper-page.hp-site .hp-plan-tabs button:hover {border-color:#93c5fd;}
.helper-page.hp-site .hp-count label {display:block; font-size:14px; font-weight:700; color:#475569; margin-bottom:8px;}
.helper-page.hp-site .hp-count .count-input-wrap {position:static; display:flex; align-items:center; gap:8px; height:52px; padding:0 16px; background:#fff; border:1.5px solid #e6ecf5; border-radius:12px;}
.helper-page.hp-site .hp-count .count-input-wrap:focus-within {border-color:#3b82f6;}
.helper-page.hp-site .hp-count .count-input-wrap input {flex:1; min-width:0; width:auto; height:100%; padding:0; border:0; outline:0; background:transparent; box-shadow:none; font-size:20px; font-weight:800; color:#0f0e0e;}
.helper-page.hp-site .hp-count .count-input-wrap span {position:static; transform:none; font-size:16px; font-weight:700; color:#64748b;}
.helper-page.hp-site .hp-count-presets {display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.helper-page.hp-site .hp-count-presets button {flex:1; min-width:52px; font-size:13px; font-weight:700; color:#475569; background:#f8fafc; border:1px solid #e6ecf5; border-radius:10px; padding:8px 0;}
.helper-page.hp-site .hp-count-presets button[aria-pressed="true"] {color:#fff; background:#3b82f6; border-color:#3b82f6;}
.helper-page.hp-site .hp-calc .count-error {margin-top:10px;}
.helper-page.hp-site .hp-calc-results {display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:28px;}
.helper-page.hp-site .hp-calc-results > div {background:#f8fafc; border:1px solid #e6ecf5; border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:6px;}
.helper-page.hp-site .hp-calc-results > div > span {font-size:15px; font-weight:700; color:#64748b;}
.helper-page.hp-site .hp-calc-results strong {font-size:32px; font-weight:800; color:#0f0e0e; letter-spacing:-.02em; line-height:1.2;}
.helper-page.hp-site .hp-calc-results strong small {font-size:17px; margin-left:2px;}
.helper-page.hp-site .hp-calc-results em {font-style:normal; font-size:13px; color:#94a3b8;}
.helper-page.hp-site .hp-calc-results .is-year {background:#3b82f6; border-color:#3b82f6;}
.helper-page.hp-site .hp-calc-results .is-year > span,
.helper-page.hp-site .hp-calc-results .is-year em {color:rgba(255,255,255,.85);}
.helper-page.hp-site .hp-calc-results .is-year strong {color:#fff;}
.helper-page.hp-site .hp-calc .calculator-note {font-size:13px; color:#94a3b8; margin-top:18px; line-height:1.7;}

.helper-page.hp-site .hp-year {margin:28px 0 0; padding:24px 24px 16px; background:#f8fafc; border:1px solid #e6ecf5; border-radius:18px;}
.helper-page.hp-site .hp-year-legend {display:flex; gap:18px; font-size:13px; font-weight:700; color:#475569; margin-bottom:14px;}
.helper-page.hp-site .hp-year-legend i {display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;}
.helper-page.hp-site .hp-year-legend .is-fee {background:#3b82f6;}
.helper-page.hp-site .hp-year-legend .is-support {background:#a78bfa;}
.helper-page.hp-site .hp-year-bars {display:grid; grid-template-columns:repeat(12, 1fr); gap:8px; align-items:end; height:220px;}
.helper-page.hp-site .hp-year-col {display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; min-width:0;}
.helper-page.hp-site .hp-year-val {font-size:12px; font-weight:800; color:#0f0e0e; white-space:nowrap; min-height:18px;}
.helper-page.hp-site .hp-year-col.is-last .hp-year-val {color:#3b82f6; font-size:13px;}
.helper-page.hp-site .hp-year-bar {width:100%; max-width:44px; display:flex; flex-direction:column; border-radius:8px 8px 3px 3px; overflow:hidden; min-height:3px; margin-top:4px;}
.helper-page.hp-site .hp-year-bar .is-support {background:#a78bfa;}
.helper-page.hp-site .hp-year-bar .is-fee {background:#3b82f6;}
.helper-page.hp-site .hp-year-m {font-size:12px; color:#94a3b8; margin-top:6px;}

.helper-page.hp-site .plan-table tbody tr.is-best th,
.helper-page.hp-site .plan-table tbody tr.is-best td {background:#eff6ff; font-weight:800;}
.helper-page.hp-site .hp-best {font-style:normal; font-size:11px; font-weight:800; color:#fff; background:#3b82f6; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:2px;}

.helper-page.hp-site .hp-biz {margin-top:56px; background:#fff; border:2px solid #3b82f6; border-radius:24px; padding:40px; box-shadow:0 14px 40px rgba(59,130,246,.12);}
.helper-page.hp-site .hp-biz-head {text-align:center; margin-bottom:28px;}
.helper-page.hp-site .hp-biz-head h3 {font-size:30px; font-weight:800; color:#0f0e0e; margin:0 0 10px;}
.helper-page.hp-site .hp-biz-head h3 span {background:linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.helper-page.hp-site .hp-biz-head > p:not(.section-label) {font-size:17px; color:#64748b;}
.helper-page.hp-site .hp-biz-cols {display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.helper-page.hp-site .hp-biz-cols > div {background:#f8fafc; border:1px solid #e6ecf5; border-radius:18px; padding:26px 28px;}
.helper-page.hp-site .hp-biz-cols > .is-helper {background:#eff6ff; border-color:#dbe7fb;}
.helper-page.hp-site .hp-biz-cols h4 {font-size:18px; font-weight:800; color:#0f0e0e; margin:0 0 14px;}
.helper-page.hp-site .hp-biz-cols ul {list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px;}
.helper-page.hp-site .hp-biz-cols li {position:relative; padding-left:24px; font-size:15.5px; line-height:1.6; color:#475569;}
.helper-page.hp-site .hp-biz-cols li::before {content:"✓"; position:absolute; left:0; top:0; font-weight:800; color:#3b82f6;}
.helper-page.hp-site .hp-biz-cols li b {color:#0f0e0e;}

.helper-page.hp-site .hp-support {display:flex; gap:20px; align-items:flex-start; background:linear-gradient(135deg, #eff6ff, #f5f3ff); border:1px solid #dbe7fb; border-radius:20px; padding:28px 32px; margin:28px 0 16px;}
.helper-page.hp-site .hp-support-icon {flex:0 0 52px; height:52px; border-radius:14px; background:linear-gradient(135deg, #3b82f6, #8b5cf6); color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center;}
.helper-page.hp-site .hp-support h3 {font-size:22px; font-weight:800; color:#0f0e0e; margin:0 0 8px; line-height:1.4;}
.helper-page.hp-site .hp-support h3 span {color:#3b82f6;}
.helper-page.hp-site .hp-support p {font-size:16px; line-height:1.7; color:#475569;}

/* ── 추천인 · 전문가 두 역할 ── */
.helper-page.hp-site .hp-roles {background:#f8fafc;}
.helper-page.hp-site .hp-roles-grid {display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.helper-page.hp-site .hp-role {background:#fff; border:1px solid #e6ecf5; border-radius:24px; padding:36px; box-shadow:0 6px 24px rgba(15,23,42,.05); display:flex; flex-direction:column;}
.helper-page.hp-site .hp-role.is-pro {border:2px solid #3b82f6; box-shadow:0 14px 40px rgba(59,130,246,.14);}
.helper-page.hp-site .hp-role-tag {align-self:flex-start; font-size:14px; font-weight:800; color:#3b82f6; background:rgba(59,130,246,.1); padding:5px 14px; border-radius:999px; margin-bottom:16px;}
.helper-page.hp-site .hp-role.is-pro .hp-role-tag {color:#fff; background:linear-gradient(135deg, #3b82f6, #8b5cf6);}
.helper-page.hp-site .hp-role h3 {font-size:28px; font-weight:800; line-height:1.35; color:#0f0e0e; margin:0 0 14px;}
.helper-page.hp-site .hp-role-sum {font-size:16px; line-height:1.7; color:#475569; margin-bottom:18px;}
.helper-page.hp-site .hp-role-sum b {color:#0f0e0e;}
.helper-page.hp-site .hp-role ul {list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px;}
.helper-page.hp-site .hp-role li {position:relative; padding-left:24px; font-size:15.5px; line-height:1.6; color:#475569;}
.helper-page.hp-site .hp-role li::before {content:"✓"; position:absolute; left:0; top:0; font-weight:800; color:#3b82f6;}
.helper-page.hp-site .hp-role li b {color:#0f0e0e;}
.helper-page.hp-site .hp-role-how {margin-top:auto; padding-top:16px; border-top:1px dashed #e6ecf5; font-size:14px; font-weight:700; color:#3b82f6; line-height:1.6;}
.helper-page.hp-site .hp-role-how small {display:block; font-size:12.5px; font-weight:500; color:#94a3b8;}

/* ── 전문가 제작비: 견적 − 중개 수수료 20% − AI 크레딧 ── */
.helper-page.hp-site .hp-expert {background:#0f172a; border-radius:24px; padding:40px; margin-bottom:56px; color:#e2e8f0; position:relative; overflow:hidden;}
.helper-page.hp-site .hp-expert::before {content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 100% 0%, rgba(139,92,246,.22), transparent 65%), radial-gradient(ellipse 60% 60% at 0% 100%, rgba(59,130,246,.2), transparent 70%); pointer-events:none;}
.helper-page.hp-site .hp-expert > * {position:relative;}
.helper-page.hp-site .hp-expert-head {text-align:center; margin-bottom:24px;}
.helper-page.hp-site .hp-expert .section-label {color:#93c5fd; background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.45);}
.helper-page.hp-site .hp-expert-head h3 {font-size:30px; font-weight:800; color:#fff; margin:0 0 10px;}
.helper-page.hp-site .hp-expert-head h3 span {background:linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.helper-page.hp-site .hp-expert-head > p:not(.section-label) {font-size:16px; color:rgba(255,255,255,.72);}
.helper-page.hp-site .hp-expert-eq {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-bottom:22px;}
.helper-page.hp-site .hp-expert-eq span,
.helper-page.hp-site .hp-expert-eq strong {font-size:14px; font-weight:700; padding:9px 14px; border-radius:10px; background:rgba(255,255,255,.08); color:#e2e8f0;}
.helper-page.hp-site .hp-expert-eq strong {background:#3b82f6; color:#fff;}
.helper-page.hp-site .hp-expert-eq b {color:#94a3b8; font-weight:800;}
.helper-page.hp-site .hp-expert-picks {display:flex; justify-content:center; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.helper-page.hp-site .hp-expert-picks button {font-size:15px; font-weight:700; color:#cbd5e1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:8px 18px;}
.helper-page.hp-site .hp-expert-picks button.is-on {color:#fff; background:#3b82f6; border-color:#3b82f6;}
.helper-page.hp-site .hp-expert-result {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.helper-page.hp-site .hp-expert-result > div {background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; gap:4px;}
.helper-page.hp-site .hp-expert-result > div > span {font-size:14px; font-weight:700; color:#94a3b8;}
.helper-page.hp-site .hp-expert-result strong {font-size:30px; font-weight:800; color:#fff; letter-spacing:-.02em;}
.helper-page.hp-site .hp-expert-result .is-take {background:#3b82f6; border-color:#3b82f6;}
.helper-page.hp-site .hp-expert-result .is-take > span {color:rgba(255,255,255,.85);}
.helper-page.hp-site .hp-expert-note {font-size:13px; color:#94a3b8; text-align:center; margin-top:16px;}

/* ── 스크롤 등장 (Helper.tsx 가 hp-rv · hp-anim 을 붙이고, 화면에 들어오면 is-in) ──
   덩어리는 아래에서 떠오르고, 같은 묶음 안의 카드는 --i 순서로 조금씩 늦게. 1년 막대는 아래에서 자란다. */
.helper-page.hp-site .hp-rv {opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 90ms); will-change:opacity, transform;}
.helper-page.hp-site .hp-rv.is-in {opacity:1; transform:none;}
.helper-page.hp-site .hp-year.hp-anim .hp-year-bar {transform:scaleY(0); transform-origin:bottom; transition:transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 55ms);}
.helper-page.hp-site .hp-year.hp-anim .hp-year-val {opacity:0; transition:opacity .4s ease .9s;}
.helper-page.hp-site .hp-year.hp-anim.is-in .hp-year-bar {transform:scaleY(1);}
.helper-page.hp-site .hp-year.hp-anim.is-in .hp-year-val {opacity:1;}
@media (prefers-reduced-motion: reduce) {
	.helper-page.hp-site .hp-rv,
	.helper-page.hp-site .hp-year.hp-anim .hp-year-bar,
	.helper-page.hp-site .hp-year.hp-anim .hp-year-val {opacity:1; transform:none; transition:none;}
}

/* ── 어두운 판 (지원하기) — 사이트의 진한 남색 #0f172a ── */
.helper-page.hp-site .reservation {background:#0f172a; position:relative; overflow:hidden;}
.helper-page.hp-site .reservation::before {content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 15% 0%, rgba(59,130,246,.25), transparent 65%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(139,92,246,.16), transparent 70%); pointer-events:none;}
.helper-page.hp-site .reservation .hp-wrap {position:relative;}
.helper-page.hp-site .reserve-copy h2 {color:#fff;}
.helper-page.hp-site .reserve-copy h2 em {background:linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip:text; background-clip:text;}
.helper-page.hp-site .reserve-copy > p {font-size:18px; line-height:1.7; color:rgba(255,255,255,.72);}
.helper-page.hp-site .reserve-copy .text-link {color:#93c5fd;}
.helper-page.hp-site .reserve-orbit {opacity:.35;}

/* ── 자주 묻는 것: 사이트 FAQ 카드 모양 ── */
.helper-page.hp-site .faq-list details {background:#fff; border:1px solid #e6ecf5; border-radius:14px; margin-bottom:16px; padding:0; overflow:hidden;}
.helper-page.hp-site .faq-list summary {font-size:18px; font-weight:700; color:#0f0e0e; padding:24px 28px; border:0;}
.helper-page.hp-site .faq-list summary > span {color:#3b82f6;}
.helper-page.hp-site .faq-list details > p {font-size:16px; line-height:1.8; color:#64748b; padding:0 28px 26px; margin:0;}

/* ── 태블릿 ── */
@media (max-width:1024px) {
	.helper-page.hp-site .section {padding:80px 0;}
	.helper-page.hp-site .brand-hero {padding:60px 0 80px;}
	.helper-page.hp-site .brand-hero h1 {font-size:44px;}
	.helper-page.hp-site .center-heading h2,
	.helper-page.hp-site .cohort-section h2,
	.helper-page.hp-site .pricing-heading h2,
	.helper-page.hp-site .calculator-copy h2,
	.helper-page.hp-site .faq-section h2,
	.helper-page.hp-site .reserve-copy h2 {font-size:32px;}
	.helper-page.hp-site .workflow-copy h3 {font-size:28px;}
	.helper-page.hp-site .hero-description,
	.helper-page.hp-site .center-heading > p:not(.section-label),
	.helper-page.hp-site .section-description,
	.helper-page.hp-site .pricing-heading > p:not(.section-label),
	.helper-page.hp-site .calculator-copy > p:not(.section-label),
	.helper-page.hp-site .reserve-copy > p {font-size:16px;}
	.helper-page.hp-site .button {font-size:16px; padding:13px 28px; border-radius:10px;}
	.helper-page.hp-site .center-heading {margin-bottom:40px;}
	.helper-page.hp-site .hp-calc-controls {grid-template-columns:1fr;}
	.helper-page.hp-site .revenue-types.is-three {grid-template-columns:1fr;}
	.helper-page.hp-site .hp-roles-grid {grid-template-columns:1fr;}
	.helper-page.hp-site .hp-one-nums strong,
	.helper-page.hp-site .hp-calc-results strong {font-size:26px;}
}

/* ── 휴대폰: 글자 크기 · 여백 · 줄바꿈 ── */
@media (max-width:768px) {
	.helper-page.hp-site .hp-wrap {width:calc(100% - 40px);}
	.helper-page.hp-site .section {padding:60px 0;}
	.helper-page.hp-site .brand-hero {padding:48px 0 60px;}
	.helper-page.hp-site .brand-hero h1 {font-size:32px; line-height:1.35; margin:0 0 18px;}
	.helper-page.hp-site .center-heading h2,
	.helper-page.hp-site .cohort-section h2,
	.helper-page.hp-site .pricing-heading h2,
	.helper-page.hp-site .calculator-copy h2,
	.helper-page.hp-site .faq-section h2,
	.helper-page.hp-site .reserve-copy h2 {font-size:26px; line-height:1.4; margin-bottom:14px;}
	.helper-page.hp-site .workflow-copy h3 {font-size:24px;}
	.helper-page.hp-site .center-heading {margin-bottom:32px;}
	.helper-page.hp-site .section-label,
	.helper-page.hp-site .launch-label,
	.helper-page.hp-site .soft-badge {font-size:12.5px; padding:4px 12px; margin-bottom:14px;}
	/* 설명 문장의 손 줄바꿈은 좁은 화면에서 어색하게 끊기므로 풀고, 낱말 단위로 자연스럽게 넘긴다 */
	.helper-page.hp-site .hero-description br,
	.helper-page.hp-site .center-heading > p br,
	.helper-page.hp-site .section-description br,
	.helper-page.hp-site .pricing-heading > p br,
	.helper-page.hp-site .calculator-copy > p br,
	.helper-page.hp-site .reserve-copy > p br,
	.helper-page.hp-site .income-note br {display:none;}
	.helper-page.hp-site .hero-description,
	.helper-page.hp-site .center-heading > p:not(.section-label),
	.helper-page.hp-site .section-description,
	.helper-page.hp-site .pricing-heading > p:not(.section-label),
	.helper-page.hp-site .calculator-copy > p:not(.section-label),
	.helper-page.hp-site .reserve-copy > p {font-size:16px; line-height:1.75;}
	.helper-page.hp-site .hero-actions {flex-direction:column; align-items:stretch; gap:10px; max-width:320px; margin-left:auto; margin-right:auto;}
	.helper-page.hp-site .hero-actions .button {width:100%;}
	.helper-page.hp-site .button {font-size:16px; padding:14px 22px;}
	.helper-page.hp-site .hero-note {font-size:13px;}
	.helper-page.hp-site .hero-product,
	.helper-page.hp-site .studio-demo,
	.helper-page.hp-site .cohort-compare,
	.helper-page.hp-site .revenue-types article,
	.helper-page.hp-site .plan-table-panel,
	.helper-page.hp-site .income-preview,
	.helper-page.hp-site .role-grid article,
	.helper-page.hp-site .reserve-form-panel,
	.helper-page.hp-site .revenue-message {border-radius:16px;}
	.helper-page.hp-site .workflow-layout {border-radius:18px;}
	.helper-page.hp-site .growth-panel {border-radius:18px; padding-top:24px;}
	.helper-page.hp-site .faq-list details {border-radius:12px; margin-bottom:12px;}
	.helper-page.hp-site .faq-list summary {font-size:16px; padding:18px 20px;}
	.helper-page.hp-site .faq-list details > p {font-size:15px; padding:0 20px 20px;}
	.helper-page.hp-site .hp-roles-grid {grid-template-columns:1fr; gap:12px;}
	.helper-page.hp-site .hp-role {padding:24px 18px; border-radius:18px;}
	.helper-page.hp-site .hp-role h3 {font-size:22px;}
	.helper-page.hp-site .hp-role-sum,
	.helper-page.hp-site .hp-role li {font-size:15px;}
	.helper-page.hp-site .hp-expert {padding:24px 16px; border-radius:18px; margin-bottom:36px;}
	.helper-page.hp-site .hp-expert-head h3 {font-size:22px;}
	.helper-page.hp-site .hp-expert-head > p:not(.section-label) {font-size:15px;}
	.helper-page.hp-site .hp-expert-eq {gap:5px;}
	.helper-page.hp-site .hp-expert-eq span,
	.helper-page.hp-site .hp-expert-eq strong {font-size:12px; padding:7px 9px;}
	.helper-page.hp-site .hp-expert-picks button {font-size:13px; padding:7px 12px;}
	.helper-page.hp-site .hp-expert-result {grid-template-columns:1fr; gap:8px;}
	.helper-page.hp-site .hp-expert-result > div {flex-direction:row; justify-content:space-between; align-items:baseline; padding:14px 16px;}
	.helper-page.hp-site .hp-expert-result strong {font-size:22px;}
	/* 수익 구역: 세 칸 → 한 칸으로 쌓고 숫자 크기를 줄인다 */
	.helper-page.hp-site .hp-one {padding:24px 18px; border-radius:18px;}
	.helper-page.hp-site .hp-one-lead {font-size:18px; margin-bottom:16px;}
	.helper-page.hp-site .hp-one-nums {grid-template-columns:1fr; gap:10px;}
	.helper-page.hp-site .hp-one-nums > div {padding:16px; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; text-align:left;}
	.helper-page.hp-site .hp-one-nums strong {font-size:26px;}
	.helper-page.hp-site .hp-one-nums em {flex-basis:100%;}
	.helper-page.hp-site .hp-one-more {font-size:15px; line-height:1.7;}
	.helper-page.hp-site .hp-one-more span {display:block; height:0; overflow:hidden;}
	.helper-page.hp-site .revenue-types.is-three {grid-template-columns:1fr; gap:12px; margin-bottom:36px;}
	.helper-page.hp-site .revenue-types article strong {font-size:22px;}
	.helper-page.hp-site .hp-calc {padding:24px 16px; border-radius:18px; margin-bottom:36px;}
	.helper-page.hp-site .hp-calc-head h3 {font-size:22px;}
	.helper-page.hp-site .hp-calc-head > p:not(.section-label) {font-size:15px;}
	.helper-page.hp-site .hp-calc-controls {grid-template-columns:1fr; gap:16px;}
	.helper-page.hp-site .hp-plan-tabs {gap:6px;}
	.helper-page.hp-site .hp-plan-tabs button {padding:10px 10px; text-align:center; align-items:center;}
	.helper-page.hp-site .hp-plan-tabs button b {font-size:15px; flex-direction:column; gap:3px;}
	.helper-page.hp-site .hp-plan-tabs button span {font-size:11px; line-height:1.4;}
	.helper-page.hp-site .hp-calc-results {grid-template-columns:1fr; gap:10px; margin-top:20px;}
	.helper-page.hp-site .hp-calc-results > div {padding:14px 16px; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px;}
	.helper-page.hp-site .hp-calc-results strong {font-size:24px;}
	.helper-page.hp-site .hp-calc-results em {flex-basis:100%;}
	.helper-page.hp-site .hp-year {padding:16px 10px 10px;}
	.helper-page.hp-site .hp-year-bars {gap:3px; height:180px;}
	.helper-page.hp-site .hp-year-val {font-size:0; min-height:0;}
	.helper-page.hp-site .hp-year-col.is-last .hp-year-val {font-size:11px; min-height:16px; position:relative; right:18px;}
	.helper-page.hp-site .hp-year-m {font-size:10px;}
	.helper-page.hp-site .hp-biz {padding:24px 16px; border-radius:18px; margin-top:36px;}
	.helper-page.hp-site .hp-biz-head h3 {font-size:22px;}
	.helper-page.hp-site .hp-biz-head > p:not(.section-label) {font-size:15px;}
	.helper-page.hp-site .hp-biz-cols {grid-template-columns:1fr; gap:10px;}
	.helper-page.hp-site .hp-biz-cols > div {padding:20px 18px;}
	.helper-page.hp-site .hp-biz-cols li {font-size:15px;}
	.helper-page.hp-site .hp-support {flex-direction:column; gap:12px; padding:22px 18px; border-radius:16px;}
	.helper-page.hp-site .hp-support-icon {flex-basis:auto; width:44px; height:44px; font-size:20px;}
	.helper-page.hp-site .hp-support h3 {font-size:18px;}
	.helper-page.hp-site .hp-support p {font-size:15px;}
	.helper-page.hp-site .hp-showcase .center-heading {margin-bottom:28px;}
	.helper-page.hp-site .hp-showcase-rows {gap:14px;}
	.helper-page.hp-site .hp-marquee li {margin-right:14px;}
	.helper-page.hp-site .hp-marquee img {width:240px; height:150px; border-radius:10px;}
	.helper-page.hp-site .hp-showcase-more {margin-top:24px;}
}

/* 1기 지원서 — 실제 접수(10/20): 하고 싶은 말 · 동의 · 오류 문구 */
.helper-page.hp-site .reserve-form-panel textarea {display:block; width:100%; margin-top:9px; padding:12px 14px; border:1px solid #dce6f1; border-radius:9px; background:#fafdff; color:#40556f; font:inherit; font-size:14px; line-height:1.55; resize:vertical; min-height:88px;}
.helper-page.hp-site .reserve-form-panel textarea::placeholder {color:#a5b2c3;}
.helper-page.hp-site .reserve-form-panel [aria-invalid="true"] {border-color:#ef4444;}
.helper-page.hp-site .hp-field-err {display:block; margin-top:6px; font-size:12px; font-weight:600; color:#dc2626;}
.helper-page.hp-site .hp-hp {position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.helper-page.hp-site .hp-agree {display:flex; align-items:center; gap:8px; margin:4px 0 6px;}
.helper-page.hp-site .reserve-form-panel .hp-agree input {width:18px; height:18px; min-height:0; margin:0; padding:0; flex:none; accent-color:#3b82f6;}
.helper-page.hp-site .reserve-form-panel .hp-agree label {margin:0; font-size:13px; font-weight:600; color:#0f0e0e;}
.helper-page.hp-site .hp-agree .req {color:#ef4444;}
.helper-page.hp-site .hp-agree-desc {margin:0 0 14px; font-size:11.5px; line-height:1.6; color:#64748b; text-align:left;}
.helper-page.hp-site .hp-agree-desc a {color:#3b82f6; text-decoration:underline;}
.helper-page.hp-site .hp-send-err {margin:0 0 12px; padding:10px 12px; border-radius:9px; background:#fef2f2; color:#b91c1c; font-size:13px; text-align:left;}
.helper-page.hp-site .reserve-form-panel .button[disabled] {opacity:.6; cursor:progress;}
@media (max-width: 768px) {
	.helper-page.hp-site .reserve-form-panel textarea {font-size:16px;}
}