/* ============================================================
   신차핏 newcarfit.com — Design System
   v1.0 · 2026-08-18 · 모바일 390 우선 / 데스크톱 1440
   ============================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root{
  /* Brand */
  --nf-navy-900:#0E1A2B;
  --nf-navy-800:#152740;
  --nf-navy-700:#1E3557;
  --nf-navy-100:#DCE4EE;

  /* Accent (절제된 블루 — 링크·포커스·진행 표시 전용) */
  --nf-blue-700:#22499E;
  --nf-blue-600:#2C5CC5;
  --nf-blue-100:#DCE7F9;
  --nf-blue-50:#EFF4FC;

  /* Crimson (행동색 — CTA 전용. 오류색과 색상각을 벌려 혼동 방지) */
  --nf-crimson-600:#A31545;   /* 흰 텍스트 대비 7.63:1 */
  --nf-crimson-700:#84102F;
  --nf-crimson-800:#6E0C27;
  --nf-crimson-300:#FF8FA6;   /* 네이비 위 텍스트 대비 8.10:1 */
  --nf-crimson-200:#FFC2CE;   /* 사진+오버레이 위 텍스트용 */

  /* Ink */
  --nf-ink-900:#0F1519;
  --nf-ink-700:#2C3742;
  --nf-ink-600:#4B5763;
  --nf-ink-400:#66727F;   /* 흰 4.91:1 / 연회색 4.65:1 */
  --nf-ink-300:#78848F;   /* 보조·플레이스홀더 등급 */

  /* Surface & line */
  --nf-bg:#FFFFFF;
  --nf-bg-alt:#F7F9FB;
  --nf-bg-sunken:#EEF2F6;
  --nf-line:#E4E8ED;
  --nf-line-strong:#CBD3DC;
  --nf-silver:#B7C0CA;

  /* Status */
  --nf-success:#0E6245;  --nf-success-bg:#E8F4EF;
  --nf-warn:#875200;     --nf-warn-bg:#FDF3E2;
  --nf-error:#B3261E;    --nf-error-bg:#FCEEEC;

  /* Type */
  --nf-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
            "Apple SD Gothic Neo","Noto Sans CJK KR","Noto Sans KR","Malgun Gothic",sans-serif;

  --nf-fs-display:38px; --nf-lh-display:1.16;
  --nf-fs-h1:28px;      --nf-lh-h1:1.26;
  --nf-fs-h2:24px;      --nf-lh-h2:1.30;
  --nf-fs-h3:17px;      --nf-lh-h3:1.45;
  --nf-fs-lead:15px;    --nf-lh-lead:1.72;
  --nf-fs-body:15px;    --nf-lh-body:1.68;
  --nf-fs-sm:13px;      --nf-lh-sm:1.6;
  --nf-fs-xs:12px;      --nf-lh-xs:1.55;
  --nf-fs-eyebrow:11px;

  --nf-tracking-tight:-0.028em;
  --nf-tracking-eyebrow:0.13em;

  /* Space (4pt) */
  --nf-s1:4px;  --nf-s2:8px;  --nf-s3:12px; --nf-s4:16px; --nf-s5:20px;
  --nf-s6:24px; --nf-s7:32px; --nf-s8:40px; --nf-s9:56px; --nf-s10:72px; --nf-s11:96px;

  /* Radius — 문서 느낌. 알약형 금지 */
  --nf-r-sm:2px; --nf-r-md:4px; --nf-r-lg:6px; --nf-r-pill:999px;

  /* Elevation — 그림자 최소화, 선으로 구조를 만든다 */
  --nf-sh-1:0 1px 2px rgba(14,26,43,.06);
  --nf-sh-2:0 4px 16px rgba(14,26,43,.08);
  --nf-sh-bar:0 -1px 0 var(--nf-line), 0 -10px 26px rgba(14,26,43,.07);

  /* Motion — 과도한 애니메이션 금지 */
  --nf-dur-fast:120ms; --nf-dur:180ms; --nf-ease:cubic-bezier(.2,0,.2,1);
  --nf-ease-out:cubic-bezier(.33,1,.68,1); --nf-dur-rv:350ms;

  /* Layout */
  --nf-container:1200px;
  --nf-gutter:20px;
  --nf-tap:44px;         /* 최소 터치 타깃 */
  --nf-bar-h:72px;       /* 모바일 고정 CTA 높이 */
}

/* ── 2. BASE ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nf-bg);color:var(--nf-ink-900);
  font-family:var(--nf-font);font-size:var(--nf-fs-body);line-height:var(--nf-lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--nf-blue-600);outline-offset:2px;border-radius:var(--nf-r-sm)}
.nf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nf-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 3. LAYOUT ───────────────────────────────────────────── */
.nf-container{width:100%;max-width:var(--nf-container);margin:0 auto;padding:0 var(--nf-gutter)}
.nf-section{padding:var(--nf-s9) 0}
.nf-section--tight{padding:var(--nf-s7) 0}
.nf-section--alt{background:var(--nf-bg-alt)}
.nf-section--navy{background:var(--nf-navy-900);color:#fff}
.nf-rule{height:1px;background:var(--nf-line);border:0;margin:0}

/* 네이비 섹션 위 컴포넌트 반전 — 밝은 배경 전제의 색을 되돌린다 */
.nf-section--navy .nf-eyebrow{color:var(--nf-crimson-200)}
.nf-section--navy .nf-lead,.nf-section--navy .nf-sm{color:#C3D0DF}
.nf-section--navy .nf-roles{background:var(--nf-navy-800);border-color:rgba(255,255,255,.14)}
.nf-section--navy .nf-roles__row{border-bottom-color:rgba(255,255,255,.12)}
.nf-section--navy .nf-roles__who{color:#fff}
.nf-section--navy .nf-roles__who small{color:#A9BACE}
.nf-section--navy .nf-roles__what{color:#CBD7E4}
.nf-section--navy .nf-alert{background:rgba(255,255,255,.07);color:#CBD7E4}
.nf-section--navy .nf-alert--quiet{border-left-color:var(--nf-crimson-300)}
.nf-section--navy .nf-alert b{color:#fff}

/* ── 4. TYPE ─────────────────────────────────────────────── */
.nf-eyebrow{
  font-size:var(--nf-fs-eyebrow);font-weight:700;letter-spacing:var(--nf-tracking-eyebrow);
  text-transform:uppercase;color:var(--nf-ink-400);margin-bottom:var(--nf-s3);
}
.nf-eyebrow--blue{color:var(--nf-blue-600)}
.nf-display{font-size:var(--nf-fs-display);line-height:var(--nf-lh-display);font-weight:800;letter-spacing:var(--nf-tracking-tight)}
.nf-h1{font-size:var(--nf-fs-h1);line-height:var(--nf-lh-h1);font-weight:800;letter-spacing:var(--nf-tracking-tight)}
.nf-h2{font-size:var(--nf-fs-h2);line-height:var(--nf-lh-h2);font-weight:700;letter-spacing:-0.022em}
.nf-h3{font-size:var(--nf-fs-h3);line-height:var(--nf-lh-h3);font-weight:700;letter-spacing:-0.018em}
.nf-lead{font-size:var(--nf-fs-lead);line-height:var(--nf-lh-lead);color:var(--nf-ink-600)}
.nf-sm{font-size:var(--nf-fs-sm);line-height:var(--nf-lh-sm);color:var(--nf-ink-600)}
.nf-xs{font-size:var(--nf-fs-xs);line-height:var(--nf-lh-xs);color:var(--nf-ink-400)}
.nf-strong{font-weight:700;color:var(--nf-ink-900)}
.nf-accent{color:var(--nf-blue-600)}

/* ── 5. BUTTON ───────────────────────────────────────────── */
.nf-btn{
  --_bg:var(--nf-navy-900);--_fg:#fff;--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--nf-s2);
  min-height:var(--nf-tap);padding:0 var(--nf-s5);
  background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);
  border-radius:var(--nf-r-md);font-size:15px;font-weight:700;letter-spacing:-0.02em;
  cursor:pointer;transition:background var(--nf-dur) var(--nf-ease),border-color var(--nf-dur) var(--nf-ease),opacity var(--nf-dur) var(--nf-ease);
  -webkit-tap-highlight-color:transparent;
}
.nf-btn--lg{min-height:52px;font-size:16px;padding:0 var(--nf-s6)}
.nf-btn--sm{min-height:36px;font-size:13px;padding:0 var(--nf-s4)}
.nf-btn--block{display:flex;width:100%}
.nf-btn--primary{--_bg:var(--nf-crimson-600);--_fg:#fff}
.nf-btn--primary:hover{--_bg:var(--nf-crimson-700)}
.nf-btn--primary:active{--_bg:var(--nf-crimson-800)}
/* 어두운 배경 위에서는 버튼 경계를 따로 확보 (WCAG 1.4.11 비텍스트 대비) */
.nf-hero .nf-btn--primary,.nf-ctablock .nf-btn--primary{--_bd:rgba(255,255,255,.30)}
.nf-btn--secondary{--_bg:#fff;--_fg:var(--nf-navy-900);--_bd:var(--nf-line-strong)}
.nf-btn--secondary:hover{--_bd:var(--nf-navy-900);--_bg:var(--nf-bg-alt)}
.nf-btn--ghost{--_bg:transparent;--_fg:var(--nf-ink-700);--_bd:transparent}
.nf-btn--ghost:hover{--_bg:var(--nf-bg-sunken)}
.nf-btn--onnavy{--_bg:#fff;--_fg:var(--nf-navy-900)}
.nf-btn--onnavy:hover{--_bg:var(--nf-navy-100)}
.nf-btn[disabled],.nf-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none}
.nf-btn--loading{position:relative;color:transparent}
.nf-btn--loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:nf-spin .7s linear infinite;
}
@keyframes nf-spin{to{transform:rotate(360deg)}}
.nf-btn__icon{width:18px;height:18px;flex:0 0 auto}

/* ── 6. FORM ─────────────────────────────────────────────── */
.nf-field{display:block;margin-bottom:var(--nf-s5)}
.nf-field__label{display:flex;align-items:baseline;gap:var(--nf-s2);margin-bottom:var(--nf-s2);font-size:13px;font-weight:700;color:var(--nf-ink-700);letter-spacing:-0.01em}
.nf-field__req{color:var(--nf-blue-600);font-size:12px;font-weight:700}
.nf-field__opt{color:var(--nf-ink-300);font-size:12px;font-weight:500}
.nf-input,.nf-select,.nf-textarea{
  width:100%;min-height:var(--nf-tap);padding:11px 13px;
  background:#fff;border:1px solid var(--nf-line-strong);border-radius:var(--nf-r-md);
  font-size:15px;line-height:1.4;color:var(--nf-ink-900);
  transition:border-color var(--nf-dur) var(--nf-ease),box-shadow var(--nf-dur) var(--nf-ease);
  appearance:none;
}
.nf-textarea{min-height:96px;resize:vertical;line-height:1.6;padding-top:12px}
.nf-input::placeholder,.nf-textarea::placeholder{color:var(--nf-ink-400)}
.nf-input:hover,.nf-select:hover,.nf-textarea:hover{border-color:var(--nf-silver)}
.nf-input:focus,.nf-select:focus,.nf-textarea:focus{
  outline:0;border-color:var(--nf-blue-600);box-shadow:0 0 0 3px var(--nf-blue-100);
}
.nf-select{
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%234B5763' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
.nf-select:invalid,.nf-select[data-placeholder="true"]{color:var(--nf-ink-400)}
.nf-field--error .nf-input,.nf-field--error .nf-select,.nf-field--error .nf-textarea{border-color:var(--nf-error)}
.nf-field--error .nf-input:focus{box-shadow:0 0 0 3px var(--nf-error-bg)}
.nf-field__help{margin-top:6px;font-size:12px;line-height:1.5;color:var(--nf-ink-400)}
.nf-field__error{margin-top:6px;font-size:12px;line-height:1.5;color:var(--nf-error);font-weight:600}
.nf-count{float:right;font-size:11px;color:var(--nf-ink-300);font-variant-numeric:tabular-nums}

/* 칩 선택 (라디오 대체 — 모바일 탭 1회) */
.nf-chips{display:flex;flex-wrap:wrap;gap:var(--nf-s2)}
.nf-chip{position:relative;display:inline-flex}
.nf-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.nf-chip span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--nf-tap);padding:0 var(--nf-s4);
  border:1px solid var(--nf-line-strong);border-radius:var(--nf-r-md);
  background:#fff;font-size:14px;font-weight:600;color:var(--nf-ink-700);
  transition:all var(--nf-dur) var(--nf-ease);white-space:nowrap;
}
.nf-chip input:hover+span{border-color:var(--nf-silver);background:var(--nf-bg-alt)}
.nf-chip input:checked+span{
  border-color:var(--nf-navy-900);background:var(--nf-navy-900);color:#fff;
}
.nf-chip input:focus-visible+span{outline:2px solid var(--nf-blue-600);outline-offset:2px}

/* 체크박스 (동의) */
.nf-check{display:flex;gap:var(--nf-s3);align-items:flex-start;padding:var(--nf-s3) 0;cursor:pointer}
.nf-check input{
  flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;appearance:none;cursor:pointer;
  border:1.5px solid var(--nf-line-strong);border-radius:var(--nf-r-sm);background:#fff;
  transition:all var(--nf-dur) var(--nf-ease);
}
.nf-check input:checked{
  background:var(--nf-navy-900);border-color:var(--nf-navy-900);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'><path d='M1 5 4.3 8.3 11 1.6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
.nf-check__text{font-size:13.5px;line-height:1.55;color:var(--nf-ink-700)}
.nf-check__text b{font-weight:700;color:var(--nf-blue-600)}
.nf-check__text a{color:var(--nf-ink-600);text-decoration:underline;text-underline-offset:2px}
.nf-check__text em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--nf-ink-400)}

/* ── 7. PROGRESS ─────────────────────────────────────────── */
.nf-steps{display:flex;align-items:center;gap:var(--nf-s3)}
.nf-steps__track{display:flex;gap:6px;flex:1}
.nf-steps__seg{height:3px;flex:1;background:var(--nf-line);border-radius:var(--nf-r-pill)}
.nf-steps__seg--on{background:var(--nf-navy-900)}
.nf-steps__label{font-size:12px;font-weight:700;color:var(--nf-ink-400);font-variant-numeric:tabular-nums;white-space:nowrap}
.nf-steps__label b{color:var(--nf-navy-900)}

/* ── 8. ALERT ────────────────────────────────────────────── */
.nf-alert{display:flex;gap:var(--nf-s3);padding:var(--nf-s4);border-radius:var(--nf-r-md);
  border-left:3px solid var(--nf-blue-600);background:var(--nf-blue-50);font-size:13.5px;line-height:1.6;color:var(--nf-ink-700)}
.nf-alert b{display:block;margin-bottom:2px;color:var(--nf-ink-900);font-weight:700}
.nf-alert--success{border-left-color:var(--nf-success);background:var(--nf-success-bg)}
.nf-alert--warn{border-left-color:var(--nf-warn);background:var(--nf-warn-bg)}
.nf-alert--error{border-left-color:var(--nf-error);background:var(--nf-error-bg)}
.nf-alert--quiet{border-left-color:var(--nf-line-strong);background:var(--nf-bg-alt)}

/* ── 9. HEADER / FOOTER ──────────────────────────────────── */
.nf-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--nf-line)}
.nf-header__in{display:flex;align-items:center;justify-content:space-between;height:56px}
.nf-logo{display:inline-flex;align-items:center;gap:8px}
.nf-logo__mark{width:26px;height:26px;border-radius:var(--nf-r-sm);background:var(--nf-navy-900);display:grid;place-items:center}
.nf-logo__name{font-size:17px;font-weight:800;letter-spacing:-0.045em}
.nf-logo__tld{font-size:10px;font-weight:600;color:var(--nf-ink-400);letter-spacing:.02em}
.nf-header__act{display:flex;align-items:center;gap:var(--nf-s2)}
.nf-tel{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--nf-line-strong);border-radius:var(--nf-r-md);font-size:13px;font-weight:700;letter-spacing:-0.01em}
.nf-navlink{font-size:14px;font-weight:600;color:var(--nf-ink-600);padding:8px 6px}
/* 시각 크기는 유지하고 탭 영역만 44px로 확장 (Apple HIG / Material 최소 타깃) */
.nf-tel,.nf-hit{position:relative}
.nf-tel::after,.nf-hit::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:max(100%,44px);height:44px}

.nf-footer{background:var(--nf-bg-alt);border-top:1px solid var(--nf-line);padding:var(--nf-s8) 0 calc(var(--nf-s8) + var(--nf-bar-h))}
.nf-footer__brand{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--nf-s4)}
.nf-footer__biz{font-size:12px;line-height:1.85;color:var(--nf-ink-400)}
.nf-footer__biz b{color:var(--nf-ink-600);font-weight:600}
.nf-footer__disc{margin-top:var(--nf-s4);padding-top:var(--nf-s4);border-top:1px solid var(--nf-line);font-size:12px;line-height:1.8;color:var(--nf-ink-400)}
.nf-footer__links{display:flex;flex-wrap:wrap;gap:var(--nf-s2) var(--nf-s5);margin-top:var(--nf-s5);font-size:13px;font-weight:600;color:var(--nf-ink-600)}

/* ── 10. HERO ────────────────────────────────────────────── */
/* 홈 히어로 — 풀블리드 다크. 사진을 배경으로 깔고 그 위에 카피+조건 패널 */
.nf-hero{position:relative;isolation:isolate;background:var(--nf-navy-900);color:#fff;overflow:hidden}
.nf-hero__bg{position:absolute;inset:0;z-index:-2}
.nf-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.nf-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,26,43,.88) 0%,rgba(14,26,43,.86) 43%,
    rgba(14,26,43,.60) 56%,rgba(14,26,43,.90) 100%)}
.nf-hero__inner{position:relative;padding:var(--nf-s8) 0 var(--nf-s9)}
.nf-hero__title{color:#fff;margin-top:var(--nf-s2)}
.nf-hero__title .nf-accent{color:var(--nf-crimson-200)}
.nf-hero__lead{color:#DCE6F1;margin-top:var(--nf-s4)}
.nf-hero .nf-strong{color:#fff;font-weight:700}
.nf-hero__note{margin-top:var(--nf-s4);font-size:12px;line-height:1.65;color:#C3D0DF}
.nf-eyebrow--onhero{color:var(--nf-crimson-200)}
.nf-hero__badge--static{margin-top:var(--nf-s5)}

/* 가이드 상세에서 재사용하는 본문 이미지 블록 */
.nf-hero__media{position:relative;aspect-ratio:390/260;overflow:hidden;background:var(--nf-bg-sunken)}
.nf-hero__media img{width:100%;height:100%;object-fit:cover}
.nf-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.10) 0%,rgba(14,26,43,0) 42%,rgba(14,26,43,.22) 100%)}
.nf-hero__badge{display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--nf-r-sm);background:rgba(14,26,43,.62);backdrop-filter:blur(4px);
  font-size:11px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.nf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--nf-s4)}
.nf-tag{padding:5px 10px;border:1px solid var(--nf-line);border-radius:var(--nf-r-sm);background:var(--nf-bg-alt);font-size:12px;font-weight:600;color:var(--nf-ink-600)}

/* ── 11. ROLE TABLE (신뢰 요소) ──────────────────────────── */
.nf-roles{border:1px solid var(--nf-line);border-radius:var(--nf-r-md);overflow:hidden;background:#fff}
.nf-roles__row{display:grid;grid-template-columns:96px 1fr;gap:var(--nf-s3);padding:var(--nf-s4);border-bottom:1px solid var(--nf-line)}
.nf-roles__row:last-child{border-bottom:0}
.nf-roles__who{font-size:13px;font-weight:800;letter-spacing:-0.02em;color:var(--nf-navy-900)}
.nf-roles__who small{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--nf-ink-300);letter-spacing:0}
.nf-roles__what{font-size:13.5px;line-height:1.6;color:var(--nf-ink-600)}

/* ── 12. NUMBERED LIST ───────────────────────────────────── */
.nf-points{border-top:1px solid var(--nf-line)}
.nf-points li{display:grid;grid-template-columns:34px 1fr;gap:var(--nf-s3);padding:var(--nf-s5) 0;border-bottom:1px solid var(--nf-line)}
.nf-points__n{font-size:13px;font-weight:800;color:var(--nf-crimson-600);font-variant-numeric:tabular-nums;padding-top:2px}
.nf-points h3{margin-bottom:6px}
.nf-points p{font-size:13.5px;line-height:1.65;color:var(--nf-ink-600)}

/* ── 13. TIMELINE (절차) ─────────────────────────────────── */
.nf-flow{position:relative;padding-left:var(--nf-s7)}
.nf-flow::before{content:"";position:absolute;left:11px;top:8px;bottom:22px;width:1px;background:var(--nf-line)}
.nf-flow li{position:relative;padding-bottom:var(--nf-s6)}
.nf-flow li:last-child{padding-bottom:0}
.nf-flow__dot{position:absolute;left:calc(-1 * var(--nf-s7));top:1px;width:23px;height:23px;border-radius:50%;
  background:#fff;border:1px solid var(--nf-line-strong);display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--nf-ink-600);font-variant-numeric:tabular-nums}
.nf-flow li:first-child .nf-flow__dot{background:var(--nf-navy-900);border-color:var(--nf-navy-900);color:#fff}
.nf-flow h3{font-size:15px;font-weight:700;margin-bottom:4px}
.nf-flow p{font-size:13px;line-height:1.6;color:var(--nf-ink-400)}

/* ── 14. GUIDE LIST ──────────────────────────────────────── */
.nf-list{border-top:1px solid var(--nf-line)}
.nf-list__item{display:grid;grid-template-columns:1fr 84px;gap:var(--nf-s4);align-items:center;
  padding:var(--nf-s5) 0;border-bottom:1px solid var(--nf-line);transition:background var(--nf-dur) var(--nf-ease)}
.nf-list__item:hover{background:var(--nf-bg-alt)}
.nf-list__cat{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--nf-blue-600);margin-bottom:6px}
.nf-list__title{font-size:15.5px;font-weight:700;line-height:1.45;letter-spacing:-0.02em;margin-bottom:5px}
.nf-list__meta{font-size:12px;color:var(--nf-ink-400)}
.nf-list__thumb{aspect-ratio:4/3;border-radius:var(--nf-r-md);overflow:hidden;background:var(--nf-bg-sunken)}
.nf-list__thumb img{width:100%;height:100%;object-fit:cover}

/* ── 15. FAQ ─────────────────────────────────────────────── */
.nf-faq{border-top:1px solid var(--nf-line)}
.nf-faq details{border-bottom:1px solid var(--nf-line)}
.nf-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--nf-s4);
  padding:var(--nf-s5) 0;cursor:pointer;list-style:none;font-size:15px;font-weight:700;letter-spacing:-0.02em}
.nf-faq summary::-webkit-details-marker{display:none}
.nf-faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-top:6px;
  border-right:1.6px solid var(--nf-ink-400);border-bottom:1.6px solid var(--nf-ink-400);
  transform:rotate(45deg);transition:transform var(--nf-dur) var(--nf-ease)}
.nf-faq details[open] summary::after{transform:rotate(225deg);margin-top:9px}
.nf-faq__a{padding:0 0 var(--nf-s5);font-size:13.5px;line-height:1.72;color:var(--nf-ink-600)}

/* ── 16. ADSENSE SLOT ────────────────────────────────────── */
.nf-ad{margin:var(--nf-s8) 0;padding:var(--nf-s4) 0;border-top:1px solid var(--nf-line);border-bottom:1px solid var(--nf-line)}
.nf-ad__label{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--nf-ink-400);text-align:center;margin-bottom:var(--nf-s3)}
.nf-ad__box{min-height:250px;display:grid;place-items:center;background:var(--nf-bg-sunken);border-radius:var(--nf-r-sm);
  font-size:12px;color:var(--nf-ink-300);text-align:center;line-height:1.6}

/* ── 17. STICKY CTA BAR (모바일 전용) ────────────────────── */
.nf-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:var(--nf-s2);align-items:center;
  padding:10px var(--nf-gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:var(--nf-sh-bar);
  transform:translateY(100%);transition:transform 220ms var(--nf-ease);
}
.nf-bar[data-shown="true"]{transform:translateY(0)}
.nf-bar__tel{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--nf-line-strong);border-radius:var(--nf-r-md);background:#fff}
.nf-bar__cta{flex:1}

/* ── 17b. HERO 조건 패널 ─────────────────────────────────── */
.nf-panel{margin-top:var(--nf-s7);padding:var(--nf-s5);
  background:rgba(8,15,26,.74);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.17);border-radius:var(--nf-r-lg)}
.nf-panel__title{font-size:17px;font-weight:800;letter-spacing:-.03em;color:#fff}
.nf-panel__sub{margin-top:4px;margin-bottom:var(--nf-s5);font-size:12.5px;color:#94A7BC}
.nf-panel__f{display:block;margin-bottom:var(--nf-s4)}
.nf-panel__lb{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#9DB0C6;margin-bottom:6px}
.nf-panel .nf-input,.nf-panel .nf-select{
  width:100%;min-height:var(--nf-tap);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--nf-r-md);color:#fff;font-size:15px;padding:0 var(--nf-s4)}
.nf-panel .nf-input::placeholder{color:#9AABC0}
.nf-panel .nf-input:focus,.nf-panel .nf-select:focus{
  outline:2px solid var(--nf-crimson-300);outline-offset:2px;
  border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.12)}
.nf-panel .nf-select{padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%23BFCDDC' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center}
.nf-panel .nf-select[data-placeholder="true"]{color:#9AABC0}
.nf-panel .nf-select option{color:#0F1519;background:#fff}
.nf-panel__submit{width:100%;margin-top:var(--nf-s2)}
.nf-panel__alt{display:block;margin-top:var(--nf-s3);text-align:center;
  font-size:13px;font-weight:600;color:#C4D1E0;text-decoration:underline;text-underline-offset:3px}
.nf-panel__note{margin-top:var(--nf-s4);text-align:center;font-size:11.5px;color:#8A9CB1}

/* ── 17c. 스크롤 진입 모션 (절제 티어) ────────────────────── */
.nf-js [data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity var(--nf-dur-rv) var(--nf-ease-out),transform var(--nf-dur-rv) var(--nf-ease-out)}
.nf-js [data-reveal].is-in{opacity:1;transform:none}

/* ── 18. ARTICLE ─────────────────────────────────────────── */
.nf-article{font-size:16px;line-height:1.85;color:var(--nf-ink-700)}
.nf-article>p{margin:0 0 var(--nf-s5)}
.nf-article h2{font-size:19px;font-weight:800;letter-spacing:-0.025em;color:var(--nf-ink-900);margin:var(--nf-s8) 0 var(--nf-s4);padding-top:var(--nf-s5);border-top:1px solid var(--nf-line)}
.nf-article h3{font-size:16px;font-weight:700;color:var(--nf-ink-900);margin:var(--nf-s6) 0 var(--nf-s3)}
.nf-article ul{margin:0 0 var(--nf-s5);padding-left:0}
.nf-article ul li{position:relative;padding-left:16px;margin-bottom:8px;font-size:15px;line-height:1.75}
.nf-article ul li::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--nf-silver)}
.nf-article blockquote{margin:0 0 var(--nf-s5);padding:var(--nf-s4);border-left:3px solid var(--nf-navy-900);background:var(--nf-bg-alt);font-size:15px;line-height:1.7}
.nf-table{width:100%;border-collapse:collapse;margin:0 0 var(--nf-s5);font-size:13.5px}
.nf-table th,.nf-table td{padding:11px 10px;border-bottom:1px solid var(--nf-line);text-align:left;vertical-align:top;line-height:1.55}
.nf-table thead th{background:var(--nf-bg-alt);font-size:12px;font-weight:700;color:var(--nf-ink-600);border-bottom:1px solid var(--nf-line-strong)}
.nf-table td:first-child{font-weight:600;color:var(--nf-ink-900);white-space:nowrap}

/* ── 19. CTA BLOCK (광고와 혼동 금지 — 네이비 솔리드) ───── */
.nf-ctablock{background:var(--nf-navy-900);color:#fff;border-radius:var(--nf-r-lg);padding:var(--nf-s7) var(--nf-s5)}
.nf-ctablock h2{color:#fff;margin-bottom:var(--nf-s3)}
.nf-ctablock p{font-size:13.5px;line-height:1.7;color:#B9C6D6;margin-bottom:var(--nf-s5)}

/* ── 20. COMPLETE ────────────────────────────────────────── */
.nf-done{text-align:center;padding:var(--nf-s9) 0 var(--nf-s7)}
.nf-done__mark{width:56px;height:56px;margin:0 auto var(--nf-s5);border-radius:50%;
  background:var(--nf-navy-900);display:grid;place-items:center}
.nf-receipt{margin:var(--nf-s6) 0;padding:var(--nf-s4);border:1px solid var(--nf-line);border-radius:var(--nf-r-md);background:var(--nf-bg-alt);
  display:flex;justify-content:space-between;align-items:center;font-size:13px}
.nf-receipt b{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── 21. DESKTOP ─────────────────────────────────────────── */
@media (min-width:1024px){
  :root{
    --nf-fs-display:52px; --nf-lh-display:1.16;
    --nf-fs-h1:40px;      --nf-lh-h1:1.22;
    --nf-fs-h2:28px;
    --nf-fs-h3:19px;
    --nf-fs-lead:17px;
    --nf-fs-body:16px;
    --nf-fs-sm:14px;
    --nf-gutter:40px;
  }
  .nf-header__in{height:72px}
  .nf-navlink{font-size:14.5px;padding:8px 14px}
  .nf-section{padding:var(--nf-s11) 0}
  .nf-section--tight{padding:var(--nf-s9) 0}
  .nf-bar{display:none}
  /* 폼 진행 버튼은 데스크톱에서 본문 안 일반 버튼으로 전환 */
  .nf-bar--form{
    display:flex;position:static;transform:none!important;box-shadow:none;
    background:transparent;backdrop-filter:none;padding:0;
    max-width:640px;margin:8px auto 72px;gap:var(--nf-s3)
  }
  .nf-bar--form .nf-btn{width:100%}
  .nf-footer{padding:var(--nf-s9) 0 var(--nf-s8)}

  /* 히어로 — 풀블리드 사진 위 2단: 좌측 카피 / 우측 조건 패널 */
  .nf-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) 400px;
    gap:var(--nf-s10);align-items:center;min-height:min(660px,78vh);
    padding:var(--nf-s10) var(--nf-gutter)}
  .nf-hero__bg img{object-position:38% 50%}
  .nf-hero::after{background:
    linear-gradient(90deg,rgba(14,26,43,.94) 0%,rgba(14,26,43,.86) 54%,rgba(14,26,43,.55) 100%)}
  .nf-hero__copy{max-width:600px}
  .nf-panel{margin-top:0}

  .nf-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nf-s8)}
  .nf-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nf-s6)}
  .nf-roles__row{grid-template-columns:150px 1fr;padding:var(--nf-s5) var(--nf-s6)}
  .nf-points{border-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nf-s6)}
  .nf-points li{display:block;border-bottom:0;border-top:2px solid var(--nf-navy-900);padding:var(--nf-s5) 0 0}
  .nf-points__n{margin-bottom:var(--nf-s4)}
  .nf-list__item{grid-template-columns:1fr 160px;padding:var(--nf-s6) 0}
  .nf-list__title{font-size:19px}
  .nf-article{font-size:17px}
  .nf-article h2{font-size:24px}
  .nf-ctablock{padding:var(--nf-s9) var(--nf-s8);display:flex;align-items:center;justify-content:space-between;gap:var(--nf-s8)}
  .nf-ctablock p{margin-bottom:0}
  .nf-formwrap{max-width:640px;margin:0 auto}
  .nf-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--nf-s4)}
}

/* ── 22. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* 모션을 끈 사용자에겐 최종 상태를 즉시 렌더 (숨김 단계를 건너뜀) */
  .nf-js [data-reveal]{opacity:1!important;transform:none!important}
}