/* =====================================================================
   article.css (mono) — 모바일 우선 UI 키트, 흑백 버전 · 색은 ccchaser.com 팔레트
   - 기본은 흰색 · 회색 · 검정만. 강조 색 5가지(파랑 · 분홍 · 보라 · 주황 · 민트)는 .ui-accent--색 클래스를 붙인 곳에서만
   - 상태(정보 · 주의 · 위험 · 성공)는 색 대신 왼쪽 세로 줄과 굵기로 구분한다 (맨 아래 MONO 블록)
   - 순수 검정 바탕 + 면 밝기 단계(#191919 · #222 · #333), 그림자 없음
   - 모든 클래스는 ui- 로 시작. 토큰(:root)만 바꾸면 전체 톤이 바뀐다
   - 기본은 다크 고정 (OS 설정을 따르지 않음). 라이트는 <html data-theme="light">일 때만
   ===================================================================== */

/* ── 0. Font (프로젝트 공용 Pretendard) ── */
@font-face { font-family: 'Pretendard'; src: url('../font/pretendard/Pretendard-Medium.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../font/pretendard/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../font/pretendard/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../font/pretendard/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('../font/pretendard/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
/* 다국어 — Pretendard 에 없는 일본어 한자 · 중국어 간체 · 힌디어만 Noto Sans 로 채운다 (slide.css 와 같은 폰트 · 그 언어를 볼 때만 파일을 불러온다) */
@font-face { font-family: 'Noto Sans JP'; src: url('../font/noto-sans/NotoSansJP-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans SC'; src: url('../font/noto-sans/NotoSansSC-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Sans Devanagari'; src: url('../font/noto-sans/NotoSansDevanagari-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
:root:lang(ja) { --ui-font: 'Pretendard', 'Noto Sans JP', -apple-system, system-ui, sans-serif; }
:root:lang(zh) { --ui-font: 'Pretendard', 'Noto Sans SC', -apple-system, system-ui, sans-serif; }
:root:lang(hi) { --ui-font: 'Pretendard', 'Noto Sans Devanagari', -apple-system, system-ui, sans-serif; }
:root:lang(zh-Hant) { --ui-font: 'Pretendard', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', -apple-system, system-ui, sans-serif; }  /* 번체(대만 · 홍콩) — 간체 글꼴(SC) 대신 기기의 번체 글꼴 */

/* ── 1. Tokens ── */
/* 기본 = 다크. 무채색은 모노 팔레트(design/mono-palette.md): 순수 검정 바탕 + 면 밝기 단계 + 흰색 · 회색 글자 두 단계.
   포인트도 기본은 무채색(흰색). 색은 .ui-accent--색 클래스로만 */
:root {
  color-scheme: dark;
  /* 면 — 검정 → 구역 → 박스 → 모달 → 모달 안 칸 → 눌림 */
  --ui-bg: #000000;            /* 페이지 바탕 */
  --ui-section: #0f0f0f;       /* 넓은 구역 구분 (섹션 띠) */
  --ui-surface: #191919;       /* 카드 · 박스 · 칩 */
  --ui-surface-2: #222222;     /* 카드 안 보조 면 · 모달 면과 같은 단계 */
  --ui-modal: #222222;         /* 모달 · 팝오버 · 드롭다운 */
  --ui-field: #2c2c2c;         /* 모달 안 입력칸 · 선택지 */
  --ui-raised: #333333;        /* 눌림 · 선택된 항목 · 원형 버튼 */
  --ui-scrim: rgba(0, 0, 0, .72);   /* 모달 뒤 가림막 */
  --ui-inverse: #ffffff;       /* 반전 강조 면 (한 줄 요약, 토스트) */
  /* 글자 — 흰색 → 밝은 회색 → 회색 → 어두운 회색 */
  --ui-text: #ffffff;          /* 제목 · 수치 */
  --ui-text-2: #a9a9a9;        /* 본문 (색 견본 이미지 #A0A9C0 의 밝기를 무채색으로) */
  --ui-text-3: #6b6b6b;        /* 설명 · 캡션 · 보조 글자 */
  --ui-text-4: #4d4d4d;        /* 비활성 · 끝난 항목 */
  --ui-on-inverse: #000000;
  /* 선 — 기본은 면 밝기로 구분하고, 선은 필요할 때만 아주 옅게 */
  --ui-line: rgba(255, 255, 255, .08);
  --ui-line-strong: #333333;
  /* 포인트 — 기본은 무채색 (흰색 채움 버튼 + 검정 글자). 색은 .ui-accent--색 클래스를 붙인 곳에서만 */
  --ui-accent: #ffffff;
  --ui-accent-text: #ffffff;
  --ui-accent-soft: #222222;
  --ui-on-accent: #000000;     /* 포인트 면 위 글자 */
  /* 강조 색 5가지 (design/mono-palette.md) — 직접 쓰지 말고 아래 .ui-accent--색 / .ui-text--색 클래스로 */
  --ui-c-blue: #455DDC; --ui-c-pink: #F73463; --ui-c-purple: #9646EF; --ui-c-orange: #FF862E; --ui-c-mint: #43D1A7;
  /* 상태: 흑백 (색 대신 면 + 왼쪽 줄로 구분, 맨 아래 MONO 블록) */
  --ui-info-soft: #191919;     --ui-info-text: #ffffff;
  --ui-warn-soft: #191919;     --ui-warn-text: #ffffff;
  --ui-danger: #ffffff;        --ui-danger-soft: #222222;   --ui-danger-text: #ffffff;   --ui-danger-line: #333333;
  --ui-success: #ffffff;       --ui-success-soft: #191919;  --ui-success-text: #ffffff;
  /* 코드 */
  --ui-code-bg: #0f0f0f;       --ui-code-text: #ffffff;     --ui-code-chip: #2c2c2c;     --ui-code-chip-text: #ffffff;
  /* 모양 */
  --ui-r-xs: 10px; --ui-r-sm: 12px; --ui-r-md: 16px; --ui-r-lg: 18px; --ui-r-xl: 24px; --ui-r-pill: 999px;
  --ui-shadow: none;           /* 검정 바탕에서는 그림자 대신 면 밝기로 띄운다 */
  --ui-shadow-lift: none;
  /* 간격 (4px 단위) */
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 20px; --ui-s6: 24px; --ui-s8: 32px; --ui-s10: 40px;
  /* 글꼴 */
  --ui-font: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 레이아웃 */
  --ui-col: 480px;             /* 링크 모음 같은 좁은 화면 */
  --ui-col-wide: 720px;        /* 글 읽는 화면 */
  --ui-focus: #ffffff;
}
/* 라이트는 <html data-theme="light"> 일 때만 (같은 파랑 포인트) */
:root[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #f2f3f5; --ui-section: #eaebee; --ui-surface: #ffffff; --ui-surface-2: #f7f7f9; --ui-inverse: #17191e;
  --ui-modal: #ffffff; --ui-field: #f2f3f5; --ui-raised: #e9eaed; --ui-scrim: rgba(18, 21, 30, .45);
  --ui-text: #17191e; --ui-text-2: #3a3d45; --ui-text-3: #5b616c; --ui-text-4: #8d929c; --ui-on-inverse: #ffffff;
  --ui-line: #e3e5e9; --ui-line-strong: #c7cbd2;
  --ui-accent: #17191e; --ui-accent-text: #17191e; --ui-accent-soft: #e9eaed; --ui-on-accent: #ffffff;
  --ui-info-soft: #ffffff; --ui-info-text: #17191e;
  --ui-warn-soft: #ffffff; --ui-warn-text: #17191e;
  --ui-danger: #17191e; --ui-danger-soft: #e9eaed; --ui-danger-text: #17191e; --ui-danger-line: #d3d5da;
  --ui-success: #17191e; --ui-success-soft: #ffffff; --ui-success-text: #17191e;
  --ui-code-bg: #15161a; --ui-code-text: #f2f3f5; --ui-code-chip: #2a2b31; --ui-code-chip-text: #d8dade;
  --ui-shadow: 0 1px 2px rgba(18, 21, 30, .05), 0 6px 18px rgba(18, 21, 30, .06);
  --ui-shadow-lift: 0 2px 6px rgba(18, 21, 30, .06), 0 12px 32px rgba(18, 21, 30, .10);
  --ui-focus: #17191e;
}

/* ── 강조 색 (원할 때만) ──
   .ui-accent--blue · --pink · --purple · --orange · --mint
     → 붙인 요소와 그 안의 포인트(채움 버튼 · em 강조 · 라벨 · 링크 · 체크 · 정보 줄 등)가 그 색이 된다.
       버튼 하나에만 붙여도 되고, 카드 · 섹션 전체에 붙여도 된다.
   .ui-text--blue · --pink · --purple · --orange · --mint
     → 글자 색만 바꾼다 (숫자 · 단어 하나 강조용) */
.ui-accent--blue   { --ui-accent: var(--ui-c-blue);   --ui-accent-text: var(--ui-c-blue);   --ui-accent-soft: color-mix(in srgb, var(--ui-c-blue) 18%, transparent);   --ui-on-accent: #ffffff; --ui-focus: var(--ui-c-blue); }
.ui-accent--pink   { --ui-accent: var(--ui-c-pink);   --ui-accent-text: var(--ui-c-pink);   --ui-accent-soft: color-mix(in srgb, var(--ui-c-pink) 18%, transparent);   --ui-on-accent: #ffffff; --ui-focus: var(--ui-c-pink); }
.ui-accent--purple { --ui-accent: var(--ui-c-purple); --ui-accent-text: var(--ui-c-purple); --ui-accent-soft: color-mix(in srgb, var(--ui-c-purple) 18%, transparent); --ui-on-accent: #ffffff; --ui-focus: var(--ui-c-purple); }
.ui-accent--orange { --ui-accent: var(--ui-c-orange); --ui-accent-text: var(--ui-c-orange); --ui-accent-soft: color-mix(in srgb, var(--ui-c-orange) 18%, transparent); --ui-on-accent: #000000; --ui-focus: var(--ui-c-orange); }
.ui-accent--mint   { --ui-accent: var(--ui-c-mint);   --ui-accent-text: var(--ui-c-mint);   --ui-accent-soft: color-mix(in srgb, var(--ui-c-mint) 18%, transparent);   --ui-on-accent: #000000; --ui-focus: var(--ui-c-mint); }
.ui-text--blue { color: var(--ui-c-blue); }
.ui-text--pink { color: var(--ui-c-pink); }
.ui-text--purple { color: var(--ui-c-purple); }
.ui-text--orange { color: var(--ui-c-orange); }
.ui-text--mint { color: var(--ui-c-mint); }

/* ── 2. Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0; background: var(--ui-bg); color: var(--ui-text);
  font: 500 16px/1.55 var(--ui-font);
  word-break: keep-all; overflow-wrap: anywhere;      /* 한국어는 어절 단위로 줄바꿈 */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:where(a, button, input, summary):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; border-radius: 6px; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 3. Layout ── */
.ui-page {
  max-width: var(--ui-col); margin: 0 auto;
  padding: max(var(--ui-s5), env(safe-area-inset-top)) var(--ui-s4) calc(var(--ui-s10) + env(safe-area-inset-bottom));
}
.ui-page--wide { max-width: var(--ui-col-wide); }
.ui-stack { display: grid; gap: var(--ui-s3); }
.ui-stack--lg { gap: var(--ui-s6); }
.ui-row { display: flex; align-items: center; gap: var(--ui-s2); flex-wrap: wrap; }
.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s3); }
.ui-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s2); }
@media (max-width: 420px) { .ui-grid-3 { grid-template-columns: 1fr; } }
.ui-section { margin-top: 64px; scroll-margin-top: var(--ui-s4); }   /* 섹션 사이: 단락 끝 → 다음 소제목이 붙어 보이지 않게 (40 → 64) */

/* ── 4. Typography ── */
.ui-display {                                   /* 글 제목: 화면 폭 따라 커짐, em = 포인트 색 */
  margin: 0 0 var(--ui-s3); font-size: clamp(30px, 7.4vw, 46px); font-weight: 900;
  line-height: 1.22; letter-spacing: -.045em;
}
.ui-display em, .ui-h2 em, .ui-hl { font-style: normal; color: var(--ui-accent-text); }
.ui-h2 { margin: 0 0 var(--ui-s3); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ui-h2--center { text-align: center; }
.ui-h3 { margin: var(--ui-s6) 0 var(--ui-s2); font-size: 17px; font-weight: 800; }
.ui-lead { margin: 0 0 var(--ui-s4); font-size: 15px; color: var(--ui-text-3); }
.ui-sub { margin: 0 0 var(--ui-s5); font-size: 18px; line-height: 1.6; color: var(--ui-text-3); }
.ui-p { margin: var(--ui-s4) 0; color: var(--ui-text-2); }
.ui-label { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ui-accent-text); }
.ui-caption { font-size: 13px; color: var(--ui-text-3); }
.ui-muted { color: var(--ui-text-3); }
.ui-kbd, .ui-inline-code {
  font: 500 .88em/1 var(--ui-mono); padding: 3px 7px; border-radius: 7px;
  background: var(--ui-surface-2); border: 1px solid var(--ui-line); color: var(--ui-text);
}

/* ── 5. Buttons ── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2);
  min-height: 44px; padding: 0 var(--ui-s5); border: 0; border-radius: var(--ui-r-sm);
  font: 700 15px/1 var(--ui-font); text-decoration: none; cursor: pointer;
  background: var(--ui-accent); color: var(--ui-on-accent); transition: transform .12s, box-shadow .12s;
}
.ui-btn:active { transform: scale(.98); }
.ui-btn svg { width: 16px; height: 16px; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--soft { background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.ui-btn--ghost { background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow); }
.ui-btn--dark { background: var(--ui-inverse); color: var(--ui-on-inverse); }
.ui-btn--pill { border-radius: var(--ui-r-pill); }
.ui-btn--sm { min-height: 34px; padding: 0 var(--ui-s3); font-size: 13px; border-radius: var(--ui-r-xs); }
.ui-btn[disabled] { opacity: .45; pointer-events: none; }

/* 둥근 아이콘 버튼 · 뒤로가기 알약 */
.ui-icon-btn {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow);
}
.ui-icon-btn svg { width: 20px; height: 20px; }
.ui-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--ui-s4);
  border-radius: var(--ui-r-pill); background: var(--ui-surface); color: var(--ui-text);
  font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: var(--ui-shadow);
}
.ui-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }

/* 언어 선택 (지구본 + 코드 + 아래 화살표, 알약 모양). <select>를 투명하게 덮어 OS 기본 목록을 쓴다 */
.ui-lang {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 14px;
  border-radius: var(--ui-r-pill); background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow);
  font-size: 14px; font-weight: 800; letter-spacing: .02em; cursor: pointer;
}
.ui-lang svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ui-lang .ui-lang__caret { width: 14px; height: 14px; color: var(--ui-text-3); }
.ui-lang select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; padding: 0 2px; cursor: pointer; outline: none;
}
.ui-lang:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 3px; }

/* ── 6. Profile (링크 모음 머리) ── */
.ui-profile { text-align: center; padding: var(--ui-s1) 0 var(--ui-s2); }
.ui-avatar {
  width: 112px; height: 112px; margin: 0 auto; border-radius: 30px; overflow: hidden;
  background: var(--ui-surface); box-shadow: var(--ui-shadow); display: grid; place-items: center;
  font-size: 40px; font-weight: 900;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--sm { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.ui-name { display: inline-flex; align-items: center; gap: 6px; margin: var(--ui-s4) 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ui-verified { width: 20px; height: 20px; color: var(--ui-accent); flex: none; }
.ui-bio { margin: 6px 0 0; font-size: 15px; color: var(--ui-text-3); }
.ui-bio span { display: block; }
.ui-mail { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; color: var(--ui-accent-text); text-underline-offset: 3px; }
.ui-socials { display: flex; justify-content: center; gap: var(--ui-s3); margin: var(--ui-s5) 0 var(--ui-s1); }
.ui-social { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--ui-text); text-decoration: none; }
.ui-social svg { width: 28px; height: 28px; }
.ui-social:hover { background: var(--ui-surface); }

/* ── 7. Divider ── */
.ui-divider { border: 0; border-top: 1.5px dashed var(--ui-line-strong); margin: var(--ui-s6) 0; }
.ui-divider--solid { border-top-style: solid; border-top-width: 1px; border-color: var(--ui-line); }

/* ── 8. Link card (가운데 정렬 카드, 썸네일 선택) ── */
.ui-link {
  position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px var(--ui-s5);
  border-radius: var(--ui-r-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow);
  text-decoration: none; text-align: center; transition: transform .12s;
}
.ui-link:active { transform: scale(.985); }
.ui-link__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 var(--ui-s2); }
.ui-link__title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.ui-link__sub { font-size: 13px; color: var(--ui-text-3); }
.ui-link--thumb { min-height: 88px; padding: var(--ui-s3) 64px var(--ui-s3) var(--ui-s3); }   /* 오른쪽을 썸네일만큼 비워 글자를 가운데에 */
.ui-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--ui-r-sm); overflow: hidden; background: var(--ui-surface-2); display: grid; place-items: center; }
.ui-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── 9. Resource card (세로 표지 + 제목 + 링크 + 버튼) ── */
.ui-res { display: flex; flex-direction: column; border-radius: var(--ui-r-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow); overflow: hidden; }
.ui-res__cover { aspect-ratio: 3 / 4; background: var(--ui-surface-2); display: grid; place-items: center; overflow: hidden; }
.ui-res__cover img { width: 100%; height: 100%; object-fit: cover; }
.ui-res__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  padding: 10px var(--ui-s3) var(--ui-s1); font-size: 14px; font-weight: 700; line-height: 1.4;
}
.ui-res__link { display: block; padding: var(--ui-s2) var(--ui-s3) var(--ui-s3); font-size: 13px; font-weight: 600; color: var(--ui-accent-text); text-decoration: none; margin-top: auto; }
.ui-res .ui-btn { margin: 0 10px 10px; font-size: 14px; }

/* ── 10. Chips (칩 · 경로 · 목차) ── */
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--ui-r-pill);
  background: var(--ui-surface); color: var(--ui-text); font-size: 14px; font-weight: 700; text-decoration: none;
}
.ui-chip--accent { background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.ui-chip--danger { color: var(--ui-danger); }
.ui-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--ui-s8) 0 var(--ui-s4); }
.ui-route__arrow { color: var(--ui-accent-text); font-weight: 700; }
.ui-toc { display: flex; flex-wrap: wrap; gap: var(--ui-s2); padding: var(--ui-s6) 0 6px; }
.ui-toc .ui-chip { padding: 7px 14px; }

/* ── 11. Article header ── */
.ui-byline { display: flex; justify-content: space-between; gap: var(--ui-s3); font-size: 14px; color: var(--ui-text-3); }
.ui-byline b { color: var(--ui-text); }
.ui-statement {                                 /* 어두운 한 줄 요약 */
  margin: 0 0 var(--ui-s3); padding: 18px var(--ui-s5); border-radius: 22px;
  background: var(--ui-inverse); color: var(--ui-on-inverse); font-size: 17px; font-weight: 700; line-height: 1.65;
}

/* ── 12. Callouts ── */
.ui-callout { margin: var(--ui-s3) 0; padding: 14px 18px; border-radius: var(--ui-r-md); font-size: 15px; background: var(--ui-surface); color: var(--ui-text-2); }
.ui-callout b { color: inherit; }
.ui-callout--info { background: var(--ui-info-soft); color: var(--ui-info-text); }
.ui-callout--warn { background: var(--ui-warn-soft); color: var(--ui-warn-text); }
.ui-callout--danger { background: var(--ui-danger-soft); color: var(--ui-danger-text); }
.ui-callout--success { background: var(--ui-success-soft); color: var(--ui-success-text); }
.ui-callout__title { display: block; margin-bottom: 2px; font-weight: 800; }

/* 위험 구역 (섹션 전체를 붉은 면으로) */
.ui-zone-danger { padding: 28px 22px 14px; border-radius: var(--ui-r-xl); background: var(--ui-danger-soft); }
.ui-zone-danger .ui-h2 { color: var(--ui-danger-text); }

/* ── 13. Success criteria (번호 원 + 카드, 3열) ── */
.ui-criteria-head { margin: 28px 0 0; font-size: 15px; font-weight: 700; color: var(--ui-text-3); }
.ui-criteria { list-style: none; margin: var(--ui-s3) 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) { .ui-criteria { grid-template-columns: 1fr; } }
.ui-criteria li { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--ui-s4); border-radius: var(--ui-r-lg); background: var(--ui-surface); }
.ui-criteria b { display: block; font-size: 16px; }
.ui-criteria small { font: 400 13px/1.5 var(--ui-mono); color: var(--ui-text-3); }

/* 번호 원 (단계·기준에 공용) */
.ui-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ui-accent); color: var(--ui-on-accent); font-size: 15px; font-weight: 800; font-style: normal;
}

/* ── 14. Steps (자동 번호) ── */
.ui-steps { list-style: none; counter-reset: ui-step; margin: var(--ui-s4) 0; padding: 0; }
.ui-steps > li { counter-increment: ui-step; position: relative; padding: 0 0 var(--ui-s5) 44px; }
.ui-steps > li::before {
  content: counter(ui-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ui-accent); color: var(--ui-on-accent); font-size: 15px; font-weight: 800;
}
.ui-steps > li::after { content: ''; position: absolute; left: 14px; top: 36px; bottom: 6px; width: 2px; background: var(--ui-line); }   /* 번호 사이 세로선 */
.ui-steps > li:last-child::after { display: none; }
.ui-steps b { display: block; font-size: 17px; line-height: 30px; }
.ui-steps p { margin: 4px 0 0; color: var(--ui-text-2); }
.ui-steps .ui-full { margin-left: -44px; position: relative; z-index: 1; }   /* 코드·스크린샷은 왼쪽 들여쓰기 없이 전체 폭 (번호 세로선 위를 덮음) */
.ui-more { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--ui-accent-text); text-decoration: none; }

/* ── 15. Checklist ── */
.ui-check { list-style: none; margin: var(--ui-s3) 0; padding: 0 var(--ui-s4); border-radius: var(--ui-r-md); background: var(--ui-surface); }
.ui-check li + li { border-top: 1px solid var(--ui-line); }
.ui-check label { display: flex; gap: var(--ui-s3); align-items: flex-start; padding: 13px 0; cursor: pointer; }
.ui-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ui-accent); }
.ui-check input:checked + span { color: var(--ui-text-4); text-decoration: line-through; }
.ui-check--danger { background: var(--ui-surface); }
.ui-check--danger li + li { border-color: var(--ui-danger-line); }
.ui-check--danger input { accent-color: var(--ui-danger); }

/* ── 16. Table ── */
.ui-table-wrap { overflow-x: auto; margin: var(--ui-s3) 0; border-radius: var(--ui-r-md); background: var(--ui-surface); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ui-table th, .ui-table td { padding: 12px var(--ui-s4); text-align: left; vertical-align: top; }
.ui-table th { font-size: 13px; font-weight: 700; color: var(--ui-text-3); background: var(--ui-surface-2); white-space: nowrap; }
.ui-table tr + tr td { border-top: 1px solid var(--ui-line); }
.ui-table td:first-child { font-weight: 700; white-space: nowrap; }

/* ── 17. Code · Output ── */
.ui-code { position: relative; margin: var(--ui-s3) 0; padding: 14px var(--ui-s4); border-radius: var(--ui-r-md); background: var(--ui-code-bg); color: var(--ui-code-text); }
.ui-code__lang { display: block; margin-bottom: var(--ui-s2); font: 700 11px/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; }
.ui-code pre { margin: 0; padding-right: 64px; font: 400 14px/1.6 var(--ui-mono); white-space: pre; overflow-x: auto; scrollbar-width: none; }
.ui-code--wrap pre { white-space: pre-wrap; }
.ui-copy {
  position: absolute; right: 10px; top: 10px; padding: 7px 11px; border: 0; border-radius: var(--ui-r-xs); cursor: pointer;
  background: var(--ui-code-chip); color: var(--ui-code-chip-text); font: 700 13px/1 var(--ui-font);
}
.ui-copy.is-done { background: var(--ui-accent); color: var(--ui-on-accent); }
.ui-output { margin: var(--ui-s3) 0; padding: 14px var(--ui-s4); border-radius: var(--ui-r-md); border: 1px dashed var(--ui-line-strong); background: var(--ui-surface-2); color: var(--ui-text-2); }
.ui-output pre { margin: 0; font: 400 14px/1.6 var(--ui-mono); white-space: pre-wrap; }

/* ── 18. Figure (스크린샷) ── */
.ui-figure { margin: var(--ui-s5) 0 var(--ui-s6); }   /* 그림 위 20 · 아래 24 (그림 → 본문이 붙어 보이지 않게) */
.ui-figure + .ui-figure { margin-top: var(--ui-s10); }   /* 그림이 연달아 나올 때 */
.ui-figure__img { width: 100%; border-radius: var(--ui-r-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-lift); overflow: hidden; }
.ui-figure__img--narrow { width: auto; max-width: 100%; max-height: 420px; margin: 0 auto; }
.ui-figure figcaption { margin-top: var(--ui-s2); font-size: 13px; color: var(--ui-text-3); text-align: center; }

/* ── 19. Compare (두 칸 비교, 고른 쪽 강조) ── */
.ui-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-s3); margin: var(--ui-s3) 0; }
@media (max-width: 380px) { .ui-compare { grid-template-columns: 1fr; } }
.ui-compare__col { padding: var(--ui-s4) 18px; border-radius: var(--ui-r-lg); background: var(--ui-surface); }
.ui-compare__col.is-picked { background: var(--ui-accent-soft); box-shadow: inset 0 0 0 1.5px var(--ui-accent); }
.ui-compare__col strong { font-size: 17px; }
.ui-compare__col ol { list-style: none; margin: var(--ui-s2) 0 0; padding: 0; }
.ui-compare__col li { padding: 4px 0; font-size: 15px; }
.ui-compare__col li + li::before { content: '↓ '; color: var(--ui-accent-text); }

/* ── 20. Flow (위→아래 흐름, 사이에 화살표) ── */
.ui-flow { list-style: none; margin: var(--ui-s4) 0; padding: 0; display: grid; gap: 22px; }
.ui-flow li { position: relative; padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r-md); background: var(--ui-surface); }
.ui-flow li + li::before { content: '↓'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); line-height: 22px; font-weight: 800; color: var(--ui-accent-text); }
.ui-flow b { display: block; font-size: 16px; }
.ui-flow span { font-size: 14px; color: var(--ui-text-3); }

/* ── 21. Empty · Sources · Footer ── */
.ui-empty { padding: var(--ui-s8) var(--ui-s4); border-radius: var(--ui-r-lg); border: 1.5px dashed var(--ui-line-strong); text-align: center; color: var(--ui-text-3); font-size: 14px; }
.ui-sources { margin-top: var(--ui-s8); padding-top: var(--ui-s6); border-top: 1px solid var(--ui-line); font-size: 14px; color: var(--ui-text-3); }
.ui-sources ul { margin: var(--ui-s2) 0 0; padding-left: 18px; }
.ui-sources a { text-underline-offset: 3px; }
.ui-footer { margin-top: var(--ui-s10); text-align: center; font-size: 13px; color: var(--ui-text-3); }
.ui-footer p { margin: 0 0 6px; }
.ui-footer a { color: inherit; text-underline-offset: 3px; }

/* ── 22. Toast ── */
.ui-toast {
  position: fixed; left: 50%; bottom: calc(var(--ui-s6) + env(safe-area-inset-bottom)); transform: translate(-50%, 8px);
  padding: 10px var(--ui-s4); border-radius: var(--ui-r-pill); background: var(--ui-inverse); color: var(--ui-on-inverse);
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
.ui-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── MONO: 색 대신 줄 · 굵기로 상태 구분 ── */
.ui-callout--info, .ui-callout--warn, .ui-callout--danger, .ui-callout--success { box-shadow: inset 4px 0 0 var(--ui-line-strong); padding-left: 22px; }
.ui-callout--info { box-shadow: inset 4px 0 0 var(--ui-accent); }            /* 정보: 포인트 줄 */
.ui-callout--warn { box-shadow: inset 4px 0 0 var(--ui-text-4); }            /* 주의: 회색 줄 */
.ui-callout--danger { box-shadow: inset 4px 0 0 var(--ui-text); }            /* 위험: 검정 줄 + 회색 면 */
.ui-callout--success { box-shadow: inset 4px 0 0 var(--ui-text-3); }         /* 성공: 짙은 회색 줄 */
.ui-callout__title { letter-spacing: -.01em; }
.ui-chip--danger { color: var(--ui-text); background: var(--ui-surface); box-shadow: inset 0 0 0 1.5px var(--ui-text); }
.ui-zone-danger { box-shadow: inset 0 0 0 1.5px var(--ui-line-strong); }
.ui-check--danger input { accent-color: var(--ui-text); }

@media (max-width: 640px) { .ui-section { margin-top: 48px; } .ui-figure { margin: var(--ui-s4) 0 var(--ui-s5); } .ui-figure + .ui-figure { margin-top: var(--ui-s8); } }   /* 폰: 비율대로 조금 줄인다 */

/* 글 끝 안내 박스 (Try it · Next) — 본문과 떨어진 독립 블록: 제목 · 문장 · 버튼을 줄마다 나눈다 */
.ui-cta { margin: 64px 0 0; padding: 24px 28px 26px; }
.ui-cta .ui-callout__title { font-size: 17px; margin-bottom: 6px; }
.ui-cta__text { margin: 0; }
.ui-cta__btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; padding: 0 20px; border-radius: 999px; background: var(--ui-text); color: var(--ui-bg) !important; font-size: 15px; font-weight: 700; text-decoration: none !important; }
.ui-cta__btn:hover { opacity: .88; }
.ui-footer { margin-top: 56px; }
@media (max-width: 640px) { .ui-cta { margin-top: 48px; padding: 20px 20px 22px; } .ui-cta__btn { width: 100%; justify-content: center; } .ui-footer { margin-top: 40px; } }