/* 화면 전용 스타일. A3 인쇄는 sheet-a3.css로 완전히 분리한다 —
   화면용 16px과 인쇄용 8.5px를 @media print로 한 파일에 섞으면 둘 다 망가진다. */

:root {
  --fs-body: 1rem;        /* 16px. 375px에서도 줄이지 않는다 */
  --fs-sm: 0.875rem;
  --fs-code: 0.875rem;
  --lh-body: 1.65;
  --lh-code: 1.5;
  --tap: 44px;            /* 최소 터치 타깃 */
  --measure: 70ch;

  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --fg: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --code-bg: #f1f5f9;
  --accent: #6366f1;       /* 현대적인 인디고 톤 */
  --accent-soft: #e0e7ff;
  --accent2: #0ea5e9;      /* 스카이 블루 보조 액센트 */
  --accent2-soft: #e0f2fe;
  --hl: #fef3c7;
  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --ok: #10b981;

  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 그라디언트 추가 */
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-secondary: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  
  /* 그림자 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-soft: #1e293b;
    --fg: #f1f5f9;
    --muted: #94a3b8;
    --line: #334155;
    --code-bg: #1e293b;
    --accent: #818cf8;
    --accent-soft: #312e81;
    --accent2: #38bdf8;
    --accent2-soft: #0c4a6e;
    --hl: #312e81;
    --danger: #f87171;
    --danger-soft: #7f1d1d;
    --ok: #34d399;
    
    /* 다크 모드 그라디언트 */
    --gradient-primary: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    --gradient-secondary: linear-gradient(135deg, #38bdf8 0%, #22d3ee 100%);
    --gradient-warm: linear-gradient(135deg, #fbbf24 0%, #fb923c 100%);
    
    /* 다크 모드 그림자 */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--tap) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-body) / var(--lh-body) -apple-system, "Pretendard", "Malgun Gothic",
    "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  word-break: keep-all;     /* 한국어는 어절 단위로 개행 */
  overflow-wrap: anywhere;  /* 긴 URL만 강제 개행 */
}

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* 버튼 스타일 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 16px;
  border: none; border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: all var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn-primary {
  background: var(--gradient-primary);
  color: #fff;
}
.btn-primary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-md);
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
/* 카드 그리드 페이지(레퍼런스 서피스)만 판을 넓힌다. 한글 설명이 좁은 열에서 2~3줄로
   깨지는 걸 줄이려면 카드 폭이 필요하다. 머리말·푸터까지 같이 넓혀야 축이 맞는다. */
.prose { max-width: var(--measure); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg); padding: 12px; border: 2px solid var(--accent);
}
.skip:focus { left: 8px; top: 8px; }

/* ── 헤더 / 상위 탭 ─────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}
.masthead .wrap {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 16px; padding-bottom: 14px; flex-wrap: wrap;
}
/* 타입 규칙: 모노스페이스는 영문·기호만 든 문자열에만 쓴다. 한글이 한 글자라도 섞이면
   본문 폰트 — 한글은 모노 스택에서 본문과 다른 폴백 페이스로 떨어진다(실측 192.9 vs 204.1px).
   그래서 브랜드도 "❯ Claude"(b)만 모노고 "참고자료"는 본문 폰트다. */
.brand {
  font-size: 1.0625rem; font-weight: 700; line-height: 1;
  text-decoration: none; color: var(--fg);
}
.brand b { color: var(--accent); font-family: var(--font-mono); letter-spacing: -0.01em; }
.masthead .tagline { font-size: var(--fs-sm); color: var(--muted); }

.topnav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}
@media (prefers-color-scheme: dark) {
  .topnav {
    background: rgba(15, 23, 42, 0.95);
  }
}
.topnav ul {
  display: flex; gap: 2px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.topnav ul::-webkit-scrollbar { display: none; }
.topnav a {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 14px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  /* 375px 에서 "레퍼런스"가 "레퍼런/스"로 쪼개졌다. 탭 라벨은 절대 꺾지 않는다. */
  white-space: nowrap;
}
.topnav a:hover { color: var(--fg); }
.topnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* 탭 우측의 검색 트리거 — 진짜 입력창이 아니라 팔레트를 여는 버튼이다. 입력창을 헤더에
   직접 두면 결과 드롭다운·모바일 폭·포커스 관리가 전부 새 문제가 되고, 팔레트와 랭킹이
   갈라질 길이 하나 더 생긴다. */
.topnav .wrap { display: flex; align-items: center; gap: 10px; }
.topnav ul { flex: 1 1 auto; min-width: 0; }
.navsearch {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; margin: 5px 0; padding: 0 14px;
  font-size: var(--fs-sm); font-family: inherit; color: var(--muted);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.navsearch:hover, .navsearch:focus-visible { border-color: var(--accent); color: var(--fg); box-shadow: var(--shadow-sm); }
.navsearch .pfx { color: var(--accent); font: 700 0.875rem/1 var(--font-mono); }
@media (max-width: 640px) { .navsearch .ex { display: none; } }

/* ── 페이지 골격 ─────────────────────────────────────────── */
main { padding: 20px 0 64px; }
h1 { font-size: 1.5rem; margin: 0 0 6px; line-height: 1.3; font-weight: 800; }
h2 { font-size: 1.1875rem; margin: 32px 0 8px; line-height: 1.35; font-weight: 800; scroll-margin-top: calc(var(--tap) + 16px); }
h3 { font-size: 1rem; margin: 20px 0 6px; color: var(--muted); }
/* 섹션 헤딩은 좌측 보더 바 하나로만 구분한다 — 텍스트 반복(❯ 등)은 121개 섹션에서
   시그니처가 아니라 소음이 됐다. 구조 신호는 한 번의 시각 장치로 충분하다. */
.section > h2 {
  border-left: 4px solid var(--accent); padding-left: 12px; margin-left: -16px;
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 100%);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  transition: all var(--ease);
}
.section > h2:hover {
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
  padding-left: 16px;
}
/* 페이지 머리는 어느 페이지에서나 같은 순서다:
   [.pagehead 또는 h1] → .lede(상세 페이지, 한 개) → .pagemeta(선택) → 본문(.prose).
   .lede 를 본문 문단에도 쓰면 "제목 바로 아래 한 줄"이라는 신호가 사라진다. 본문은 .prose 다. */
.lede { color: var(--muted); margin: 0 0 4px; max-width: var(--measure); }
.pagemeta { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); max-width: var(--measure); }

/* 서피스 페이지 머리: 제목 좌측 · 치트시트 버튼 우측 (다운로드 허브의 이관처) */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.pagehead h1 { margin: 0; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.sheetbtn .n { font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
p.prose { margin: 0 0 12px; }
ul.prose { margin: 0 0 12px; padding-left: 20px; }
ul.prose li { margin: 0 0 6px; }
/* 페이지 맨 아래 "이 데이터는 어느 파일" 줄 — 상세 페이지 공통 */
.datanote { margin: 32px 0 0; font-size: var(--fs-sm); color: var(--muted); max-width: var(--measure); }

.layout { display: block; }
@media (min-width: 900px) {
  :root { --fs-body: 1.0625rem; }
  .layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }
  .toc { position: sticky; top: calc(var(--tap) + 12px); max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* 목차 — 모바일에서만 접는다. 본문 중복이라 숨겨도 정보 손실이 없는 유일한 자리. */
.toc { font-size: var(--fs-sm); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 5px 8px; border-radius: 6px;
  color: var(--muted); text-decoration: none;
}
.toc a:hover { background: var(--bg-soft); color: var(--fg); }
/* 스크롤에 맞춰 tocspy.js 가 붙이는 "지금 보는 섹션" 표시. 공식 문서 사이트의
   우측 "이 페이지에서" 활성 표시와 같은 역할을 좌측 목차 위에서 한다. */
.toc a[aria-current="location"] {
  background: var(--accent-soft); color: var(--fg); font-weight: 700;
}
.toc summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
@media (min-width: 900px) {
  .toc > summary { display: none; }
  .toc[open] > *:not(summary), .toc > *:not(summary) { display: revert; }
}

/* ── 섹션 / 항목 ─────────────────────────────────────────── */
.section {
  border-top: 2px solid var(--line);
  padding-top: 18px; margin-top: 28px;
  /* 긴 페이지 성능 완화. hidden이 아니라 auto여야 Ctrl+F와 탭 순서에 남는다. */
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}
.section > h2 { margin-top: 0; }
.section .summary { color: var(--muted); margin: 0 0 10px; max-width: var(--measure); }

.item {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--tap) + 16px);
}
.item:first-of-type { border-top: none; }
/* 항목 이름은 두 갈래다. 그대로 쳐서 쓰는 명령·플래그(ASCII)만 코드 칩이고,
   「설명」·「주의」처럼 한글 라벨인 것(전체의 39%)은 그냥 제목이다.
   둘에 같은 옷을 입히면 39%가 "칠 수 있는 것"이라는 거짓 신호를 낸다. */
.item .term {
  display: inline-block; margin-bottom: 6px; color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 8px; border-radius: 5px;
  font: 600 var(--fs-code) / 1.45 var(--font-mono);
}
/* font 단축 속성에 font-family 로 inherit 을 쓰면 선언 전체가 무효가 된다(실측으로 잡았다).
   롱핸드로 써야 .item 의 본문 폰트를 실제로 물려받는다. */
.item .term-label {
  background: none; padding: 0; color: var(--fg);
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.45;
}
.item .desc { margin: 0 0 6px; max-width: var(--measure); }
.item .detail { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm); max-width: var(--measure); }
.item .detail p { margin: 0 0 6px; }
.item .caveat {
  margin: 8px 0 0; padding: 8px 10px;
  border-left: 3px solid var(--danger); background: var(--danger-soft);
  font-size: var(--fs-sm); max-width: var(--measure);
}
.item .seealso { margin: 6px 0 0; font-size: var(--fs-sm); }
.item .seealso a { color: var(--accent2); }
.item .anchor {
  float: right; color: var(--muted); text-decoration: none;
  font-size: var(--fs-sm); opacity: 0; padding: 0 4px;
}
.item:hover .anchor, .anchor:focus { opacity: 1; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; vertical-align: middle;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.badge.core { 
  border-color: var(--accent); 
  color: var(--accent); 
  background: var(--accent-soft);
}
.badge.warn { 
  border-color: var(--danger); 
  color: var(--danger); 
  background: var(--danger-soft);
}
.badge.ok { 
  border-color: var(--ok); 
  color: var(--ok);
  background: #d1fae5;
}

pre {
  margin: 8px 0; padding: 12px; border-radius: 8px;
  background: var(--code-bg); overflow-x: auto; -webkit-overflow-scrolling: touch;
  font: var(--fs-code) / var(--lh-code) ui-monospace, "Cascadia Code", Consolas, monospace;
  word-break: normal; overflow-wrap: normal;   /* 명령어는 절대 꺾지 않는다 */
}
code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9375em; background: var(--code-bg);
  padding: 1px 5px; border-radius: 4px;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ── 카드 그리드 (레퍼런스 서피스) ────────────────────────────
   quickref.me 의 배치를 이 데이터에 맞춘 것. 섹션 하나가 카드 하나이고,
   카드 안에서 항목은 「이름 | 설명」 2열로 눕는다. 이 리포의 항목 639개 중
   세부 15%·코드 12%뿐이고 나머지는 전부 한 줄짜리라, 세로로 쌓으면 가로가 논다.

   배치 결정의 이력 — 셋 다 실측·판정 기록이다:
   ① 행 단위 그리드: 폐기. cli 36카드 중 "권한 모드"(2521px)와 "Hooks & 플러그인"(1371px)이
      같은 행에 짝지어지며 1150px 공백 — 항목 수 편차가 큰 데이터에 행 고정이 안 맞았다.
   ② CSS columns 마소너리: 공간은 해결했지만 읽는 순서가 열 우선(위→아래)이 돼
      좌측 목차(문서 순서)와 카드 순서가 어긋났다 — 2026-08-20 사용자 판정으로 폐기.
   ③ 현재: 1열. 카드 순서 = 문서 순서 = 목차 순서. 항목을 접어 숨기는 대안(<details>)은
      여전히 금지다 — G10 게이트가 본문의 <details>를 막는다(닫힌 상태는 Ctrl+F에서 빠진다).

   카드 스타일 자체는 그대로다 — /print/ 와 A3 치트시트는 같은 데이터에서 별도 템플릿
   (print-all/print-sheet + sheet-a3.css)으로 생성되므로 이 배치와 무관하다. */

.cardgrid .section {
  margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* 다단 배치는 지연 렌더와 궁합이 나쁘다 */
  content-visibility: visible;
  /* 컬럼 안에서 카드가 쪼개지지 않게. inline-block이 없으면 Safari에서 break-inside가
     block 요소에 무시된다(실측). */
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.cardgrid .section:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

/* 카드 머리 — 크기로 위계를 주되 무게로 누르지 않는다 */
.cardgrid .section > h2 {
  margin: 0; padding: 9px 14px;
  border-left: none;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
}
.cardgrid .section .summary {
  margin: 0; padding: 10px 14px 2px;
  font-size: var(--fs-sm); max-width: none;
}

.cardgrid .item {
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  position: relative;      /* float 은 그리드에서 무시되므로 앵커를 절대배치로 */
}
.cardgrid .section .summary + .item { border-top: none; }
.cardgrid .item .anchor { position: absolute; right: 6px; top: 7px; float: none; }

/* 이름 열은 "카드 전체"가 한 열을 공유해야 설명 시작점이 행마다 흔들리지 않는다.
   예전에는 .item 마다 그리드를 따로 만들어 열 폭이 행마다 달랐고(실측: 한 카드 안에서
   50~149px 단차), 상한 15ch 는 `claude auth login` 같은 평범한 이름까지 두 줄로 꺾었다.
   그래서 열의 정의를 카드(.section)에 두고 .item 이 subgrid 로 물려받는다 —
   열 폭 = 그 카드의 가장 긴 이름, 상한 fit-content(35ch).
   35ch 인 이유: ch 는 트랙이 정의된 요소(본문 폰트)의 0 폭 기준이라 칩의 모노 폰트
   30자보다 좁게 잡힌다(실측: 32ch 에서 --dangerously-skip-permissions 30자가 꺾였다).
   35ch 가 그 30자 + 칩 패딩(16px)을 덮는 실측치. 이걸 넘는 건 설치 curl 전문과
   슬래시 복합 키 정도고 그건 꺾여도 정렬(단차 0)은 유지된다. */
@media (min-width: 560px) {
  /* subgrid 미지원 브라우저 폴백: 항목별 열(단차는 남지만 배치는 유지) */
  .cardgrid .item {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    column-gap: 12px;
  }
  .cardgrid .item > * { grid-column: 2; }
  .cardgrid .item .term,
  .cardgrid .item .term-label,
  .cardgrid .item .badge {
    grid-column: 1; grid-row: 1;
    margin-bottom: 0; align-self: start; max-width: 30ch;
  }
  @supports (grid-template-columns: subgrid) {
    .cardgrid .section { display: grid; grid-template-columns: fit-content(35ch) minmax(0, 1fr); }
    .cardgrid .section > * { grid-column: 1 / -1; }
    .cardgrid .item { grid-template-columns: subgrid; }
    .cardgrid .item .term,
    .cardgrid .item .term-label,
    .cardgrid .item .badge { max-width: none; }
  }
}

.cardgrid .item .desc,
.cardgrid .item .detail { max-width: none; }
.cardgrid .item .desc { margin-bottom: 0; }
.cardgrid .item .detail { margin: 4px 0 0; }
.cardgrid .item pre { margin: 6px 0 0; }
.cardgrid .item .caveat { margin: 6px 0 0; }
.cardgrid .item .seealso { margin: 4px 0 0; }
/* 카드 맨 아래 출처 줄 */
.cardgrid .section > .seealso {
  margin: 0; padding: 9px 14px;
  border-top: 1px solid var(--line); background: var(--bg-soft);
  font-size: 0.8125rem;
}

/* ── 검색 ────────────────────────────────────────────────── */
/* 1148px 짜리 한 줄 입력창은 어느 페이지에서도 읽기 나쁘다. 전역으로 묶는다. */
.searchbox { margin: 18px 0 8px; position: relative; max-width: 640px; }
.searchbox input {
  width: 100%; min-height: var(--tap); padding: 0 14px 0 44px;
  font-size: 16px;              /* iOS가 16px 미만 입력에서 자동 확대한다 */
  border: 2px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--fg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.searchbox::before {
  content: "❯"; position: absolute; left: 16px; top: 0;
  height: var(--tap); display: flex; align-items: center;
  color: var(--accent); font: 700 1rem/1 var(--font-mono); pointer-events: none;
}
.searchbox input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md);
  transform: translateY(-1px);
}
.results { margin: 12px 0 0; }
.results .group { margin-bottom: 18px; }
.results .group > h3 {
  margin: 0 0 4px; font-size: var(--fs-sm); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.results a.hit {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; border: 1px solid transparent;
  transition: all var(--ease);
  position: relative;
}
.results a.hit:hover, .results a.hit.sel { 
  background: var(--bg-soft); 
  border-color: var(--line);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}
.results .hit .t { display: block; font-weight: 600; }
.results .hit .t code { background: none; padding: 0; color: var(--accent); }
.results .hit .c { display: block; font-size: var(--fs-sm); color: var(--muted); }
.results .hit .s { display: block; font-size: var(--fs-sm); color: var(--muted); }
.results .empty { padding: 16px 0; color: var(--muted); }
.results .empty a { color: var(--accent); }

/* ── 전역 검색 팔레트 · 단축키 도움말 ────────────────────── */
/* <dialog> 를 쓰니 포커스 트랩·Esc·스크롤 잠금·backdrop 은 브라우저가 준다.
   위치만 잡는다 — 화면 정중앙이 아니라 위쪽 10vh. 팔레트는 결과가 아래로 자라는 물건이라
   가운데 정렬하면 입력창이 타이핑 중에 위아래로 흔들린다. */
.palette, .keyhelp {
  margin: 10vh auto auto; padding: 16px 20px 20px; width: min(680px, calc(100vw - 32px));
  max-height: 78vh; overflow-y: auto;
  border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 16px;
  background: var(--bg); color: var(--fg);
  box-shadow: var(--shadow-xl);
}
.palette::backdrop, .keyhelp::backdrop { background: rgb(10 12 16 / 0.45); }
@media (prefers-color-scheme: dark) {
  .palette::backdrop, .keyhelp::backdrop { background: rgb(0 0 0 / 0.62); }
}
/* 스크롤 컨테이너는 팔레트 하나뿐이다. 결과에도 max-height 를 주면 스크롤 영역이 둘로
   중첩돼 휠이 어디에 먹는지 예측할 수 없어진다. 대신 입력창을 sticky 로 붙여둔다. */
.palette .searchbox {
  margin: 0; max-width: none;
  position: sticky; top: -14px; z-index: 1;
  padding: 14px 0 8px; margin-top: -14px; background: var(--bg);
}
/* ::before(❯)는 .searchbox 기준 top:0 이라, 위에서 준 padding-top 만큼 같이 내려줘야 한다. */
.palette .searchbox::before { top: 14px; }
/* 결과가 있으면 영역 목록을 접는다. 질의 유무는 search.js 가 data-q 로 표시한다. */
.palette[data-q="1"] .palette-empty { display: none; }
.palette-empty { margin: 14px 0 0; }
.palette-empty h3 {
  margin: 0 0 4px; font-size: var(--fs-sm); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.palette-empty ul { list-style: none; margin: 0; padding: 0; }
.palette-empty a {
  display: flex; align-items: baseline; gap: 8px;
  min-height: var(--tap); padding: 4px 10px; border-radius: 8px;
  text-decoration: none; color: var(--fg); font-weight: 600;
}
.palette-empty a:hover { background: var(--bg-soft); }
.palette-empty a b {
  font: 700 0.75rem/1 var(--font-mono); color: var(--muted);
  background: var(--code-bg); border-radius: 4px; padding: 4px 6px;
}
.palette-empty a span { font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.palette-foot { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); }
.palette-foot kbd, .keyhelp kbd {
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg);
  background: var(--code-bg); border-radius: 4px; padding: 1px 5px;
}
.keyhelp h2 { margin: 0 0 12px; font-size: 1.0625rem; }
.keyhelp dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.keyhelp dt { white-space: nowrap; }
.keyhelp dt .or { color: var(--muted); font-size: var(--fs-sm); }
.keyhelp dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .palette, .keyhelp { margin-top: 4vh; }
  .keyhelp dl { grid-template-columns: 1fr; gap: 2px 0; }
  .keyhelp dd { margin: 0 0 10px; }
}

/* ── 스크롤 등장 모션 ────────────────────────────────────── */
/* .rv 는 motion.js 가 붙일 때만 걸린다. CSS 에 시작 상태를 기본값으로 적어두면
   JS 한 줄 오류가 백지 페이지가 된다 — GSAP 을 쓸 때도 지켰던 규칙이다.
   이징은 GSAP power2.out(= quad out) 대응치. */
.rv { opacity: 0; transform: translateY(var(--rv-y, 10px)); }
.rv-card { --rv-y: 10px; --rv-dur: .5s; }
.rv-sec  { --rv-y: 14px; --rv-dur: .6s; }
.rv.in {
  opacity: 1; transform: none;
  transition:
    opacity var(--rv-dur, .5s) cubic-bezier(.25, .46, .45, .94) var(--rv-del, 0s),
    transform var(--rv-dur, .5s) cubic-bezier(.25, .46, .45, .94) var(--rv-del, 0s);
}
/* 관측 전에 인쇄하면 통째로 빈 종이가 나온다. 인쇄에서는 모션 상태를 무시한다. */
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* 추가 애니메이션 효과 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}

/* 로딩 상태 표시 */
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ── 카드 그리드 ─────────────────────────────────────────── */
.cards {
  display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.card {
  display: block; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; background: var(--bg);
  box-shadow: var(--shadow-sm);
  /* transform은 여기서 트랜지션 안 함 — 등장 모션은 바깥 li(.rv)가 transform 으로 하는데,
     안쪽 .card 까지 상시 transform 트랜지션을 걸면 이중 이징으로 버벅인다. hover 에서만 건다. */
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.card:hover {
  border-color: var(--accent); background: var(--bg-soft); 
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  transition: border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
/* span 에 margin 은 안 먹는다 — display:block 이 없으면 제목과 설명이 한 줄로 붙어 나온다. */
.card .t { display: block; font-weight: 800; font-size: 1.0625rem; margin-bottom: 6px; line-height: 1.35; }
.card .s { display: block; font-size: var(--fs-sm); color: var(--muted); }
/* 개수·배지는 3층 위계의 맨 아래 — 알약으로 내려 제목·설명과 섞이지 않게 한다. */
.card .n {
  display: block; margin-top: 10px;
  font-size: 0.8125rem; color: var(--muted);
}

/* ── 프롬프트 ────────────────────────────────────────────── */
.prompt-body {
  position: relative; margin: 10px 0;
}
.prompt-body pre { background: var(--code-bg); white-space: pre-wrap; }
.btn {
  min-height: var(--tap); min-width: var(--tap); padding: 0 14px;
  /* 단축 속성 + inherit 은 무효라 button 이 UA 기본 폰트로 남는다. 롱핸드로 쓴다. */
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg); cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn[data-copied="1"] { border-color: var(--ok); color: var(--ok); }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.slots { display: grid; gap: 8px; margin: 10px 0; }
.slots label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.slots input {
  min-height: 38px; padding: 0 10px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg);
}
.attribution {
  margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px;
  font-size: var(--fs-sm); color: var(--muted);
}

/* ── 표 ──────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: var(--fs-sm); }
.tbl th, .tbl td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 600; }
/* 공식문서 색인 표의 열 폭. 인라인 style 대신 여기에 둔다 — 표 규칙은 한군데 모은다. */
.tbl th.c-name { width: 30%; }
.tbl th.c-md { width: 52px; }

/* ── 착지 하이라이트 ──────────────────────────────────────── */
:target { background: var(--hl); }
:target .term { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── 푸터 ────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--line); margin-top: 48px; padding: 20px 0 40px;
  font-size: var(--fs-sm); color: var(--muted);
}
footer.site a { color: var(--muted); }
footer.site .meta { font-size: 0.8125rem; }   /* 한글이 섞여 있어 모노를 쓰지 않는다 */
footer.site .stale { color: var(--danger); font-weight: 600; }

/* 화면용 페이지를 인쇄하면 nav류는 뺀다. A3 시트는 별도 경로(/print/)다. */
@media print {
  .topnav, .searchbox, .results, .skip, footer.site { display: none; }
  .section { content-visibility: visible; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; }
}