/* ============================================================
   blux.css — blux 랜딩 클론 스타일 번들 (프론트엔드 전용)
   원본: sample/bricks/assets/css (globals/header/footer/components/pages)
   브레이크포인트: 991 / 767 / 478 (사이트 브레이크포인트)
   ============================================================ */

/* ---------- Bricks 요소 기본값 중립화 (컴포넌트 클래스가 덮어쓸 수 있게 최전단) ---------- */
.brxe-text-link, .brxe-button, .brxe-text-basic, .brxe-heading {
  background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
  text-decoration: none; color: inherit;
}

/* ---------- 팔레트 변수 안전망 (Bricks 팔레트와 동일 값) ---------- */
:root {
  --blue: #0A6CFF;
  --blue-dark: #0857CC;
  --ink: #0B0D12;
  --sub: #4B5058;
  --muted: #8A909B;
  --bg: #FBFCFE;
  --card: #FFFFFF;
  --border: rgba(15, 23, 42, .07);
  --ghost: rgba(15, 23, 42, .05);
  --dark: #0A0E16;
  --dark-soft: #141B26;
  --dark-line: rgba(255, 255, 255, .1);
  --kakao: #FFE500;
}

/* ===== shared: 폰트 · 토큰 · 리셋 · 공통 컴포넌트 (색상 토큰은 Bricks 팔레트 변수 사용) ===== */
/* 웹폰트는 bricks-child 테마 style.css에서 로드 */

:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --wrap: 1312px;
  --wrap-pad: 16px;
  --sec-pad: 128px;
  --radius-card: 20px;
  --shadow-card: 0 6px 22px rgba(15, 23, 42, .05);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip은 스크롤 컨테이너를 만들지 않아 position: sticky 유지 */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; word-break: keep-all; }
ul, ol { list-style: none; padding: 0; }
dl, dd, dt { margin: 0; }
blockquote, figure { margin: 0; }
mark { background: none; color: var(--blue); }



/* ---------- 레이아웃 ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.wrap--narrow { max-width: 1248px; }

.sec { padding: var(--sec-pad) 0; }
.sec > .wrap, .sec > .wrap--narrow { position: relative; }



/* ---------- 버튼 (필 pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); }
.btn--ghost { background: var(--ghost); color: var(--ink); }
.btn--ghost:hover { background: rgba(15, 23, 42, .09); }
.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }



/* ---------- 칩 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 12px;
  background: var(--ghost); border: 1px solid var(--border);
  font-size: 14px; color: var(--sub); white-space: nowrap;
}
.chip--sm { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; }
.chip--lg { height: 52px; padding: 0 22px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--ink); }
.chip--yellow { background: var(--kakao); border-color: transparent; color: #3B1E00; }



/* ---------- 카드 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}



/* ---------- 링크 ---------- */
.b-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }



/* ---------- 폼 공통 ---------- */
.b-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.b-check input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--blue); }




/* ============================================================
   header.css — 플로팅 필 헤더 + GNB + 메가드롭 + 모바일 드로어
   (Bricks: Header 템플릿)
   ============================================================ */

.b-header {
  position: fixed; inset: 14px 0 auto; z-index: 100;
  display: flex; justify-content: center;
  padding: 0 16px; pointer-events: none;
}
.b-header__bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: 1040px; height: 56px;
  padding: 0 10px 0 26px;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 28px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
}

/* 로고 — TODO: 실제 로고 이미지/SVG로 교체 */
.b-logo {
  font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
}

/* GNB */
.b-gnb { display: flex; align-items: center; gap: 26px; }
.b-gnb__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 0; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--sub);
  transition: color .15s ease;
}
.b-gnb__link:hover { color: var(--ink); }
.b-caret {
  display: inline-block; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -4px;
  transition: transform .2s ease;
}
.b-gnb__item { position: relative; }
.b-gnb__item.is-open .b-caret { transform: rotate(-135deg); }

/* 메가드롭 */
.b-drop {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 176px;
  padding: 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.b-gnb__item.is-open .b-drop,
.b-gnb__item:hover .b-drop { opacity: 1; visibility: visible; transform: none; }
.b-drop__link {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; color: var(--sub);
}
.b-drop__link:hover { background: var(--ghost); color: var(--ink); }

/* 우측 CTA */
.b-header__cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 햄버거 (모바일) */
.b-burger { display: none; position: relative; width: 42px; height: 42px; border-radius: 50%; }
.b-burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink);
  transition: transform .2s ease, top .2s ease;
}
.b-burger span:nth-child(1) { top: 17px; }
.b-burger span:nth-child(2) { top: 24px; }
.b-burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.b-burger.is-open span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* 모바일 드로어 */
.b-drawer {
  pointer-events: auto;
  position: fixed; inset: 86px 16px auto; z-index: 99;
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
  padding: 12px;
}
.b-drawer__nav { display: flex; flex-direction: column; }
.b-drawer__link { padding: 13px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.b-drawer__link:hover { background: var(--ghost); }
.b-drawer__group { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; }
.b-drawer__label { padding: 0 16px 6px; font-size: 12.5px; color: var(--muted); }
.b-drawer__link--sub { font-weight: 500; font-size: 14px; color: var(--sub); }
.b-drawer__cta { justify-content: center; margin: 12px 8px 8px; height: 46px; }

@media (max-width: 991px) {
  .b-gnb { display: none; }
}
@media (max-width: 767px) {
  .b-header { inset: 12px 0 auto; padding: 0 12px; }
  .b-header__bar { height: 56px; padding: 0 6px 0 20px; }
  .b-header__cta .btn--ghost { display: none; }
  .b-burger { display: block; }
}
@media (min-width: 768px) {
  .b-drawer { display: none; }
}

/* ============================================================
   footer.css — 푸터 (원본 규격) + 뉴스레터 팝업
   (Bricks: Footer 템플릿 + 팝업)
   ============================================================ */

/* ---------- 푸터 (원본: foot-top 64/48, foot-bar 보더탑 h69) ---------- */
.b-footer { background: #fff; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 44px; padding: 64px 0 48px; }
.foot-id { display: flex; flex-direction: column; gap: 18px; }
.foot-logo { font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.foot-info p { font-size: 13px; color: var(--sub); line-height: 1.9; }
.foot-info p:first-child { color: var(--ink); font-weight: 600; }
.foot-marks { display: flex; gap: 14px; }
.foot-mark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border: 1px solid var(--border); border-radius: 14px;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 1.5;
  color: var(--muted); letter-spacing: .04em;
}
.foot-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 26px;
  border-top: 1px solid var(--border); padding: 23px 0;
}
.foot-bar-l, .foot-bar-r { display: flex; align-items: center; gap: 14px; }
.foot-link { font-size: 13.5px; color: #39445A; }
.foot-link:hover { color: var(--ink); }
.foot-sep { width: 1px; height: 11px; background: #E3E8F0; }
.foot-copy { font-size: 12px; color: #9AA5B5; letter-spacing: .02em; }

/* ---------- 뉴스레터 팝업 (원본 .nm-ov 모달) ---------- */
.b-popup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 13, 18, .48);
}
.b-popup__panel {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(11, 13, 18, .3);
}
.b-popup__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(255, 255, 255, .35); color: var(--ink);
}
.b-popup__head {
  display: flex; flex-direction: column; justify-content: flex-start;
  height: 200px; padding: 24px 28px;
  background:
    radial-gradient(120% 160% at 78% 30%, #EAF2FF 0%, rgba(234, 242, 255, 0) 55%),
    linear-gradient(118deg, #7FB0FF 0%, #2F7BFF 44%, #0A47D6 100%);
}
.b-popup__logo { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: .95; color: var(--ink); }
.b-popup__logo-italic { font-size: 56px; font-weight: 600; font-style: italic; letter-spacing: -0.03em; line-height: .95; color: var(--ink); }
.b-popup__dot { color: var(--blue); font-style: normal; }
.b-popup__body { padding: 24px 28px 20px; }
.b-popup__badge { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--blue); }
.b-popup__badge-bar { width: 10px; height: 12px; background: var(--blue); }
.b-popup__title { margin-top: 10px; font-size: 21px; }
.b-popup__desc { margin-top: 8px; font-size: 14px; color: var(--sub); }
.b-popup__form { margin-top: 18px; }
.b-popup__input {
  width: 100%; height: 50px; padding: 0 20px;
  border: 1px solid var(--border); border-radius: 999px; outline: none;
}
.b-popup__input:focus { border-color: var(--blue); }
.b-popup__submit { width: 100%; height: 50px; margin-top: 10px; font-size: 15px; }
.b-popup__form .b-check { margin-top: 12px; }
.b-letter__done { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--blue); }
.b-popup__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.b-popup__hide { font-size: 12.5px; color: var(--muted); }
.b-popup__more { font-size: 12.5px; color: var(--sub); font-weight: 600; }

@media (max-width: 767px) {
  .foot-top { flex-direction: column; gap: 32px; }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .b-popup__head { height: 160px; }
  .b-popup__logo, .b-popup__logo-italic { font-size: 44px; }
}

/* ---------- 타이포 ---------- */
.hero-title {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.032em;
  text-align: center;
}
.h2 { font-size: clamp(30px, 3.3vw, 42.24px); line-height: 1.12; }
.h2--center { text-align: center; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--sub); margin-bottom: 16px; }
.eyebrow--dark { color: rgba(255, 255, 255, .6); }
.lead { font-size: 18px; color: var(--sub); margin-top: 20px; max-width: 560px; }
.lead--dark { color: rgba(255, 255, 255, .72); }

/* 섹션 헤드 공통 */
.sec-head { margin-bottom: 56px; }
.sec-head .h2 { max-width: 760px; }
.sec-head--split {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.sec-head--center { text-align: center; }
.sec-head--center .h2,
.sec-head--center .lead,
.sec-head--center .sub { margin-inline: auto; }
.sec-head__link { color: var(--blue); font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.sec-head--dark .h2 { color: #fff; }


/* ---------- 스크롤 리빌 (Bricks: Animation 패널로 대체 가능) ---------- */
.rv { opacity: 1; transform: none; }
.rv[data-rv-init] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.rv.is-in { opacity: 1; transform: none; }


/* ============================================================
   components.css — 에이전트 채팅 UI · 캠페인 테이블 · 알림톡 프리뷰
   · 푸널 · 콘솔 목업 (Bricks: 코드 블록 또는 커스텀 요소 재현)
   ============================================================ */

/* ---------- 채팅 카드 ---------- */
.chat {
  background: #fff; border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .09);
  overflow: hidden;
}
.chat__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 22px;
  border-bottom: 1px solid var(--border);
}
.chat__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.chat__mark { width: 16px; height: 16px; color: var(--ink); }
.chat__badge { font-size: 12px; color: var(--muted); background: var(--ghost); border-radius: 999px; padding: 4px 10px; }
.chat__body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.chat__user {
  align-self: flex-end; max-width: 78%;
  background: var(--ghost); border-radius: 16px 16px 4px 16px;
  padding: 12px 16px; font-size: 14.5px; line-height: 1.55;
}
.chat__done { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--blue); }
.chat__say { font-size: 14.5px; line-height: 1.6; }
.chat__say b { color: var(--blue); }

.chat__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.chat__left, .chat__right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.chat__confirm { display: flex; justify-content: flex-end; }
.chat__confirm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(10, 108, 255, .35); color: var(--blue);
  font-size: 13px; font-weight: 600; background: rgba(10, 108, 255, .04);
}
.chat__suggests { display: flex; gap: 8px; flex-wrap: wrap; }
.chat__suggests .chip { height: 36px; font-size: 13px; }

.chat__input {
  display: flex; align-items: center; gap: 12px;
  margin: 0 22px 22px; padding: 8px 8px 8px 18px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
}
.chat__plus { color: var(--muted); font-size: 18px; }
.chat__placeholder { flex: 1; font-size: 14px; color: var(--muted); }
.chat__send {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--blue);
}

/* 다크 섹션의 스텝 카드 */
.chat--step + .chat--step { margin-top: 24px; }

/* ---------- 캠페인 정보 테이블 ---------- */
.campaign {
  border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px;
  background: #fff;
}
.campaign__label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.campaign__row {
  display: grid; grid-template-columns: 84px 1fr; gap: 10px;
  padding: 7px 0; font-size: 13.5px; align-items: baseline;
}
.campaign__row + .campaign__row { border-top: 1px dashed var(--border); }
.campaign__k { color: var(--muted); }
.campaign__v { color: var(--ink); }
.campaign__row--tall { grid-template-columns: 84px 1fr; }
.campaign__row--tall .campaign__v { line-height: 1.7; }

/* ---------- 알림톡 프리뷰 ---------- */
.alim {
  background: var(--ghost); border: 1px solid var(--border); border-radius: 20px;
  padding: 14px; height: 100%;
}
.alim__label {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  background: var(--kakao); font-size: 12px; font-weight: 700; color: #3B1E00;
  margin-bottom: 10px;
}
.alim__card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; text-align: left;
}
.alim__img { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; margin: 0 auto 12px; }
.alim__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.alim__title { font-size: 16px; font-weight: 700; margin-top: 2px; }
.alim__body { font-size: 12.5px; color: var(--sub); margin-top: 8px; line-height: 1.6; }
.alim__btn {
  display: block; text-align: center; margin-top: 12px; padding: 10px 0;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-weight: 600;
}

/* ---------- 푸널 바 차트 ---------- */
.funnel { display: flex; flex-direction: column; gap: 9px; }
.funnel__row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.funnel__k { width: 34px; color: var(--muted); flex: none; }
.funnel__bar {
  position: relative; flex: 1; height: 14px; border-radius: 4px;
  background: #EDF2FE; overflow: hidden;
}
.funnel__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%);
  background: var(--blue); border-radius: 4px;
}
.funnel__v { width: 64px; text-align: right; font-weight: 600; flex: none; }

/* ---------- 콘솔 목업(기능 섹션) ---------- */
.mock {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-card); padding: 22px;
}
.mock__label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.mock__cond { display: flex; flex-direction: column; gap: 8px; }
.mock__line { font-size: 13.5px; background: var(--ghost); border-radius: 10px; padding: 10px 12px; }
.mock__line b { font-weight: 600; }
.mock__line mark { font-weight: 700; }
.mock__op { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--blue); background: rgba(10,108,255,.08); border-radius: 6px; padding: 2px 8px; }
.mock__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.mock__chips .chip--sm:first-child { color: var(--blue); border-color: rgba(10,108,255,.3); background: rgba(10,108,255,.05); }

.mock--canvas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mock__node {
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--ghost); border: 1px solid var(--border);
}
.mock__node--start { background: var(--ink); color: #fff; border: 0; }
.mock__node--blue { background: var(--blue); color: #fff; border: 0; }
.mock__arrow { color: var(--muted); }
.mock__branch { display: flex; gap: 10px; width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }
.mock__branch-col { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mock__cond-chip {
  font-size: 12px; color: var(--sub); background: var(--ghost);
  border-radius: 8px; padding: 6px 10px; text-align: center;
}

.mock--personal { display: flex; flex-direction: column; gap: 10px; position: relative; }
.mock__view {
  align-self: flex-end; font-size: 12px; font-weight: 600; color: var(--blue);
  background: rgba(10,108,255,.07); border-radius: 999px; padding: 5px 12px;
}
.mock__msg { border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.mock__msg b { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mock__msg p { font-size: 13.5px; margin-top: 2px; }

.mock--channels { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }

.mock--ai { position: relative; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(160deg, #F3F8FF 0%, #fff 55%); }
.mock__ai-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.mock__ai-tag i {
  font-style: normal; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--blue); border-radius: 6px; padding: 2px 7px;
}
.mock__ai-card {
  display: flex; gap: 16px; align-items: center;
  border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 14px;
}
.mock__ai-card img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; }
.mock__ai-head { font-size: 13px; color: var(--sub); }
.mock__ai-name { font-size: 17px; font-weight: 700; margin-top: 2px; }
.mock__ai-sub { font-size: 12.5px; color: var(--blue); font-weight: 600; margin-top: 6px; }
.mock__ai-trend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); }
.mock__spark { font-style: normal; color: var(--blue); font-weight: 700; }
.mock--ai .mock__view { position: absolute; top: 18px; right: 18px; }

@media (max-width: 767px) {
  .chat__grid { grid-template-columns: 1fr; }
  .chat__user { max-width: 100%; }
}

/* ============================================================
   pages.css — 랜딩 페이지 섹션 레이아웃 (v2: 원본 정밀 측정값)
   ============================================================ */

/* ---------- 1. 히어로 ---------- */
.sec--hero {
  position: relative;
  padding: 216px 0 0;
  overflow-x: clip; /* glow/ring 장식의 가로 블리드 방지 (세로는 유지) */
}
.sec--hero__glow {
  position: absolute; left: 50%; top: 46%;
  width: 1100px; height: 1100px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(120, 170, 245, .34) 0%, rgba(150, 190, 250, .16) 38%, rgba(150, 190, 250, 0) 68%);
  pointer-events: none;
}
.sec--hero__ring {
  position: absolute; left: 50%; top: 46%;
  width: 1500px; height: 620px; transform: translate(-50%, -50%) rotate(-6deg);
  border: 1px solid rgba(10, 108, 255, .16); border-radius: 50%;
  pointer-events: none;
}
.hero-mark { display: inline-block; width: .82em; height: .82em; color: var(--ink); vertical-align: -0.06em; margin: 0 .04em; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.hero-cta__link { color: var(--blue); font-size: 15.5px; font-weight: 600; }

/* ---------- 2. 채팅 섹션 ---------- */
.sec--chat { padding-top: 96px; }
.sec--chat .chat { max-width: 1200px; margin: 0 auto; }

/* ---------- 3. 로고 마퀴 (원본: logos 높이 306) ---------- */
.sec--logos { padding-top: 96px; padding-bottom: 0; }
.logos__lead { text-align: center; font-size: 17px; color: var(--sub); }
.logos__lead b { color: var(--ink); }
.logos { margin-top: 44px; display: flex; flex-direction: column; gap: 34px; overflow: hidden; }
.logos__row { overflow: hidden; }
.logos__track { display: flex; align-items: center; gap: 84px; width: max-content; padding-right: 84px; }
.logos__track--l { animation: marquee-l 46s linear infinite; }
.logos__track--r { animation: marquee-r 52s linear infinite; }
@keyframes marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.brandmark { font-size: 24px; white-space: nowrap; opacity: .92; }
.brandmark sup { font-size: 12px; }
.brandmark-hl { color: var(--blue); }

/* ---------- 4. 스탯 티커 (원본 .ticker-in: 24/32/22 패딩, radius 24, 4열 251 gap 18) ---------- */
.ticker { padding: 0 28px; margin-top: 64px; }
.ticker-in {
  max-width: 1124px; margin: 0 auto;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  padding: 24px 32px 22px;
}
.tk-head { margin: 0 0 18px; }
.tk-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.tk-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tk {
  display: flex; flex-direction: column; gap: 5px;
  padding-left: 16px; border-left: 1px solid rgba(15, 23, 42, .1);
}
.tk-v { font-size: 25.6px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--blue); font-variant-numeric: tabular-nums; }
.tk-k { font-size: 13px; color: #7B818B; }

/* ---------- 5. 성과 (원본 .proof2: 528/607 gap 90) ---------- */
.sec--proof { padding: 96px 0; }
.proof2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: center; }
.pf-l .eyebrow { margin-bottom: 14px; }
.pf-cta { margin-top: 30px; font-size: 15px; color: var(--sub); line-height: 1.75; }
.tlink { color: var(--blue); font-size: 15.5px; font-weight: 600; }
.pf-row { padding: 27px 0; }
.pf-row + .pf-row { border-top: 1px solid var(--border); }
.pf-big { font-size: 37.12px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.pf-v { color: var(--blue); font-variant-numeric: tabular-nums; }
.pf-v--lg { font-size: 1.28em; letter-spacing: -0.03em; }
.pf-cap { margin-top: 9px; font-size: 14.5px; color: var(--muted); }

/* ---------- 6. 페인포인트 ---------- */
.sec--pain { padding-bottom: 0; }
.sec--pain .lead { max-width: 520px; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pain { padding: 36px 32px; display: flex; flex-direction: column; }
.pain__title { font-size: 21px; line-height: 1.35; }
.pain__body { margin-top: 16px; font-size: 15px; color: var(--sub); flex: 1; }
.pain__link { margin-top: 28px; font-size: 14.5px; font-weight: 600; color: var(--blue); }

/* ---------- 6-1. 선언문 (원본 section.statement, 높이 399) ---------- */
.statement-sec { padding: 150px 0; }
.statement { font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1.35; letter-spacing: -0.025em; }
.statement--dim { color: #C3C9D4; }

/* ---------- 7. 다크 극장: 스티키 핀 (원본 .theater) ---------- */
.theater { background: var(--dark); }
.dt-pin { height: 340vh; } /* 핀 트랙: 뷰포트 + 단계 전환 구간 */
.dt-layout {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: 44px;
  padding: 76px 0 34px;
  overflow: hidden;
}
.dt-wrap { width: 100%; }
.dt-head { margin-bottom: 0; }
.dt-head .h2 { color: #fff; }
.dt-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
.dt-chat .chat__input { margin-top: auto; } /* 입력바 카드 하단 고정 */
.dt-chat {
  max-width: 612px;
  height: min(76vh, 780px); /* 원본: 카드 고정 높이, 입력바 하단 고정 */
  display: flex; flex-direction: column;
}
.dt-chat .chat__body.dt-states { flex: 1 1 auto; position: relative; transition: height .45s cubic-bezier(.4, 0, .2, 1); padding: 0; }
.dt-state {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 24px; /* abs-pos는 부모 padding을 무시하므로 자체 패딩으로 카드 안쪽 여백 확보 */
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.dt-state.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* 우측 스텝: 스테이지에서 3개만 보이고 활성 단계 중앙 정렬 (원본 동작) */
.dt-steps-view {
  position: relative;
  height: min(76vh, 780px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 96px), transparent 100%);
}
.dt-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .14); }
.dt-rail-dot {
  position: absolute; left: -4.5px; top: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px rgba(10, 108, 255, .18);
  transition: top .5s cubic-bezier(.4, 0, .2, 1);
}
.dt-steps { position: relative; display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.dt-step {
  min-height: 218px;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 34px;
  opacity: .25;
  transition: opacity .4s ease;
}
.dt-step.is-on { opacity: 1; }
.dt-num { font-size: 13.5px; font-weight: 600; color: #5EA0FF; }
.dt-title { margin-top: 10px; font-size: 24px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.dt-desc { margin-top: 12px; font-size: 15px; line-height: 1.7; color: rgb(152, 162, 179); max-width: 520px; }

/* ---------- 8. 차별점: 파이프 타임라인 (원본 .exec2) ---------- */
.sec--diff { background: radial-gradient(90% 70% at 50% 42%, rgba(150, 190, 250, .2) 0%, rgba(150, 190, 250, 0) 70%); }
.exec2 { max-width: 960px; margin: 0 auto; }
.seg {
  display: flex; justify-content: center; gap: 4px; width: max-content; margin: 0 auto 56px;
  background: rgba(15, 23, 42, .05); border-radius: 22px; padding: 4px;
}
.seg-btn { height: 34px; padding: 9px 20px; border-radius: 18px; font-size: 14px; font-weight: 500; color: var(--sub); line-height: 1; transition: background .2s ease, color .2s ease; }
.seg-btn.is-on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(15, 23, 42, .1); }

.pipe { position: relative; }
.pipe-track { position: relative; height: 2px; margin: 0 6px; background: rgba(15, 23, 42, .1); border-radius: 99px; }
.pipe-fill {
  position: absolute; inset: 0;
  background: var(--blue); border-radius: 99px;
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
/* 컷 라인: 툴 모드 정지 지점 (2.5/7) */
.pipe-cut { position: absolute; left: calc(6px + (100% - 12px) * 0.357); top: -47px; width: 1px; height: 96px; background: repeating-linear-gradient(180deg, #C6CDD9 0 4px, transparent 4px 8px); transition: opacity .3s ease; }
.pipe-cut span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12px; color: var(--muted); background: var(--bg); padding: 0 8px; }
.pipe-cut.is-off { opacity: 0; }
.pipe-steps { display: grid; grid-template-columns: repeat(7, 1fr); margin: -6px 0 0; }
.pstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-dot {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #D4DAE4;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pstep.is-fill .p-dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 108, 255, .12); }
.p-t { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
.p-role { margin-top: 6px; font-size: 12px; color: var(--muted); height: 18px; }
.p-role i { font-style: normal; }
.p-role .r-agent { display: none; color: var(--blue); font-weight: 600; }
.exec2.is-blux .p-role .r-tool { display: none; }
.exec2.is-blux .p-role .r-agent { display: inline; }

/* blux 모드 배지 + 오라 (트랜지션 없이 즉시 전환 — 일부 환경 opacity 트랜지션 쐐기 방지) */
.pipe-agent { position: relative; height: 0; display: flex; justify-content: center; }
.pa-aura {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 591px; max-width: 96vw; height: 132px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 108, 255, .18) 0%, rgba(10, 108, 255, 0) 70%);
  opacity: 0;
}
.pa-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--blue); border-radius: 99px; padding: 8px 18px;
  opacity: 0;
}
.exec2.is-blux.is-full .pa-aura, .exec2.is-blux.is-full .pa-badge { opacity: 1; }

.pipe-sum { margin-top: 84px; text-align: center; font-size: 16px; color: var(--ink); height: 24px; }
.pipe-sum b { font-size: 19px; color: var(--blue); }
.pipe-sum .sum-b { display: none; }
.exec2.is-blux .pipe-sum .sum-t { display: none; }
.exec2.is-blux .pipe-sum .sum-b { display: inline; }

/* ---------- 9. 기능: 벤토 그리드 (원본 .bento: 6칼럼 gap 20, 카드 w3/w2) ---------- */
.sec--features { padding-bottom: 128px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bcard {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 26px;
  padding: 38px 34px 0;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(15, 23, 42, .05);
}
.bcard.w3 { grid-column: span 3; }
.bcard.w2 { grid-column: span 2; }
/* 마우스를 따라다니는 미세한 배경 (스포트라이트) */
.bcard::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(38% 38% at var(--mx, 70%) var(--my, 10%), rgba(10, 108, 255, .14), rgba(10, 108, 255, 0) 70%),
    radial-gradient(30% 30% at calc(var(--mx, 70%) + 12%) calc(var(--my, 10%) + 16%), rgba(120, 170, 250, .10), rgba(10, 108, 255, 0) 70%);
  pointer-events: none;
}
.bcard > * { position: relative; }
.bcard__label { font-size: 13.5px; font-weight: 600; color: var(--blue); }
.bcard__title { margin-top: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.bcard__desc { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--sub); max-width: 480px; }
.bcard .tlink { font-size: 15px; }
.visual { margin-top: auto; display: flex; justify-content: center; }
.bmini {
  width: 100%; max-width: 533px;
  background: #fff; border: 1px solid var(--border); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 18px 20px 22px;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, .05);
}
.bcard.w2 .bmini { padding: 16px 18px 20px; }
.bmini__label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }

/* 조건 빌더 목업 */
.rule {
  background: #FBFCFE; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.rule__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rule__key { font-size: 13px; font-weight: 600; background: var(--ghost); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.rule__op { font-size: 12.5px; color: var(--sub); }
.rule__val { font-size: 13px; font-weight: 700; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.rule__sel { font-size: 12.5px; color: var(--sub); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.rule__sel i { font-style: normal; color: var(--muted); margin-left: 4px; }
.rule__and { align-self: center; font-size: 11px; font-weight: 700; color: var(--blue); background: rgba(10, 108, 255, .08); border-radius: 6px; padding: 2px 8px; }
.bmini__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip--ai { color: var(--blue); border-color: rgba(10, 108, 255, .3); background: rgba(10, 108, 255, .05); }

/* 시나리오 트리 목업 */
.bmini--flow { display: flex; justify-content: center; padding-bottom: 26px; }
.fnode-col { display: flex; flex-direction: column; align-items: center; }
.fnode {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
.fnode + .fnode { margin-top: 22px; }
.fnode + .fnode::before, .fnode + .fbranch::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 1px; height: 22px; background: #D4DAE4;
}
.fnode + .fnode::before { top: -22px; }
.fnode--dark { background: var(--ink); color: #fff; border: 0; }
.fdot { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #12B76A; color: #fff; font-size: 10px; }
.fnode--dark .fside { font-style: normal; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .14); border-radius: 6px; padding: 2px 7px; }
.fbranch { display: flex; gap: 44px; margin-top: 22px; position: relative; padding-top: 22px; }
.fbranch::before { content: ""; position: absolute; top: 0; left: 50%; width: 44px; height: 22px; border-top: 1px solid #D4DAE4; }
.fbranch__col { position: relative; display: flex; flex-direction: column; align-items: center; }
.fbranch__col::before { content: ""; position: absolute; top: -22px; left: 50%; width: 1px; height: 22px; background: #D4DAE4; }
.flabel { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.fnode--sm { font-size: 12px; padding: 6px 11px; }

/* 초개인화 메시지 목업 */
.pmsg { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.pmsg + .pmsg { margin-top: 10px; }
.pmsg__ava { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(10, 108, 255, .12); color: var(--blue); font-size: 13px; font-weight: 700; flex: none; }
.pmsg__ava--b { background: rgba(18, 183, 106, .14); color: #0E9F5C; }
.pmsg b { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pmsg p { font-size: 13.5px; margin-top: 2px; }

/* 멀티채널 칩 그리드 */
.ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-item { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; background: var(--ghost); border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ch-item--yellow { background: var(--kakao); border-color: transparent; color: #3B1E00; }

/* ---------- 10. AI 상품 추천 (원본 .recplay: 510/490 gap 60) ---------- */
.sec--reco { padding: 128px 0; }
.sec-head .sub { margin-top: 16px; font-size: 17.5px; color: var(--sub); max-width: 595px; }
.recplay { max-width: 1060px; margin: 64px auto 0; }
.rp { display: grid; grid-template-columns: 510px 1fr; gap: 60px; align-items: start; }
.rp-list { position: relative; padding-left: 30px; }
.rp-list::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 90px; width: 1px; background: #E3E8F0; }
.rp-g { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-g + .rp-row { margin-top: 12px; }
.rp-row + .rp-g { margin-top: 20px; }
.rp-num {
  position: relative; z-index: 1; font-style: normal; flex: none;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--blue); color: var(--blue); font-size: 12px; font-weight: 700;
  background: var(--bg);
}
.rp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip {
  height: 34px; padding: 8px 16px; border-radius: 99px;
  background: #fff; border: 1px solid var(--border);
  font-size: 13.5px; color: var(--ink); line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rp-chip:hover { border-color: var(--blue); color: var(--blue); }
.rp-chip.is-on { background: #16191F; border-color: #16191F; color: #fff; }
.rp-foot { margin-top: 28px; font-size: 13.5px; color: var(--sub); }
.rp-foot b { color: var(--ink); font-weight: 600; }
.reco__hl { color: var(--blue) !important; }

.rp-stage { display: flex; flex-direction: column; align-items: center; min-height: 320px; }
.rp-state { display: flex; flex-direction: column; align-items: center; animation: rp-in .35s ease; }
@keyframes rp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rp-ev {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--border);
  border-radius: 13px; padding: 9px 15px; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.rp-ev i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--blue); border-radius: 5px; padding: 2px 6px; }
.rp-link { width: 1px; height: 26px; background: repeating-linear-gradient(180deg, #C6CDD9 0 3px, transparent 3px 6px); }
.np-wrap { position: relative; width: 420px; max-width: 100%; }
.np-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 16px; box-shadow: 0 16px 40px rgba(15, 23, 42, .1);
}
.np-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.np-body b { font-size: 14px; font-weight: 700; display: block; }
.np-body p { font-size: 12.5px; color: var(--sub); margin-top: 3px; line-height: 1.55; }
.np-recent { position: absolute; top: -10px; right: 12px; font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; }

/* ---------- 11. 고객 사례 + 리뷰 ---------- */
.sec-head__tools { display: flex; align-items: center; gap: 20px; }
.cases-nav { display: flex; gap: 8px; }
.cases-nav__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  font-size: 17px; color: var(--sub);
  transition: background .15s ease, color .15s ease;
}
.cases-nav__btn:hover { background: var(--ink); color: #fff; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { border-radius: 20px; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; }
.case--dark { background: #10141C; color: #fff; padding: 36px 32px; }
.case__brand { font-size: 13px; color: rgba(255, 255, 255, .55); }
.case__quote { margin-top: 20px; font-size: 20px; font-weight: 600; line-height: 1.5; }
.case__who { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.case__stats { display: flex; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.case__stats b { font-size: clamp(30px, 2.8vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.case__stats i { font-style: normal; font-size: .6em; margin-left: 2px; }
.case__stats span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .55); }
.case__more { margin-top: auto; padding-top: 28px; font-size: 14px; font-weight: 600; color: #fff; }
.case--photo { position: relative; background: #0E1420; }
.case--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.case__overlay {
  position: relative; z-index: 1; margin-top: auto;
  padding: 96px 28px 28px;
  background: linear-gradient(180deg, rgba(10, 14, 22, 0) 0%, rgba(10, 14, 22, .88) 70%);
}
.case__photo-brand { font-size: 15px; letter-spacing: .3em; color: rgba(255, 255, 255, .85); text-align: center; }
.case__photo-copy { margin-top: 14px; font-size: 17px; font-weight: 600; line-height: 1.5; text-align: center; }

.reviews-head { margin-top: 120px; max-width: 620px; }
.reviews-head .lead { margin-top: 16px; font-size: 15.5px; }
.reviews-head .sec-head__link { display: inline-block; margin-top: 18px; font-size: 14px; }
.reviews { margin-top: 48px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; padding-bottom: 4px; }
.reviews__row { overflow: hidden; }
.reviews__track { display: flex; gap: 20px; width: max-content; padding-right: 20px; }
.reviews__track--l { animation: marquee-l 60s linear infinite; }
.reviews__track--r { animation: marquee-r 66s linear infinite; }
.review {
  width: 400px; flex: none;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px;
}
.review blockquote { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.review figcaption { margin-top: 16px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- 12. 온보딩/보안 탭 (원본 .ob-tabs) ---------- */
.sec--onboard { padding: 96px 0 128px; }
.ob-tabs {
  display: flex; gap: 4px; width: max-content;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 99px; padding: 4px;
  margin-bottom: 40px;
}
.ob-tab { height: 38px; padding: 0 22px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--sub); line-height: 1; transition: background .2s ease, color .2s ease; }
.ob-tab.is-on { background: var(--blue); color: #fff; }
.ob-pane { display: none; }
.ob-pane.is-on { display: block; }
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 44px; }
.trust { border-top: 1px solid rgba(15, 23, 42, .12); padding: 22px 0 0; }
.trust__title { font-size: 16.5px; font-weight: 600; }
.trust__desc { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--sub); }

/* ---------- 13. 블로그 ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: flex; flex-direction: column; }
.post-card__thumb { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.post-card__thumb img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; transition: transform .3s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.03); }
.post-card__meta { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.post-card__date { font-size: 13px; color: var(--muted); }
.post-card__title { margin-top: 10px; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; }

/* ---------- 14. FAQ ---------- */
.faq { max-width: 792px; margin: 48px auto 0; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  padding: 26px 4px; cursor: pointer; list-style: none;
  font-size: 17.5px; font-weight: 600;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--muted); transition: transform .2s ease;
}
.faq__icon::before { left: 0; right: 0; top: 7px; height: 2px; }
.faq__icon::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__a { display: none; padding: 0 4px 26px; font-size: 15px; color: var(--sub); max-width: 760px; }
.faq__item.is-open .faq__a { display: block; }
.faq__share { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 64px; font-size: 14px; color: var(--muted); }

/* ---------- 15. CTA ---------- */
.sec--cta { text-align: center; }
.cta-btns { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }

/* ---------- 반응형 ---------- */
@media (max-width: 991px) {
  .proof2 { grid-template-columns: 1fr; gap: 48px; }
  .dt-grid { grid-template-columns: 1fr; gap: 40px; }
  .dt-pin { height: auto; }
  .dt-layout { position: static; height: auto; padding: 96px 0; }
  .dt-chat { height: auto; }
  .dt-steps-view { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .dt-steps { transform: none !important; }
  .dt-rail { display: none; }
  .dt-step { min-height: 0; opacity: 1; padding-left: 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bcard.w3, .bcard.w2 { grid-column: span 1; }
  .rp { grid-template-columns: 1fr; gap: 48px; }
  .cases { grid-template-columns: 1fr 1fr; }
  .pipe-steps { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
  .pstep:nth-child(5)::before { display: none; }
}
@media (max-width: 767px) {
  .sec--hero { padding-top: 150px; }
  .ticker { padding: 0 16px; margin-top: 48px; }
  .tk-items { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .tk:nth-child(3) { border-left: 0; padding-left: 0; }
  .pain-grid, .cases, .blog-grid, .trust-row { grid-template-columns: 1fr; }
  .trust-row { row-gap: 28px; }
  .proof2 .pf-row { padding: 22px 0; }
  .pf-big { font-size: 28px; }
  .statement-sec { padding: 96px 0; }
  .bento { grid-template-columns: 1fr; }
  .bcard { min-height: 0; padding: 28px 22px 0; }
  .review { width: 320px; }
  .case { min-height: 440px; }
  .dt-step { padding: 18px 0; }
  .dt-title { font-size: 20px; }
  .np-wrap { width: 100%; }
  .pipe-cut { display: none; }
  .seg { margin-bottom: 44px; }
  .pipe-sum { margin-top: 56px; }
}

/* ---------- 퍼널 바 폭 (안정적 ID 타기팅 백업) ---------- */
#fb-1 { --w: 100%; } #fb-2 { --w: 62%; } #fb-3 { --w: 31%; } #fb-4 { --w: 11%; }
#fb-5 { --w: 100%; } #fb-6 { --w: 58%; } #fb-7 { --w: 27%; } #fb-8 { --w: 9%; }

/* ---------- shared 반응형 ---------- */
@media (max-width: 991px) {
  :root { --sec-pad: 96px; }
}
@media (max-width: 767px) {
  :root { --sec-pad: 96px; }
  body { font-size: 16px; }
  .sec-head { margin-bottom: 40px; }
  .sec-head--split { flex-direction: column; align-items: flex-start; }
  .lead { font-size: 16px; }
}
@media (max-width: 478px) {
  :root { --sec-pad: 72px; --wrap-pad: 16px; }
}



/* ---------- 클래스 기반 표시/숨김 (hidden 속성 대체, 문서 CSS 이후 최우선) ---------- */
.b-popup:not(.is-open) { display: none !important; }
.b-popup.is-open { display: flex; }
.b-drawer:not(.is-open) { display: none !important; }
@media (min-width: 768px) {
  .b-drawer { display: none !important; }
}
.b-letter__done { display: none; }
.b-letter__done.is-visible { display: block; }

/* ---------- 데모 입력/체크박스 (input 요소 대체) ---------- */
.b-popup__input { display: flex; align-items: center; }
.b-popup__placeholder { color: var(--muted); font-size: 15px; }
.b-check__box { flex: none; width: 15px; height: 15px; margin-top: 2px; border: 1.5px solid var(--muted); border-radius: 3px; }

/* ---------- 리뷰 카드 합성 클래스 (blockquote/figcaption 태그 대체분) ---------- */
.review__q { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.review__who { margin-top: 16px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- Bricks flex 섹션 보정 ----------
   .brxe-section 기본값이 align-items: center(flex column)라 풀폭 컨테이너가
   내용 폭(fit-content)으로 수축하거나 최소내용폭을 밀어내 가로 오버플로가 생김.
   원본 클론의 block 동작(전체 폭)을 복원한다. */
.wrap { width: 100%; }
.sec > .logos,
.sec > .reviews,
.ticker > .ticker-in { width: 100%; }