/* 고객 포털 — 랜딩과 안내 한 장짜리 화면. Crest: 히어로 Display 2/3 · 구역 제목 Title 1/2 · 카드 제목 Headline 1 */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-margin-mobile); }

/* 위쪽 막대 — 56 + 1px 선 */
.p-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--background-normal) 88%, transparent); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  box-shadow: inset 0 -0.5px 0 var(--line-normal-neutral); }
.p-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
@media (min-width: 900px) { .p-nav .wrap { height: 60px; } }
.logo { display: inline-flex; align-items: center; }
.p-nav nav { display: flex; align-items: center; gap: var(--space-24); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--label-alternative); }
.p-nav nav a:hover { color: var(--label-normal); }
.p-nav .keep { color: var(--primary-normal); font-weight: 600; }
.p-nav .linkbtn { font-size: 15px; }

/* 첫 화면 */
.hero { padding: var(--space-48) 0 var(--space-64); overflow: hidden; }
.hero .wrap { display: grid; gap: var(--space-48); }
.hero h1 { font-size: 36px; line-height: 48px; font-weight: 700; letter-spacing: -0.027em; margin: var(--space-16) 0 var(--space-20); color: var(--label-strong); }
.hero h1 em { font-style: normal; color: var(--primary-normal); }
.hero .lead { font-size: 17px; line-height: 28px; color: var(--label-neutral); max-width: 540px; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-32); }
.hero .cta small { color: var(--label-alternative); font-size: 14px; }
.pains { list-style: none; padding: 0; margin: var(--space-28) 0 0; display: grid; gap: var(--space-8); font-size: 15px; line-height: 22px; color: var(--label-neutral); }
.pains li { padding-left: var(--space-20); position: relative; }
.pains li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--primary-normal); }

/* 보고서 미리보기 그림 */
.preview { position: relative; min-height: 470px; }
.doc { position: absolute; background: var(--background-elevated); border-radius: var(--radius-16); box-shadow: var(--shadow-heavy); padding: var(--space-24); width: min(360px, 88%); }
.doc.back { right: 0; top: 300px; transform: rotate(3deg); z-index: 2; }
.doc.front { left: 0; top: 0; transform: rotate(-2deg); }
.doc .doc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-16); }
.doc .doc-title { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--label-strong); }
.doc .doc-co { font-size: 13px; color: var(--label-alternative); }
.doc .row { margin: var(--space-12) 0; }
.doc .row p { font-size: 13px; color: var(--label-alternative); margin-bottom: var(--space-6); }
.bar { height: 8px; border-radius: var(--radius-full); background: var(--fill-normal); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary-normal); }
.bar.o i { background: var(--status-cautionary); }
.doc .pick { margin-top: var(--space-16); padding: var(--space-12) var(--space-16); border-radius: var(--radius-12); background: var(--cr-primary-soft); display: flex; justify-content: space-between; align-items: center; }
.doc .pick b { color: var(--primary-normal); font-size: 17px; }
.doc .pick span { font-size: 13px; color: var(--label-neutral); }
.slot { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
.slot span { font-size: 13px; text-align: center; padding: var(--space-8) 0; border-radius: var(--radius-8); background: var(--fill-alternative); color: var(--label-neutral); }
.slot span.on { background: var(--primary-normal); color: var(--static-white); font-weight: 600; }

/* 구역 공통 — SectionHeader */
section.block { padding: var(--space-64) 0; }
section.block#process { background: var(--background-alternative); }
.block-head { margin-bottom: var(--space-32); }
.block-head .eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--primary-normal); }
.block-head h2 { font-size: 28px; line-height: 38px; font-weight: 700; letter-spacing: -0.024em; margin-top: var(--space-8); color: var(--label-strong); }
.block-head .sub { margin-top: var(--space-12); font-size: 16px; line-height: 26px; color: var(--label-neutral); max-width: 720px; }

/* 받으시는 것 */
.gets { display: grid; gap: var(--space-12); }
.get { background: var(--background-normal); border-radius: var(--radius-16); padding: var(--space-24); box-shadow: var(--cf-card); }
.get .ico { width: 44px; height: 44px; border-radius: var(--radius-12); background: var(--cr-primary-soft); display: grid; place-items: center; margin-bottom: var(--space-16); }
.get .ico svg { width: 22px; height: 22px; stroke: var(--primary-normal); }
.get h3 { font-size: 18px; line-height: 26px; font-weight: 600; margin-bottom: var(--space-8); }
.get p { font-size: 15px; line-height: 24px; color: var(--label-neutral); }

.final-cta { background: var(--background-normal); border-radius: var(--radius-20); box-shadow: var(--cf-card); padding: var(--space-40) var(--space-24); text-align: center; display: grid; gap: var(--space-16); justify-items: center; }
.final-cta h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.023em; }
.final-cta small { color: var(--label-alternative); font-size: 14px; }
.final-cta small a { text-decoration: underline; }

.p-foot { padding: var(--space-40) 0 var(--space-48); color: var(--label-alternative); font-size: 14px; }
.p-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); justify-content: space-between; }

@media (max-width: 640px) {
  .p-nav nav a:not(.keep) { display: none; }
}
@media (min-width: 900px) {
  .hero { padding: 88px 0 96px; }
  .hero .wrap { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .hero h1 { font-size: 40px; line-height: 52px; letter-spacing: -0.0282em; }
  .hero .lead { font-size: 18px; line-height: 28px; }
  .block-head h2 { font-size: 32px; line-height: 44px; letter-spacing: -0.0253em; }
  .gets { grid-template-columns: repeat(3, 1fr); }
}

/* 안내 한 장짜리 화면 (링크 도착 등) */
.notice { min-height: calc(100vh - 60px); background: var(--background-alternative); display: grid; place-items: center; padding: var(--space-40) var(--page-margin-mobile); }
.notice-card { background: var(--background-normal); border-radius: var(--radius-20); box-shadow: var(--cf-card); padding: var(--space-40) var(--space-28); max-width: 460px; width: 100%; text-align: center; }
.notice-card .ico { width: 64px; height: 64px; border-radius: var(--radius-20); margin: 0 auto var(--space-20); display: grid; place-items: center; background: var(--cr-primary-soft); }
.notice-card .ico svg { width: 30px; height: 30px; stroke: var(--primary-normal); }
.notice-card h1 { font-size: 22px; line-height: 30px; font-weight: 600; margin-bottom: var(--space-12); }
.notice-card p { color: var(--label-neutral); font-size: 15px; line-height: 24px; }
.notice-card .co { display: inline-flex; margin-bottom: var(--space-16); }