/*
 * AI Initiative Playbook — Website context styles
 * Upstage Design System v2 / DESIGN.website.md · tokens/website-token-policy.md 준거.
 *
 * 구조 (website-token-policy.md "기본 원칙"):
 *     Website = Product base + shared Website/Marketing color source + documented website exceptions
 *
 *   1. Product base   → tokens.product.css  (surface / text / border / focus / radius / z-index)
 *   2. Shared source  → tokens.marketing.css 중 정책이 Website 호출을 허용한 10개 color token만
 *   3. Website 예외   → 아래 --website-* intent 레이어에서 단 한 번만 선언하고 문서화
 *
 * 규칙:
 *   - 이 파일에는 raw hex / fallback hex / magic z-index / text gradient 를 쓰지 않는다.
 *   - 아래 :root 블록 바깥의 컴포넌트 CSS는 --website-* intent 만 참조한다.
 *     (Product semantic 과 marketing token 직접 호출은 :root 안에서 끝낸다 — W-1 회피)
 *   - Marketing *컴포넌트* 토큰(--marketing-card-*, --marketing-btn-*, --marketing-input-*)은
 *     Website에서 자동 허용되지 않으므로(website-token-policy.md) 사용하지 않는다.
 */

/* ============================================================
 * ⚠ UPSTREAM PATCH — tokens.product.css 의 neutral ramp 오타 보정
 *
 * tokens.product.css 는 L1 primitive 를 "HSL 삼중값 + hex 주석" 형태로 적는데,
 * neutral ramp 의 HSL 값이 Upstage 뉴트럴이 아니라 **Tailwind zinc** 로 들어가 있다.
 * 34개 primitive 중 12개가 어긋나고, neutral 계열이 특히 크다:
 *
 *     token             HSL이 실제 렌더하는 색   주석에 적힌 값   최대 채널차
 *     neutral-600       #52525B (zinc-600)      #525770            21
 *     neutral-500       #71717A (zinc-500)      #71758B            17
 *     neutral-800       #27272A (zinc-800)      #272A39            15
 *     neutral-900       #18181B (zinc-900)      #181929            14
 *
 * 어느 쪽이 의도인가 — website-token-policy.md "텍스트 색상" 표가
 * `--muted-foreground (neutral-500: #71758B)` 를 명시하므로 **주석 hex 가 의도**,
 * HSL 값이 오타다. 결과적으로 지금 upstream 토큰은 파란기 도는 Upstage 뉴트럴 대신
 * 중성 회색(zinc)을 렌더한다.
 *
 * 대응: site/tokens.product.css 는 upstream 과 byte-identical 하게 두어 재동기화를
 * 깨지 않고, 이 페이지가 실제로 쓰는 3개만 문서화된 값으로 되돌린다.
 * upstream 이 고쳐지면 이 블록만 지우면 된다.
 * (2026-08-12 확인 · UpstageAI/agent-starter-kit @371e756)
 * ============================================================ */
:root {
  --color-neutral-900: 236 26% 13%; /* #181929 */
  --color-neutral-800: 230 19% 19%; /* #272A39 */
  --color-neutral-600: 230 15% 38%; /* #525770 */
}

:root {
  /* ============================================================
   * WEBSITE INTENT LAYER
   * 각 항목의 provenance: [P]=Product base, [S]=정책 허용 공유 marketing color,
   * [E]=Website 예외 (Docs/content page — policy "허용되는 Website 예외" 표)
   * ============================================================ */

  /* ---- Surface ---- */
  --website-surface-page: var(--surface-light);        /* [S] 기본 페이지 배경 #FAFBFC */
  --website-surface-card: hsl(var(--card));            /* [P] neutral-0 */
  --website-surface-subtle: var(--surface-purple);     /* [S] 교차 섹션 배경 #F4F2FF */
  --website-surface-dark: var(--dark-surface);         /* [S] footer / wrap-up block #0D0D12 */
  --website-hero-bg: var(--hero-bg);                   /* [S] hero 섹션 배경 #EAE6FF */

  /* ---- Text ---- (대비비는 page #FAFBFC 기준, WCAG AA normal = 4.5) */
  --website-text: hsl(var(--foreground));              /* [P] neutral-900 — heading  16.8 */
  --website-text-body: hsl(var(--muted-darker));       /* [P] neutral-800 — 본문      13.7 */
  --website-text-muted: hsl(var(--muted-dark));        /* [P] neutral-600 — 캡션/meta  6.9 */
  /* neutral-500(--muted-foreground)은 page 배경에서 4.39로 AA 미달이라 쓰지 않는다. */

  /* ---- Border ---- */
  --website-border: hsl(var(--border));                /* [P] neutral-200 — 카드 외곽 */
  --website-border-subtle: hsl(var(--border-subtle));  /* [P] neutral-100 — 내부 divider */

  /* ---- Action / accent ---- */
  --website-cta: var(--key-palette);                   /* [S] CTA / link #5B52FF */
  --website-cta-hover: var(--key-palette-hover);       /* [E] --key-palette 파생 hover. 정책 표에는 CTA만 등재 */
  --website-cta-fg: hsl(var(--primary-foreground));    /* [P] on-CTA 텍스트 */
  --website-cta-ghost-hover: hsl(var(--accent));       /* [P] brand-50 — ghost 버튼 hover 면 */
  /* accent 는 크기로 나눈다 — ups-purple 은 어느 표면에서도 소형 텍스트 AA를 못 넘긴다
   * (hero 3.57 · card 4.34 · subtle 3.92 · page 4.19 / 모두 4.5 미만).
   *   --website-accent      : 장식 + 24px 이상 display 텍스트 (WCAG large-text 3:1 통과)
   *   --website-accent-text : 24px 미만 accent 텍스트 (AA 4.5 통과) */
  --website-accent: var(--ups-purple);                 /* [S] visual anchor / decorative. 버튼 배경 금지(ALL-1) */
  --website-accent-text: hsl(var(--color-brand-600));  /* [E] brand ramp 한 단계 진하게. hero 5.58 · card 6.6 */
  --website-highlight: var(--highlight);               /* [S] dark surface 한정 강조(W-3) */

  /* ---- On-dark (Website 전용 — policy "텍스트 색상" 표) ---- */
  --website-on-dark-fg: var(--web-nav-fg);             /* [S] #FFFFFF */
  --website-on-dark-muted: var(--web-nav-fg-hover);    /* [S] rgba(255,255,255,.7) */
  --website-on-dark-border: rgba(255, 255, 255, 0.14); /* [E] dark block divider. 0.7 white는 divider로 과함 */

  /* ---- Focus (EX-2: 접근성 레이어는 Product 표준) ---- */
  --website-focus-ring: hsl(var(--input-active));      /* [P] brand-500 */

  /* ---- Radius — Product base 8/16px + Docs 예외 4/12px ---- */
  --website-radius-tag: 4px;                           /* [E] tag / checkbox */
  --website-radius-icon: var(--radius);                /* [P] 0.5rem = 8px */
  --website-radius-card: 12px;                         /* [E] 카드 — Product 8과 16 사이 중간값 */
  --website-radius-hero: var(--radius-lg);             /* [P] 1rem = 16px */

  /* ---- Layout / spacing (Docs page 예외 — policy 표 마지막 행) ---- */
  --website-container: 780px;
  --website-sidebar: 280px;
  --website-nav-height: 60px;
  --website-card-padding: 24px;

  /* ---- Typography ---- */
  /* [E] policy는 Hero/Display에 ESPeak를 지정하지만 웹폰트 미배포 → Geist로 대체.
   *     h2/h3·본문·UI 라벨의 Geist, Korean의 Noto Sans KR은 정책과 일치. */
  --website-font-display: "Geist", "Noto Sans KR", system-ui, sans-serif;
  --website-font-body: "Geist", "Noto Sans KR", system-ui, sans-serif;
  --website-font-mono: "Geist Mono", "D2Coding", Consolas, monospace;
  --website-tracking: -0.18px;                         /* policy 지정 정적 px 값 */

  /* ---- z-index — Product scale (magic z-index 금지) ---- */
  --website-z-sticky: var(--z-sticky);                 /* [P] 1100 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* T-1 CJK line-breaking (DESIGN.website.md §5 · forbidden-rules ALL-4/ALL-5)
 *
 * word-break: keep-all 은 한중일(CJK) 텍스트에서 줄바꿈 시 단어를 중간에서 끊지 않고,
 * 가능한 한 공백(어절) 단위로만 줄을 바꾸도록 지정하는 CSS 속성이다.
 * 기본값 normal 은 한글을 글자 단위로 끊어 "AI 이니셔티/브 실행" 같은 어절 파괴가 생긴다.
 *
 *   - keep-all 은 라틴 텍스트에서 normal 과 동작이 같으므로 en/ 영문 페이지도 같은 선언을 공유한다.
 *   - overflow-wrap: break-word 는 짝. keep-all 단독이면 공백 없는 긴 URL / API key 가
 *     컨테이너를 뚫는다 (ALL-5).
 *   - anywhere 는 min-content 크기를 바꿔 grid 폭 계산에 영향을 주므로 전역에 쓰지 않는다.
 *   - 예외: pre / code 는 아래 Code 섹션에서 normal 로 되돌린다.
 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--website-nav-height) + 20px);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* T-2 구(phrase) 단위 줄바꿈
 *
 * keep-all 은 "단어 안에서 안 끊기"만 보장하고 "어디서 끊길지"는 통제하지 못한다.
 * 리드 문단에서는 첫 줄이 한 문장을 다 담고 다음 문장 앞부분까지 끌어와서
 * 주어부와 서술어가 갈라지는 일이 생긴다. 실측 (hero__lead, 560px):
 *
 *   before  프로그램 승인을 받으셨다면 준비는 거의 끝났습니다. 이 문서를 순서대로
 *           따라오시면 15분 안에 첫 응답을 받아보실 수 있습니다.
 *   after   프로그램 승인을 받으셨다면 준비는 거의 끝났습니다.
 *           이 문서를 순서대로 따라오시면 15분 안에 첫 응답을 받아보실 수 있습니다.
 *
 * 문장을 inline-block 으로 감싸면 문장 경계가 우선 줄바꿈 지점이 된다.
 * 한 문장이 한 줄보다 길면 내부에서 다시 어절 단위로 접히므로(keep-all 상속)
 * 300px 까지 안전하다. 우측 여백도 함께 균등해진다 (.lead 실측 50/268 → 157/161).
 *
 * text-wrap: balance / pretty 는 이 문제를 풀지 못한다 — 실측에서 balance 는
 * 끊기는 위치를 옮기기만 했고 pretty 는 변화가 없었다.
 */
.phrase { display: inline-block; }

body {
  background: var(--website-surface-page);
  color: var(--website-text-body);
  font-family: var(--website-font-body);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: var(--website-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ Navigation ============
 * Docs / content page 예외: 브랜드 워드마크가 black 자산이므로
 * dark nav(--web-nav-background) 대신 light surface + Product text 조합을 사용한다.
 * 자매 Playbook(Studio / Harness)과 동일한 구성.
 */
.web-nav {
  position: sticky;
  top: 0;
  z-index: var(--website-z-sticky);
  height: var(--website-nav-height);
  background: var(--website-surface-card);
  border-bottom: 1px solid var(--website-border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
}
.web-nav__brand { display: flex; align-items: center; }
.web-nav__logo { display: block; height: 22px; width: auto; }
.web-nav__sub {
  color: var(--website-text-muted);
  font-family: var(--website-font-display);
  font-weight: 400;
  font-size: 15px;
  padding-left: 14px;
  border-left: 1px solid var(--website-border);
}
.web-nav__lang {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-icon);
  padding: 2px;
}
.web-nav__lang a {
  font-family: var(--website-font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--website-text-muted);
  text-decoration: none;
  padding: 4px 11px;
  border-radius: var(--website-radius-tag);
  transition: color 0.14s ease, background 0.14s ease;
}
.web-nav__lang a:hover { color: var(--website-text); }
.web-nav__lang a[aria-current="true"] {
  background: var(--website-surface-subtle);
  color: var(--website-text);
  font-weight: 600;
}

.web-nav__toggle {
  display: none;
  margin-left: 8px;
  font-family: var(--website-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--website-text);
  background: transparent;
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-icon);
  padding: 6px 14px;
  cursor: pointer;
}

/* ============ Layout ============ */
.layout {
  display: grid;
  grid-template-columns: var(--website-sidebar) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: var(--website-nav-height);
  align-self: start;
  height: calc(100vh - var(--website-nav-height));
  overflow-y: auto;
  background: var(--website-surface-card);
  border-right: 1px solid var(--website-border);
  padding: 32px 18px 56px;
}
.sidebar__group { margin-bottom: 30px; }
.sidebar__label {
  font-family: var(--website-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--website-text-muted);
  padding: 0 12px;
  margin-bottom: 10px;
}
.sidebar a {
  display: block;
  padding: 9px 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--website-text-body);
  text-decoration: none;
  border-radius: var(--website-radius-icon);
  transition: background 0.14s ease, color 0.14s ease;
}
.sidebar a:hover { background: var(--website-surface-subtle); color: var(--website-text); }
.sidebar a.is-active {
  background: var(--website-surface-subtle);
  color: var(--website-text);
  font-weight: 600;
}
.sidebar a.is-current {
  color: var(--website-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--website-accent);
  border-radius: 0 var(--website-radius-icon) var(--website-radius-icon) 0;
}
.sidebar__done { color: var(--website-text-muted); }

/* 페이지 이동 (이전 / 다음) */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}
.pager a {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-card);
  background: var(--website-surface-card);
  text-decoration: none;
  transition: border-color 0.14s ease;
}
.pager a:hover { border-color: var(--website-cta); }
.pager span {
  display: block;
  font-size: 14px;
  color: var(--website-text-muted);
  margin-bottom: 4px;
}
.pager b {
  font-family: var(--website-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--website-text);
}
.pager .next { text-align: right; }
.pager .only { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
}
.sidebar a:focus-visible,
.web-nav__toggle:focus-visible,
.copy-btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--website-focus-ring);
  outline-offset: 2px;
}

main { padding: 0 48px 140px; }
.container { max-width: var(--website-container); margin: 0 auto; }

/* ============ Hero (Website 예외: hero.background) ============ */
.hero {
  background: var(--website-hero-bg);
  border-radius: var(--website-radius-hero);
  padding: 72px 56px;
  margin: 48px 0 0;
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--website-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--website-accent-text);
  margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--website-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.18;
  color: var(--website-text);
}
.hero__lead {
  margin: 26px auto 0;
  max-width: 560px;
  font-size: 18px;
  color: var(--website-text-body);
}
.hero__meta {
  margin-top: 20px;
  font-size: 16px;
  color: var(--website-text-muted);
}

/* ============ Sections ============ */
.section { padding: 64px 0; border-bottom: 1px solid var(--website-border); }
.section:last-of-type { border-bottom: none; }

h2 {
  font-family: var(--website-font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--website-text);
  margin-bottom: 14px;
}
h2 .num {
  color: var(--website-accent);
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}
h3 {
  font-family: var(--website-font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--website-text);
  margin: 40px 0 12px;
}
.lead { font-size: 18px; color: var(--website-text-body); margin-bottom: 30px; }
p { margin: 16px 0; }
strong { color: var(--website-text); font-weight: 600; }
a { color: var(--website-cta); }
a:hover { color: var(--website-cta-hover); }
ul, ol { margin: 16px 0 16px 22px; }
li { margin: 8px 0; }
.small { font-size: 16px; }

/* ============ Cards ============ */
.cards { display: grid; gap: 14px; margin-top: 28px; }
.card {
  background: var(--website-surface-card);
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-card);
  padding: var(--website-card-padding);
  display: flex;
  gap: 20px;
}
.card__n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--website-radius-icon);
  background: var(--website-surface-subtle);
  color: var(--website-accent-text);
  font-family: var(--website-font-display);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card h4 {
  font-family: var(--website-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--website-text);
  margin-bottom: 6px;
}
.card p { margin: 0; font-size: 16px; }

/* ============ Steps ============ */
.steps { margin-top: 32px; counter-reset: step; }
.step {
  position: relative;
  padding: 0 0 34px 46px;
  border-left: 2px solid var(--website-border);
  margin-left: 15px;
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -16px;
  top: -3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--website-surface-card);
  border: 2px solid var(--website-border);
  color: var(--website-text-body);
  font-family: var(--website-font-display);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step--key::before {
  background: var(--website-cta);
  border-color: var(--website-cta);
  color: var(--website-cta-fg);
}
.step h4 {
  font-family: var(--website-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--website-text);
  margin-bottom: 8px;
}
.step p { margin: 10px 0; font-size: 17px; }

/* ============ Tables ============ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-card);
  margin: 24px 0;
  background: var(--website-surface-card);
}
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--website-border-subtle); vertical-align: top; }
tr:last-child td { border-bottom: none; }
th {
  font-family: var(--website-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--website-text);
  background: var(--website-surface-subtle);
}
.tag-ok { color: var(--website-cta); font-weight: 600; }
.tag-off { color: var(--website-text-muted); font-weight: 600; }

/* ============ Notes ============ */
.note {
  border: 1px solid var(--website-border);
  border-left: 3px solid var(--website-accent);
  background: var(--website-surface-card);
  border-radius: 0 var(--website-radius-card) var(--website-radius-card) 0;
  padding: 20px 22px;
  margin: 26px 0;
  font-size: 17px;
}
.note--tip { border-left-color: var(--website-cta); background: var(--website-surface-subtle); }
.note--check { border-left-color: var(--website-text-muted); }
.note__title {
  display: block;
  font-family: var(--website-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--website-text);
  margin-bottom: 8px;
}
.note p { margin: 8px 0 0; }
.note p:first-of-type { margin-top: 0; }

/* ============ Key summary ============ */
.summary {
  margin-top: 38px;
  background: var(--website-surface-subtle);
  border-radius: var(--website-radius-card);
  padding: 24px 26px;
}
.summary__label {
  display: block;
  font-family: var(--website-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--website-accent-text);
  margin-bottom: 10px;
}
.summary p { margin: 0; font-size: 18px; color: var(--website-text); font-weight: 500; }

/* ============ Code (T-1 예외 — 코드에는 어절 개념이 없다) ============ */
.code {
  margin: 22px 0;
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-card);
  overflow: hidden;
  background: var(--website-surface-card);
}
.code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--website-border-subtle);
}
.code__label {
  font-family: var(--website-font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--website-text-muted);
}
.copy-btn {
  font-family: var(--website-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--website-cta);
  background: transparent;
  border: 1px solid var(--website-cta);
  border-radius: var(--website-radius-icon);
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.copy-btn:hover { background: var(--website-cta-ghost-hover); }
pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  background: var(--website-surface-subtle);
  font-family: var(--website-font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--website-text);
  letter-spacing: 0;
  /* T-1: pre 는 white-space: pre (UA 기본) 라 애초에 줄바꿈이 일어나지 않는다.
     word-break 재정의는 무의미하고, 넘침은 위 overflow-x: auto 가 처리한다. */
}
code {
  font-family: var(--website-font-mono);
  font-size: 15px;
  background: var(--website-surface-subtle);
  border-radius: var(--website-radius-tag);
  padding: 2px 6px;
  color: var(--website-text);
  letter-spacing: 0;
  /* T-1: word-break 는 루트의 keep-all 을 그대로 상속한다.
     이 페이지의 inline code 198개 중 2개가 한글(part2 @항목이름 · part3 확인필요)이라
     normal 로 되돌리면 그 한글이 글자 단위로 잘린다.
     keep-all 은 ASCII 식별자에 영향이 없고, 긴 토큰은 anywhere 가 끊는다. */
  overflow-wrap: anywhere;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ============ FAQ ============ */
.faq {
  border: 1px solid var(--website-border);
  border-radius: var(--website-radius-card);
  overflow: hidden;
  margin-top: 28px;
  background: var(--website-surface-card);
}
details { border-bottom: 1px solid var(--website-border-subtle); }
details:last-child { border-bottom: none; }
summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--website-font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--website-text);
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary:hover { background: var(--website-surface-subtle); }
.faq__q {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--website-accent-text);
}
details[open] summary { border-bottom: 1px solid var(--website-border-subtle); }
.faq__a { padding: 18px 22px 24px 56px; font-size: 17px; }
.faq__a > :first-child { margin-top: 0; }

/* ============ Checklist ============ */
.checklist { list-style: none; margin: 22px 0 0; }
.checklist li { position: relative; padding-left: 32px; margin: 12px 0; font-size: 17px; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--website-border);
  border-radius: var(--website-radius-tag);
}

/* ============ Wrap-up (dark surface — --highlight 허용 영역, W-3) ============ */
.wrapup {
  background: var(--website-surface-dark);
  border-radius: var(--website-radius-hero);
  padding: 48px 44px;
  margin-top: 32px;
}
.wrapup h2 { color: var(--website-on-dark-fg); }
.wrapup ul { list-style: none; margin: 28px 0 0; }
.wrapup li {
  color: var(--website-on-dark-muted);
  font-size: 17px;
  padding: 16px 0;
  border-bottom: 1px solid var(--website-on-dark-border);
}
.wrapup li:last-child { border-bottom: none; }
.wrapup b { color: var(--website-highlight); font-weight: 500; }

/* ============ Footer ============ */
.site-footer {
  background: var(--website-surface-dark);
  color: var(--website-on-dark-muted);
  text-align: center;
  padding: 44px 24px;
  font-size: 15px;
}
.site-footer p { margin: 6px 0; }
.site-footer__privacy { font-size: 13px; margin-top: 16px; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    display: none;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--website-border);
  }
  .sidebar.is-open { display: block; }
  .web-nav__toggle { display: block; }
  .web-nav__sub { display: none; }
  main { padding: 0 20px 90px; }
  .hero { padding: 48px 24px; margin-top: 28px; }
  .wrapup { padding: 36px 24px; }
  .faq__a { padding-left: 22px; }
}