@charset "utf-8";
/* ============================================================
   스마트테스트 소개/시작 (intro/landing) — pixel-perfect
   Scoped under .pb-stindex. Page-specific only.
   ============================================================ */

/* 이 페이지는 디자인상 브레드크럼/페이지 타이틀이 없다 */
.pb-stindex{ font-family:"Pretendard",sans-serif; }
.pb-container.pb-page > .pb-breadcrumb,
.pb-container.pb-page > .pb-page-title{ display:none; }
/* 컨테이너 좌우 패딩 최소화 (디자인 폭 1198px) */
.pb-stindex .sti-wrap{ max-width:1198px; margin:0 auto; padding:18px 0 40px; }

/* ---------- HERO ---------- */
.pb-stindex .sti-hero{ position:relative; display:flex; justify-content:space-between;
  align-items:flex-start; gap:40px; padding-top:18px; }
.pb-stindex .sti-hero__copy{ flex:1 1 auto; max-width:560px; }

.pb-stindex .sti-kicker{ position:relative; display:inline-block; color:#2D72E2;
  font-weight:700; font-size:15px; letter-spacing:.2px; line-height:20px; padding-bottom:18px; }
.pb-stindex .sti-kicker__line{ position:absolute; left:0; bottom:6px; width:88px; height:2px;
  background:#2D72E2; border-radius:1px; }

.pb-stindex .sti-title{ font-family:"Pretendard",sans-serif; font-weight:700; font-size:30px;
  line-height:1.3; color:#08102A; margin:8px 0 0; }
.pb-stindex .sti-title span{ color:#2D72E2; }

.pb-stindex .sti-lead{ margin:18px 0 0; font-family:"Pretendard",sans-serif; font-weight:500;
  font-size:16px; line-height:26px; color:#262F49; }

.pb-stindex .sti-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.pb-stindex .sti-chip{ display:inline-flex; align-items:center; gap:6px; height:26px;
  padding:0 13px; border-radius:20px; font-family:"Pretendard",sans-serif; font-weight:700;
  font-size:12px; line-height:20px; border:1px solid; }
.pb-stindex .sti-chip svg{ width:14px; height:14px; flex-shrink:0; }
.pb-stindex .sti-chip--space   { color:#2D72E2; background:#F0F7FF; border-color:#2D72E2; }
.pb-stindex .sti-chip--memory  { color:#12AC64; background:#EDFAF4; border-color:#12AC64; }
.pb-stindex .sti-chip--analysis{ color:#FF7416; background:#FFF6EB; border-color:#FF7416; }
.pb-stindex .sti-chip--reasoning{color:#7046EE; background:#F6F2FF; border-color:#7046EE; }
.pb-stindex .sti-chip--thinking{ color:#F43886; background:#FFF2F8; border-color:#F43886; }
.pb-stindex .sti-chip{ white-space:nowrap; }
.pb-stindex .sti-chip b{ font-weight:800; font-size:13px; margin-right:1px; }

/* ---------- HERO STAT BANNER ---------- */
.pb-stindex .sti-banner{ position:relative; flex:0 0 474px; width:474px; height:157px;
  margin-top:30px; background:#2D72E2; border-radius:20px;
  box-shadow:0 20px 46px rgba(23,46,89,.16); display:flex; align-items:center; gap:18px;
  padding:0 22px; }
.pb-stindex .sti-banner__donut{ position:relative; flex:0 0 109px; width:109px; height:109px; }
.pb-stindex .sti-banner__donut svg{ width:109px; height:109px; display:block; }
.pb-stindex .sti-banner__pct{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:#fff; line-height:1; }
.pb-stindex .sti-banner__pct b{ font-family:"Pretendard",sans-serif; font-weight:700;
  font-size:30px; line-height:1; }
.pb-stindex .sti-banner__pct i{ font-style:normal; font-family:"Pretendard",sans-serif;
  font-weight:700; font-size:17px; margin-left:2px; }
.pb-stindex .sti-banner__txt{ flex:1 1 auto; color:#fff; font-family:"Pretendard",sans-serif;
  font-weight:500; font-size:14px; line-height:20px; max-width:175px; margin:0; }
.pb-stindex .sti-banner__trophy{ position:absolute; right:-46px; bottom:-10px; height:180px;
  width:auto; pointer-events:none; }

/* ---------- MAIN GRID ---------- */
.pb-stindex .sti-main{ display:grid; grid-template-columns:497px 1fr; gap:24px;
  align-items:start; margin-top:32px; }

/* form card */
.pb-stindex .sti-form{ background:#fff; border:1px solid #DAE4F3; border-radius:22px;
  box-shadow:0 14px 36px rgba(23,46,89,.08); padding:40px 35px; height:372px; box-sizing:border-box; }
.pb-stindex .sti-form__title{ display:flex; align-items:center; gap:10px;
  font-family:"Pretendard",sans-serif; font-weight:700;
  font-size:28px; line-height:36px; color:#08102A; margin:0 0 28px; }
.pb-stindex .sti-form__icon{ width:100px; height:48px; object-fit:contain; flex-shrink:0; }
.pb-stindex .sti-field{ display:flex; align-items:center; gap:18px; margin-bottom:23px; }
.pb-stindex .sti-field__lb{ flex:0 0 72px; font-family:"Pretendard",sans-serif; font-weight:700;
  font-size:15px; color:#08102A; }
.pb-stindex .sti-field__in{ position:relative; flex:1 1 auto; height:55px; }
.pb-stindex .sti-field__ic{ position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; pointer-events:none; }
.pb-stindex .sti-field__ic--cal{ pointer-events:auto; cursor:pointer; }
.pb-stindex .sti-field__date{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:1px; height:1px; opacity:0; border:0; padding:0; pointer-events:none; }
.pb-stindex .sti-field__in input{ width:100%; height:55px; box-sizing:border-box;
  border:1px solid #DAE4F3; border-radius:9px; padding:0 16px 0 42px; background:#fff;
  font-family:"Pretendard",sans-serif; font-weight:500; font-size:16px; color:#08102A; outline:none; }
.pb-stindex .sti-field__in input::placeholder{ color:#768094; font-weight:500; }
.pb-stindex .sti-field__in input:focus{ border-color:#2D72E2; }
.pb-stindex .sti-start{ display:block; width:356px; max-width:100%; height:55px; margin:30px auto 0;
  background:#2D72E2; color:#fff; border:0; border-radius:99px; cursor:pointer;
  box-shadow:0 14px 28px rgba(23,46,89,.2); font-family:"Pretendard",sans-serif;
  font-weight:700; font-size:18px; line-height:24px; transition:background .15s; }
.pb-stindex .sti-start:hover{ background:#1F5FCB; }

/* step cards */
.pb-stindex .sti-steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 16px;
  align-content:start; }
.pb-stindex .sti-step{ position:relative; min-width:0; background:#fff; border:1px solid #DAE4F3;
  border-radius:18px; box-shadow:0 14px 36px rgba(23,46,89,.08); height:177px;
  padding:30px 28px; box-sizing:border-box; overflow:hidden; }
.pb-stindex .sti-step__head{ display:flex; align-items:center; gap:16px; }
.pb-stindex .sti-step__no{ flex:0 0 54px; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Pretendard",sans-serif; font-weight:700; font-size:22px; line-height:30px; }
.pb-stindex .sti-step__title{ min-width:0; font-family:"Pretendard",sans-serif; font-weight:700;
  font-size:21px; line-height:28px; word-break:keep-all; }
.pb-stindex .sti-step__line{ display:block; width:130px; height:1px; background:#DAE4F3;
  border-radius:999px; margin:14px 0 0 70px; }
.pb-stindex .sti-step__desc{ position:relative; z-index:1; margin:9px 0 0 70px; max-width:160px;
  font-family:"Pretendard",sans-serif; font-weight:500; font-size:14px; line-height:23px; color:#262F49; }
.pb-stindex .sti-step__ill{ position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:auto; pointer-events:none; }
.pb-stindex .sti-step--01 .sti-step__no   { background:#E8F2FF; border:1px solid #2D72E2; color:#2D72E2; }
.pb-stindex .sti-step--01 .sti-step__title{ color:#2D72E2; }
.pb-stindex .sti-step--01 .sti-step__ill  { height:84px; }
.pb-stindex .sti-step--02 .sti-step__no   { background:#E6F8EF; border:1px solid #12AC64; color:#12AC64; }
.pb-stindex .sti-step--02 .sti-step__title{ color:#12AC64; }
.pb-stindex .sti-step--02 .sti-step__ill  { height:84px; }
.pb-stindex .sti-step--03 .sti-step__no   { background:#FFF1E6; border:1px solid #FF7416; color:#FF7416; }
.pb-stindex .sti-step--03 .sti-step__title{ color:#FF7416; }
.pb-stindex .sti-step--03 .sti-step__ill  { height:88px; }
.pb-stindex .sti-step--04 .sti-step__no   { background:#F1ECFE; border:1px solid #7046EE; color:#7046EE; }
.pb-stindex .sti-step--04 .sti-step__title{ color:#7046EE; }
.pb-stindex .sti-step--04 .sti-step__ill  { height:84px; }

/* ---------- BOTTOM NOTE ---------- */
.pb-stindex .sti-note{ position:relative; display:flex; align-items:center; justify-content:flex-start;
  gap:24px; height:112px; margin-top:32px; background:#FAFCFF; border:1px solid #DAE4F3;
  border-radius:7px; padding:0 70px 0 205px; overflow:hidden; }
.pb-stindex .sti-note__child{ position:absolute; left:3px; bottom:0; height:110px; width:auto;
  pointer-events:none; }
.pb-stindex .sti-note__txt{ margin:0; font-family:"Pretendard",sans-serif; font-weight:600;
  font-size:21px; line-height:30px; color:#08102A; }
.pb-stindex .sti-note__bulb{ position:absolute; right:75px; top:50%; transform:translateY(-50%);
  width:60px; height:auto; pointer-events:none; }

/* ---------- RESPONSIVE ---------- */
/* 1300px 미만: 폼카드(위) / 스텝카드(아래)로 세로 배치 */
@media (max-width:1300px){
  .pb-stindex .sti-main{ grid-template-columns:1fr; gap:22px; }
  .pb-stindex .sti-form{ height:auto; }
}
@media (max-width:1200px){
  .pb-stindex .sti-wrap{ padding-left:14px; padding-right:14px; }
}
@media (max-width:960px){
  .pb-stindex .sti-hero{ flex-direction:column; }
  .pb-stindex .sti-banner{ width:100%; flex-basis:auto; margin-top:8px;
    height:auto; min-height:140px; padding:16px 20px; overflow:hidden; }
  /* 트로피가 텍스트를 가리지 않도록 오른쪽 공간 확보 */
  .pb-stindex .sti-banner__txt{ max-width:none; padding-right:104px; }
  .pb-stindex .sti-banner__trophy{ right:6px; bottom:0; height:120px; }
}
@media (max-width:680px){
  /* 모바일: 카드가 좁으면 일러스트가 제목을 가리므로 1열로 전환 */
  .pb-stindex .sti-steps{ grid-template-columns:1fr; gap:12px; }
  .pb-stindex .sti-step{ height:auto; min-height:148px; padding:18px 15px; }
  .pb-stindex .sti-step__head{ gap:10px; }
  .pb-stindex .sti-step__no{ flex:0 0 38px; width:38px; height:38px; font-size:16px; line-height:1; }
  .pb-stindex .sti-step__title{ font-size:16px; line-height:22px; }
  .pb-stindex .sti-step__line{ width:64px; margin:12px 0 0 0; }
  .pb-stindex .sti-step__desc{ margin:8px 0 0 0; max-width:none; font-size:13px; line-height:19px; }
  .pb-stindex .sti-step__ill{ right:10px; top:12px; transform:none; }
  .pb-stindex .sti-step--01 .sti-step__ill,
  .pb-stindex .sti-step--02 .sti-step__ill,
  .pb-stindex .sti-step--03 .sti-step__ill,
  .pb-stindex .sti-step--04 .sti-step__ill{ height:38px; }
  .pb-stindex .sti-note{ height:auto; flex-direction:column; padding:24px; text-align:center; }
  .pb-stindex .sti-note__child,.pb-stindex .sti-note__bulb{ display:none; }
  .pb-stindex .sti-note__txt{ font-size:18px; }
  /* 폼 카드: 고정폭 요소가 화면을 넘기지 않도록 */
  .pb-stindex .sti-form{ padding:28px 20px; }
  .pb-stindex .sti-field{ gap:12px; }
  .pb-stindex .sti-field__lb{ flex-basis:60px; }
  .pb-stindex .sti-field__in{ min-width:0; }
  .pb-stindex .sti-field__in input{ min-width:0; }
  .pb-stindex .sti-start{ width:100%; }
}
/* 모바일 배너 (Figma 470:11902 — 도넛 64px + 텍스트, 트로피 없음) */
@media (max-width:560px){
  .pb-stindex .sti-banner{ gap:14px; padding:18px 20px; min-height:120px; }
  .pb-stindex .sti-banner__donut{ flex-basis:64px; width:64px; height:64px; }
  .pb-stindex .sti-banner__donut svg{ width:64px; height:64px; }
  .pb-stindex .sti-banner__pct b{ font-size:18px; }
  .pb-stindex .sti-banner__pct i{ font-size:11px; }
  /* 트로피 제거 → 텍스트가 카드 폭 전체 사용 */
  .pb-stindex .sti-banner__trophy{ display:none; }
  .pb-stindex .sti-banner__txt{ max-width:none; padding-right:0; font-size:14px; line-height:20px; }
}