/* 소개 한 장의 본 — 구간 리듬 (2026-09-21).

   권민준님 「아이넥스를 벤치마크해서 디자인 뽑자」 → 「바스락 노비스타메인 뜨락 글로우업 메디스 진행해」
   정본 brief/novista/NOVISTA_INTRO_PATTERN_2026-09-21.md

   ainex.chat/intro 를 실측해 뽑은 값입니다.
     · 구간 위아래 여백 **96px 고정**(휴대폰 64) — 히어로만 150/110
     · 바탕을 흰색 ↔ 연회색 **번갈아** 둬 경계를 만들고, 마지막 한 칸만 짙게 눌러 끝냅니다
     · 본문 16px / 행간 28px(1.75)
     · 전환 **0.2s** 가 주. 나타나기만 0.45s — 화려한 스크롤 연출은 넣지 않습니다
       https://www.nngroup.com/articles/animation-purpose-ux/

   🔴 **서비스마다 다른 것은 강조색 하나뿐입니다.** 쓰는 쪽에서 `--nv-accent` 만 바꾸십시오.
      뼈대(HTML·CSS·움직임)는 같이 쓰고 색만 흘려 보내는 꼴입니다. 색까지 서비스마다 새로 짜면
      한 집으로 안 보이고, 고칠 곳이 다섯 군데가 됩니다.
      https://bradfrost.com/blog/post/creating-themeable-design-systems/

   쓰는 법
      <link rel="stylesheet" href="/_design/brand/intro.css?v=1">
      <script src="/_design/brand/intro.js?v=1" defer></script>
      <section class="nv-sec"><div class="nv-sec-in">…</div></section>  ·  <section class="nv-sec alt">…</section>
      나타나게 할 것에 class="rv"
*/
:root{
  --nv-ink:#171A1F; --nv-sub:#5B6472; --nv-line:#E6E9EE;
  --nv-paper:#FFFFFF; --nv-paper2:#F6F7F9; --nv-deep:#1C2333;
  --nv-accent:#2F6FEB;            /* 🔴 서비스마다 이것만 바꿉니다 — 면·단추에 씁니다 */
  --nv-accent-ink:#2558C4;        /* 🔴 **글자용**. 브랜드 색 그대로 글자에 쓰면 대비가 모자랍니다.
                                     실측 — #2F6FEB 는 밝은 바탕에서 4.30:1 로 기준(4.5) 아래였습니다.
                                     브랜드 색은 그대로 두고 글자만 한 단 진하게 쓰는 것이 밖의 관행입니다.
                                     https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html */
  --nv-w:1120px;                  /* 본문 폭 — 바스락처럼 좁게 쓰는 곳은 이것만 줄입니다 */
  --nv-pad:96px;
}

/* ── 구간 ────────────────────────────────────────────────── */
/* 🔴 구간은 **화면 전체폭**이어야 바탕 번갈이가 보입니다.
   감싸는 곳(main 등)이 max-width 로 묶고 있으면 회색 띠가 그 안에만 칠해져
   구간 경계가 안 보입니다(2026-09-21 바스락 실측 — 828px 안에만 칠해졌음).
   감싸는 곳의 폭을 풀고, 폭은 `.nv-sec-in` 이 잡게 하십시오. */
.nv-sec{padding:var(--nv-pad) 0;scroll-margin-top:80px}
/* 🔴 머리글이 붙박이면 앵커로 뛸 때 제목이 그 뒤에 숨습니다(머리글 64 + 여유 16). */
.nv-sec.alt{background:var(--nv-paper2)}
.nv-sec.end{background:var(--nv-deep);color:#fff;text-align:center}
.nv-sec.end h2{color:#fff}
.nv-sec.end .nv-lede{color:#AEB7C6;margin-left:auto;margin-right:auto}
.nv-sec.end .nv-row{justify-content:center}
.nv-sec-in{max-width:var(--nv-w);margin:0 auto;padding:0 24px}
/* 🔴 이름을 `.nv-in` 으로 두지 않습니다 — 바스락 네비(nav.py)가 이미 그 이름을
   display:flex 로 쓰고 있어 카드가 한 줄로 늘어서며 휴대폰에서 445px 로 넘쳤습니다(실측). */

/* ── 글 ──────────────────────────────────────────────────── */
.nv-sec h2{margin:0;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.nv-sec h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.nv-eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--nv-accent-ink);margin:0 0 14px}
/* 🔴 자간을 로마자처럼 벌리면 한글이 흩어져 보입니다 — .06em 까지만. */
.nv-lede{margin:18px 0 0;max-width:620px;color:var(--nv-sub)}

/* ── 카드 — 걱정·강점·단계를 한 꼴로 ─────────────────────── */
.nv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:40px}
.nv-card{background:#fff;border:1px solid var(--nv-line);border-radius:14px;padding:26px}
.nv-card p{margin:10px 0 0;color:var(--nv-sub);font-size:15px}
.nv-num{width:30px;height:30px;border-radius:50%;background:var(--nv-accent);color:#fff;
        font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.nv-mk{width:46px;height:46px;margin-bottom:16px;display:block}
/* 🔴 46px 아래로 내리면 심볼이 뭉갭니다(2026-09-21 38px 실측). */

/* ── 단추 — 주 하나, 보조 하나. 셋은 두지 않습니다 ───────── */
.nv-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;
         border-radius:10px;text-decoration:none;font-weight:600;font-size:16px;border:1px solid transparent;
         transition:background .2s,border-color .2s,color .2s}
.nv-btn2.p{background:var(--nv-accent);color:#fff}
.nv-btn2.p:hover{filter:brightness(.93)}
.nv-btn2.s{border-color:var(--nv-line);color:var(--nv-ink);background:#fff}
.nv-btn2.s:hover{border-color:var(--nv-sub)}
.nv-sec.end .nv-btn2.s{background:transparent;border-color:#3A4457;color:#fff}
.nv-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ── 나타나기 — 한 번만, 짧고 얌전하게 ───────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* 🔴 자바스크립트가 안 돌면 영영 안 보입니다 — intro.js 가 맨 먼저 이 표시를 떼어 켭니다. */
html:not(.nv-rv) .rv{opacity:1;transform:none}

@media (max-width:860px){
  :root{--nv-pad:64px}
  .nv-sec h2{font-size:26px}
}