/* Seeknoter 공통 헤더 · 검색 · AI 상담사 (q-1017 리뉴얼 A)
 * tools/make-dist.js 가 dist 의 모든 HTML <head> 에 /snx-header.css 를 넣고, 이 파일 끝에 site/catalog.json 의 카테고리 색(.snx-c-<id>)을 덧붙여 dist/snx-header.css 로 쓴다.
 * 페이지마다 CSS 가 다르므로(형제 폴더 도구들) 모든 규칙은 #snx-hd · #snx-ai 아래에서만 걸고, 첫 구획에서 상속값을 지운다(페이지 CSS 가 새어 들지 않게).
 * 층(z-index): 헤더 1000(검색 결과 포함) · AI 다른 진입점 1050 · 검색 시트·AI 패널 1100. 구글 자동 광고(하단 앵커 z 2147483647 · #google-anno-sa z 1000)는
 *   숨기지도 덮지도 않는다(AdSense 정책, 해솔 판정 #3417) — snx-header.js 가 광고 자리를 재서(읽기만) html 에 --snx-ad-t·--snx-ad-b 와 data-snx-ad-t·data-snx-ad-b 를 넣고,
 *   시트·패널·진입점이 그 자리 + 12px(+ 아래는 safe-area) 만큼 비켜 선다. 광고가 없으면 예약 0(원래 크기). 5b 구획.
 * 2026-10-19 q-1019: 카테고리 메뉴 줄·드롭다운·서랍 아코디언을 뺐다(오너 15697·15722). 막대 = 로고 | 검색 · 자주 묻는 질문 · AI 상담사 한 줄(모든 폭).
 *   한 줄을 지키는 법: 로고·질문·AI 는 줄지 않고(flex: none) 검색칸만 줄어든다(min-width 0). 덮개 폭은 검색칸 대신 찾기 단추, 질문은 아이콘(글자는 화면 낭독기용).
 * 좁은 화면 = max-width:1279px(갤럭시 Z 폴드5 펼침 약 1,100px 포함), 덮개 = max-width:767px(찾기 단추 → 검색 시트).
 * 움직임: 검색 시트는 위치+투명도(200ms ease-out). prefers-reduced-motion: reduce 면 전부 끔.
 * 글꼴: #snx-hd·#snx-ai 안에서만 --font 토큰을 다시 정의한다(형제 도구 페이지의 --font 와 상관없이 같은 한글 글꼴 목록, Noto Sans KR 폴백 포함).
 * 아이콘: Phosphor Icons(MIT) 인라인 SVG — site/snx-icons.json.
 */

/* ---------------------------------------------------------------- 0 격리(페이지 CSS 상속 지우기) */
#snx-hd, #snx-hd *, #snx-hd *::before, #snx-hd *::after,
#snx-ai, #snx-ai *, #snx-ai *::before, #snx-ai *::after,
#snx-ai-fab, #snx-ai-fab * { box-sizing: border-box; }
#snx-hd :where(div, nav, ul, ol, li, a, button, input, form, p, span, label, small, b, strong, svg),
#snx-ai :where(div, nav, ul, ol, li, a, button, input, form, p, span, label, small, b, strong, svg, section, h2),
#snx-ai-fab :where(span, svg) {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; float: none;
  font: inherit; color: inherit; letter-spacing: normal; text-transform: none; text-decoration: none; text-align: inherit; text-indent: 0;
  line-height: inherit; list-style: none; min-width: 0; min-height: 0; max-width: none; width: auto; height: auto;
  opacity: 1; transform: none; filter: none; outline: 0; vertical-align: baseline; white-space: normal;
}
#snx-hd :where(input, button), #snx-ai :where(input, button) { -webkit-appearance: none; appearance: none; cursor: pointer; }
#snx-hd :where(input), #snx-ai :where(input) { cursor: text; }
#snx-hd :where(a, button), #snx-ai :where(a, button) { touch-action: manipulation; }   /* 두 번 탭 확대 대기 없이 바로 반응 */

/* ---------------------------------------------------------------- 1 토큰 */
#snx-hd, #snx-ai, #snx-ai-fab {
  --snx-bg: #ffffff; --snx-ink: #141a26; --snx-muted: #4a5568; --snx-line: #e1e6ee; --snx-line-strong: #7f8a99;
  --snx-soft: #f3f5fa; --snx-soft-2: #e9edf4; --snx-brand: #1f5be0; --snx-brand-ink: #ffffff; --snx-brand-soft: #e8effe;
  --snx-on-c: #ffffff;
  --snx-shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 18px 44px rgba(20, 30, 50, .14);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, "Segoe UI", Roboto, sans-serif;
  --snx-out: cubic-bezier(.2, .8, .2, 1); --snx-in: cubic-bezier(.4, 0, 1, 1);
  font-family: var(--font); font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--snx-ink);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; word-break: keep-all; overflow-wrap: anywhere; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
@media screen and (prefers-color-scheme: dark) {
  #snx-hd:not([data-snx-theme="light"]), #snx-ai:not([data-snx-theme="light"]), #snx-ai-fab:not([data-snx-theme="light"]) {
    --snx-bg: #171c25; --snx-ink: #edf1f7; --snx-muted: #b4bdca; --snx-line: #2a3140; --snx-line-strong: #6c7686;
    --snx-soft: #1c222c; --snx-soft-2: #252c38; --snx-brand: #79a8ff; --snx-brand-ink: #0b1220; --snx-brand-soft: #1b2740;
    --snx-on-c: #0e1117;
    --snx-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
}
#snx-hd :focus-visible, #snx-ai :focus-visible { outline: 3px solid var(--snx-brand); outline-offset: 2px; border-radius: 10px; }
#snx-ai-fab:focus-visible { outline: 3px solid var(--snx-brand); outline-offset: 3px; }
#snx-hd .snx-i, #snx-ai .snx-i, #snx-ai-fab .snx-i { display: block; flex: none; width: 20px; height: 20px; fill: currentColor; }

/* 카테고리 색 점(메뉴·홈·검색·AI 결과 공통) — 색은 아래 「카테고리 색」 구획(.snx-c-<id> 의 --snx-c). 헤더·패널 안은 0 구획 격리보다 세게 다시 건다 */
.snx-dot, #snx-hd .snx-dot, #snx-ai .snx-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--snx-c, #7f8a99); vertical-align: middle; }
/* 화면에는 안 보이고 화면 낭독기만 읽는 글(홈 「전체 보기」 뒤 칸 이름 등, 헤더 밖에서도 씀) */
.snx-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------------------------------------------------------------- 2 상단 막대 */
#snx-hd { position: relative; z-index: 1000; display: block; background: var(--snx-bg); border-bottom: 1px solid var(--snx-line); }
#snx-hd .snx-hd-in {
  position: static; display: flex; align-items: center; gap: 16px;
  max-width: 1440px; margin: 0 auto; padding: 0 24px; min-height: 64px;
}
#snx-hd .snx-hd-logo { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 4px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--snx-ink); border-radius: 10px; }
#snx-hd .snx-hd-sub { font-weight: 600; color: var(--snx-muted); }
#snx-hd .snx-hd-mark { position: relative; display: block; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #1f5be0; overflow: hidden; }
#snx-hd .snx-hd-mark::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: #c4232d; }
#snx-hd .snx-hd-mark::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 8px; border-radius: 2px; background: #ffffff; }

/* 자주 묻는 질문(도구 모음 안 링크): 넓은 폭은 글자, 덮개 폭은 아이콘(글자는 화면 낭독기용으로 남김) */
#snx-hd .snx-hd-faq { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 650; color: var(--snx-muted); white-space: nowrap; transition: background-color 160ms var(--snx-out), color 160ms var(--snx-out); }
#snx-hd .snx-hd-faq .snx-i { display: none; width: 22px; height: 22px; }
#snx-hd .snx-hd-faq:hover, #snx-hd .snx-hd-faq[aria-current] { background: var(--snx-soft-2); color: var(--snx-ink); }

/* 오른쪽 도구 모음: 검색(덮개 폭은 찾기 단추) · 자주 묻는 질문 · AI 상담사 */
/* 오른쪽 정렬은 margin-left:auto 로(justify-content:flex-end 는 넘칠 때 왼쪽 = 로고 위로 넘어감) */
#snx-hd .snx-hd-tools { flex: 0 1 auto; min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; }
#snx-hd [hidden] { display: none !important; }
#snx-hd .snx-hd-search { position: relative; display: block; flex: 0 1 320px; min-width: 0; }
#snx-hd .snx-hd-field { position: relative; display: flex; align-items: center; }
#snx-hd .snx-hd-field > .snx-i { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--snx-muted); pointer-events: none; }
#snx-hd .snx-hd-q {
  display: block; width: 100%; min-height: 44px; padding: 0 14px 0 40px; border-radius: 999px; border: 1px solid var(--snx-line-strong);
  background: var(--snx-soft); color: var(--snx-ink); font-size: 16px; font-weight: 500; line-height: 42px;
  transition: border-color 160ms var(--snx-out), background-color 160ms var(--snx-out);
}
#snx-hd .snx-hd-q::placeholder { color: var(--snx-muted); opacity: 1; }
#snx-hd .snx-hd-q::-webkit-search-cancel-button { -webkit-appearance: none; }
#snx-hd .snx-hd-q:focus { background: var(--snx-bg); border-color: var(--snx-brand); outline: 0; box-shadow: 0 0 0 3px var(--snx-brand-soft); }
#snx-hd .snx-hd-q:focus-visible { outline: 0; }
#snx-hd .snx-hd-btn {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--snx-ink); background: var(--snx-soft); border: 1px solid var(--snx-line);
  transition: background-color 160ms var(--snx-out), transform 160ms var(--snx-out);
}
#snx-hd .snx-hd-btn:hover { background: var(--snx-soft-2); }
#snx-hd .snx-hd-btn:active { transform: scale(.97); }
#snx-hd .snx-hd-ai { background: var(--snx-brand); border-color: var(--snx-brand); color: var(--snx-brand-ink); }
#snx-hd .snx-hd-ai:hover { background: var(--snx-brand); filter: brightness(1.08); }
#snx-hd .snx-hd-ai .snx-i { width: 18px; height: 18px; transition: transform 240ms var(--snx-out); }
#snx-hd .snx-hd-ai:hover .snx-i { transform: rotate(18deg) scale(1.08); }
#snx-hd .snx-hd-find { display: none; padding: 0; }

/* 검색 결과(콤보박스 목록) — 막대 검색창과 서랍 검색창 공통 */
.snx-results { display: block; }
#snx-hd .snx-hd-search .snx-results {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - var(--snx-hd-bottom, 72px) - 24px); max-height: calc(100dvh - var(--snx-hd-bottom, 72px) - 24px);
  overflow: auto; overscroll-behavior: contain; padding: 8px; border-radius: 16px; background: var(--snx-bg); border: 1px solid var(--snx-line); box-shadow: var(--snx-shadow);
}
#snx-hd .snx-results-list { display: grid; gap: 2px; }
#snx-hd .snx-opt { display: block; border-radius: 12px; }
#snx-hd .snx-opt > a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--snx-ink); }
#snx-hd .snx-opt > a .snx-dot { margin-top: 6px; }
#snx-hd .snx-opt[aria-selected="true"] > a, #snx-hd .snx-opt > a:hover { background: var(--snx-soft); }
#snx-hd .snx-opt[aria-selected="true"] > a { box-shadow: inset 3px 0 0 var(--snx-c); }
#snx-hd .snx-opt-t { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
#snx-hd .snx-opt-c { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--snx-muted); }
#snx-hd .snx-opt-d { display: block; grid-column: 2; font-size: 13px; color: var(--snx-muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#snx-hd .snx-empty { display: block; padding: 12px; font-size: 14px; color: var(--snx-muted); line-height: 1.55; }
#snx-hd .snx-empty b { color: var(--snx-ink); font-weight: 700; }
#snx-hd .snx-empty-ask { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 999px; background: var(--snx-brand-soft); color: var(--snx-ink); font-weight: 700; }

/* ---------------------------------------------------------------- 3 좁은 화면(~1279px, 폴드 펼침 포함): 같은 한 줄, 여백만 좁게 */
@media (max-width: 1279px) {
  #snx-hd .snx-hd-in { padding: 0 16px; gap: 12px; min-height: 56px; }
  #snx-hd .snx-hd-logo { min-height: 56px; }
  #snx-hd .snx-hd-search .snx-results { left: 0; right: auto; width: 100%; min-width: min(420px, calc(100vw - 32px)); }
}

/* ---------------------------------------------------------------- 4 덮개(~767px): 검색칸 → 찾기 단추(검색 시트), 자주 묻는 질문 → 아이콘 */
@media (max-width: 767px) {
  #snx-hd .snx-hd-in { padding: 0 12px; gap: 6px; }
  #snx-hd .snx-hd-logo { gap: 8px; font-size: 16px; }
  #snx-hd .snx-hd-sub { display: none; }
  #snx-hd .snx-hd-tools { gap: 6px; }
  #snx-hd[data-js] .snx-hd-search { display: none; }
  #snx-hd[data-js] .snx-hd-find { display: inline-flex; }
  #snx-hd .snx-hd-faq { padding: 0; color: var(--snx-ink); }
  #snx-hd .snx-hd-faq .snx-i { display: block; }
  #snx-hd .snx-hd-faq-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #snx-hd .snx-hd-ai { padding: 0 12px 0 10px; font-size: 14px; gap: 4px; }
}
@media (max-width: 359px) { #snx-hd .snx-hd-ai .snx-hd-ai-t { display: none; } #snx-hd .snx-hd-ai { padding: 0; } }

/* 검색 시트(덮개 찾기 단추): 화면 전체 높이. 내용만 스크롤(뒤 페이지는 잠김). 광고가 떠 있으면 그 자리를 비켜 선다(5b) */
#snx-hd .snx-hd-drawer {
  position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-height: 100dvh;
  background: var(--snx-bg); color: var(--snx-ink);
  animation: snx-sheet-in 200ms var(--snx-out);
}
#snx-hd .snx-dw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--snx-line); }
#snx-hd .snx-dw-title { font-size: 18px; font-weight: 800; }
#snx-hd .snx-dw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
#snx-hd .snx-dw-search { position: relative; display: block; margin-bottom: 16px; }
#snx-hd .snx-dw-search .snx-results { margin-top: 8px; padding: 4px; border-radius: 16px; border: 1px solid var(--snx-line); }
#snx-hd .snx-dw-links { display: grid; gap: 8px; margin-top: 16px; }
#snx-hd .snx-dw-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--snx-line); font-weight: 700; color: var(--snx-ink); }
#snx-hd .snx-dw-link .snx-i { width: 18px; height: 18px; color: var(--snx-muted); }
@keyframes snx-sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 게임 화면은 플레이 중 화면 전체를 쓴다(합10·지뢰밭이 html.playing 을 붙임) · 인쇄에는 헤더 없음 */
html.playing #snx-hd, html.playing #snx-ai-fab { display: none; }
@media print { #snx-hd, #snx-ai, #snx-ai-fab { display: none !important; } }
html.snx-lock, html.snx-lock body { overflow: hidden; }

/* ---------------------------------------------------------------- 5b 구글 자동 광고 비켜 가기(#3417) — 광고 요소에는 아무것도 걸지 않는다(읽기만, snx-header.js measureAds)
 * --snx-ad-t = 위쪽 광고(덮개 폭 #google-anno-sa 등)의 아래 끝 px, --snx-ad-b = 아래쪽 광고(앵커 · 넓은 폭 #google-anno-sa)의 화면 아래부터 위 끝까지 px. 광고가 없으면 속성이 없어 예약 0.
 * 간격 12px(보내기 단추를 앵커에 딱 붙이지 않음), 아래쪽은 safe-area 를 더한다. */
html[data-snx-ad-t] { --snx-ad-tg: calc(var(--snx-ad-t, 0px) + 12px); }
html[data-snx-ad-b] { --snx-ad-bg: calc(var(--snx-ad-b, 0px) + 12px + env(safe-area-inset-bottom, 0px)); }
html[data-snx-ad-t] #snx-hd .snx-hd-drawer, html[data-snx-ad-b] #snx-hd .snx-hd-drawer { top: var(--snx-ad-tg, 0px); bottom: var(--snx-ad-bg, 0px); height: auto; max-height: none; }

/* ---------------------------------------------------------------- 6 AI 상담사 패널 */
/* 위 = 헤더 아래 8px 와 위쪽 광고 + 12px 중 아래쪽, 아래 여백 = 16px 와 아래쪽 광고 + 12px + safe-area 중 큰 쪽(광고 없으면 옛 값 그대로: 위 헤더+8 · 높이 min(640, 화면 − 헤더 − 24)) */
/* #3417 r2 넓은 폭 옆 레일: 오른쪽 = 16px 와 오른쪽 레일 폭 + 12px 중 큰 쪽, 폭 상한 = 화면 − 오른쪽 − (16px 와 왼쪽 레일 폭 + 12px 중 큰 쪽) → 좁으면 패널이 줄어든다(레일 없으면 옛 값 16px · 화면 − 32px) */
html[data-snx-rail-r] { --snx-rail-rg: calc(var(--snx-rail-r, 0px) + 12px); }
html[data-snx-rail-l] { --snx-rail-lg: calc(var(--snx-rail-l, 0px) + 12px); }
#snx-ai {
  --snx-ai-top: max(calc(var(--snx-hd-bottom, 72px) + 8px), var(--snx-ad-tg, 0px)); --snx-ai-bot: max(16px, var(--snx-ad-bg, 0px));
  --snx-ai-r: max(16px, var(--snx-rail-rg, 0px)); --snx-ai-l: max(16px, var(--snx-rail-lg, 0px));
  position: fixed; z-index: 1100; top: calc(var(--snx-hd-bottom, 72px) + 8px); top: var(--snx-ai-top); right: 16px; right: var(--snx-ai-r); display: flex; flex-direction: column;
  width: 400px; max-width: calc(100vw - 32px); max-width: calc(100vw - var(--snx-ai-r) - var(--snx-ai-l));
  height: min(640px, calc(100vh - var(--snx-hd-bottom, 72px) - 24px)); height: min(640px, calc(100dvh - var(--snx-ai-top) - var(--snx-ai-bot)));
  border-radius: 24px; background: var(--snx-bg); border: 1px solid var(--snx-line); box-shadow: var(--snx-shadow); overflow: hidden;
  animation: snx-sheet-in 200ms var(--snx-out);
}
#snx-ai[hidden] { display: none !important; }
#snx-ai .snx-ai-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--snx-line); }
#snx-ai .snx-ai-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
#snx-ai .snx-ai-title .snx-i { color: var(--snx-brand); }
#snx-ai .snx-ai-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--snx-muted); }
#snx-ai .snx-ai-x:hover { background: var(--snx-soft); color: var(--snx-ink); }
#snx-ai .snx-ai-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 20px 16px 12px; background: linear-gradient(180deg, var(--snx-brand-soft), var(--snx-bg) 220px); }
#snx-ai .snx-ai-hello { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 16px; text-align: center; }
#snx-ai .snx-ai-orb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--snx-bg); color: var(--snx-brand); box-shadow: 0 8px 24px rgba(31, 91, 224, .18); }
#snx-ai .snx-ai-orb .snx-i { width: 26px; height: 26px; }
#snx-ai .snx-ai-h { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
#snx-ai .snx-ai-sub { font-size: 14px; color: var(--snx-muted); max-width: 30ch; }
#snx-ai .snx-ai-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
#snx-ai .snx-ai-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--snx-bg); border: 1px solid var(--snx-line); font-size: 14px; font-weight: 700; color: var(--snx-ink); transition: background-color 160ms var(--snx-out), transform 160ms var(--snx-out); }
#snx-ai .snx-ai-pill:hover { background: var(--snx-soft); }
#snx-ai .snx-ai-pill:active { transform: scale(.97); }
#snx-ai .snx-ai-log { display: grid; gap: 12px; }
#snx-ai .snx-msg { display: block; max-width: 100%; }
#snx-ai .snx-msg-me { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--snx-brand); color: var(--snx-brand-ink); font-weight: 600; }
#snx-ai .snx-msg-bot { justify-self: start; width: 100%; padding: 14px; border-radius: 18px 18px 18px 4px; background: var(--snx-bg); border: 1px solid var(--snx-line); }
#snx-ai .snx-msg-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--snx-soft); font-size: 12px; font-weight: 800; color: var(--snx-muted); }
#snx-ai .snx-msg-text { display: block; white-space: pre-line; line-height: 1.6; }
#snx-ai .snx-msg-note { display: block; margin-top: 4px; font-size: 13px; color: var(--snx-muted); }
#snx-ai .snx-msg-links { display: grid; gap: 6px; margin-top: 10px; }
#snx-ai .snx-msg-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--snx-soft); color: var(--snx-ink); font-weight: 700; }
#snx-ai .snx-msg-links a:hover { background: var(--snx-soft-2); }
#snx-ai .snx-msg-links small { display: block; font-size: 12px; font-weight: 600; color: var(--snx-muted); }
#snx-ai .snx-msg-links .snx-i { width: 16px; height: 16px; color: var(--snx-muted); }
#snx-ai .snx-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
#snx-ai .snx-typing i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--snx-muted); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  #snx-ai .snx-typing i { animation: snx-dot 900ms var(--snx-out) infinite; }
  #snx-ai .snx-typing i:nth-child(2) { animation-delay: 150ms; }
  #snx-ai .snx-typing i:nth-child(3) { animation-delay: 300ms; }
}
@keyframes snx-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
#snx-ai .snx-ai-form { display: block; flex: none; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--snx-line); background: var(--snx-bg); }
#snx-ai .snx-ai-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px; border-radius: 999px; border: 1px solid var(--snx-line-strong); background: var(--snx-soft); }
#snx-ai .snx-ai-row:focus-within { border-color: var(--snx-brand); box-shadow: 0 0 0 3px var(--snx-brand-soft); background: var(--snx-bg); }
#snx-ai .snx-ai-q { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; color: var(--snx-ink); background: transparent; }
#snx-ai .snx-ai-q::placeholder { color: var(--snx-muted); opacity: 1; }
#snx-ai .snx-ai-q:focus-visible { outline: 0; }
#snx-ai .snx-ai-send { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--snx-brand); color: var(--snx-brand-ink); }
#snx-ai .snx-ai-send[disabled] { opacity: .45; cursor: default; }
#snx-ai .snx-ai-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 0 6px; font-size: 12px; color: var(--snx-muted); line-height: 1.45; }
#snx-ai .snx-ai-count { flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  #snx-ai { inset: 0; top: 0; right: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  html[data-snx-ad-t] #snx-ai, html[data-snx-ad-b] #snx-ai { top: var(--snx-ad-tg, 0px); bottom: var(--snx-ad-bg, 0px); height: auto; }
  #snx-ai .snx-ai-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #snx-ai .snx-ai-body { padding-bottom: 16px; }
}

/* AI 상담사 다른 진입점(#3417): 머리글 AI 단추 가운데가 광고(덮개 폭 #google-anno-sa 등)에 가려질 때만 보인다(snx-header.js syncFab). 모양은 머리글 AI 단추 그대로,
 * 자리는 오른쪽 아래 — 아래쪽 광고가 있으면 그 위 12px(+ safe-area), 없으면 16px. 광고를 덮지 않는다(그 자리를 비켜 섬). */
#snx-ai-fab {
  position: fixed; z-index: 1050; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; margin: 0; padding: 0 16px 0 14px;
  border-radius: 999px; border: 1px solid var(--snx-brand); background: var(--snx-brand); color: var(--snx-brand-ink); box-shadow: var(--snx-shadow);
  font-size: 15px; font-weight: 700; white-space: nowrap; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: manipulation;
  transition: transform 160ms var(--snx-out); animation: snx-sheet-in 200ms var(--snx-out);
}
html[data-snx-ad-b] #snx-ai-fab { bottom: var(--snx-ad-bg); }
@media (min-width: 768px) { html[data-snx-rail-r] #snx-ai-fab { right: max(16px, var(--snx-rail-rg, 0px)); } }
#snx-ai-fab[hidden] { display: none !important; }
#snx-ai-fab:active { transform: scale(.97); }
#snx-ai-fab .snx-i { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- 7 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  #snx-hd *, #snx-ai, #snx-ai *, #snx-ai-fab { transition: none !important; animation: none !important; }
  #snx-hd .snx-hd-drawer { animation: none; }
}

/* ---------------------------------------------------------------- 8 카테고리 색 (site/catalog.json 에서 빌드 때 덧붙임) */
.snx-c-work { --snx-c: #1c6fe3; }
.snx-c-realty { --snx-c: #623822; }
.snx-c-life { --snx-c: #158452; }
.snx-c-dates { --snx-c: #da2e1b; }
.snx-c-docs { --snx-c: #2424c8; }
.snx-c-fix { --snx-c: #205b53; }
.snx-c-school { --snx-c: #592d80; }
.snx-c-games { --snx-c: #bd4284; }
@media screen and (prefers-color-scheme: dark) {
  .snx-c-work { --snx-c: #afd7f4; }
  .snx-c-realty { --snx-c: #f0b042; }
  .snx-c-life { --snx-c: #39ef97; }
  .snx-c-dates { --snx-c: #ef5139; }
  .snx-c-docs { --snx-c: #b2a1f7; }
  .snx-c-fix { --snx-c: #5bb2b9; }
  .snx-c-school { --snx-c: #a968f3; }
  .snx-c-games { --snx-c: #c27091; }
  [data-snx-theme="light"] .snx-c-work, [data-snx-theme="light"].snx-c-work { --snx-c: #1c6fe3; }
  [data-snx-theme="light"] .snx-c-realty, [data-snx-theme="light"].snx-c-realty { --snx-c: #623822; }
  [data-snx-theme="light"] .snx-c-life, [data-snx-theme="light"].snx-c-life { --snx-c: #158452; }
  [data-snx-theme="light"] .snx-c-dates, [data-snx-theme="light"].snx-c-dates { --snx-c: #da2e1b; }
  [data-snx-theme="light"] .snx-c-docs, [data-snx-theme="light"].snx-c-docs { --snx-c: #2424c8; }
  [data-snx-theme="light"] .snx-c-fix, [data-snx-theme="light"].snx-c-fix { --snx-c: #205b53; }
  [data-snx-theme="light"] .snx-c-school, [data-snx-theme="light"].snx-c-school { --snx-c: #592d80; }
  [data-snx-theme="light"] .snx-c-games, [data-snx-theme="light"].snx-c-games { --snx-c: #bd4284; }
}