:root {
  /* ════════════════════════════════════════════════════════════════
     BRAND — Blue (인사책 프라이머리)
     #2B74FB (brand-600) 가 메인. 50→900 shade 로 위계 표현.
     ════════════════════════════════════════════════════════════════ */
  --brand-50:  #EBF4FF;
  --brand-100: #D6E9FF;
  --brand-200: #B3D9FF;
  --brand-300: #7FB8FF;
  --brand-400: #5B9EFF;
  --brand-500: #4086FF;
  --brand-600: #2B74FB;  /* PRIMARY — 버튼/링크/액센트 */
  --brand-700: #1F5FD3;
  --brand-800: #1B4A99;
  --brand-900: #152E66;

  /* ════════════════════════════════════════════════════════════════
     SEMANTIC — 역할 기반 색상 (3 포털 모두 동일)
     ════════════════════════════════════════════════════════════════ */
  --success:    #059669;  /* emerald-600 — 승인/완료/긍정 */
  --success-bg: #ecfdf5;
  --warning:    #d97706;  /* amber-600 — 대기/주의 */
  --warning-bg: #fffbeb;
  --error:      #dc2626;  /* red-600 — 반려/오류 */
  --error-bg:   #fef2f2;
  --info:       #2563eb;  /* blue-600 — 정보 배지 */
  --info-bg:    #eff6ff;

  /* ════════════════════════════════════════════════════════════════
     NEUTRALS — Slate scale (글자/배경/보더)
     ════════════════════════════════════════════════════════════════ */
  --surface:     #ffffff;

  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ════════════════════════════════════════════════════════════════
     RADIUS — 4단계 + full (Tailwind 스케일과 정확히 매칭)
     sm:  6px  → rounded-md   — 칩/인풋 작은 요소
     md:  8px  → rounded-lg   — 버튼/배너
     lg:  12px → rounded-xl   — 카드 (기본)
     xl:  16px → rounded-2xl  — 모달/큰 카드
     full:9999px → rounded-full — 원형 (아바타/알림 점)
     ════════════════════════════════════════════════════════════════ */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ════════════════════════════════════════════════════════════════
     SHADOW — 3단계
     1: 정적 카드 (가장 약함)
     2: 호버/떠 있는 카드
     3: 모달/팝오버 (가장 강함)
     ════════════════════════════════════════════════════════════════ */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12), 0 24px 60px rgba(15, 23, 42, 0.18);

  /* ════════════════════════════════════════════════════════════════
     TYPE SCALE — 7단계 (한글 가독성 최소 14px 보장,
                         2026-08-05 한 단계 → 2026-08-06 사장 지시로 한 단계 더)
     ─────────
     하한선: 14px (사다리 T1 마이크로). 한글은 11px 이하에서 받침 획이 뭉갠다.
             밀도가 필요해도 14px 아래로는 내리지 않는다.
     예외: FontAwesome 글리프(아이콘)는 상향 대상이 아니다 — 아이콘을 키우면
           "복잡해 보인다"는 지적이 악화된다. design-system.ts 의 CSS_TYPE_SCALE
           이 :not([class*="fa-"]) 로 제외한다.

     ── 타이포 조정 스위치 (2026-08-05, 목표값 2026-08-06 재작성) ────
     --ins-type-step : 1 = 상향 사다리 적용 / 0 = 크기 전면 원복 (이 값 하나)
                       ★step 값은 0/1 두 상태뿐 — "한 단계 더"는 step=2 가 아니라
                       Δ계수(목표값) 재작성으로 한다. step=2 는 발산([8px]→16px)한다.★
     --ins-w-emph    : 클래스 강조 굵기. 600 = 신규 L2 / 700 = 원복 (이 값 하나)
     두 축은 독립이라 따로 되돌릴 수 있고, 어느 쪽도 style.css 재빌드가 필요 없다.
     규칙 문서: docs/reference/typography-rules.md
     ════════════════════════════════════════════════════════════════ */
  --ins-type-step: 1;
  --ins-w-emph:    600;

  --ins-type-pc: 0;
  --ins-row-h: 44px;
  --ins-ctl-h: 44px;

  --text-xs:  calc(12px + 2px * var(--ins-type-step) + 1px * var(--ins-type-pc));
  --text-sm:  calc(13px + 2px * var(--ins-type-step) + 1px * var(--ins-type-pc));
  --text-md:  calc(15px + 1px * var(--ins-type-pc));
  --text-lg:  calc(16px + 1px * var(--ins-type-pc));
  --text-xl:  calc(20px + 1px * var(--ins-type-pc));
  --text-2xl: calc(24px + 1px * var(--ins-type-pc));
  --text-3xl: 32px;

  /* ════════════════════════════════════════════════════════════════
     SPACING — 4px base 8단계
     ════════════════════════════════════════════════════════════════ */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ════════════════════════════════════════════════════════════════
     FONTS
     - sans: Pretendard Variable (한글 + 영문 통합)
       → 폰트 로드는 Phase 1.1 에서 추가. 미로드 시 시스템 폰트 폴백.
     - mono: Geist Mono → JetBrains → IBM Plex 순 폴백
     ════════════════════════════════════════════════════════════════ */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (min-width:768px){:root{--ins-type-pc:2}}
@media (min-width:768px) and (pointer:fine){:root{--ins-row-h:32px;--ins-ctl-h:36px}}

/* ════════════════════════════════════════════════════════════════
   유틸리티 클래스 (토큰 직접 사용 시 편의)
   기존 Tailwind 클래스를 대체하지 않음 — 보조 도구.
   ════════════════════════════════════════════════════════════════ */
.r-sm   { border-radius: var(--r-sm); }
.r-md   { border-radius: var(--r-md); }
.r-lg   { border-radius: var(--r-lg); }
.r-xl   { border-radius: var(--r-xl); }
.r-full { border-radius: var(--r-full); }

.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   카드 위계 — 1-카드 우선 원칙
   한 페이지에 주인공 카드는 1개, 나머지는 평면(flat).
   primary: 그림자 강함, 시선 끌어들임.
   flat:    그림자 없음, 보더만 — 정보 그릇 역할.
   meta:    배경도 없음, 가장 약함 — 부수 정보.
   ════════════════════════════════════════════════════════════════ */
.card-primary {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.card-flat {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-lg);
}
.card-meta {
  background: transparent;
  border: 1px solid #f1f5f9;
  border-radius: var(--r-md);
}

/* ════════════════════════════════════════════════════════════════
   EMPTY STATE — 통일된 보이스 (3.5)
   .empty-state: 모든 빈 상태가 같은 패턴 사용
   ────────────
   <div class="empty-state">
     <i class="fas fa-X empty-state-icon"></i>
     <div class="empty-state-text">메시지</div>
     <a class="empty-state-cta" href="...">선택 CTA →</a>
   </div>
   ════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}
.empty-state-icon {
  font-size: 28px;
  color: #cbd5e1;
  margin-bottom: 10px;
}
.empty-state-text {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.5;
}
.empty-state-cta {
  margin-top: 12px;
  font-size: calc(12px + 2px * var(--ins-type-step));  /* 12 → 14 */
  font-weight: 600;  /* L2 — 링크형 CTA */
  color: var(--brand-600);
  text-decoration: none;
}
.empty-state-cta:hover { color: var(--brand-700); text-decoration: underline; }

    /* 마케팅 공통 토큰 보강 */
    body {
      font-family: var(--font-sans, 'Pretendard', -apple-system, sans-serif);
      color: var(--neutral-900);
      background: #ffffff;
      margin: 0;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    * { box-sizing: border-box; }
    a { color: var(--brand-700); text-decoration: none; }
    a:hover { color: var(--brand-800); }
    /* 자체 폰트 변수 (design-tokens 보강) */
    :root {
      --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
      --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
    }

/* ─── Container ─── */
.ms-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .ms-container { padding: 0 16px; } }

.ms-page { overflow-x: clip; background: #ffffff; }
.ms-page main { min-height: 40vh; }
.ms-page :where(h1, h2, h3, p, a, span, li, summary) {
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ms-page :where(a, button, summary):focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 3px;
}

/* ─── Hero ─── */
.ms-hero {
  min-height: min(660px, calc(100svh - 104px));
  padding: 96px 0 104px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
  isolation: isolate;
}
.ms-hero > .ms-container { position: relative; z-index: 2; width: 100%; text-align: center; }
.ms-hero:not(.ms-hero-img) {
  min-height: min(520px, calc(100svh - 136px));
  padding: 72px 0 80px;
}
@media (max-width: 640px) {
  .ms-hero { min-height: min(620px, calc(100svh - 86px)); padding: 56px 0 68px; }
  .ms-hero:not(.ms-hero-img) {
    min-height: min(520px, calc(100svh - 136px));
    padding: 48px 0 56px;
  }
}
.ms-hero-img {
  background-color: var(--brand-50);
}
.ms-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.ms-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, center right);
}
.ms-hero-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(235, 244, 255, 0.84);
  pointer-events: none;
}
.ms-hero-img .ms-h1 { max-width: 760px; }
.ms-hero-img .ms-lead { max-width: 580px; color: var(--neutral-700); }
@media (max-width: 640px) {
  .ms-hero-media img {
    object-position: var(--hero-mobile-position, 58% center);
  }
  .ms-hero-img::before { background: rgba(235, 244, 255, 0.9); }
}
.ms-h1 {
  font-size: clamp(32px, 6vw, 56px); font-weight: 900; line-height: 1.15;
  color: var(--neutral-900); max-width: 820px; margin: 0 auto 14px; letter-spacing: 0;
  text-align: center; word-break: keep-all;
}
.ms-h1-accent { color: var(--brand-600); font-style: normal; }
.ms-lead {
  font-size: clamp(15px, 2.2vw, 18px); color: var(--neutral-600);
  max-width: 640px; line-height: 1.6; margin: 0 auto 32px; text-align: center;
}
.ms-cta-group { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ms-footer-badge { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ms-footer-badge a:hover { opacity: 0.88; transition: opacity .15s; }
.ms-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-600); color: #ffffff;
  padding: 14px 28px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 24px rgba(43,116,251,0.35);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.ms-btn-primary:hover { transform: translateY(-2px); background: var(--brand-700); box-shadow: 0 12px 32px rgba(43,116,251,0.45); }
.ms-btn-primary:active { transform: translateY(0) scale(0.98); }
.ms-btn-lg { padding: 18px 36px; font-size: 16px; }
.ms-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; color: var(--brand-700);
  padding: 14px 28px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; text-decoration: none;
  border: 1.5px solid var(--brand-200);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s;
}
.ms-btn-secondary:hover { border-color: var(--brand-600); color: var(--brand-800); background: var(--brand-50); transform: translateY(-2px); }
.ms-btn-secondary:active { transform: translateY(0) scale(0.98); }
.ms-trust {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 36px;
  font-size: var(--text-sm); color: var(--neutral-600);
}
.ms-trust-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ms-trust-item i { color: var(--success); }
@media (max-width: 480px) {
  .ms-cta-group { width: 100%; }
  .ms-cta-group > a { width: 100%; min-height: 50px; justify-content: center; }
  .ms-trust { gap: 10px 16px; margin-top: 24px; }
  .ms-trust-item { width: 100%; }
}

/* ─── Section ─── */
.ms-section-wrap { padding: 88px 0; }
.ms-section-wrap + .ms-section-wrap { border-top: 1px solid var(--brand-100); }
@media (max-width: 640px) { .ms-section-wrap { padding: 64px 0; } }
.ms-section-wrap > .ms-container { text-align: center; }
.ms-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ms-section-title {
  font-size: clamp(24px, 4vw, 36px); font-weight: 900;
  margin: 0 0 12px; letter-spacing: 0; text-align: center;
}
.ms-section-sub { font-size: 16px; margin: 0; line-height: 1.6; text-align: center; }

/* ─── FeatureCard (숫자 인덱스 + Geist Mono — AI slop #3 회피) ─── */
.ms-fc {
  display: block; background: #ffffff;
  border: 1px solid var(--brand-100); border-radius: var(--r-md);
  padding: 28px 24px; text-align: center; text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  overflow: hidden;
}
.ms-fc:hover { border-color: var(--brand-300); transform: translateY(-4px); box-shadow: var(--shadow-2); background: var(--brand-50); }
.ms-fc-with-image { padding: 0; }
.ms-fc-body { padding: 28px 24px; text-align: center; }
.ms-fc-with-image .ms-fc-body { padding: 20px 22px 24px; }
.ms-fc-media {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-100);
  overflow: hidden;
}
.ms-fc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fc-image-position, center);
  transition: transform 0.55s ease;
}
.ms-fc:hover .ms-fc-media img { transform: scale(1.025); }
.ms-fc-index {
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 800;
  color: var(--brand-600); margin-bottom: 12px; line-height: 1;
  letter-spacing: 0;
}
.ms-fc-title { font-size: 17px; font-weight: 800; color: var(--neutral-900); margin: 0 0 8px; }
.ms-fc-desc { font-size: 14px; color: var(--neutral-600); line-height: 1.6; margin: 0; }
.ms-fc-mono {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--brand-700); margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--neutral-200);
}

/* ─── 비대칭 그리드 (AI slop #2 회피 — 3-col 균등 grid 안 씀) ─── */
.ms-grid-async { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.ms-grid-async > :nth-child(1) { grid-row: span 2; }
@media (max-width: 768px) { .ms-grid-async { grid-template-columns: 1fr; } .ms-grid-async > :nth-child(1) { grid-row: auto; } }
.ms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .ms-grid-2 { grid-template-columns: 1fr; } }
.ms-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .ms-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ms-grid-3 { grid-template-columns: 1fr; } }

/* ─── NFC 상품 선택 + 상세 이미지 ─── */
.nfc-product-experience { position: relative; }
.nfc-product-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nfc-product-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.nfc-product-option-group {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  min-width: 0;
}
.nfc-product-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
  background: white;
  color: var(--neutral-900);
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nfc-product-option-store .ms-btn-primary {
  width: 100%;
}
.nfc-product-option:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.nfc-product-option-media {
  aspect-ratio: 1;
  overflow: hidden;
  border-bottom: 1px solid var(--brand-100);
  background: var(--neutral-100);
}
.nfc-product-option-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nfc-product-option-copy { padding: 24px; }
.nfc-product-option-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
}
.nfc-product-option-title {
  margin: 0 0 8px;
  color: var(--neutral-900);
  font-size: var(--text-xl);
  font-weight: 900;
}
.nfc-product-option-price {
  display: block;
  margin-bottom: 12px;
  color: var(--brand-700);
  font-size: var(--text-2xl);
  font-weight: 900;
}
.nfc-product-option-desc {
  min-height: 45px;
  margin: 0 0 18px;
  color: var(--neutral-600);
  font-size: var(--text-md);
  line-height: 1.65;
}
.nfc-product-option-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  color: var(--brand-700);
  font-size: var(--text-md);
  font-weight: 800;
}
#nfc-product-sticker:checked ~ .ms-section-wrap .nfc-product-option[for="nfc-product-sticker"],
#nfc-product-holder:checked ~ .ms-section-wrap .nfc-product-option[for="nfc-product-holder"] {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-2);
}
#nfc-product-sticker:focus-visible ~ .ms-section-wrap .nfc-product-option[for="nfc-product-sticker"],
#nfc-product-holder:focus-visible ~ .ms-section-wrap .nfc-product-option[for="nfc-product-holder"] {
  outline: 3px solid var(--brand-300);
  outline-offset: 4px;
}
.nfc-detail-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-width: 680px;
  margin: 0 auto 32px;
  padding: 4px;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
  background: var(--brand-50);
}
.nfc-detail-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--neutral-700);
  font-size: var(--text-md);
  font-weight: 800;
  cursor: pointer;
}
.nfc-detail-tab strong { color: inherit; }
#nfc-product-sticker:checked ~ .ms-section-wrap .nfc-detail-tab[for="nfc-product-sticker"],
#nfc-product-holder:checked ~ .ms-section-wrap .nfc-detail-tab[for="nfc-product-holder"] {
  background: var(--brand-600);
  color: white;
}
.nfc-product-panel { display: none; }
.nfc-product-panels { margin-top: 48px; }
#nfc-product-sticker:checked ~ .ms-section-wrap .nfc-product-panel[data-nfc-product="sticker"],
#nfc-product-holder:checked ~ .ms-section-wrap .nfc-product-panel[data-nfc-product="holder"] {
  display: block;
}
.nfc-product-detail-head {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}
.nfc-product-detail-head h3 {
  margin: 0 0 8px;
  color: var(--neutral-900);
  font-size: var(--text-2xl);
  font-weight: 900;
}
.nfc-product-detail-head strong {
  display: block;
  margin-bottom: 10px;
  color: var(--brand-700);
  font-size: var(--text-2xl);
}
.nfc-product-detail-head p {
  margin: 0;
  color: var(--neutral-600);
  font-size: var(--text-md);
  line-height: 1.7;
}
.nfc-product-detail-image {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
  background: white;
}
.nfc-product-purchase {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
}
.nfc-product-purchase-link { display: none; }
#nfc-product-sticker:checked ~ .ms-section-wrap .nfc-product-purchase-link--sticker,
#nfc-product-holder:checked ~ .ms-section-wrap .nfc-product-purchase-link--holder {
  display: inline-block;
}
.nfc-product-purchase p {
  margin: 14px 0 0;
  color: var(--neutral-500);
  font-size: var(--text-sm);
  line-height: 1.65;
}
@media (max-width: 640px) {
  .nfc-product-options { grid-template-columns: 1fr; gap: 16px; }
  .nfc-product-option-copy { padding: 20px 18px; }
  .nfc-product-option-desc { min-height: 0; }
  .nfc-detail-tabs { gap: 2px; padding: 3px; }
  .nfc-detail-tab { flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 6px; }
  .nfc-product-detail-head { margin-bottom: 20px; }
}

/* ─── FAQItem ─── */
.ms-faq-item {
  background: #ffffff; border: 1px solid var(--brand-100);
  border-radius: var(--r-md); padding: 0; margin-bottom: 12px;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ms-faq-item[open] { border-color: var(--brand-300); box-shadow: var(--shadow-1); }
.ms-faq-q {
  padding: 18px 22px; font-weight: 700; color: var(--neutral-900); text-align: center;
  cursor: pointer; list-style: none;
  font-size: 16px;
}
/* 질문 h3 는 ★모양이 아니라 구조★ 다 — 인라인·글꼴 상속으로 종전 렌더를 그대로 유지한다
   (블록이면 위 ::before 의 「+」 마커가 줄바꿈된다). */
.ms-faq-q h3 { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.ms-faq-q::-webkit-details-marker { display: none; }
.ms-faq-q::before { content: '+'; margin-right: 12px; color: var(--brand-600); font-weight: 800; font-size: 20px; }
.ms-faq-item[open] .ms-faq-q::before { content: '−'; }
.ms-faq-a { padding: 0 22px 20px; color: var(--neutral-600); line-height: 1.7; font-size: 14.5px; text-align: center; }

/* ─── BlogCard ─── */
.ms-blog-card {
  display: block; background: #ffffff;
  border: 1px solid var(--neutral-200); border-radius: var(--r-xl);
  padding: 28px 26px; text-align: center; text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ms-blog-card:hover { border-color: var(--brand-200); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.ms-blog-meta { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.ms-blog-title { font-size: 18px; font-weight: 800; color: var(--neutral-900); margin: 0 0 10px; line-height: 1.4; }
.ms-blog-excerpt { font-size: 14px; color: var(--neutral-600); line-height: 1.6; margin: 0 0 14px; }
.ms-blog-cta { font-size: 13px; font-weight: 700; color: var(--brand-700); }

/* ─── LegalDisclaimer ─── */
.ms-disclaimer {
  background: var(--warning-bg); border: 1px solid var(--warning);
  border-radius: var(--r-md); padding: 14px 18px;
  font-size: 13px; color: var(--neutral-700); margin: 20px 0; text-align: center;
}
.ms-disclaimer strong { color: var(--warning); display: block; margin-bottom: 6px; }
.ms-disclaimer p { margin: 4px 0; line-height: 1.55; }
.ms-disclaimer a { color: var(--warning); text-decoration: underline; }

/* ─── PlaceholderField ─── */
.ms-pf {
  background: var(--neutral-100); border: 1.5px dashed var(--neutral-300);
  border-radius: var(--r-md); padding: 14px 18px; margin: 10px 0; text-align: center;
}
.ms-pf strong { display: block; color: var(--neutral-700); margin-bottom: 6px; font-size: 13px; }
.ms-pf-todo { color: var(--brand-600); font-weight: 700; font-size: 12px; }
.ms-pf small { display: block; margin-top: 6px; color: var(--neutral-500); font-size: 11px; }
.ms-pf-filled { padding: 8px 0; font-size: 14px; color: var(--neutral-700); }
.ms-pf-filled strong { color: var(--neutral-900); }

/* ─── ComparisonRow ─── */
.ms-cmp-row th, .ms-cmp-row td { padding: 14px 16px; border-bottom: 1px solid var(--neutral-200); text-align: center; }
.ms-cmp-row th { font-weight: 700; color: var(--neutral-700); font-size: 13.5px; }
.ms-cmp-row td { color: var(--neutral-600); font-size: 14px; }
.ms-cmp-ours { background: var(--brand-50); color: var(--brand-800); font-weight: 700; }
.ms-cmp-highlight { background: var(--brand-50); }

/* ─── Pricing card — 브랜드 단색으로 공개 페이지 톤 통일 ─── */
.ms-price-card {
  max-width: 480px; margin: 0 auto;
  background: var(--brand-600);
  color: #ffffff; border-radius: var(--r-xl); padding: 48px; text-align: center;
  box-shadow: 0 24px 60px rgba(43,116,251,0.35);
}
@media (max-width: 480px) {
  .ms-price-card { padding: 32px 24px; border-radius: var(--r-md); }
}

/* ─── Marketing nav bar ─── */
.ms-nav {
  position: sticky; top: 0; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--neutral-200);
  z-index: 100; padding: 14px 0;
  transition: padding 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ms-nav.is-scrolled { padding: 10px 0; border-color: var(--brand-100); box-shadow: var(--shadow-1); }
.ms-nav .ms-container { max-width: 1320px; }
.ms-nav-inner {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 24px;
}
.ms-nav-brand {
  display: inline-flex; align-items: center; justify-self: start; gap: 12px;
  font-weight: 900; font-size: 18px; color: var(--neutral-900); text-decoration: none;
}
.ms-nav-brand i { color: var(--brand-600); }
.ms-nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  white-space: nowrap;
}
.ms-nav-menu a {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--neutral-700);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.ms-nav-menu a:hover { color: var(--brand-600); }
.ms-nav-menu a.is-active { color: var(--brand-700); font-weight: 800; }
.ms-nav-menu a.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--brand-500);
}
.ms-nav-actions { display: flex; align-items: center; justify-self: end; gap: 8px; }
.ms-nav-login,
.ms-nav-signup {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.ms-nav-login {
  color: var(--neutral-800);
  border: 1px solid var(--neutral-300);
  background: #ffffff;
}
.ms-nav-login:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.ms-nav-login.is-active { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.ms-nav-signup {
  color: #ffffff;
  background: var(--brand-600);
}
.ms-nav-signup:hover { color: #ffffff; background: var(--brand-700); }
.ms-mobile-actions { display: none; align-items: center; gap: 8px; }
.ms-nav-mobile-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--brand-600);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}
.ms-nav-mobile-cta:hover { color: #ffffff; background: var(--brand-700); }
.ms-mobile-menu { position: relative; }
.ms-mobile-menu summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
  background: #ffffff;
  color: var(--brand-700);
  cursor: pointer;
  list-style: none;
}
.ms-mobile-menu summary::-webkit-details-marker { display: none; }
.ms-mobile-menu summary:hover { background: var(--brand-50); border-color: var(--brand-300); }
.ms-menu-close { display: none; }
.ms-mobile-menu[open] .ms-menu-open { display: none; }
.ms-mobile-menu[open] .ms-menu-close { display: inline-block; }
.ms-mobile-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  max-height: min(620px, calc(100svh - 92px));
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-md);
  background: #ffffff;
  box-shadow: var(--shadow-3);
}
.ms-mobile-link,
.ms-mobile-login {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 700;
}
.ms-mobile-link:hover,
.ms-mobile-link.is-active { color: var(--brand-700); background: var(--brand-50); }
.ms-mobile-login {
  margin-top: 8px;
  color: #ffffff;
  background: var(--brand-600);
}
.ms-mobile-login:hover { color: #ffffff; background: var(--brand-700); }
/* ─── 메가 메뉴 (2026-08-12 사장 확정 — 제품·연동·요금·자료·회사) ───
   패널 링크는 서버가 HTML 로 다 찍어 내려보내고 여기서 접었다 편다.
   그래서 접힌 상태에서도 크롤러·AI 가 <a href> 를 전부 발견한다. */
.ms-nav-group { position: static; display: inline-flex; }
.ms-nav-trigger {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--neutral-700);
  background: none; border: 0; cursor: pointer;
  min-height: 40px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; border-radius: var(--r-md);
}
.ms-nav-trigger i { font-size: 9px; opacity: .6; }
.ms-nav-group:hover .ms-nav-trigger,
.ms-nav-group:focus-within .ms-nav-trigger { color: var(--brand-700); background: var(--brand-50); }
.ms-nav-group.is-active .ms-nav-trigger { color: var(--brand-700); font-weight: 800; }

.ms-nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #ffffff; border-bottom: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-1);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .14s ease;
}
.ms-nav-group:hover .ms-nav-panel,
.ms-nav-group:focus-within .ms-nav-panel { visibility: visible; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ms-nav-panel { transition: none; } }

.ms-nav-panel-inner {
  max-width: 1320px; margin: 0 auto; padding: 28px 24px 32px;
  display: grid; grid-template-columns: minmax(170px, 1fr) 3fr; gap: 32px;
  text-align: left;
}
.ms-nav-col-label {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: var(--neutral-500); margin: 0 0 12px;
}
/* 패널 안 링크는 .ms-nav-menu a 의 인라인 칩 스타일을 물려받으면 안 된다. */
.ms-nav-panel a.ms-nav-rail-link,
.ms-nav-panel a.ms-nav-sub {
  display: block; min-height: 0; white-space: normal;
}
.ms-nav-panel a.ms-nav-rail-link::after,
.ms-nav-panel a.ms-nav-sub::after { content: none; }
.ms-nav-panel a.ms-nav-rail-link {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--neutral-900); margin-bottom: 12px; line-height: 1.35;
}
.ms-nav-panel a.ms-nav-rail-link:hover,
.ms-nav-panel a.ms-nav-rail-link.is-active { color: var(--brand-700); }
.ms-nav-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; }
.ms-nav-panel a.ms-nav-sub {
  font-size: 13.5px; font-weight: 650; color: var(--neutral-700); margin-bottom: 9px;
}
.ms-nav-panel a.ms-nav-sub:hover { color: var(--brand-700); }
.ms-nav-panel a.ms-nav-sub.is-active { color: var(--brand-700); font-weight: 800; }
.ms-mobile-group {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: var(--neutral-500); margin: 14px 0 2px;
}

@media (max-width: 1180px) {
  .ms-nav-menu { gap: 13px; }
  .ms-nav-menu a { font-size: 12px; }
}
@media (max-width: 900px) {
  .ms-nav-panel-inner { grid-template-columns: 1fr; gap: 22px; }
}
/* 데스크톱 내비 전환점. 갈래를 다섯으로 접으면서 상단 항목이 10개 → 5개로 줄어
   1200px → 1024px 로 되돌렸다. 갈래를 더 늘리면 이 값도 함께 올려야 한다. */
@media (max-width: 1024px) {
  .ms-nav-inner { display: flex; justify-content: space-between; }
  .ms-nav-menu,
  .ms-nav-actions { display: none; }
  .ms-mobile-actions { display: flex; }
}
@media (max-width: 380px) {
  .ms-nav-brand { gap: 8px; font-size: 17px; }
  .ms-nav-brand img { width: 26px !important; height: 26px !important; }
  .ms-nav-mobile-cta { padding-inline: 10px; }
}

/* ─── Footer ─── */
.ms-footer {
  background: #ffffff;
  color: var(--neutral-600);
  padding: 64px 0 32px;
  border-top: 1px solid var(--brand-100);
}
.ms-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; text-align: center; }
@media (max-width: 768px) { .ms-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ms-footer-grid { grid-template-columns: 1fr; } }
.ms-footer-brand { color: var(--neutral-900); font-weight: 900; font-size: 18px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ms-footer-brand i { color: var(--brand-400); }
.ms-footer-tagline { font-size: 13px; line-height: 1.6; max-width: 280px; margin-inline: auto; }
.ms-footer .ms-footer-badge { justify-content: center; }
.ms-footer-col h2 { color: var(--brand-800); font-size: 13px; font-weight: 800; margin: 0 0 12px; letter-spacing: 0; }
.ms-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ms-footer-col li { padding: 4px 0; font-size: 13px; }
.ms-footer-col a { color: var(--neutral-600); text-decoration: none; transition: color 0.15s; }
.ms-footer-col a:hover { color: var(--brand-700); }
.ms-footer-bottom { border-top: 1px solid var(--brand-100); padding-top: 24px; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ms-footer-biz { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; color: var(--neutral-500); line-height: 1.6; }
.ms-footer-biz span { white-space: nowrap; }
.ms-footer-biz a { color: var(--neutral-500); text-decoration: none; transition: color 0.15s; white-space: nowrap; }
.ms-footer-biz a:hover { color: var(--brand-700); }
@media (max-width: 480px) { .ms-footer-biz span { white-space: normal; } }

/* ─── Public-page motion ─── */
.ms-motion .ms-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s ease var(--ms-reveal-delay, 0ms),
    transform 0.65s ease var(--ms-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.ms-motion .ms-reveal.is-visible { opacity: 1; transform: translateY(0); }
.ms-motion .ms-hero-img { animation: ms-hero-fade 0.9s ease both; }
@keyframes ms-hero-fade {
  from { opacity: 0.65; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-page *,
  .ms-page *::before,
  .ms-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ms-reveal { opacity: 1 !important; transform: none !important; }
}

/* ─── Guide breadcrumb ─── */
.ms-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-500); margin-bottom: 18px; flex-wrap: wrap; }
.ms-crumb a { color: var(--neutral-500); text-decoration: none; }
.ms-crumb a:hover { color: var(--brand-700); }
.ms-crumb i { font-size: 9px; color: var(--neutral-300); }
.ms-crumb span { color: var(--neutral-700); font-weight: 600; }

/* ─── Guide article prose (renderMarkdown 출력 스타일) ─── */
.guide-prose { font-size: 16px; line-height: 1.8; color: var(--neutral-700); text-align: left; }
.guide-prose h2 { font-size: 24px; font-weight: 800; color: var(--neutral-900); margin: 36px 0 14px; letter-spacing: -0.01em; }
.guide-prose h3 { font-size: 19px; font-weight: 800; color: var(--neutral-900); margin: 28px 0 12px; }
.guide-prose h4 { font-size: 16px; font-weight: 700; color: var(--neutral-900); margin: 22px 0 10px; }
.guide-prose p { margin: 0 0 16px; }
.guide-prose ul, .guide-prose ol { margin: 0 0 16px; padding-left: 22px; }
.guide-prose li { margin: 6px 0; }
.guide-prose blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--brand-200); background: var(--neutral-50); color: var(--neutral-600); border-radius: var(--r-sm); }
.guide-prose a { color: var(--brand-700); text-decoration: underline; }
.guide-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--neutral-100); padding: 2px 6px; border-radius: var(--r-sm); }
.guide-prose strong { font-weight: 700; color: var(--neutral-900); }
.guide-prose em { font-style: italic; }
.guide-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; display: block; overflow-x: auto; }
.guide-prose thead th { background: var(--neutral-50); color: var(--neutral-900); font-weight: 700; text-align: left; }
.guide-prose th, .guide-prose td { border: 1px solid var(--neutral-200); padding: 9px 12px; vertical-align: top; }
.guide-prose tbody tr:nth-child(even) { background: var(--neutral-50); }
.guide-prose pre { background: var(--neutral-900); color: var(--neutral-50); padding: 14px 16px; border-radius: var(--r-md); overflow-x: auto; margin: 0 0 20px; line-height: 1.6; }
.guide-prose pre code { font-family: var(--font-mono); font-size: 13.5px; background: none; padding: 0; color: inherit; white-space: pre; }