/* ══════════════════════════════════════════════════════════════
   YN 마케팅 솔루션 — 공통 스타일
   YN UI 표준(E:\YN작업기록\00_표준\01_UI-디자인-표준.md) 토큰 계약 그대로 사용.
   변수 이름·컴포넌트 구조는 공통, 액센트만 이 프로젝트 값.

   액센트: 민트 → 틸  #4f46e5 → #7c3aed   (다크 모드)
   ※ 표준 §3 표에 없던 색쌍이라 신규 등록했다(다른 YN 사이트와 색으로 구분되게).
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 배경 — 라이트. 청색 기운이 도는 뉴트럴(순수 회색 금지) */
  --bg:#ffffff;  --bg-2:#f5f6fb;
  --panel:#ffffff;  --panel-2:#f8f9fd;  --panel-hover:#f1f3fb;
  /* 경계선 2단계 */
  --line:#e7e9f2;  --line-soft:#eff1f8;
  /* 텍스트 3단계 */
  --text:#0f1222;  --muted:#565d72;  --faint:#9298ac;
  /* 액센트 — 변수 이름은 유지하고 값만 인디고→바이올렛으로 */
  --mint:#4f46e5;  --teal:#7c3aed;  --deep:#3f37c9;
  --brand-grad:linear-gradient(135deg,#4f46e5,#7c3aed);
  --brand-grad-soft:linear-gradient(135deg,rgba(79,70,229,.09),rgba(124,58,237,.05));
  --brand-ring:rgba(79,70,229,.32);
  --glow:0 10px 30px rgba(79,70,229,.2);
  /* 의미색 — 액센트와 분리 */
  --ok:#10b981;  --warn:#f59e0b;  --bad:#ef4444;
  /* 그림자 — 라이트는 2겹(미세 + 확산) */
  --shadow-sm:0 1px 2px rgba(16,20,50,.05);
  --shadow:0 1px 2px rgba(16,20,50,.04),0 10px 30px rgba(16,20,50,.08);
  --shadow-lg:0 2px 4px rgba(16,20,50,.04),0 24px 56px rgba(16,20,50,.13);
  --radius:14px;  --radius-lg:18px;
  --kakao:#fee500;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;   /* 한글 폴백 필수 */
  line-height:1.62; letter-spacing:-.2px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:rgba(79,70,229,.28)}

.container{max-width:1180px;margin:0 auto;padding:0 20px}
.gradient-text{background:var(--brand-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--mint);color:#ffffff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:800;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}

/* ── 상단 고지 바 ─────────────────────────────────── */
.topbar{
  background:var(--brand-grad-soft); border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--muted);
}
.topbar .container{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;min-height:40px}
.topbar b{color:var(--text)}
.topbar .tb-right{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}

/* ── 헤더 ─────────────────────────────────────────── */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.6px;flex:0 0 auto}
.logo-mark{width:34px;height:34px;flex:0 0 34px}
.brand-text{font-size:18px}
.brand-text small{display:block;font-size:11px;font-weight:700;color:var(--faint);letter-spacing:0}
.nav{display:flex;gap:4px;margin-left:14px}
.nav a{padding:9px 13px;border-radius:10px;font-size:15px;font-weight:700;color:var(--muted);transition:.18s}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.nav a.on{color:var(--mint);background:rgba(79,70,229,.1)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.nav-toggle{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);align-items:center;justify-content:center}

/* ── 버튼 ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:12px;
  font-weight:800;font-size:15.5px;letter-spacing:-.3px;
  border:1px solid transparent;transition:transform .16s,box-shadow .16s,background .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand-grad);color:#ffffff;box-shadow:var(--glow)}
.btn-primary:hover{box-shadow:0 14px 42px rgba(124,58,237,.3)}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--panel)}
.btn-ghost:hover{background:var(--panel-hover);border-color:var(--brand-ring)}
.btn-kakao{background:var(--kakao);color:#181600}
.btn-lg{min-height:58px;padding:0 30px;font-size:17px;border-radius:14px}
.btn-sm{min-height:40px;padding:0 15px;font-size:14px;border-radius:10px}
.btn-block{width:100%}

/* ── 섹션 공통 ────────────────────────────────────── */
.sec{padding:88px 0;border-top:1px solid var(--line-soft)}
.sec-alt{background:var(--bg-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--mint);background:rgba(79,70,229,.1);
  border:1px solid rgba(79,70,229,.24);border-radius:999px;padding:7px 15px;
}
.sec-head{max-width:760px}
.sec-head h2{font-size:clamp(28px,4.4vw,44px);line-height:1.22;font-weight:900;letter-spacing:-1.6px;margin-top:18px;text-wrap:balance}
.sec-head p{color:var(--muted);font-size:17px;margin-top:16px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ── 히어로 ───────────────────────────────────────── */
.hero{position:relative;padding:76px 0 84px;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-30% -10% auto -10%;height:70%;
  background:radial-gradient(62% 62% at 28% 38%,rgba(79,70,229,.1),transparent 70%),
             radial-gradient(52% 52% at 80% 18%,rgba(124,58,237,.09),transparent 72%);
  pointer-events:none;
}
.hero .container{position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(34px,5.6vw,60px);line-height:1.14;font-weight:900;letter-spacing:-2.4px;margin-top:20px;text-wrap:balance}
.hero-sub{color:var(--muted);font-size:clamp(16px,2vw,19px);margin-top:20px;max-width:620px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{color:var(--faint);font-size:14px;margin-top:16px}

/* 증거 스트립 */
.proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.proof-item{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  font-size:14.5px;font-weight:700;
}
.proof-item b{color:var(--mint);font-size:16px}

/* 히어로 사이드 카드 */
.hero-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.hero-card h3{font-size:19px;font-weight:900;letter-spacing:-.7px}
.hero-card .hc-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.hc-row{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.hc-row .ic{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:rgba(79,70,229,.13);display:flex;align-items:center;justify-content:center}
.hero-card .hc-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--faint)}

/* ── 카드 ─────────────────────────────────────────── */
.grid{display:grid;gap:20px;margin-top:44px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;transition:.2s;display:flex;flex-direction:column;gap:12px;
}
.card:hover{border-color:var(--brand-ring);background:var(--panel-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{font-size:20px;font-weight:900;letter-spacing:-.8px}
.card p{color:var(--muted);font-size:15.5px}
.card .ic-box{width:48px;height:48px;border-radius:14px;background:var(--brand-grad-soft);border:1px solid rgba(79,70,229,.2);display:flex;align-items:center;justify-content:center}
.card-link{margin-top:auto;padding-top:14px;color:var(--mint);font-weight:800;font-size:15px;display:inline-flex;gap:6px;align-items:center}
.card.feature{border-color:var(--brand-ring);background:linear-gradient(160deg,var(--panel-2),var(--panel))}

/* 서비스 허브 카드 */
.svc{position:relative;overflow:hidden}
.svc::after{content:'';position:absolute;inset:auto -20% -60% auto;width:220px;height:220px;border-radius:50%;background:var(--brand-grad-soft);filter:blur(20px);pointer-events:none}
.svc .tag{font-size:12.5px;font-weight:800;color:var(--faint);letter-spacing:.5px;text-transform:uppercase}
.svc .price{font-size:14.5px;color:var(--muted);margin-top:4px}
.svc .price b{color:var(--text);font-size:17px}

/* ── 문제 → 해결 (취소선 리스트) ──────────────────── */
.pains{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.pain{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.pain .n{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:rgba(239,68,68,.12);color:#ef4444;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.pain .tx b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.5px}
.pain .tx span{display:block;color:var(--muted);font-size:14.5px;margin-top:5px}

/* ── 체크 리스트 ──────────────────────────────────── */
.checks{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.check{display:flex;gap:14px;align-items:flex-start;font-size:16px}
.check .ck{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:rgba(79,70,229,.14);color:var(--mint);display:flex;align-items:center;justify-content:center}
.check .ck svg{width:14px;height:14px}
.check span{color:var(--muted)}
.check b{color:var(--text)}

/* ── 범위 칩 ──────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:700;color:var(--muted)}
.chip.on{border-color:var(--brand-ring);color:var(--text);background:var(--brand-grad-soft)}

/* ── 공감 서사 (세로형 상세페이지용) ───────────────
   판매 페이지에서 기능 나열보다 먼저 필요한 건 "내 얘기다"라는 인식이다.
   길게 읽히는 문단이므로 본문 폭을 좁히고(가독), 줄간을 넓힌다. */
.story{max-width:760px}
.story p{font-size:clamp(17px,2.1vw,20px);line-height:1.78;color:var(--muted);margin-top:20px}
.story p:first-child{margin-top:0}
.story p b{color:var(--text)}
.story .big{
  font-size:clamp(20px,2.6vw,26px);line-height:1.6;font-weight:800;
  letter-spacing:-.8px;color:var(--text);margin-top:28px;
}
.story .quiet{color:var(--faint);font-size:16px}
.pull{
  margin-top:34px;padding:26px 30px;border-radius:var(--radius-lg);
  background:var(--brand-grad-soft);border-left:5px solid var(--mint);
  font-size:clamp(19px,2.4vw,24px);line-height:1.55;font-weight:800;letter-spacing:-.9px;
}
.pull span{color:var(--mint)}

/* 속마음 대조 (겉으로 하는 말 ↔ 실제 속마음) */
.voices{display:grid;gap:16px;margin-top:36px}
.voice{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.voice .said,.voice .felt{padding:22px 24px}
.voice .said{border-right:1px solid var(--line-soft)}
.voice .lbl{
  display:block;font-size:12px;font-weight:900;letter-spacing:.6px;
  color:var(--faint);margin-bottom:9px;
}
.voice .felt .lbl{color:var(--mint)}
.voice p{font-size:16px;line-height:1.62}
.voice .said p{color:var(--muted)}
.voice .felt{background:rgba(79,70,229,.05)}
.voice .felt p{color:var(--text);font-weight:700}

/* 자격 필터 (이런 분은 안 맞습니다) */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.fit-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.fit-box.no{border-color:rgba(239,68,68,.24)}
.fit-box h3{font-size:19px;font-weight:900;letter-spacing:-.7px;display:flex;align-items:center;gap:10px}
.fit-box h3 .mk{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.fit-box.yes h3 .mk{background:rgba(79,70,229,.14);color:var(--mint)}
.fit-box.no h3 .mk{background:rgba(239,68,68,.12);color:#ef4444}
.fit-box ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:18px}
.fit-box li{color:var(--muted);font-size:15.5px;padding-left:15px;position:relative}
.fit-box li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--faint)}
.fit-box.yes li::before{background:var(--mint)}
.fit-box.no li::before{background:#ef4444}

/* 첫 30일 그림 */
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.day .wk{font-size:12.5px;font-weight:900;letter-spacing:.5px;color:var(--mint)}
.day h4{font-size:16.5px;font-weight:900;letter-spacing:-.5px;margin-top:8px}
.day p{color:var(--muted);font-size:14.5px;margin-top:8px}

@media (max-width:900px){
  .voice{grid-template-columns:1fr}
  .voice .said{border-right:0;border-bottom:1px solid var(--line-soft)}
  .fit{grid-template-columns:1fr}
  .days{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){ .days{grid-template-columns:1fr} }

/* ── 샘플 갤러리 (실제로 열리는 예시 산출물) ────────
   ★고객사 작업물이 없으므로 **가짜 실적으로 위장하지 않는다.**
     "샘플"이라고 명시하고, 대신 실제로 클릭해서 볼 수 있게 만든다.
     썸네일은 외부 이미지 없이 SVG 로 직접 그린다(가짜 스크린샷 금지). */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.gal-3{grid-template-columns:repeat(3,1fr)}
.shot{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:.2s;
}
.shot:hover{border-color:var(--brand-ring);transform:translateY(-3px);box-shadow:var(--shadow)}
.shot .frame{
  position:relative;background:var(--bg-2);border-bottom:1px solid var(--line-soft);
  padding:0;line-height:0;
}
.shot .frame svg{width:100%;height:auto;display:block}
/* 실제 사진 프리뷰 — 웹사이트 데모는 사진이 들어가야 진짜 사이트로 읽힌다. */
.shot .frame .pv{display:block;width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform .45s ease}
.shot:hover .frame .pv{transform:scale(1.045)}
.shot .frame{overflow:hidden}
.shot .bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:var(--panel-2);border-bottom:1px solid var(--line-soft);
}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.shot .bar span{
  margin-left:8px;font-size:11.5px;color:var(--faint);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot .meta{padding:22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.shot .meta h3{font-size:18px;font-weight:900;letter-spacing:-.6px}
.shot .meta p{color:var(--muted);font-size:14.5px}
.shot .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.shot .tags b{
  font-size:11.5px;font-weight:800;color:var(--faint);
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:999px;padding:5px 10px;
}
.shot .go{margin-top:auto;padding-top:12px;color:var(--mint);font-weight:800;font-size:14.5px}
.sample-note{
  margin-top:22px;font-size:13.5px;color:var(--faint);
  padding-left:16px;border-left:3px solid var(--line);
}
.sample-note b{color:var(--muted)}

/* 샘플 페이지 자체에 붙이는 상단 띠 — 실제 자료로 오해하지 않게 */
.demo-flag{
  position:sticky;top:0;z-index:150;
  background:#f59e0b;color:#241300;
  font-size:13.5px;font-weight:800;letter-spacing:-.2px;
}
.demo-flag .container{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;min-height:42px}
.demo-flag a{margin-left:auto;text-decoration:underline;font-weight:900}

@media (max-width:900px){ .gal,.gal-3{grid-template-columns:1fr} }

/* ══ 기본형 탈출 부품 ═════════════════════════════════
   "히어로 + 3카드 그리드"만 반복하면 어디에나 있는 페이지가 된다.
   아래 부품으로 골격에 변화를 준다. 데모에서 검증한 것들을 본문에도 옮겼다. */

/* ① 마퀴 띠 — 흐르는 정보 */
/* 잉크 띠 — 라이트 페이지의 대비 포인트. 색을 여기서 명시해야 자식이 본문색(어두운 잉크)을 물려받지 않는다. */
.mqbar{overflow:hidden;background:var(--text);color:#c9cbe0;border-top:1px solid var(--text);border-bottom:1px solid var(--text)}
.mqbar .track{display:flex;width:max-content;animation:mqslide 38s linear infinite}
.mqbar .track > span{display:inline-flex;align-items:center;gap:22px;padding:12px 22px;font-size:13px;font-weight:700;letter-spacing:.6px;white-space:nowrap;color:#c9cbe0}
.mqbar b{color:#a5b4fc}
.mqbar i{width:5px;height:5px;border-radius:50%;background:#4a5080;font-style:normal;flex:0 0 5px}
@keyframes mqslide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mqbar .track{animation:none}}

/* ② 거대 숫자 밴드 — 화면 가로를 다 쓴다 */
.numband{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
.numband .container{display:grid;grid-template-columns:repeat(4,1fr)}
.numband .n{padding:clamp(24px,3.4vw,40px) clamp(14px,2vw,26px) clamp(24px,3.4vw,40px) 0;border-right:1px solid var(--line-soft)}
.numband .n:last-child{border-right:0}
.numband .n b{
  display:block;font-size:clamp(28px,4.4vw,54px);font-weight:900;letter-spacing:-2.2px;line-height:1;
  background:var(--brand-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-variant-numeric:tabular-nums;
}
.numband .n span{display:block;font-size:12.5px;color:var(--faint);margin-top:11px;letter-spacing:.5px}

/* ③ 가로 스크롤 레일 — 카드 그리드 대신 */
.hrail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:38px 0 12px;scrollbar-width:thin}
.hrail::-webkit-scrollbar{height:6px}
.hrail::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.hcard{
  flex:0 0 min(300px,80vw);scroll-snap-align:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;transition:.22s;display:flex;flex-direction:column;gap:10px;
}
.hcard:hover{border-color:var(--brand-ring);background:var(--panel-2);transform:translateY(-3px)}
.hcard .ix{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--faint)}
.hcard h3{font-size:18px;font-weight:900;letter-spacing:-.6px}
.hcard p{color:var(--muted);font-size:15px}
.hcard ul{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:8px}
.hcard li{font-size:13.8px;color:var(--muted);padding-left:15px;position:relative}
.hcard li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--mint)}
.railhint{font-size:13px;color:var(--faint);margin-top:6px}

/* ④ 좌우 교차 지그재그 + 거대 숫자 */
.zigs{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,26px);margin-top:40px}
.zigs .zg{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.6vw,34px);align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,30px);
}
.zigs .zg:nth-child(even){grid-template-columns:1fr auto;background:var(--panel-2)}
.zigs .zg .n{
  font-size:clamp(42px,7.4vw,88px);font-weight:900;line-height:.82;letter-spacing:-4.5px;
  color:rgba(79,70,229,.16);font-variant-numeric:tabular-nums;
}
.zigs .zg:nth-child(even) .n{order:2}
.zigs .zg:nth-child(even) .tx{order:1;text-align:right}
.zigs .zg h3{font-size:clamp(18px,2.5vw,23px);font-weight:900;letter-spacing:-.7px}
.zigs .zg p{color:var(--muted);font-size:15.5px;margin-top:9px}

/* ⑤ 제품 쇼케이스 — 우리가 만든 프로그램 */
.show{position:relative;overflow:hidden;border-top:1px solid var(--line-soft)}
.show::before{
  content:'';position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(56% 58% at 22% 30%,rgba(79,70,229,.15),transparent 68%),
             radial-gradient(48% 50% at 82% 24%,rgba(124,58,237,.13),transparent 70%);
}
.show .container{position:relative}
/* 라이트 페이지 위에서 흰 창은 배경과 붙는다 → 목업만 다크로 대비를 준다(참고 랜딩의 .mock 방식) */
.show .win{
  background:#141833;border:1px solid #262c52;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);color:#e8eaf6;
}
.show .win .tb{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#1b2044;border-bottom:1px solid #262c52}
.show .win .tb i{width:9px;height:9px;border-radius:50%;background:#3a4272;display:block;flex:0 0 9px}
.show .win .tb b{margin-left:10px;font-size:13px;font-weight:800;letter-spacing:-.3px}
.show .win .tb .st{margin-left:auto;font-size:12px;font-weight:800;color:var(--mint);display:flex;align-items:center;gap:7px}
.show .win .tb .st .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);display:block}
.show .win .rows{padding:18px}
.show .win .r{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border:1px solid #262c52;border-radius:12px;background:#191e40;
}
.show .win .r + .r{margin-top:9px}
.show .win .r .ch{font-size:11.5px;font-weight:800;letter-spacing:1px;color:#8d95c9;min-width:112px}
.show .win .r .tt{font-size:14.5px;font-weight:700}
.show .win .r .tt small{display:block;color:#8d95c9;font-size:12.5px;font-weight:600;margin-top:3px}
.show .win .r .bg{font-size:11.5px;font-weight:900;border-radius:999px;padding:5px 11px;white-space:nowrap}
.show .win .r .bg.ok{background:rgba(16,185,129,.16);color:#34d399}
.show .win .r .bg.wt{background:rgba(124,58,237,.2);color:#c4b5fd}
.show .grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,52px);align-items:center}
.show .feat{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.show .feat span{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--muted)}
.show .feat span.hot{border-color:var(--brand-ring);color:var(--text);background:var(--brand-grad-soft)}

@media (max-width:900px){
  .numband .container{grid-template-columns:repeat(2,1fr)}
  .numband .n:nth-child(2){border-right:0}
  .zigs .zg,.zigs .zg:nth-child(even){grid-template-columns:auto 1fr}
  .zigs .zg:nth-child(even) .n{order:0}
  .zigs .zg:nth-child(even) .tx{order:0;text-align:left}
  .show .grid2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .numband .container{grid-template-columns:1fr}
  .numband .n{border-right:0;border-bottom:1px solid var(--line-soft)}
  .numband .n:last-child{border-bottom:0}
  .show .win .r{grid-template-columns:1fr auto}
  .show .win .r .ch{min-width:0}
}

/* 광고 소재 증거 그리드 — 세로형(4:5) 소재를 그대로 보여준다 */
.crts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);margin-top:44px}
.crt{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.24s}
.crt:hover{border-color:var(--brand-ring);transform:translateY(-4px);box-shadow:var(--shadow)}
.crt img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line-soft);background:var(--bg-2)}
.crt figcaption{padding:20px 22px}
.crt figcaption b{display:block;font-size:15.5px;font-weight:900;letter-spacing:-.4px}
.crt figcaption span{display:block;color:var(--muted);font-size:14px;margin-top:8px}
@media (max-width:900px){ .crts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .crts{grid-template-columns:1fr} }

/* ── 프로세스 타임라인 ────────────────────────────── */
.steps{display:grid;gap:18px;margin-top:44px}
.step{display:grid;grid-template-columns:64px 1fr;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.step-num{
  width:64px;height:64px;border-radius:18px;background:var(--brand-grad-soft);
  border:1px solid rgba(79,70,229,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:var(--mint);
}
.step h4{font-size:18.5px;font-weight:900;letter-spacing:-.6px}
.step p{color:var(--muted);font-size:15.5px;margin-top:8px}
.step .when{font-size:13px;font-weight:800;color:var(--faint);letter-spacing:.3px}

/* ── 요금 ─────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:start}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column;gap:14px}
.plan.best{border-color:var(--brand-ring);background:linear-gradient(160deg,var(--panel-2),var(--panel));box-shadow:var(--shadow)}
.plan .badge{align-self:flex-start;font-size:12px;font-weight:900;letter-spacing:.4px;background:var(--brand-grad);color:#ffffff;border-radius:999px;padding:5px 12px}
.plan h3{font-size:21px;font-weight:900;letter-spacing:-.7px}
.plan .amt{font-size:30px;font-weight:900;letter-spacing:-1.4px}
.plan .amt small{font-size:14.5px;font-weight:700;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:6px}
.plan li{display:flex;gap:11px;font-size:15px;color:var(--muted)}
/* 문자 '✓' 대신 CSS 로 체크 표시를 그린다(아이콘은 문자로 쓰지 않는다). */
.plan li::before{
  content:'';flex:0 0 auto;width:9px;height:15px;margin-top:5px;
  border:solid var(--mint);border-width:0 2.6px 2.6px 0;
  transform:rotate(45deg);
}
.plan .foot{margin-top:auto;padding-top:8px}

/* ── 정직 고지 ────────────────────────────────────── */
.honest{
  margin-top:34px;padding:22px 24px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);
}
.honest h4{font-size:16.5px;font-weight:900;letter-spacing:-.5px}
.honest ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:9px}
.honest li{color:var(--muted);font-size:15px;padding-left:16px;position:relative}
.honest li::before{content:'·';position:absolute;left:2px;color:var(--faint);font-weight:900}

/* ── 실적/후기 (실데이터만) ───────────────────────── */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.rev p{font-size:15.5px;line-height:1.7}
.rev .who{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--faint)}
.rev img{border-radius:12px;border:1px solid var(--line);margin-bottom:14px}
.case-table{width:100%;border-collapse:collapse;margin-top:30px;font-size:15px}
.case-table th,.case-table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);text-align:left}
.case-table th{color:var(--faint);font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.case-table td b{color:var(--mint)}
.table-wrap{overflow-x:auto}

/* ── FAQ ──────────────────────────────────────────── */
.faq{margin-top:38px;display:flex;flex-direction:column;gap:12px}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.qa summary{
  list-style:none;cursor:pointer;padding:20px 24px;
  font-size:16.5px;font-weight:800;letter-spacing:-.4px;
  display:flex;align-items:center;gap:14px;
}
.qa summary::-webkit-details-marker{display:none}
/* '+' / '−' 문자 대신 셰브론을 CSS 로 그린다. */
.qa summary::after{
  content:'';margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border:solid var(--mint);border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg);transition:transform .2s;
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa .ans{padding:0 24px 22px;color:var(--muted);font-size:15.5px}

/* ── 상담 폼 ──────────────────────────────────────── */
.lead-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.lead-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-size:14px;font-weight:800;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;color:var(--text);font-size:15.5px;font-family:inherit;min-height:48px;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-ring);outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px}
.form-note{color:var(--faint);font-size:13px;margin-top:12px}

.ad-section{padding:28px 0;background:var(--bg)}
.ad-section-before-consult{padding-top:10px}
.yn-ad{
  min-height:90px;
  border-radius:18px;
  overflow:hidden;
}

/* ── 스티키 하단 CTA (모바일) ─────────────────────── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line);
}
.sticky-cta .btn{flex:1}

/* ── 푸터 ─────────────────────────────────────────── */
.footer{border-top:1px solid var(--line-soft);padding:52px 0 40px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer h5{font-size:14px;font-weight:900;letter-spacing:.3px;margin-bottom:14px}
.footer a,.footer p{color:var(--muted);font-size:14.5px}
.footer a:hover{color:var(--mint)}
.foot-links{display:flex;flex-direction:column;gap:9px}
.foot-bottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-soft);color:var(--faint);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px}

/* ── 스크롤 등장 ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ══ 반응형 — 표준 브레이크포인트 900 → 640 → 480 ══ */
@media (max-width:900px){
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--line);flex-direction:column;padding:12px;gap:4px}
  .nav.open{display:flex}
  .nav-toggle{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .grid-3,.grid-4,.plans,.rev-grid{grid-template-columns:repeat(2,1fr)}
  .lead-wrap{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sec{padding:66px 0}
  .sticky-cta{display:flex}
  body{padding-bottom:76px}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.plans,.rev-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:14px}
  .step-num{width:52px;height:52px;border-radius:15px;font-size:20px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .topbar .tb-right{margin-left:0}
  .hero{padding:52px 0 62px}
  .card,.plan,.lead-card{padding:22px}
  .ad-section{padding:20px 0}
  .yn-ad{min-height:72px}
}
@media (max-width:480px){
  .container{padding:0 16px}
  .proof-item{font-size:13.5px;padding:8px 13px}
  .btn-lg{min-height:52px;font-size:16px;padding:0 22px}
}

/* ── 인쇄 (사업제안서 PDF 저장용) ─────────────────── */
@media print{
  :root{--bg:#fff;--bg-2:#fff;--panel:#fff;--panel-2:#fafafa;--text:#111;--muted:#444;--faint:#666;--line:#ddd;--line-soft:#eee}
  body{background:#fff;color:#111}
  .header,.topbar,.sticky-cta,.no-print,.ad-section{display:none !important}
  .hero::before,.svc::after{display:none}
  .sec{padding:24px 0;break-inside:avoid}
  .page-break{break-before:page}
  .card,.plan,.step,.qa{box-shadow:none;break-inside:avoid}
  .reveal{opacity:1;transform:none}
  a{color:#111;text-decoration:underline}
  /* 🚨 .gradient-text 는 -webkit-text-fill-color:transparent 다.
     인쇄에서 배경 그래픽이 꺼지면 **핵심 문구가 통째로 사라진다**(제안서 표지 제목).
     인쇄에서는 그라디언트를 포기하고 잉크 색으로 되돌린다. */
  .gradient-text{
    background:none !important;
    -webkit-text-fill-color:#4f46e5 !important;
    color:#4f46e5 !important;
  }
  .eyebrow,.step-num,.honest{border-color:#ccc !important;background:#f6f8f8 !important;color:#4f46e5 !important}
  .btn-primary,.btn-kakao{background:#eee !important;color:#111 !important;box-shadow:none !important}
}