@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@500;600;700&display=swap');

/*
 * 관세법인 스마트패스 디자인 시스템 — 디자인 토큰 (방향 A · 헤리티지 네이비+골드)
 * 모든 컴포넌트 스타일은 이 var(--sp-*) 토큰 위에서 조립됩니다.
 */

:root {
  /* ── Brand · Navy ──────────────────────────────────────────── */
  --sp-navy: #0C1E33;          /* 기본 네이비 (섹션/헤더 배경) */
  --sp-navy-deep: #07111E;     /* 더 짙은 네이비 (대비 강조) */
  --sp-navy-800: #14263F;      /* 카드/패널 위 네이비 */
  --sp-navy-700: #274771;      /* 중간 네이비 (보더/스와치) */
  --sp-navy-600: #1E4D7B;      /* 링크/강조 네이비 */

  /* ── Brand · Gold ──────────────────────────────────────────── */
  --sp-gold: #C6A86A;          /* 기본 골드 (버튼/강조) */
  --sp-gold-light: #DCC691;    /* 밝은 골드 (네이비 위 텍스트 강조) */
  --sp-gold-deep: #A98B4E;     /* 골드 hover/보더 */

  /* ── Accent · Blue ─────────────────────────────────────────── */
  --sp-blue: #4F92D6;
  --sp-blue-light: #6FB0E8;

  /* ── Ink & Text (밝은 배경) ────────────────────────────────── */
  --sp-ink: #1C2A3C;           /* 제목 */
  --sp-text: #46586E;          /* 본문 */
  --sp-text-muted: #5E6B7E;    /* 보조 텍스트 */
  --sp-text-subtle: #7C8AA0;   /* 캡션/라벨 */

  /* ── Text (네이비 배경 위) ─────────────────────────────────── */
  --sp-on-navy: #FFFFFF;       /* 네이비 위 제목 */
  --sp-on-navy-body: #A6B7CB;  /* 네이비 위 본문 */
  --sp-on-navy-muted: #94A7BC; /* 네이비 위 보조 */
  --sp-on-navy-subtle: #6B7C93;/* 네이비 위 흐린 텍스트 */

  /* ── Surfaces & Borders ────────────────────────────────────── */
  --sp-canvas: #ECEAE3;        /* 밝은 페이지 배경 (웜 페이퍼) */
  --sp-surface: #FFFFFF;       /* 카드/패널 */
  --sp-surface-alt: #F5F3EE;   /* 대체 서페이스 */
  --sp-border: #E4E9F1;        /* 밝은 배경 보더 */
  --sp-border-strong: #D3DAE5; /* 진한 보더 */
  --sp-hairline: #E7ECF3;      /* 얇은 구분선 */
  --sp-border-on-navy: rgba(255, 255, 255, 0.08);  /* 네이비 위 보더 */
  --sp-hairline-on-navy: rgba(255, 255, 255, 0.10);/* 네이비 위 구분선 */

  /* ── Typography ────────────────────────────────────────────── */
  --sp-font-serif: 'Noto Serif KR', serif;
  --sp-font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-label: 'IBM Plex Sans KR', 'Noto Sans KR', sans-serif;

  /* type scale (px) */
  --sp-text-eyebrow: 12px;     /* 아이브로 라벨 */
  --sp-text-caption: 13px;
  --sp-text-body: 15px;
  --sp-text-lead: 17px;
  --sp-text-h4: 18px;
  --sp-text-h3: 22px;
  --sp-text-h2: 30px;          /* 섹션 제목 (serif) */
  --sp-text-h1: 40px;
  --sp-text-display: 52px;     /* 히어로 (serif) */

  --sp-tracking-label: 0.2em;  /* 아이브로/라벨 letter-spacing */
  --sp-tracking-tight: -0.015em;/* 대형 헤드라인 */

  /* ── Radii ─────────────────────────────────────────────────── */
  --sp-radius-xs: 2px;         /* 버튼/칩 (에디토리얼 톤) */
  --sp-radius-sm: 3px;         /* 카드 */
  --sp-radius-md: 6px;
  --sp-radius-lg: 10px;

  /* ── Spacing scale (4px base) ──────────────────────────────── */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-8: 32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;
  --sp-space-20: 80px;

  /* ── Elevation ─────────────────────────────────────────────── */
  --sp-shadow-card: 0 1px 3px rgba(20, 40, 70, 0.07);
  --sp-shadow-raised: 0 6px 20px rgba(12, 30, 51, 0.10);
  --sp-shadow-overlay: 0 12px 40px rgba(7, 17, 30, 0.22);

  /* ── Layout ────────────────────────────────────────────────── */
  --sp-container: 1200px;      /* 콘텐츠 최대 폭 */
  --sp-container-narrow: 940px;
}


/* ── components/actions/Button/Button.css ───────────────────────────────── */
.sp-btn {
  --_btn-py: 14px;
  --_btn-px: 28px;
  --_btn-fs: 14.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--_btn-py) var(--_btn-px);
  font-family: var(--sp-font-sans);
  font-size: var(--_btn-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--sp-radius-xs);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sp-btn:focus-visible {
  outline: 2px solid var(--sp-gold);
  outline-offset: 2px;
}

.sp-btn__arrow {
  display: inline-block;
  transition: transform 0.16s ease;
}
.sp-btn:hover .sp-btn__arrow { transform: translateX(3px); }

/* ── sizes ──────────────────────────────────────────────────── */
.sp-btn--sm { --_btn-py: 9px;  --_btn-px: 18px; --_btn-fs: 12.5px; gap: 7px; }
.sp-btn--md { --_btn-py: 14px; --_btn-px: 28px; --_btn-fs: 14.5px; }
.sp-btn--lg { --_btn-py: 17px; --_btn-px: 36px; --_btn-fs: 16px; }

.sp-btn--block { display: flex; width: 100%; }

/* ── variant · primary (골드 채움) ──────────────────────────── */
.sp-btn--primary {
  background: var(--sp-gold);
  color: var(--sp-navy);
  border-color: var(--sp-gold);
}
.sp-btn--primary:hover { background: var(--sp-gold-deep); border-color: var(--sp-gold-deep); }

/* ── variant · outline (골드 외곽선) ───────────────────────── */
.sp-btn--outline {
  background: transparent;
  color: var(--sp-gold-light);
  border-color: var(--sp-gold);
  font-weight: 600;
}
.sp-btn--outline:hover { background: rgba(198, 168, 106, 0.10); color: #fff; }

/* ── variant · ghost (텍스트 링크) ─────────────────────────── */
.sp-btn--ghost {
  background: transparent;
  color: var(--sp-on-navy);
  border-color: transparent;
  border-bottom: 1px solid var(--sp-gold);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  font-weight: 700;
  font-size: 14px;
}
.sp-btn--ghost:hover { color: var(--sp-gold-light); }

/* ── variant · light-outline (네이비 위 밝은 외곽선) ────────── */
.sp-btn--light-outline {
  background: transparent;
  color: var(--sp-on-navy);
  border-color: rgba(255, 255, 255, 0.35);
}
.sp-btn--light-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

.sp-btn:disabled,
.sp-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ── components/content/Chip/Chip.css ───────────────────────────────── */
.sp-chip {
  --_chip-py: 6px;
  --_chip-px: 12px;
  --_chip-fs: 12px;
  --_chip-gap: 7px;
  display: inline-flex;
  align-items: center;
  gap: var(--_chip-gap);
  padding: var(--_chip-py) var(--_chip-px);
  font-family: var(--sp-font-label);
  font-size: var(--_chip-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--sp-radius-xs);
  white-space: nowrap;
}

.sp-chip__icon {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 0.9em;
}

.sp-chip__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--sp-gold);
}

.sp-chip__label {
  min-width: 0;
}

/* ── sizes ──────────────────────────────────────────────────── */
.sp-chip--sm { --_chip-py: 4px; --_chip-px: 9px;  --_chip-fs: 11px; --_chip-gap: 6px; }
.sp-chip--md { --_chip-py: 6px; --_chip-px: 12px; --_chip-fs: 12px; --_chip-gap: 7px; }

/* ── tone · neutral (밝은 배경 중립) ───────────────────────── */
.sp-chip--neutral {
  background: var(--sp-surface-alt);
  border-color: var(--sp-border);
  color: var(--sp-text-muted);
}

/* ── tone · success (인식·완료 상태) ───────────────────────── */
.sp-chip--success {
  background: var(--sp-surface-alt);
  border-color: var(--sp-border);
  color: var(--sp-ink);
}
.sp-chip--success .sp-chip__dot { background: var(--sp-gold-deep); }

/* ── tone · gold (골드 강조 태그) ──────────────────────────── */
.sp-chip--gold {
  background: transparent;
  border-color: var(--sp-gold);
  color: var(--sp-gold-deep);
}

/* ── tone · on-navy (네이비 카드 위 밝은 칩) ───────────────── */
.sp-chip--on-navy {
  background: var(--sp-hairline-on-navy);
  border-color: var(--sp-border-on-navy);
  color: var(--sp-on-navy);
}
.sp-chip--on-navy .sp-chip__dot { background: var(--sp-gold-light); }


/* ── components/content/InfoCard/InfoCard.css ───────────────────────────────── */
.sp-infocard {
  font-family: var(--sp-font-sans);
  border: 1px solid transparent;
  border-radius: var(--sp-radius-sm);
  padding: var(--sp-space-8);
}

/* ── header ─────────────────────────────────────────────────── */
.sp-infocard__header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-3);
}

.sp-infocard__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.sp-infocard__heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sp-infocard__title {
  font-size: var(--sp-text-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.sp-infocard__subtitle {
  font-family: var(--sp-font-label);
  font-size: var(--sp-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--sp-tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
}

/* ── statement (명조 강조) ──────────────────────────────────── */
.sp-infocard__statement {
  margin: 0;
  font-family: var(--sp-font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* ── details ────────────────────────────────────────────────── */
.sp-infocard__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}

.sp-infocard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}

.sp-infocard__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  font-size: var(--sp-text-caption);
  line-height: 1.5;
}

.sp-infocard__item::before {
  content: '';
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sp-gold);
  transform: translateY(-2px);
}

/* ── tone · navy ────────────────────────────────────────────── */
.sp-infocard--navy {
  background: var(--sp-navy-800);
  border-color: var(--sp-border-on-navy);
}
.sp-infocard--navy .sp-infocard__title { color: var(--sp-on-navy); }
.sp-infocard--navy .sp-infocard__subtitle { color: var(--sp-on-navy-muted); }
.sp-infocard--navy .sp-infocard__statement { color: var(--sp-on-navy); }
.sp-infocard--navy .sp-infocard__item { color: var(--sp-on-navy-body); }

/* ── tone · light ───────────────────────────────────────────── */
.sp-infocard--light {
  background: var(--sp-surface);
  border-color: var(--sp-border);
  box-shadow: var(--sp-shadow-card);
}
.sp-infocard--light .sp-infocard__title { color: var(--sp-ink); }
.sp-infocard--light .sp-infocard__subtitle { color: var(--sp-text-subtle); }
.sp-infocard--light .sp-infocard__statement { color: var(--sp-ink); }
.sp-infocard--light .sp-infocard__item { color: var(--sp-text-muted); }


/* ── components/content/Panel/Panel.css ───────────────────────────────── */
.sp-panel {
  font-family: var(--sp-font-sans);
  border: 1px solid transparent;
  border-radius: var(--sp-radius-sm);
  overflow: hidden;
}

/* ── header (좌 타이틀 / 우 메타) ────────────────────────────── */
.sp-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-space-4);
  padding: var(--sp-space-4) var(--sp-space-5);
  border-bottom: 1px solid transparent;
}

.sp-panel__lead {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-width: 0;
}

.sp-panel__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-gold);
}

.sp-panel__title {
  font-size: var(--sp-text-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.sp-panel__meta {
  flex: none;
  font-family: var(--sp-font-label);
  font-size: var(--sp-text-caption);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── body ───────────────────────────────────────────────────── */
.sp-panel__body {
  padding: var(--sp-space-5);
  font-size: var(--sp-text-body);
  line-height: 1.8;
}

/* ── footnote (상단 헤어라인 + 작은 뮤트) ───────────────────── */
.sp-panel__footnote {
  padding: var(--sp-space-3) var(--sp-space-5);
  border-top: 1px solid transparent;
  font-size: var(--sp-text-caption);
  line-height: 1.7;
}

/* ── tone · light ───────────────────────────────────────────── */
.sp-panel--light {
  background: var(--sp-surface);
  border-color: var(--sp-border);
  box-shadow: var(--sp-shadow-card);
}
.sp-panel--light .sp-panel__header { border-bottom-color: var(--sp-hairline); }
.sp-panel--light .sp-panel__title { color: var(--sp-ink); }
.sp-panel--light .sp-panel__meta { color: var(--sp-text-subtle); }
.sp-panel--light .sp-panel__body { color: var(--sp-text); }
.sp-panel--light .sp-panel__footnote {
  border-top-color: var(--sp-hairline);
  color: var(--sp-text-subtle);
}

/* ── tone · navy ────────────────────────────────────────────── */
.sp-panel--navy {
  background: var(--sp-navy);
  border-color: var(--sp-border-on-navy);
}
/* ── tone · navy-800 (카드 위 네이비) ───────────────────────── */
.sp-panel--navy-800 {
  background: var(--sp-navy-800);
  border-color: var(--sp-border-on-navy);
}

.sp-panel--navy .sp-panel__header,
.sp-panel--navy-800 .sp-panel__header { border-bottom-color: var(--sp-hairline-on-navy); }

.sp-panel--navy .sp-panel__title,
.sp-panel--navy-800 .sp-panel__title { color: var(--sp-on-navy); }

.sp-panel--navy .sp-panel__meta,
.sp-panel--navy-800 .sp-panel__meta { color: var(--sp-on-navy-muted); }

.sp-panel--navy .sp-panel__body,
.sp-panel--navy-800 .sp-panel__body { color: var(--sp-on-navy-body); }

.sp-panel--navy .sp-panel__footnote,
.sp-panel--navy-800 .sp-panel__footnote {
  border-top-color: var(--sp-hairline-on-navy);
  color: var(--sp-on-navy-muted);
}


/* ── components/content/ProcessList/ProcessList.css ───────────────────────────────── */
.sp-processlist {
  font-family: var(--sp-font-sans);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sp-processlist__step {
  display: flex;
  gap: var(--sp-space-5);
  padding: var(--sp-space-5) 0;
  align-items: baseline;
}

.sp-processlist__step + .sp-processlist__step {
  border-top: 1px solid var(--sp-hairline);
}

.sp-processlist__num {
  flex: none;
  width: 2.4em;
  font-family: var(--sp-font-label);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--sp-tracking-label);
  font-variant-numeric: tabular-nums;
}

.sp-processlist__text {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-processlist__title {
  font-size: var(--sp-text-lead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.sp-processlist__desc {
  margin: 8px 0 0;
  font-size: var(--sp-text-caption);
  line-height: 1.8;
}

/* ── tone · navy ────────────────────────────────────────────── */
.sp-processlist--navy .sp-processlist__num { color: var(--sp-gold-light); }
.sp-processlist--navy .sp-processlist__title { color: var(--sp-on-navy); }
.sp-processlist--navy .sp-processlist__desc { color: var(--sp-on-navy-muted); }
.sp-processlist--navy .sp-processlist__step + .sp-processlist__step {
  border-top-color: var(--sp-hairline-on-navy);
}

/* ── tone · light ───────────────────────────────────────────── */
.sp-processlist--light .sp-processlist__num { color: var(--sp-gold-deep); }
.sp-processlist--light .sp-processlist__title { color: var(--sp-ink); }
.sp-processlist--light .sp-processlist__desc { color: var(--sp-text-muted); }
.sp-processlist--light .sp-processlist__step + .sp-processlist__step {
  border-top-color: var(--sp-hairline);
}


/* ── components/content/ServiceCard/ServiceCard.css ───────────────────────────────── */
.sp-servicecard {
  display: block;
  padding: var(--sp-space-8) var(--sp-space-6);
  font-family: var(--sp-font-sans);
  text-decoration: none;
}

.sp-servicecard__num {
  display: block;
  font-family: var(--sp-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--sp-gold);
  margin-bottom: var(--sp-space-4);
}

.sp-servicecard__title {
  font-size: var(--sp-text-lead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-space-3);
  transition: color 0.16s ease;
}

.sp-servicecard__desc {
  font-size: var(--sp-text-caption);
  line-height: 1.8;
  margin: 0;
}

/* ── tones ──────────────────────────────────────────────────── */
.sp-servicecard--navy .sp-servicecard__title { color: var(--sp-on-navy); }
.sp-servicecard--navy .sp-servicecard__desc { color: var(--sp-on-navy-muted); }

.sp-servicecard--light .sp-servicecard__title { color: var(--sp-ink); }
.sp-servicecard--light .sp-servicecard__desc { color: var(--sp-text-muted); }

/* ── active (골드 강조) ─────────────────────────────────────── */
.sp-servicecard--navy.sp-servicecard--active .sp-servicecard__num,
.sp-servicecard--navy.sp-servicecard--active .sp-servicecard__title { color: var(--sp-gold-light); }

.sp-servicecard--light.sp-servicecard--active .sp-servicecard__num,
.sp-servicecard--light.sp-servicecard--active .sp-servicecard__title { color: var(--sp-gold-deep); }

/* ── link 변형 (카드 전체 링크) ─────────────────────────────── */
.sp-servicecard--link { cursor: pointer; }
.sp-servicecard--navy.sp-servicecard--link:hover .sp-servicecard__title { color: var(--sp-gold-light); }
.sp-servicecard--light.sp-servicecard--link:hover .sp-servicecard__title { color: var(--sp-gold-deep); }

.sp-servicecard--link:focus-visible {
  outline: 2px solid var(--sp-gold);
  outline-offset: 3px;
}


/* ── components/content/SpecTable/SpecTable.css ───────────────────────────────── */
.sp-spectable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sp-font-sans);
  text-align: left;
}

/* ── rows ───────────────────────────────────────────────────── */
.sp-spectable__row {
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-spectable__row:last-child {
  border-bottom: 0;
}

.sp-spectable__label {
  padding: 13px 16px 13px 0;
  font-size: var(--sp-text-caption);
  font-weight: 500;
  text-align: left;
  color: var(--sp-text-muted);
  white-space: nowrap;
}

.sp-spectable__value {
  padding: 13px 0;
  font-family: var(--sp-font-label);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sp-ink);
}

/* ── caption (하단) ─────────────────────────────────────────── */
.sp-spectable__caption {
  caption-side: bottom;
  padding-top: 12px;
  font-family: var(--sp-font-sans);
  font-size: var(--sp-text-caption);
  text-align: left;
  color: var(--sp-text-subtle);
}

/* ── emphasize last row (골드 강조) ─────────────────────────── */
.sp-spectable__row--emphasis .sp-spectable__label {
  font-weight: 700;
  color: var(--sp-text);
}
.sp-spectable__row--emphasis .sp-spectable__value {
  font-weight: 700;
  color: var(--sp-gold-deep);
}

/* ── tone · navy ────────────────────────────────────────────── */
.sp-spectable--navy .sp-spectable__row {
  border-bottom-color: var(--sp-hairline-on-navy);
}
.sp-spectable--navy .sp-spectable__label {
  color: var(--sp-on-navy-muted);
}
.sp-spectable--navy .sp-spectable__value {
  color: var(--sp-on-navy);
}
.sp-spectable--navy .sp-spectable__caption {
  color: var(--sp-on-navy-subtle);
}
.sp-spectable--navy .sp-spectable__row--emphasis .sp-spectable__label {
  color: var(--sp-on-navy);
}
.sp-spectable--navy .sp-spectable__row--emphasis .sp-spectable__value {
  color: var(--sp-gold-light);
}

/* ── tone · light ───────────────────────────────────────────── */
.sp-spectable--light .sp-spectable__row {
  border-bottom-color: var(--sp-hairline);
}
.sp-spectable--light .sp-spectable__label {
  color: var(--sp-text-muted);
}
.sp-spectable--light .sp-spectable__value {
  color: var(--sp-ink);
}
.sp-spectable--light .sp-spectable__caption {
  color: var(--sp-text-subtle);
}


/* ── components/content/StatBlock/StatBlock.css ───────────────────────────────── */
.sp-statblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--sp-font-sans);
}

.sp-statblock__label { margin-bottom: var(--sp-space-4); }

.sp-statblock__value {
  font-family: var(--sp-font-serif);
  font-size: var(--sp-text-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--sp-tracking-tight);
  margin: 0 0 var(--sp-space-3);
}

.sp-statblock__accent { color: var(--sp-gold); }

.sp-statblock__title {
  font-size: var(--sp-text-lead);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
}

.sp-statblock__description {
  font-size: var(--sp-text-caption);
  line-height: 1.75;
  margin: var(--sp-space-2) 0 0;
}

/* ── tones ──────────────────────────────────────────────────── */
.sp-statblock--navy .sp-statblock__value,
.sp-statblock--navy .sp-statblock__title { color: var(--sp-on-navy); }
.sp-statblock--navy .sp-statblock__description { color: var(--sp-on-navy-muted); }
.sp-statblock--navy .sp-statblock__accent { color: var(--sp-gold-light); }

.sp-statblock--light .sp-statblock__value,
.sp-statblock--light .sp-statblock__title { color: var(--sp-ink); }
.sp-statblock--light .sp-statblock__description { color: var(--sp-text-muted); }
.sp-statblock--light .sp-statblock__accent { color: var(--sp-gold-deep); }


/* ── components/foundations/Divider/Divider.css ───────────────────────────────── */
.sp-divider {
  border: 0;
  height: 1px;
  width: 100%;
  margin: var(--sp-space-6) 0;
}

.sp-divider--light { background: var(--sp-border); }
.sp-divider--navy { background: var(--sp-hairline-on-navy); }
.sp-divider--gold { background: var(--sp-gold); height: 2px; }


/* ── components/foundations/EyebrowLabel/EyebrowLabel.css ───────────────────────────────── */
.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sp-font-label);
  font-size: var(--sp-text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--sp-tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.sp-eyebrow__marker {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 2px;
  background: var(--sp-gold);
}

.sp-eyebrow--gold { color: var(--sp-gold); }
.sp-eyebrow--navy { color: var(--sp-navy-700); }
.sp-eyebrow--muted { color: var(--sp-text-subtle); }
.sp-eyebrow--on-navy { color: var(--sp-gold-light); }


/* ── components/foundations/Logo/Logo.css ───────────────────────────────── */
.sp-logo {
  --_logo-mark: 22px;
  --_logo-fs: 16px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sp-font-sans);
  line-height: 1.1;
}

.sp-logo__mark {
  width: calc(var(--_logo-mark) * 166 / 92);
  height: var(--_logo-mark);
  flex: none;
  display: block;
}

.sp-logo__text { display: inline-flex; flex-direction: column; gap: 3px; }

.sp-logo__wordmark {
  font-size: var(--_logo-fs);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sp-logo__sub {
  font-family: var(--sp-font-label);
  font-size: calc(var(--_logo-fs) * 0.68);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-gold);
}

/* ── sizes ──────────────────────────────────────────────────── */
.sp-logo--sm { --_logo-mark: 18px; --_logo-fs: 14px; }
.sp-logo--md { --_logo-mark: 22px; --_logo-fs: 16px; }
.sp-logo--lg { --_logo-mark: 30px; --_logo-fs: 21px; }

/* ── tones ──────────────────────────────────────────────────── */
.sp-logo--dark .sp-logo__wordmark { color: var(--sp-on-navy); }
.sp-logo--light .sp-logo__wordmark { color: var(--sp-ink); }


/* ── components/foundations/Section/Section.css ───────────────────────────────── */
.sp-section {
  position: relative;
  width: 100%;
  font-family: var(--sp-font-sans);
}

.sp-section__inner {
  max-width: var(--sp-container);
  margin: 0 auto;
  padding-left: var(--sp-space-10);
  padding-right: var(--sp-space-10);
}
.sp-section__inner--narrow { max-width: var(--sp-container-narrow); }

/* ── vertical rhythm ────────────────────────────────────────── */
.sp-section--sm { padding-top: var(--sp-space-12); padding-bottom: var(--sp-space-12); }
.sp-section--md { padding-top: var(--sp-space-16); padding-bottom: var(--sp-space-16); }
.sp-section--lg { padding-top: var(--sp-space-20); padding-bottom: var(--sp-space-20); }

/* ── tones ──────────────────────────────────────────────────── */
.sp-section--navy { background: var(--sp-navy); color: var(--sp-on-navy-body); }
.sp-section--navy-deep { background: var(--sp-navy-deep); color: var(--sp-on-navy-body); }
.sp-section--light { background: var(--sp-surface); color: var(--sp-text); }
.sp-section--canvas { background: var(--sp-canvas); color: var(--sp-text); }

/* ── top gold rule ──────────────────────────────────────────── */
.sp-section--rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sp-gold);
}


/* ── components/navigation/Footer/Footer.css ───────────────────────────────── */
.sp-footer {
  background: var(--sp-navy);
  font-family: var(--sp-font-sans);
  padding: var(--sp-space-16) var(--sp-space-10) var(--sp-space-8);
}

/* ── top grid (브랜드 | 컬럼들) ──────────────────────────────── */
.sp-footer__top {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-space-12);
  padding-bottom: var(--sp-space-12);
}

.sp-footer__logo { margin-bottom: var(--sp-space-5); }

.sp-footer__tagline {
  margin: 0;
  max-width: 320px;
  font-size: var(--sp-text-caption);
  line-height: 1.9;
  color: var(--sp-on-navy-body);
}

/* ── branch columns ─────────────────────────────────────────── */
.sp-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-space-8);
}

.sp-footer__col-title {
  margin: 0 0 var(--sp-space-4);
  font-family: var(--sp-font-label);
  font-size: var(--sp-text-body);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--sp-gold-light);
}

.sp-footer__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}

.sp-footer__line {
  font-size: var(--sp-text-caption);
  line-height: 1.7;
  color: var(--sp-on-navy-muted);
}

/* ── bottom bar (legal | copyright) ─────────────────────────── */
.sp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  padding-top: var(--sp-space-6);
  border-top: 1px solid var(--sp-hairline-on-navy);
}

.sp-footer__legal {
  font-size: var(--sp-text-caption);
  line-height: 1.7;
  color: var(--sp-on-navy-muted);
}

.sp-footer__copyright {
  font-family: var(--sp-font-label);
  font-size: var(--sp-text-caption);
  letter-spacing: 0.03em;
  color: var(--sp-on-navy-subtle);
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sp-footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-space-10);
  }
  .sp-footer__columns { grid-template-columns: 1fr 1fr; }
  .sp-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── components/navigation/Header/Header.css ───────────────────────────────── */
.sp-header {
  display: flex;
  align-items: center;
  gap: var(--sp-space-8);
  padding: var(--sp-space-5) var(--sp-space-8);
  font-family: var(--sp-font-sans);
}

.sp-header__brand {
  flex: none;
}

/* 로고 뒤 여백을 밀어 내비/액션을 우측으로 정렬 */
.sp-header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-space-8);
  margin-left: auto;
}

.sp-header__link {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.sp-header__link--active {
  font-weight: 700;
}

.sp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-space-5);
  flex: none;
}

/* ── locale toggle ──────────────────────────────────────────── */
.sp-header__locale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sp-font-label);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.sp-header__locale-btn {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 0.16s ease;
}

.sp-header__locale-sep {
  opacity: 0.45;
}

.sp-header__cta {
  display: inline-flex;
}

/* ── tone · navy ────────────────────────────────────────────── */
.sp-header--navy {
  border-bottom: 1px solid var(--sp-hairline-on-navy);
}
.sp-header--navy .sp-header__link {
  color: var(--sp-on-navy-body);
}
.sp-header--navy .sp-header__link:hover {
  color: var(--sp-on-navy);
}
.sp-header--navy .sp-header__link--active {
  color: var(--sp-gold-light);
}
.sp-header--navy .sp-header__locale-btn {
  color: var(--sp-on-navy-subtle);
}
.sp-header--navy .sp-header__locale-btn--active {
  color: var(--sp-on-navy);
}
.sp-header--navy .sp-header__locale-sep {
  color: var(--sp-on-navy-subtle);
}

/* ── tone · light ───────────────────────────────────────────── */
.sp-header--light {
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-header--light .sp-header__link {
  color: var(--sp-text);
}
.sp-header--light .sp-header__link:hover {
  color: var(--sp-ink);
}
.sp-header--light .sp-header__link--active {
  color: var(--sp-gold-deep);
}
.sp-header--light .sp-header__locale-btn {
  color: var(--sp-text-subtle);
}
.sp-header--light .sp-header__locale-btn--active {
  color: var(--sp-ink);
}
.sp-header--light .sp-header__locale-sep {
  color: var(--sp-text-subtle);
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sp-header {
    flex-wrap: wrap;
    gap: var(--sp-space-4);
  }
  .sp-header__nav {
    gap: var(--sp-space-5);
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .sp-header__actions {
    margin-left: auto;
  }
}


/* ── components/sections/CTASection/CTASection.css ───────────────────────────────── */
.sp-ctasection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-10);
  font-family: var(--sp-font-sans);
}

/* ── 상단 골드 강조선 ────────────────────────────────────────── */
.sp-ctasection--rule {
  border-top: 2px solid var(--sp-gold);
  padding-top: var(--sp-space-10);
}

.sp-ctasection__body {
  min-width: 0;
}

.sp-ctasection__title {
  font-family: var(--sp-font-serif);
  font-size: var(--sp-text-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.sp-ctasection__subtitle {
  font-size: var(--sp-text-body);
  line-height: 1.9;
  margin: 14px 0 0;
  max-width: 520px;
}

.sp-ctasection__actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-4);
}

/* ── tones (네이비 배경 위 색 조립) ──────────────────────────── */
.sp-ctasection--navy .sp-ctasection__title,
.sp-ctasection--navy-deep .sp-ctasection__title {
  color: var(--sp-on-navy);
}
.sp-ctasection--navy .sp-ctasection__subtitle,
.sp-ctasection--navy-deep .sp-ctasection__subtitle {
  color: var(--sp-on-navy-body);
}

@media (max-width: 860px) {
  .sp-ctasection {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-space-6);
  }
}


/* ── components/sections/FeatureGrid/FeatureGrid.css ───────────────────────────────── */
.sp-featuregrid {
  display: grid;
  row-gap: var(--sp-space-10);
  font-family: var(--sp-font-sans);
}

/* ── column counts ──────────────────────────────────────────── */
.sp-featuregrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sp-featuregrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sp-featuregrid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── cell ───────────────────────────────────────────────────── */
.sp-featuregrid__item {
  padding: 0 var(--sp-space-8);
  border-left: 1px solid var(--sp-hairline);
}

/* 각 행의 첫 셀은 세로 구분선/좌측 패딩 없음 */
.sp-featuregrid--cols-2 .sp-featuregrid__item:nth-child(2n + 1),
.sp-featuregrid--cols-3 .sp-featuregrid__item:nth-child(3n + 1),
.sp-featuregrid--cols-4 .sp-featuregrid__item:nth-child(4n + 1) {
  border-left: none;
  padding-left: 0;
}

.sp-featuregrid__title {
  font-size: var(--sp-text-lead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-space-3);
}

.sp-featuregrid__desc {
  font-size: var(--sp-text-caption);
  line-height: 1.8;
  margin: 0;
}

/* ── tones ──────────────────────────────────────────────────── */
.sp-featuregrid--navy .sp-featuregrid__item { border-left-color: var(--sp-hairline-on-navy); }
.sp-featuregrid--navy .sp-featuregrid__title { color: var(--sp-on-navy); }
.sp-featuregrid--navy .sp-featuregrid__desc { color: var(--sp-on-navy-muted); }

.sp-featuregrid--light .sp-featuregrid__item { border-left-color: var(--sp-hairline); }
.sp-featuregrid--light .sp-featuregrid__title { color: var(--sp-ink); }
.sp-featuregrid--light .sp-featuregrid__desc { color: var(--sp-text-muted); }

/* ── responsive: 좁은 화면에서 세로 스택 + 상단 헤어라인 ─────── */
@media (max-width: 720px) {
  .sp-featuregrid--cols-2,
  .sp-featuregrid--cols-3,
  .sp-featuregrid--cols-4 {
    grid-template-columns: 1fr;
    row-gap: var(--sp-space-6);
  }

  .sp-featuregrid__item {
    padding: var(--sp-space-6) 0 0;
    border-left: none;
    border-top: 1px solid var(--sp-hairline);
  }
  .sp-featuregrid--navy .sp-featuregrid__item { border-top-color: var(--sp-hairline-on-navy); }
  .sp-featuregrid--light .sp-featuregrid__item { border-top-color: var(--sp-hairline); }

  .sp-featuregrid__item:first-child {
    padding-top: 0;
    border-top: none;
  }
}


/* ── components/sections/Hero/Hero.css ───────────────────────────────── */
.sp-hero {
  font-family: var(--sp-font-sans);
}

.sp-hero--split {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--sp-space-12);
  align-items: center;
}

.sp-hero__eyebrow { margin-bottom: 22px; }

.sp-hero__title {
  font-family: var(--sp-font-serif);
  font-size: var(--sp-text-display);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: var(--sp-tracking-tight);
  margin: 0 0 24px;
  text-wrap: balance;
}

.sp-hero__accent { color: var(--sp-gold-light); }

.sp-hero__subtitle {
  font-size: var(--sp-text-body);
  line-height: 1.95;
  margin: 0 0 34px;
  max-width: 480px;
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-4);
}

/* ── tones ──────────────────────────────────────────────────── */
.sp-hero--navy .sp-hero__title,
.sp-hero--navy-deep .sp-hero__title { color: var(--sp-on-navy); }
.sp-hero--navy .sp-hero__subtitle,
.sp-hero--navy-deep .sp-hero__subtitle { color: var(--sp-on-navy-body); }

.sp-hero--light .sp-hero__title { color: var(--sp-ink); }
.sp-hero--light .sp-hero__subtitle { color: var(--sp-text); }
.sp-hero--light .sp-hero__accent { color: var(--sp-gold-deep); }

@media (max-width: 860px) {
  .sp-hero--split { grid-template-columns: 1fr; }
  .sp-hero__title { font-size: 38px; }
}


/* ── components/sections/SectionHeading/SectionHeading.css ───────────────────────────────── */
.sp-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-space-6);
  font-family: var(--sp-font-sans);
}

.sp-heading__eyebrow { margin-bottom: 14px; }

.sp-heading__title {
  font-family: var(--sp-font-serif);
  font-size: var(--sp-text-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.sp-heading__action { flex: none; padding-bottom: 4px; }

/* ── tones ──────────────────────────────────────────────────── */
.sp-heading--navy .sp-heading__title { color: var(--sp-on-navy); }
.sp-heading--light .sp-heading__title { color: var(--sp-ink); }

/* ── alignment ──────────────────────────────────────────────── */
.sp-heading--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sp-heading--center .sp-heading__eyebrow { justify-content: center; }
.sp-heading--center .sp-heading__action { padding-bottom: 0; margin-top: var(--sp-space-4); }