:root {
  --color-navy: #0B1F3A;
  --color-primary: #327789;
  --color-accent: #14B8A6;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F8FC;
  --color-text: #1F2937;
  --color-text-muted: #5B6B7F;
  --color-border: #E2E8F0;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(11, 31, 58, 0.08);
  --container: 1120px;
  --font: Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.section { padding: 80px 0; }
.section--alt { background: var(--color-bg-alt); }
.section__head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 14px; font-weight: 700;
  color: var(--color-accent); letter-spacing: 0.02em; margin-bottom: 12px;
}
.section__title { font-size: clamp(24px, 4vw, 34px); color: var(--color-navy); line-height: 1.3; }
.section__lead { margin-top: 14px; color: var(--color-text-muted); font-size: 17px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
/* 아이콘: 브랜드 색 인라인 SVG 를 틴트 칩에 담아 톤을 통일한다(외부 요청 0).
   아이콘과 제목은 card__head 로 한 줄에 배치한다. */
.card__icon { flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(50, 119, 137, 0.10); color: var(--color-primary); }
.card__icon svg { width: 24px; height: 24px; }
.card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card__head .card__title { margin-bottom: 0; }
.card__title { font-size: 18px; color: var(--color-navy); margin-bottom: 8px; }
.card__desc { color: var(--color-text-muted); font-size: 15px; }
/* 문제 제기 카드: 흰 배경 위 흰 카드의 심심함을 은은한 브랜드 틴트 그라데이션으로 해소.
   저채도(~10%)라 텍스트 대비(AA)·신뢰 톤 유지. 카드별 색상을 틸→accent→네이비로 미세 변화. */
#problem .card { background: linear-gradient(145deg, rgba(50, 119, 137, 0.10), rgba(255, 255, 255, 0) 55%), #fff; }
#problem .card:nth-child(2) { background: linear-gradient(145deg, rgba(20, 184, 166, 0.10), rgba(255, 255, 255, 0) 55%), #fff; }
#problem .card:nth-child(3) { background: linear-gradient(145deg, rgba(30, 74, 95, 0.12), rgba(255, 255, 255, 0) 55%), #fff; }
/* blob 배경 — 브랜드 색 blur 오브가 느리게 떠다닌다. 저불투명 + multiply 로 흰 배경에
   은은한 컬러 워시를 만든다. 밝은 섹션(#problem·#how)에만 쓰고, 그 사이의 --alt 섹션은
   평면으로 둬 리듬을 만든다. reduced-motion 시 정지.
   공통 규격만 여기서 정하고 색·배치는 섹션별로 분리한다 — 두 섹션의 내용물이 달라
   (카드 뒤 vs 맨 텍스트 뒤) 요구되는 배치와 농도가 다르기 때문. */
#problem, #how { position: relative; overflow: hidden; }
#problem > .container, #how > .container { position: relative; z-index: 1; }
.blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blobs span { position: absolute; width: 380px; height: 380px; border-radius: 50%;
  filter: blur(64px); mix-blend-mode: multiply;
  animation: blob 8s infinite ease-in-out; }
/* 문제 제기: 카드가 불투명이라 워시는 카드 뒤·사이에서만 비친다. 그래서 20% 로 진하게. */
#problem .blobs span { opacity: 0.20; }
#problem .blobs span:nth-child(1) { background: var(--color-primary); top: -70px; left: 6%; }
#problem .blobs span:nth-child(2) { background: var(--color-accent); top: 15%; right: 4%; animation-delay: -2.7s; }
#problem .blobs span:nth-child(3) { background: var(--color-navy); bottom: -90px; left: 34%; animation-delay: -5.4s; }
/* 작동 방식: 스텝에 카드 배경이 없어 워시가 본문 글자 뒤에 그대로 깔린다. 그래서 농도를
   10% 로 낮추고, 어두운 네이비를 빼고 스텝 원과 같은 틸 램프만 쓴다. 배치는 #problem 과
   좌우를 뒤집어 두 섹션이 같은 그림으로 보이지 않게 했다.
   농도가 유일한 레버였다 — blur(64px) 를 먹은 오브 3개가 섹션 전체에 겹쳐 광역 워시를
   만들기 때문에, 개별 blob 을 바깥으로 밀거나(왼쪽 -110→-190px, 아래 -140→-260px)
   더 밝은 틸로 바꿔도 최암부는 그대로였다.
   실측(헤드리스 크롬 픽셀 샘플링, 스텝 제목·설명·섹션 헤드 영역의 최암부 기준):
   본문 muted(#5B6B7F) 대비 4.77:1 로 AA 통과(흰 배경 상한 5.45, 기준 4.50). */
#how .blobs span { opacity: 0.10; }
#how .blobs span:nth-child(1) { background: var(--color-accent); top: -120px; right: 4%; }
#how .blobs span:nth-child(2) { background: #0C8577; top: 28%; left: -110px; animation-delay: -3.4s; }
#how .blobs span:nth-child(3) { background: var(--color-primary); bottom: -140px; right: 26%; animation-delay: -6.1s; }
@keyframes blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(28px, -22px) scale(1.12); }
  66% { transform: translate(-24px, 18px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) { .blobs span { animation: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  transition: transform .05s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: #285F6E; }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); }

:focus-visible { outline: 3px solid rgba(20, 184, 166, 0.5); outline-offset: 2px; border-radius: 4px; }

/* Nav — 두 가지 표면 상태를 오간다.
   (1) 최상단: 완전 투명. 다크 히어로와 경계 없이 한 몸처럼 얹혀 보인다.
   (2) 스크롤 후: 글래스(반투명 흰색 + blur). 밝은 본문 위로 떠 있는 표면이 된다.
   히어로에 겹쳐야 하므로 sticky 가 아니라 fixed 다. 흐름에서 빠진 64px 는
   .hero 의 상단 패딩으로 되돌려 콘텐츠 위치를 그대로 유지한다.
   상태 전환은 JS(navSurface)가 .is-solid 로 토글한다. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
/* 투명 상태의 가독성 장치. 히어로 우상단 틸 글로우가 밝아(측정 rgb(73,134,150))
   흰 글자가 4.09:1 로 AA(4.5:1)에 못 미친다. 헤더보다 길게(140px) 깔고 아래로
   완전히 사라지는 네이비 스크림을 둬 대비만 올린다 — 끝이 0 이라 경계선으로
   보이지 않고, 히어로 자체의 상단 음영처럼 읽힌다. */
.nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 140px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0.55), rgba(11, 31, 58, 0));
  transition: opacity .25s ease; }
.nav.is-solid::before { opacity: 0; }
/* 투명 상태에서는 배경이 다크 히어로이므로 로고·메뉴를 반전한다.
   primary(#327789)는 히어로 배경과 같은 계열이라 묻히므로 밝은 틸 단계를 쓴다. */
.nav__logo { font-size: 22px; font-weight: 800; color: #fff; }
.nav__logo span { color: #5EEAD4; }
.nav__menu a { font-weight: 600; color: #fff; }
.nav__menu a:hover { color: #5EEAD4; }
/* 글래스 상태. 알파를 0.72 까지 낮출 수 있는 것은 이 상태의 배경이 항상 밝은 본문이라
   글자 대비가 흔들리지 않기 때문이다(투명 상태와 색을 분리했으므로 가능). */
.nav.is-solid { background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 20px rgba(11, 31, 58, 0.06); }
/* backdrop-filter 미지원 시에는 반투명이 그냥 비쳐 보이므로 거의 불투명하게 올린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-solid { background: rgba(255, 255, 255, 0.94); }
}
/* JS 가 없으면 .is-solid 가 영영 붙지 않아, 흰 본문 위에서 흰 메뉴 글자가 사라진다.
   그런 환경에서는 전환을 포기하고 처음부터 글래스 표면으로 고정한다. */
@media (scripting: none) {
  .nav { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--color-border); }
  .nav::before { opacity: 0; }
  .nav__logo { color: var(--color-navy); }
  .nav__logo span { color: var(--color-primary); }
  .nav__menu a { color: var(--color-text); }
  .nav__menu a:hover { color: var(--color-primary); }
  .lang-toggle { background: rgba(50, 119, 137, 0.10); border-color: var(--color-border); }
  .nav__menu a.lang-toggle:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
  .nav-toggle span { background: var(--color-navy); }
}
/* 모바일 메뉴가 열린 동안: 아래 패널(불투명 흰색)과 한 면으로 이어지도록 blur 를 끈다. */
.nav.is-menu-open { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-solid .nav__logo { color: var(--color-navy); }
.nav.is-solid .nav__logo span { color: var(--color-primary); }
.nav.is-solid .nav__menu a { color: var(--color-text); }
.nav.is-solid .nav__menu a:hover { color: var(--color-primary); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav__menu { display: flex; align-items: center; gap: 24px; }
/* 언어 전환 토글 (nav 의 문의하기 버튼 자리) — 브랜드 틴트 배경 + 호버 시 채움 */
.lang-toggle { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 6px 12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.nav.is-solid .lang-toggle { background: rgba(50, 119, 137, 0.10); border-color: var(--color-border); }
/* .nav__menu a:hover 보다 우선하도록 specificity 확보 — 안 그러면 호버 시 같은 색끼리 겹쳐 글자가 사라짐 */
.nav__menu a.lang-toggle:hover { color: var(--color-navy); background: #5EEAD4; border-color: #5EEAD4; }
.nav.is-solid .nav__menu a.lang-toggle:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.lang-toggle svg { width: 16px; height: 16px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px;
  transform-origin: center; transition: transform .28s ease, opacity .2s ease, background .25s ease; }
.nav.is-solid .nav-toggle span { background: var(--color-navy); }
/* 버거 → X 변형: JS 가 클릭 시 버튼에 aria-expanded 를 토글하므로 CSS 만으로 애니메이션.
   위/아래 바를 가운데(바높이2+간격5=7px)로 모아 ±45° 회전, 가운데 바는 페이드 아웃. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero — 브랜드 네이비→틸 다크 배경. 흰 채팅 카드를 돋보이게 하고
   푸터(다크)와 위아래 대칭을 이룬다. 텍스트는 다크 대비로 반전.
   그라데이션은 네이비→틸→네이비 스윕이라 가운데만 밝아졌다가 다시 어두워진다. */
/* 상단 패딩 137px = 원래 여백 72px + fixed 로 흐름에서 빠진 nav 높이 65px
   (내용 64px + 하단 보더 1px). nav 가 겹쳐도 콘텐츠는 이전과 같은 자리에 놓인다. */
.hero { position: relative; padding: 137px 0 72px;
  background-color: var(--color-navy); /* 그라데이션 미지원 시 폴백 */
  /* 정지점 3~5개짜리 삼각형 프로파일은 정점에서 기울기가 부호까지 꺾여(+0.13→-0.13)
     대각선 crease 가 선으로 보인다. half-cosine 벨 커브를 5% 간격으로 샘플링해 t=0·정점·1
     에서 기울기를 0 으로 만들면 꺾임 없이 부드럽게 밝아졌다 어두워진다.
     정점은 60%(채팅 카드 쪽)에 둬 왼쪽 텍스트 열의 대비 여유를 남긴다.
     radial 은 transparent(=투명한 검정) 대신 같은 색의 alpha 0 으로 끝내 탁해지지 않게 한다. */
  background-image:
    radial-gradient(900px 500px at 78% 18%, rgba(50, 119, 137, 0.38), rgba(50, 119, 137, 0) 70%),
    linear-gradient(150deg,
      #0B1F3A 0%, #0C203B 5%, #0D253F 10%, #102B45 15%, #14344D 20%, #193E56 25%,
      #1E495F 30%, #225469 35%, #275E73 40%, #2B687B 45%, #2F6F82 50%, #317487 55%,
      #327789 60%, #317688 65%, #2E6E81 70%, #286074 75%, #204F65 80%, #183D55 85%,
      #112D47 90%, #0D233D 95%, #0B1F3A 100%); }
/* Hero 배경 격자 무늬(테크 톤). 46px 그리드의 얇은 흰 선을 낮은 불투명도로 얹고,
   상단에서 강했다가 아래로 페이드되도록 radial 마스크를 적용한다. 콘텐츠(.hero__inner)는 위에. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 35%, transparent 80%); }
.hero__inner { position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero__title { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; color: #fff; margin: 8px 0 18px; }
.hero__lead { font-size: 18px; color: #C7D3E2; max-width: 520px; }
.hero__actions { display: flex; justify-content:center; gap: 12px; margin: 28px 0 14px; flex-wrap: wrap; }
/* 다크 배경 위 대비 확보 (밝은 섹션의 .btn--ghost 는 그대로).
   .eyebrow 는 기존 --color-accent 로 다크 배경에서도 AA 통과(6.0:1)하므로 그대로 둔다. */
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
/* --color-primary 는 Hero 배경과 같은 색 계열이라 CTA 가 묻힌다(2.58:1).
   accent(#14B8A6) 도 스윕이 밝아진 구간에서는 2.76:1 로 부족해, 같은 teal 램프의
   밝은 단계를 써서 배경 대비 3.69:1 을 확보한다(hover 는 더 밝은 단계). */
.hero .btn--primary { background: #2DD4BF; color: var(--color-navy); }
.hero .btn--primary:hover { background: #5EEAD4; }
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Chat demo 컨테이너(내용은 Task 3 JS가 채움)
   말풍선이 순차 추가되는 동안 레이아웃이 밀리지 않도록 높이를 고정한다. 다만 그 높이는
   대본 7개가 스크롤 없이 전부 담기는 값이어야 한다 — 스크롤되면 도입부("어떤 물건을
   찾고 계신가요?")가 위로 밀려 사라지고 잘린 말풍선만 남는다.
   측정값(필요 높이): 바깥폭 ≥350px → 461, 330~340 → 481, 320 → 500, ≤300 → 518.
   여기에 여유를 더한 이유는 Pretendard 가 self-host 되지 않아 실제 렌더 폰트가 플랫폼마다
   다르고(Apple SD Gothic Neo / 맑은 고딕) 행 높이도 미세하게 달라지기 때문이다.
   남는 여백은 카드 아래쪽에 생기는데, 대화가 위에서부터 쌓이는 채팅 UI 에서는 자연스럽다.
   overflow-y 는 그 여유마저 넘길 때를 위한 안전판으로 남겨 둔다(평상시엔 스크롤 없음). */
.chat { background: #fff; border: 1px solid var(--color-border); border-radius: 20px;
  box-shadow: var(--shadow); padding: 16px; height: 490px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
/* 좁은 폭에서는 2줄로 접히는 말풍선이 늘어 필요 높이가 커진다. 같은 대본이라도 영문 문장이
   길어 한글보다 한 단계 먼저·더 크게 접히므로, 좁은 구간만 언어별로 분기한다.
   실측 필요 높이(.chat 바깥폭 기준 / 뷰포트 = 바깥폭 + 컨테이너 좌우 패딩 40px):
     ko  ≥350 → 461 | 330~340 → 481 | 320 → 500 | ≤300 → 518
     en  ≥400 → 460 | 385~395 → 479 | 370~380 → 498 | ≤360 → 554 | 280 → 574
   기본 490px 가 두 언어의 넓은 구간을 모두 덮고, 아래 두 규칙이 나머지를 덮는다. */
@media (max-width: 389px) { html[lang="ko"] .chat { height: 540px; } }
@media (max-width: 424px) { html[lang="en"] .chat { height: 580px; } }
.chat > * { flex: none; } /* 고정 높이 안에서 말풍선이 눌리지 않도록 */
.chat::-webkit-scrollbar { width: 6px; }
.chat::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* Task 3: Chat bubble & typing styles
   대본 7개가 컨테이너 높이 안에 스크롤 없이 모두 들어가야 하므로 타이포·여백을 함께 조인다.
   글자 크기만으로는 부족하다 — 패딩·갭 같은 고정 오버헤드는 폰트에 비례하지 않기 때문.
   max-width 를 88% 로 넓힌 것도 같은 목적이다(좁은 폭에서 줄바꿈 횟수를 줄여 높이를 아낀다). */
.bubble { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  opacity: 0; transform: translateY(6px); animation: bubbleIn .28s ease forwards; }
.bubble--bot { align-self: flex-start; background: var(--color-bg-alt); color: var(--color-text);
  border-bottom-left-radius: 4px; }
.bubble--user { align-self: flex-end; background: var(--color-primary); color: #fff;
  border-bottom-right-radius: 4px; }
.bubble--typing { display: inline-flex; gap: 4px; align-items: center; }
.bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted);
  animation: blink 1s infinite; }
.bubble--typing i:nth-child(2) { animation-delay: .2s; }
.bubble--typing i:nth-child(3) { animation-delay: .4s; }
.rec-card { align-self: stretch; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 11px; background: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px);
  animation: bubbleIn .28s ease forwards; }
.rec-card__title { font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--color-navy); }
.rec-card__meta { font-size: 12px; line-height: 1.45; color: var(--color-text-muted); margin-top: 3px; }
.rec-card__score { display: inline-block; margin-top: 6px; font-size: 12px; line-height: 1.45;
  font-weight: 700; color: var(--color-accent); }
/* 컨설턴트 매칭 결과 카드 */
.expert-card { display: flex; align-items: center; gap: 10px;
  border-color: var(--color-primary); background: rgba(50, 119, 137, 0.05); }
.expert-card__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: var(--color-primary); color: #fff; }
.expert-card__tag { display: inline-block; margin-top: 6px; font-size: 11px; line-height: 1.4;
  font-weight: 700; color: var(--color-primary); background: rgba(50, 119, 137, 0.12);
  padding: 2px 8px; border-radius: 999px; }
@keyframes bubbleIn { to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Task 5: Step & Persona styles */
.steps { position: relative; }
/* 스텝 원을 잇는 그라데이션 연결선 (4열 레이아웃에서만) */
.steps::before { content: ''; position: absolute; z-index: 0;
  top: 60px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #063D38, #0A6E63, #0C8577, #0E9C8B); }
.step { position: relative; z-index: 1; text-align: center; padding: 28px 16px; }
.step__num { display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; color: #fff;
  font-weight: 800; font-size: 24px; margin: 0 auto 16px;
  background-image: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  box-shadow: 0 6px 16px rgba(11, 31, 58, 0.14); }
.steps .step:nth-child(1) .step__num { background-color: #063D38; box-shadow: 0 8px 18px rgba(6, 61, 56, 0.45); }
.steps .step:nth-child(2) .step__num { background-color: #0A6E63; box-shadow: 0 8px 18px rgba(10, 110, 99, 0.42); }
.steps .step:nth-child(3) .step__num { background-color: #0C8577; box-shadow: 0 8px 20px rgba(12, 133, 119, 0.42); }
.steps .step:nth-child(4) .step__num { background-color: #0E9C8B; box-shadow: 0 8px 22px rgba(14, 156, 139, 0.45); }
/* 스택 레이아웃(≤860px)에서는 가로 연결선 숨김 */
@media (max-width: 860px) { .steps::before { display: none; } }
.persona__tag { display: inline-block; font-size: 13px; font-weight: 700; color: var(--color-accent);
  background: rgba(20,184,166,0.1); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
/* 카드 hover: 테두리 강조 + 위로 떠오름 (모든 카드 공통) */
.card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-6px); border-color: var(--color-accent);
  box-shadow: 0 14px 32px rgba(11, 31, 58, 0.14); }
/* 다크 섹션(신뢰)은 네이비 그림자가 보이지 않으므로 그림자를 어둡게 대체 */
.trust__card:hover { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* Task 6: Trust & Footer styles */
.trust { position: relative; background: var(--color-navy); }
/* 신뢰 섹션 격자 배경 — Hero 와 동일 톤이되 페이드(마스크) 없이 전면 균일 적용. */
.trust::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px); }
.trust .container { position: relative; z-index: 1; }
/* 반투명이면 뒤의 격자가 카드에 비친다. 기존 색감(네이비+4% 흰색)의 불투명 등가색으로
   바꿔 카드 뒤 격자를 가린다(카드가 격자 위에 얹혀 보이도록). */
.trust__card { position: relative; display: flex; flex-direction: column;
  background: #152842; border-color: rgba(255,255,255,0.12); box-shadow: none; }
/* 다크 신뢰 섹션 텍스트 색 (인라인 style 대체 — 토큰/클래스로 관리) */
.trust .section__title { color: #fff; }
.trust .section__lead { color: #c7d3e2; }
.trust .card__title { color: #fff; }
.trust .card__desc { color: #c7d3e2; }
/* 신뢰 카드 아이콘: 공통 .card__icon 은 밝은 배경 기준(프라이머리+10% 틴트)이라
   네이비 카드 위에서 대비가 죽는다. 다크 카드에서는 액센트 틸로 올린다. */
.trust__card .card__icon { background: rgba(20, 184, 166, 0.14); color: var(--color-accent); }

/* 증거 행: "신뢰를 위한 장치"라는 주장 아래에 그 장치가 실제로 내는 결과를 붙인다.
   추상 장식 대신 정보를 두어 섹션의 임무(믿어도 되는지에 답하기)에 직접 기여한다.
   3장 모두 같은 문법(헤어라인 + '예시' 라벨 + 2~3행)이라 한 세트로 읽힌다. */
.trust__evidence { margin-top: auto; padding-top: 18px; }
/* 헤어라인이 남는 폭을 채우고 '예시' 라벨이 우측에 붙는다. 라벨은 이 값들이 실적이
   아니라 표본임을 명시해 오인을 막는다. */
.trust__evidence-rule { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trust__evidence-rule::before { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.12); }
.trust__evidence-rule span { flex: none; font-size: 12px; font-weight: 700; color: #8FA3BA;
  letter-spacing: 0.02em; }
.trust__evidence-list { list-style: none; display: grid; gap: 8px; }
.trust__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 물건번호처럼 자릿수가 같은 값이 세로로 정렬되도록 고정폭 숫자를 쓴다. */
.trust__row-key { min-width: 0; font-size: 14px; color: #c7d3e2;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* 상태 배지: 색만으로 상태를 구분하지 않도록 라벨 텍스트 + 표식 도형(원/삼각/사각)을
   함께 쓴다. 표식은 CSS 도형이라 스크린리더에 읽히지 않는다. */
.badge { flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; line-height: 1.4;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ''; flex: none; width: 6px; height: 6px; background: currentColor; }
.badge--ok { color: var(--color-accent); background: rgba(20, 184, 166, 0.14); }
.badge--ok::before { border-radius: 50%; }
.badge--warn { color: #F5B942; background: rgba(245, 185, 66, 0.14); }
/* 삼각형은 background 로 만들 수 없어 border 로 그린다(가로 6px·세로 6px 유지). */
.badge--warn::before { width: 0; height: 0; background: none;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 6px solid currentColor; }
.badge--info { color: #A9C2DC; background: rgba(169, 194, 220, 0.12); }
.badge--info::before { border-radius: 1px; }
/* 한 줄에 두 요소를 붙이기 어려운 좁은 폭에서는 배지를 아래로 내린다. */
@media (max-width: 380px) {
  .trust__row { flex-wrap: wrap; gap: 6px; }
}

/* 종료 CTA 밴드 — 신뢰 섹션과 푸터 사이의 전환 지점. 네이비 + 틸 글로우로
   신뢰(평면 네이비+격자)와 구분하고, 밝은 틸 버튼으로 시선을 모은다. */
.cta { text-align: center;
  /* 중앙 정렬 텍스트 뒤에 스포트라이트 글로우를 두어 가운데를 밝히고 제목을 강조한다.
     밝은 중심(틸)에서 가장자리 네이비로 자연스럽게 어두워지며, 흰 제목 대비는 8:1 이상 유지. */
  background: radial-gradient(70% 130% at 50% 44%, rgba(88, 176, 196, 0.60), rgba(50, 119, 137, 0.12) 55%, rgba(50, 119, 137, 0) 78%), var(--color-navy); }
.cta .container { max-width: 820px; }
/* 영문 제목이 길어 한 줄에 담기도록 컨테이너 폭 확보. 좁은 화면에서 줄바꿈될 때는
   balance 로 마지막 단어가 홀로 떨어지지 않게 한다. */
.cta__title { font-size: clamp(24px, 4vw, 32px); color: #fff; line-height: 1.35; text-wrap: balance; }
.cta__lead { margin-top: 14px; color: #C7D3E2; font-size: 17px; }
.cta__btn { margin-top: 26px; }
.cta .btn--primary { background: #2DD4BF; color: var(--color-navy); }
.cta .btn--primary:hover { background: #5EEAD4; }
.footer { background: #071528; color: #c7d3e2; padding: 48px 0; }
.footer__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__logo { font-size: 20px; font-weight: 800; color: #fff; }
.footer__logo span { color: var(--color-primary); }
.footer__desc { margin-top: 8px; font-size: 14px; }
.footer__company { max-width: 560px; }
.footer__corp { margin-top: 16px; font-size: 15px; font-weight: 700; color: #fff; }
.footer__legal { margin-top: 6px; font-size: 13px; line-height: 1.7; color: #9fb0c4; }
.footer__meta { text-align: right; font-size: 14px; }
.footer__cs { font-weight: 700; color: #fff; }
.footer__cs span { font-weight: 400; font-size: 13px; color: #c7d3e2; }
.footer__meta a { display: inline-block; margin-top: 6px; color: var(--color-accent); }
.footer__copy { margin-top: 12px; color: #6b7d93; }

/* 맨 위로 — 스크롤을 내리면 나타나는 플로팅 버블. 채팅 말풍선 톤(원형+틸).
   기본은 숨김(투명·클릭불가), .is-visible 로 부드럽게 등장. JS 가 스크롤 임계값에서 토글. */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 10px 26px rgba(11, 31, 58, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, visibility .25s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-navy); }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .01s, visibility .01s; transform: none; } }

/* 반응형 그리드 기본(Task 7에서 세부 조정) */
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .nav__menu { display: none; }
  .nav-toggle { display: flex; }
  .nav__menu.is-open {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 8px;
    background: #fff; border-bottom: 1px solid var(--color-border); padding: 16px 20px;
  }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* 모바일에서 섹션 상단 패딩이 56px 로 줄어 sticky nav(64px)보다 작아지므로,
     앵커 점프 시 섹션 제목이 헤더에 가려진다. 부족분+여유만큼만 보정(패딩과 이중계산되지
     않도록 데스크톱에는 적용하지 않음 — 데스크톱은 80px 패딩으로 이미 nav 를 상쇄). */
  html { scroll-padding-top: 24px; }
  .section { padding: 56px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; }
  .footer__meta { text-align: left; }
}