@charset "utf-8";
/* ==========================================================================
   연결점 · home.css — 메인 홈페이지
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(168,85,247,.10), transparent 62%),
    radial-gradient(680px 480px at 12% 96%, rgba(0,194,179,.10), transparent 60%),
    linear-gradient(180deg,#FCFDFF 0%,#F4F7FE 52%,#FFFFFF 100%);
  padding-block:var(--s11) var(--s10);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:52px;align-items:center;
}
.hero h1{margin-top:var(--s4);font-size:clamp(30px,3.7vw,44px);letter-spacing:-.042em}
.hero h1 em{font-style:normal;color:var(--cobalt);position:relative}
.hero h1 b{font-weight:800;color:var(--orange)}
.hero__sub{margin-top:var(--s5);max-width:560px}
.hero__cta .btn{flex:1 1 auto;min-width:0}
@media (min-width:640px){.hero__cta .btn{flex:0 0 auto}}

/* AI 입력 박스 */
.aibox{
  margin-top:var(--s7);background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-3);max-width:600px;
}
.aibox__label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--gray-700)}
.aibox__label .spark{color:var(--lilac)}
.aibox__field{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  border:1.5px solid var(--gray-300);border-radius:var(--r-full);
  padding:0 6px 0 18px;height:54px;transition:border-color .16s,box-shadow .16s;
}
.aibox__field:focus-within{border-color:var(--lilac);box-shadow:0 0 0 4px var(--lilac-050)}
.aibox__field input{flex:1 1 0;width:100%;min-width:0;border:0;outline:none;background:none;
  font-size:15.5px;height:100%}
.aibox__field input::placeholder{color:var(--gray-400)}
.aibox__go{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--cobalt);color:#fff;transition:background .15s ease;
}
.aibox__go:hover{background:var(--cobalt-700)}
.aibox__note{margin-top:12px;font-size:12.5px;color:var(--gray-500);display:flex;gap:6px;align-items:flex-start}
.aibox__note svg{flex:none;margin-top:2px;color:var(--teal-700)}

.hero__cta{display:flex;gap:10px;margin-top:var(--s6);flex-wrap:wrap}
.hero__chips{margin-top:var(--s6)}
.hero__chips-label{font-size:12.5px;color:var(--gray-500);margin-bottom:9px;font-weight:500}
.hero__chips .chip-scroll{flex-wrap:wrap;overflow:visible}
@media (max-width:640px){.hero__chips .chip-scroll{flex-wrap:nowrap;overflow-x:auto}}

/* 히어로 비주얼 */
.hero__visual{position:relative}
.hero__visual img{
  width:100%;border-radius:var(--r-xl);
}
.hero__float{
  position:absolute;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:11px 14px;
  display:flex;align-items:center;gap:10px;font-size:12.5px;
}
.hero__float strong{font-size:14px;font-weight:700;color:var(--ink);display:block;line-height:1.3}
.hero__float span{color:var(--gray-500);font-size:11.5px}
.hero__float--a{left:-14px;top:12%}
.hero__float--b{right:-14px;bottom:10%}
.hero__float i{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;font-style:normal;
}

/* 데이터 스트립 */
.datastrip{
  margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid var(--gray-200);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.datastrip__foot{margin-top:var(--s4);font-size:12px;color:var(--gray-400)}

@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero__visual{order:-1;max-width:520px;margin-inline:auto}
  .hero__float{display:none}
  .aibox{max-width:none}
  .datastrip{grid-template-columns:repeat(2,1fr);gap:20px}
}

/* --------------------------------------------------------------------------
   공통: 섹션 번호 마커 (실제 순서 정보를 담는 경우에만)
   -------------------------------------------------------------------------- */
.seq{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--cobalt-050);color:var(--cobalt-700);
  font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;flex:none;
}

/* --------------------------------------------------------------------------
   03. 누구를 알고 계신가요 — 고객유형 카드
   -------------------------------------------------------------------------- */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.who__item{
  display:flex;gap:14px;padding:var(--s5);background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--r-md);
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.who__item:hover{border-color:var(--cobalt);box-shadow:var(--sh-2);transform:translateY(-2px)}
.who__ico{
  width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--cobalt-050);color:var(--cobalt);
}
.who__item>span:last-child{display:block;min-width:0}
.who__t{display:block;font-size:15.5px;font-weight:700;color:var(--ink)}
.who__d{display:block;font-size:13px;color:var(--gray-500);margin-top:4px;line-height:1.55}
.who__n{display:block;font-size:12px;font-weight:700;color:var(--orange);margin-top:8px}
@media (max-width:900px){.who{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.who{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   04. Referral Portfolio — 하나의 고객에서 이어지는 수요
   -------------------------------------------------------------------------- */
.portfolio{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s8);align-items:start;
}
.portfolio__anchor{
  background:linear-gradient(160deg,#152040,#0F172A);color:#fff;border-radius:var(--r-lg);
  padding:var(--s7);position:sticky;top:calc(var(--header-h) + 20px);
}
.portfolio__anchor h3{color:#fff;font-size:20px}
.portfolio__chain{display:flex;flex-direction:column;gap:10px}
.chain{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:15px 18px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r);
  transition:border-color .15s,transform .15s;
}
.chain:hover{border-color:var(--cobalt-100);transform:translateX(3px)}
.chain__n{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--gray-100);color:var(--gray-600);font-size:12.5px;font-weight:800;
}
.chain>span:nth-child(2){min-width:0}
.chain__t{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.chain__d{display:block;font-size:12.5px;color:var(--gray-500);margin-top:2px}
.chain__f{font-size:13.5px;font-weight:700;color:var(--orange-700);white-space:nowrap;text-align:right}
.chain__f span{display:block;font-size:11px;font-weight:500;color:var(--gray-400)}
@media (max-width:900px){
  .portfolio{grid-template-columns:1fr;gap:var(--s6)}
  .portfolio__anchor{position:static}
}

/* --------------------------------------------------------------------------
   05. 7단계 프로세스 — 시그니처 연결선
   -------------------------------------------------------------------------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:var(--s8)}
.steps::before{
  content:"";position:absolute;left:6%;right:6%;top:26px;height:2px;
  background-image:linear-gradient(to right,var(--gray-300) 46%,transparent 0);
  background-size:9px 2px;
}
.step{position:relative;text-align:center;padding-top:0}
.step__dot{
  width:52px;height:52px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  background:#fff;border:2px solid var(--gray-300);color:var(--gray-500);
  position:relative;z-index:1;transition:all .2s ease;
}
.step:hover .step__dot{border-color:var(--cobalt);color:var(--cobalt);box-shadow:0 0 0 6px var(--cobalt-050)}
.step--last .step__dot{border-color:var(--teal);color:var(--teal-700);background:var(--teal-050)}
.step__k{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--gray-400);margin-top:12px}
.step__t{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:3px}
.step__d{font-size:12px;color:var(--gray-500);margin-top:5px;line-height:1.5}
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(4,1fr);gap:20px 12px}
  .steps::before{display:none}
}
@media (max-width:600px){.steps{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------------------
   06. AI 분석 미리보기
   -------------------------------------------------------------------------- */
.aiprev{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--s9);align-items:center;
}
.aiprev__panel{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden;
}
.aiprev__bar{
  padding:14px 18px;background:var(--gray-050);border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--gray-600);
}
.aiprev__q{
  padding:16px 18px;font-size:14.5px;color:var(--ink);font-weight:600;
  border-bottom:1px solid var(--gray-100);background:var(--lilac-050);
}
.aires{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.aires__row{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px;border:1px solid var(--gray-200);border-radius:var(--r);
}
.aires__rank{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-size:13px;font-weight:800;
}
.aires__row>span:nth-child(2){min-width:0}
.aires__name{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.aires__act{display:block;font-size:12px;color:var(--gray-500);margin-top:2px}
.aires__val{text-align:right;white-space:nowrap}
.aires__erv{font-size:14px;font-weight:700;color:var(--orange-700)}
.aires__fit{font-size:11px;color:var(--gray-400)}
.aires__foot{padding:0 18px 18px}
@media (max-width:900px){.aiprev{grid-template-columns:1fr;gap:var(--s7)}}

/* --------------------------------------------------------------------------
   07. 정산 인증
   -------------------------------------------------------------------------- */
.settle{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.scard{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-md);
  padding:var(--s5);display:flex;flex-direction:column;gap:12px;
}
.scard__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.scard__amt{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.scard__meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
  padding-top:12px;border-top:1px dashed var(--gray-200)}
.scard__meta dt{font-size:11.5px;color:var(--gray-500)}
.scard__meta dd{font-size:13px;font-weight:600;color:var(--gray-900);margin:2px 0 0}
.scard__quote{font-size:13px;color:var(--gray-600);line-height:1.6;
  padding:11px 13px;background:var(--gray-050);border-radius:var(--r-sm)}
@media (max-width:900px){.settle{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   08. 3면 가치
   -------------------------------------------------------------------------- */
.tabbar{display:inline-flex;gap:4px;padding:5px;background:var(--gray-100);border-radius:var(--r-full)}
.tabbar button{
  height:40px;padding:0 20px;border-radius:var(--r-full);font-size:14.5px;font-weight:600;
  color:var(--gray-600);transition:all .16s ease;
}
.tabbar button.is-on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.value{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:var(--s9);align-items:center}
.value__list{display:flex;flex-direction:column;gap:14px;margin-top:var(--s6)}
.value__li{display:flex;gap:12px;align-items:flex-start}
.value__li i{
  width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--teal-050);color:var(--teal-700);font-style:normal;margin-top:1px;
}
.value__li b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.value__li p{font-size:13.5px;color:var(--gray-600);margin-top:3px;line-height:1.6}
@media (max-width:900px){.value{grid-template-columns:1fr;gap:var(--s6)}.value__img{order:-1}}

/* --------------------------------------------------------------------------
   09. Trust Score
   -------------------------------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.tcard{
  padding:var(--s6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
}
.tcard__w{font-size:12px;font-weight:700;color:var(--teal);letter-spacing:.04em}
.tcard__t{font-size:16.5px;font-weight:700;color:#fff;margin-top:8px}
.tcard__d{font-size:13.5px;color:#A9B4C7;margin-top:7px;line-height:1.62}
.tbar{height:5px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:16px;overflow:hidden}
.tbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),#4FE0D3)}
@media (max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   10. Partner OS
   -------------------------------------------------------------------------- */
.os{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--s9);align-items:center}
.os__feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s6)}
.os__item{padding:var(--s5);background:#fff;border:1px solid var(--gray-200);border-radius:var(--r)}
.os__item b{font-size:14.5px;font-weight:700;color:var(--ink);display:block}
.os__item p{font-size:13px;color:var(--gray-500);margin-top:5px;line-height:1.55}
@media (max-width:900px){.os{grid-template-columns:1fr;gap:var(--s7)}}
@media (max-width:520px){.os__feat{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   11. 가이드
   -------------------------------------------------------------------------- */
.guide{
  display:flex;flex-direction:column;gap:10px;padding:var(--s6);
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-md);height:100%;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.guide:hover{border-color:var(--cobalt-100);box-shadow:var(--sh-2);transform:translateY(-2px)}
.guide__t{font-size:16px;font-weight:700;color:var(--ink);line-height:1.45}
.guide__d{font-size:13.5px;color:var(--gray-600);line-height:1.6;flex:1}

/* --------------------------------------------------------------------------
   12. Final CTA
   -------------------------------------------------------------------------- */
.final{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#0F172A 0%,#1B2C57 55%,#23306B 100%);
  padding:var(--s11) var(--s9);color:#fff;
}
.final::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 260px at 88% 12%, rgba(255,106,0,.22), transparent 62%),
    radial-gradient(560px 300px at 8% 96%, rgba(0,194,179,.18), transparent 60%);
}
.final__in{position:relative;z-index:1}
.final h2{color:#fff}
.final__split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s8);max-width:840px;
  margin-inline:auto}
.final__card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);padding:var(--s6);text-align:left;
}
.final__card b{display:block;font-size:17px;font-weight:700;color:#fff}
.final__card p{font-size:13.5px;color:#B9C3D6;margin-top:7px;line-height:1.6;min-height:44px}
@media (max-width:768px){
  .final{padding:var(--s10) var(--s5)}
  .final__split{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   가로 스크롤 카드 레일
   -------------------------------------------------------------------------- */
.rail{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);
}
@media (max-width:1100px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .rail{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;margin-inline:-16px;padding-inline:16px;
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 84%;scroll-snap-align:start}
}