/* landing.css — new-design 리뉴얼 팔레트/컴포넌트. 순수 CSS, 의존성 0. */
:root{
  --lp-page:#EFEDE8; --lp-surface:#fff; --lp-soft:#F9FAFB;
  --lp-ink:#191F28; --lp-ink2:#4E5968; --lp-ink3:#6B7684; --lp-ink4:#8B95A1; --lp-ink5:#B0B8C1;
  --lp-line:#E5E8EB; --lp-line2:#F2F4F6; --lp-line3:#EBEEF1;
  --lp-blue:#2D6BFF; --lp-blue-tint:#F2F6FF; --lp-blue-tint2:#EAF1FF; --lp-blue-soft:#A8C3FF;
  --lp-green:#0DA05F; --lp-green-tint:#F0FAF4; --lp-green-tint2:#E7F6EE;
  --lp-amber:#D97706; --lp-amber-tint:#FFF8EE; --lp-amber-tint2:#FDF1DF;
  --lp-purple:#6B4EE6; --lp-purple-tint:#F4F1FF; --lp-purple-tint2:#EEE9FD;
  --lp-teal:#0E7570; --lp-teal-tint:#EFF7F6; --lp-teal-tint2:#E2F1F0;
}
/* 모바일 우선 폰 프레임 → 데스크톱에서 넉넉한 컨텐츠 폭으로 확장 */
.lp-page{background:var(--lp-page);min-height:100dvh}
.lp-frame{max-width:430px;margin:0 auto;background:var(--lp-surface);color:var(--lp-ink);
  font-family:Pretendard,system-ui,sans-serif;letter-spacing:-0.02em;-webkit-font-smoothing:antialiased;position:relative}
/* 폰 프레임 내부는 border-box로 통일 (width:100%+padding 요소의 가로 오버플로우 방지) */
.lp-frame *,.lp-frame *::before,.lp-frame *::after{box-sizing:border-box}
@media (min-width:768px){ .lp-frame{max-width:720px} }
.lp-frame a{text-decoration:none;color:inherit}
/* 스크롤 리빌: JS가 is-revealed 부여. no-JS/reduced-motion은 폴백에서 즉시 노출 */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none} }
/* 스탯 카드(가이드 히어로 3칸) */
.lp-stat{flex:1;border-radius:18px;padding:18px 12px;text-align:center}
.lp-stat__k{margin:0;font-size:11.5px;font-weight:700}
.lp-stat__v{margin:8px 0 0;font-size:17px;line-height:1.35;font-weight:800;font-variant-numeric:tabular-nums;word-break:keep-all}
/* 체크리스트 행(이런 분께 맞아요) */
.lp-check{display:flex;align-items:center;gap:12px;background:var(--lp-soft);border-radius:14px;padding:15px 18px}
.lp-check__i{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800}
.lp-check__t{margin:0;font-size:14px;font-weight:600;flex:1}
/* 절차 타임라인 스텝 */
.lp-step{display:flex;gap:16px}
.lp-step__rail{display:flex;flex-direction:column;align-items:center}
.lp-step__num{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:13px;font-weight:800}
.lp-step__line{width:2px;flex:1;background:var(--lp-line)}
.lp-step__body{padding-bottom:22px}
.lp-step__t{margin:2px 0 0;font-size:15px;font-weight:800}
.lp-step__d{margin:4px 0 0;font-size:13px;color:var(--lp-ink3)}
/* FAQ 항목 */
.lp-faq{padding:18px 0;border-bottom:1px solid var(--lp-line2)}
.lp-faq:last-child{border-bottom:0}
.lp-faq__q{margin:0;font-size:14.5px;font-weight:700}
.lp-faq__a{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:var(--lp-ink3)}
/* 가이드 칩 탭 */
.lp-chip{flex:none;font-size:13px;font-weight:700;border-radius:99px;padding:8px 14px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s;background:var(--lp-line2);color:var(--lp-ink2)}
/* 진단 퀴즈 옵션 */
.lp-quiz-opt{flex:1;display:flex;align-items:center;justify-content:center;height:52px;border:1px solid var(--lp-line);background:var(--lp-surface);border-radius:14px;font-size:14.5px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
/* 하단 고정 CTA */
.lp-sticky{position:sticky;bottom:0;z-index:40;display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #E5E8EB;box-shadow:0 -8px 28px rgba(25,31,40,0.16)}
@media (min-width:768px){ .lp-sticky{display:none} }
.lp-sticky a,.lp-sticky span{display:flex;align-items:center;justify-content:center;height:54px;border-radius:16px;font-size:15px;font-weight:700;cursor:pointer}
.lp-sticky__tel{flex:1;background:var(--lp-line2);color:var(--lp-ink)}
.lp-sticky__cta{flex:1.6;color:#fff}
.lp-sticky__menu{position:relative;flex:none}
.lp-sticky__menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;height:54px;padding:0 15px;border-radius:16px;background:var(--lp-line2);color:var(--lp-ink);font-size:14px;font-weight:700;cursor:pointer}
.lp-sticky__menu>summary::-webkit-details-marker{display:none}
.lp-sticky__menu-panel{position:absolute;left:0;bottom:calc(100% + 8px);min-width:190px;background:#fff;border:1px solid var(--lp-line);border-radius:16px;box-shadow:0 -8px 28px rgba(25,31,40,.18);overflow:hidden;display:flex;flex-direction:column}
.lp-sticky__menu-panel a{height:auto;justify-content:flex-start;padding:14px 18px;font-size:15px;font-weight:600;color:var(--lp-ink);border-radius:0;border-bottom:1px solid var(--lp-line2)}
.lp-sticky__menu-panel a:last-child{border-bottom:0}
/* 키보드 포커스 가시성 (role=button/tab/link span) */
.lp-quiz-opt:focus-visible,.lp-chip:focus-visible,[data-gtab]:focus-visible,[data-stack-btn]:focus-visible{outline:2px solid var(--lp-blue);outline-offset:2px}

/* ── 히어로 (모바일 기본: 기존 인라인 재현) ── */
.lp-hero__eyebrow{margin:0;font-size:13px;font-weight:700;color:var(--lp-blue);text-align:center}
.lp-hero__title{margin:10px 0 0;font-size:34px;line-height:1.36;font-weight:800;letter-spacing:-0.03em;text-align:center}
.lp-hero__title span{color:var(--lp-blue)}
.lp-hero__sub{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--lp-ink3);text-align:center}
.lp-hero__visual{margin-top:36px}
.lp-stack__dots{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:16px}
.lp-hero__cta{display:flex;align-items:center;justify-content:center;height:56px;border-radius:16px;background:var(--lp-blue);color:#fff;font-size:16.5px;font-weight:700;margin-top:24px}
.lp-hero__note{margin:12px 0 0;font-size:12px;color:var(--lp-ink5);text-align:center}
.lp-hero__process{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--lp-ink3);text-align:center}
.lp-hero__process span{color:var(--lp-blue-soft);margin:0 4px;font-weight:700}

/* ── 데스크톱 레이아웃 (≥1024px): 폰 프레임 → 넉넉한 2단/그리드 ── */
@media (min-width:1024px){
  /* 콘텐츠 폭을 960px 하나로 통일 → 전 섹션이 동일 좌측선(패딩 22px 안쪽) 공유.
     이전엔 프레임 1120에 섹션별 640/680/720/820 제각각이라 좌우 붙음·중앙 공백이 섞였음. */
  .lp-frame{max-width:960px}
  /* 히어로: 좌측=카피+CTA / 우측=카드스택(2행 span). 상단 정렬로 좌측 대공백 제거 */
  .lp-hero{display:grid;grid-template-columns:1fr 430px;grid-template-areas:"copy visual" "actions visual";column-gap:56px;align-items:start;padding:72px 22px 88px !important}
  .lp-hero__copy{grid-area:copy;text-align:left}
  .lp-hero__eyebrow{font-size:15px;text-align:left}
  .lp-hero__title{font-size:48px;line-height:1.18;margin-top:14px;text-align:left}
  .lp-hero__sub{font-size:19px;margin-top:20px;text-align:left}
  .lp-hero__visual{grid-area:visual;margin-top:0;align-self:center}
  .lp-hero__actions{grid-area:actions;max-width:380px;margin-top:36px}
  .lp-hero__actions .lp-hero__cta{margin-top:0}
  /* 카드 리스트를 3단 그리드로 (인라인 flex-column override) */
  .lp-grid3{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:16px !important;align-items:stretch}
  /* 홈 단일컬럼 박스들(calc/plist/quiz/narrow/guidegrid): 별도 폭 제약 없이
     섹션 패딩(22px)만으로 916px full → 헤딩과 좌측선 통일. (아래 840은 guide 문서 탭 전용) */
  /* 가이드(문서형 탭): 읽기 좋은 폭으로 중앙 정렬 */
  .lp-gtabbar{max-width:840px;margin-inline:auto}
  [data-gpanel] > div{max-width:840px;margin-inline:auto}
  .lp-grid2{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important}
}

/* ── index LP: 헤더·상담폼을 본문 프레임(.lp-frame) 좌우 기준선(22px)에 정렬 ──
   헤더는 .lp-frame 바깥(.b-page)이고 b-container(1160계)를 써서 본문(1120)과 좌측선이 어긋났음.
   프레임 폭을 브레이크포인트별로 그대로 미러링해 로고/내비 좌측선을 섹션과 일치시킴. */
.lp-page .b-header__inner{width:100%;max-width:430px;padding-inline:22px}
.lp-page .b-form-section .b-container{width:100%;padding-inline:22px}
@media (min-width:768px){ .lp-page .b-header__inner{max-width:720px} }
@media (min-width:1024px){
  .lp-page .b-header__inner{max-width:960px}
  /* 상담폼: 히어로와 동일 리듬(1fr + 고정 우측컬럼 + gap 48)으로 중앙 공백 축소,
     소개글이 위로 쏠리지 않게 긴 폼카드 기준 세로 가운데 정렬 */
  .lp-page .b-form-grid{grid-template-columns:1fr 460px;gap:48px;align-items:center}
}