/* ================================================================
   ZELTEZ v2 프리뷰 — 커맨드 센터 (챗 스레드 레이아웃)
   서피스 래더 · 반경 6/10/16/pill · 글래스 = 맵 위 부유 크롬만 · 민트 ≤10%
   레일 = 챗GPT식(로고 호버 → 사이드바 열기), 우측 = 채팅 스레드 + 하단 컴포저.
   ================================================================ */
:root {
  color-scheme: dark;   /* 자동 다크모드가 페이지를 재변환하지 않게 — 이미 다크 */
  --canvas: #08090a;
  --s1: #0f1011; --s2: #141516; --s3: #18191a; --s4: #1d1e20;
  --hair: #23252a; --hair-2: rgba(255, 255, 255, .10);
  --glass-edge: rgba(255, 255, 255, .10);
  --ink: #f7f8f8; --ink-2: #d0d6e0; --ink-3: #8a8f98; --ink-4: #62666d;
  --mint: #2ee59d;
  --mint-soft: rgba(46, 229, 157, .13);
  --amber: #ffc533; --amber-soft: rgba(255, 197, 51, .13);
  --red: #ff6161; --red-soft: rgba(255, 97, 97, .14);
  --blue: #60a5fa;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --mono: ui-monospace, Consolas, "SF Mono", monospace;
  --panel-w: 640px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--canvas); color: var(--ink); overflow: hidden;
  font-family: Inter, "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  font-feature-settings: "ss03", "calt", "liga";
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid rgba(46, 229, 157, .5); outline-offset: 2px;
}

/* ---- 맵 + 위성 트리트먼트 ---- */
#map { position: fixed; inset: 0 0 0 56px; }
.ov { position: fixed; inset: 0 0 0 56px; pointer-events: none; }
.ov-tint { background: rgba(4, 8, 14, .30); }
.ov-vig { background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(4, 6, 10, .32)); }
.ov-bandt { height: 130px; bottom: auto; background: linear-gradient(rgba(5, 7, 10, .55), transparent); }
.ov-bandb { top: auto; height: 150px; background: linear-gradient(transparent, rgba(5, 7, 10, .55)); }
body.base-2d .ov { display: none; }   /* 2D = v1 기본 라이트 맵 — 딤 오버레이 전부 끔 */
.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { display: none !important; }
.maplibregl-canvas:focus { outline: none; }

/* ---- 레일 (챗GPT식) ---- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 56px; z-index: 40;
  display: flex; flex-direction: column; align-items: center;
  background: var(--canvas); border-right: 1px solid var(--hair);
  padding: 10px 0 12px;
}
.r-logo {
  width: 40px; height: 40px; border-radius: 10px; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 120ms var(--ease-out);
}
.r-logo .z { display: block; width: 20px; height: auto; }
.r-logo svg { display: none; width: 19px; height: 19px; stroke: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .r-logo:hover { background: var(--s2); }
  .r-logo:hover .z { display: none; }
  .r-logo:hover svg { display: block; }   /* 호버 = 사이드바 아이콘 스왑, 클릭 = 사이드바 (원복) */
}
.r-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.r-item {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), transform 160ms var(--ease-out);
}
.r-item svg { width: 19px; height: 19px; }
.r-item:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .r-item:hover { background: var(--s2); color: var(--ink-2); }
}
/* 플랜 배지 R9 (오너 확정): 무료·비로그인 = 회색 잠김, Pro = 은색, Max = 골드. 잔량 10% 이하 = 앰버 점 */
.r-plan { margin-top: auto; position: relative; color: #6b7480; }
.r-plan.paid { color: #c8d0d8; }
.r-plan.paid.max { color: #f5c518; }
.r-plan .rp-low { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: #f5a623; box-shadow: 0 0 7px rgba(245, 166, 35, .8); }
.r-user {
  margin-top: 10px; width: 32px; height: 32px; border-radius: 99px; flex: 0 0 auto;
  background: var(--mint); color: #052e1c;
  display: flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out), filter 120ms var(--ease-out);
}
.r-user svg { width: 17px; height: 17px; }
.r-user:active { transform: scale(.97); }
@media (hover: hover) { .r-user:hover { filter: brightness(.92); } }

/* ---- 확장 사이드바 (드로어) ---- */
.drawer {
  /* 레일 옆에서 시작 (오너 2026-07-27 "다른 버튼 누르면 사이드바 아이콘이 안 보인다"):
     예전엔 left:0으로 레일을 통째로 덮어 아이콘이 사라졌다 — 트렌드 패널과 같은 규칙으로 통일 */
  position: fixed; left: 56px; top: 0; bottom: 0; width: 420px; z-index: 60;   /* 268→300→324→420 (트렌드 패널과 폭 통일) */
  background: var(--s1); border-right: 1px solid var(--hair);
  padding: 12px 12px 16px;
  /* 닫힘 이동량 = 자기 폭 + 레일 폭 (2026-07-27 '오른쪽 56px 사선 노출' 사고: 기점이 56px인데 -100%만 밀면
     서랍 오른쪽 가장자리(타임스탬프·스크롤바)가 레일 위에 그대로 걸쳐 보임) */
  transform: translateX(calc(-100% - 60px));
  transition: transform 260ms var(--ease-drawer);
  display: flex; flex-direction: column;
}
body.drawer-open .drawer { transform: none; }
.drawer-back {
  /* 레일은 스크림 밖에 둔다 (오너 2026-07-27): 예전엔 화면 전체를 덮어 레일이 어두워지고
     클릭도 스크림이 먹어서 "다른 버튼 누르면 사이드바가 사라진다"로 보였음 */
  position: fixed; inset: 0 0 0 56px; z-index: 55; background: rgba(4, 5, 8, .5);
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out);
}
body.drawer-open .drawer-back { opacity: 1; pointer-events: auto; }
.dr-head { height: 52px; display: flex; align-items: center; padding: 0 6px 0 12px; margin-bottom: 10px; }
/* 로고 = PNG (다크모드 확장의 색반전 면역 — 텍스트 그라디언트 전면 폐기) */
.dr-wordmark { display: block; width: 132px; height: auto; cursor: pointer; }
.dr-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.dr-x svg { width: 18px; height: 18px; }
@media (hover: hover) { .dr-x:hover { background: var(--s2); color: var(--ink-2); } }
.dr-new {
  display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: #ececec;
  transition: background-color 120ms var(--ease-out);
}
.dr-new svg { width: 18px; height: 18px; stroke: #ececec; }
@media (hover: hover) { .dr-new:hover { background: var(--s2); } }
.dr-search {
  display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink-3); cursor: text;
}
.dr-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dr-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 15px; color: #ececec; }
.dr-search input::placeholder { color: var(--ink-3); }
@media (hover: hover) { .dr-search:hover { background: var(--s2); } }
.dr-kick { margin: 20px 12px 6px; font-size: 14px; font-weight: 700; color: #ececec; }
.dr-empty { margin: 6px 12px; font-size: 13px; color: var(--ink-4); }
.dr-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--s4) transparent; }
.dr-pins { flex: 0 0 auto; }
.dr-row {
  position: relative; width: 100%; display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px;
  border-radius: 10px; font-size: 15px; color: #ececec; text-align: left; cursor: pointer;
  transition: background-color 120ms var(--ease-out);
}
.dr-row > svg { width: 17px; height: 17px; stroke: var(--ink-3); flex: 0 0 auto; }
.dr-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row small { font-size: 12px; color: var(--ink-4); }
.dr-row.legacy { opacity: .82; }
@media (hover: hover) { .dr-row:hover { background: var(--s2); } }
/* 핀 토글 — 행 호버 시 등장 (챗지피티 문법) */
.dr-pin {
  display: none; width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  align-items: center; justify-content: center; color: var(--ink-3);
}
.dr-pin svg { width: 15px; height: 15px; }
.dr-row:hover .dr-pin { display: flex; }
.dr-row:hover small { display: none; }
.dr-pin.on { color: var(--mint); }
.dr-del {
  display: none; width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  align-items: center; justify-content: center; color: var(--ink-3);
}
.dr-del svg { width: 15px; height: 15px; }
.dr-row:hover .dr-del { display: flex; }
@media (hover: hover) { .dr-del:hover { background: rgba(255, 97, 97, .12); color: var(--red); } }
@media (hover: hover) { .dr-pin:hover { background: var(--s3); color: #ececec; } }
/* 드로어 하단 — v1 요금제 카드 + 민트 로그인 (챗지피티 위치) */
.dr-bottom { flex: 0 0 auto; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; gap: 10px; }
.dr-plan {
  /* 무테 (오너 2026-07-16: 네모 테두리 전폐) — 호버에만 옅은 면 */
  display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 12px; text-align: left;
  border: none; background: transparent; transition: background 120ms var(--ease-out);
}
.dr-plan svg { width: 17px; height: 17px; stroke: var(--mint); flex: 0 0 auto; }
.dr-plan-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dr-plan-txt b { font-size: 14px; font-weight: 700; color: #ececec; }
.dr-plan-txt small { font-size: 12px; color: var(--ink-3); }
/* 도넛 링 R2 (오너 확정 2026-07-16) — 우측 배치, 40px, 잔량 % 내장(100%에서 깎임, 4자리 폰트 강등),
   잉크 화이트 / 잔량 10% 이하 앰버. 채움은 JS가 --g(conic)로 주입, 스트로크는 ::before 마스크 2.5px */
.dr-ring { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; position: relative;
  display: flex; align-items: center; justify-content: center; }
.dr-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--g);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.dr-ring i { position: relative; font-style: normal; font-weight: 700; font-size: 11px; line-height: 1;
  color: #eef1f4; font-variant-numeric: tabular-nums; letter-spacing: -.045em; white-space: nowrap; }
.dr-ring i.l4 { font-size: 9.5px; }
.dr-ring.hot i { color: #f5a623; }
@media (hover: hover) { .dr-plan:hover { background: rgba(255, 255, 255, .045); } }
.dr-signin {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 12px;
  background: var(--mint); color: #052e1c; font-size: 15px; font-weight: 700;
  transition: filter 120ms var(--ease-out), transform 160ms var(--ease-out);
}
.dr-signin svg { width: 17px; height: 17px; }
.dr-signin:active { transform: scale(.98); }
@media (hover: hover) { .dr-signin:hover { filter: brightness(.92); } }
.dr-signin.authed { background: var(--s2); color: #ececec; border: 1px solid var(--hair); }

/* ---- 첫 화면 스테이지 (정중앙) — 실행되면 통째로 사라짐 ---- */
.stage { position: fixed; left: 56px; right: 0; top: 0; bottom: 0; z-index: 25; pointer-events: none;
  transition: opacity 260ms var(--ease-out); }
body.working .stage { opacity: 0; visibility: hidden; pointer-events: none !important; }
body.working .stage * { pointer-events: none !important; }
.stage .composer, .stage .sugg, .stage .greet { pointer-events: auto; }
.greet { display: none; }   /* 인사 문구 삭제 (오너 2026-07-27) — 대기화면 = 지도가 주인공 */
.greet em { font-style: normal; color: var(--mint); }
.composer {
  position: absolute; left: 50%; transform: translateX(-50%); top: auto; bottom: 30px;   /* 입력창 = 하단 중앙 (오너 2026-07-27) */
  width: min(680px, calc(100vw - 120px));
  display: flex; align-items: center; gap: 10px;
  border-radius: 28px; padding: 10px 10px 10px 14px;
  background: rgba(20, 22, 26, .72);
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px rgba(0, 0, 0, .35);
}
.c-plus {
  width: 32px; height: 32px; border-radius: 99px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  transition: background-color 120ms var(--ease-out);
}
.c-plus svg { width: 18px; height: 18px; }
@media (hover: hover) { .c-plus:hover { background: var(--s2); } }
#cmd, #pcmd {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font: 400 16px/1.5 Inter, "Malgun Gothic", sans-serif; letter-spacing: -.05px; color: var(--ink);
  /* 자동 확장 textarea (오너 2026-07-16 그록 레퍼런스): 내용만큼 세로 성장, 캡 220px 후 내부 스크롤 */
  resize: none; overflow-y: auto; max-height: 220px; padding: 6px 0; field-sizing: content; scrollbar-width: thin;
}
#cmd::placeholder, #pcmd::placeholder { color: #9b9b9b; }
/* 여러 줄로 커질 때 +·전송 버튼은 그록처럼 하단 정렬 (한 줄일 땐 padding 6px로 36px 버튼과 광학 중앙) */
.composer, .pcomposer { align-items: flex-end; }
.composer .c-plus, .pcomposer .c-plus { margin-bottom: 8px; }
/* 전송 = 흰 원 + 검은 화살표 (오너 첨부 레퍼런스) */
.c-send, .p-send {
  width: 36px; height: 36px; border-radius: 99px; flex: 0 0 auto;
  background: #ffffff; color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  transition: filter 120ms var(--ease-out), transform 160ms var(--ease-out);
}
.c-send svg, .p-send svg { width: 17px; height: 17px; stroke-width: 2.4; }
.c-send:active, .p-send:active { transform: scale(.95); }
/* 생성 중엔 전송 → ■ 정지 (챗지피티 문법) */
body.busy .c-send svg, body.busy .p-send svg { display: none; }
body.busy .c-send::after, body.busy .p-send::after {
  content: ""; display: block; width: 11px; height: 11px; border-radius: 2.5px; background: #0a0a0a;
}
.rp-stopped { color: #8b9095; font-style: normal; }
@media (hover: hover) { .c-send:hover, .p-send:hover { filter: brightness(.85); } }
.sugg {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(33% + 146px);
  display: flex; gap: 8px;
}
.sg {
  height: 34px; padding: 7px 14px; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .12); color: var(--ink-2); font-size: 13px; font-weight: 500;
  background: rgba(10, 12, 15, .35); backdrop-filter: blur(8px);
  transition: background-color 120ms var(--ease-out);
}
@media (hover: hover) { .sg:hover { background: rgba(255, 255, 255, .06); } }

/* ---- 채팅 스레드 패널 (우측 · 히스토리 + 하단 컴포저) ---- */
.chatp {
  position: fixed; top: 12px; left: 68px; bottom: 12px; width: var(--panel-w); z-index: 45;
  display: none; flex-direction: column;
  border-radius: 16px; background: rgba(15, 16, 17, .95);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
  overflow: hidden;
  transition: left 260ms var(--ease-drawer);
}
/* 드로어가 열리면 패널을 옆으로 밀고(겹침 방지) 백드롭 딤 위로 올린다 */
body.drawer-open .chatp { left: 488px; z-index: 56; }   /* 레일 56 + 드로어 420 + 여백 12 (2026-07-27 폭·기점 변경 반영) */
/* 트렌드 패널이 열려 있으면 답변 패널이 그 오른쪽에서 시작 (오너 2026-07-27 "겹쳐서 보인다"):
   .chatp는 반투명이라 겹치면 뒤 패널이 그대로 비쳐 화면이 뭉개졌음. 남는 폭에 맞춰 너비도 줄인다 */
body.zt-open .chatp {
  left: calc(56px + var(--ztw, 420px) + 12px);
  width: min(var(--panel-w), calc(100vw - 56px - var(--ztw, 420px) - 24px));
}
.chatp.open { display: flex; }
.chatp.enter { animation: rpIn 240ms var(--ease-drawer); }
@keyframes rpIn { from { opacity: 0; transform: translateX(-12px); } }
/* 공유 버튼 (챗지피티식) — 헤더 맨 오른쪽(X 옆), 무박스, 크게 (오너 2026-07-16) */
.ch-share { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: transparent; }
.ch-share svg { width: 16px; height: 16px; }
.ch-head .rp-x { margin-left: 6px; }   /* auto 마진은 공유 버튼이 독점 — X는 바로 옆 */
@media (hover: hover) { .ch-share:hover { background: rgba(255, 255, 255, .06); color: var(--ink); } }
.ch-head { height: 50px; flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ch-title { font-size: 15px; font-weight: 600; color: #ececec;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-x { margin-left: auto; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out); }
.rp-x svg { width: 16px; height: 16px; }
@media (hover: hover) { .rp-x:hover { background: var(--s2); color: var(--ink-2); } }
.ch-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 8px;
  scrollbar-width: thin; scrollbar-color: var(--s4) transparent; }
/* 유저 버블 (우측 정렬) */
.ch-u { display: flex; justify-content: flex-end; margin: 10px 0 16px; }
/* 챗지피티식: 내 말풍선 = 흰 배경 + 검은 글씨, 답변 = 배경 없이 흰 글씨 */
.ch-u span { max-width: 82%; padding: 10px 16px; border-radius: 18px 18px 5px 18px;
  background: #ececec; font-size: 15px; line-height: 1.5; color: #0d0d0d; font-weight: 500; }
/* 어시스턴트 응답 블록 (플랫) */
.ch-a { margin-bottom: 26px; }
/* 패널 하단 컴포저 */
.pcomposer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  margin: 8px 12px 12px; padding: 8px 8px 8px 12px; border-radius: 28px;
  background: var(--s2); border: 1px solid var(--hair);
}
.pcomposer:focus-within { border-color: var(--hair-2); }

/* ---- 리포트 콘텐츠 (응답 블록 내부 · 플랫) ---- */
.rp-kick { font-size: 13px; color: var(--ink-3); }
.rp-title { margin-top: 3px; font-size: 24px; font-weight: 700; letter-spacing: -.4px; color: #ffffff; }
.rp-verd { margin-top: 9px; display: flex; align-items: center; gap: 10px; min-height: 26px; }
.rp-pill { height: 26px; display: inline-flex; align-items: center; padding: 4px 12px; gap: 7px;
  border-radius: 9999px; font-size: 13px; font-weight: 500; }
.rp-pill .d { width: 6px; height: 6px; border-radius: 99px; }
.rp-pill.sun { background: var(--mint-soft); color: var(--mint); } .rp-pill.sun .d { background: var(--mint); }
.rp-pill.part { background: var(--amber-soft); color: var(--amber); } .rp-pill.part .d { background: var(--amber); }
.rp-pill.storm { background: var(--red-soft); color: var(--red); } .rp-pill.storm .d { background: var(--red); }
.rp-conf { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rp-strip { display: flex; gap: 20px; margin-top: 18px; }
.rp-stat .v { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.rp-stat .v.up { color: var(--mint); } .rp-stat .v.dn { color: var(--red); }
.rp-stat .k { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.rp-para { margin-top: 16px; font-size: 15px; line-height: 1.7; color: #ececec; white-space: pre-line; }
.rp-hr { height: 1px; margin: 20px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10) 12% 88%, transparent); }
.rp-sec { margin-top: 16px; font-size: 14px; color: var(--ink-3); display: flex; align-items: baseline; gap: 8px; }
.rp-sec b { font-weight: 600; color: #ececec; }
.rp-sec .n { font-family: var(--mono); font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ev { display: flex; gap: 10px; margin: 0 -10px; padding: 11px 10px; border-radius: 10px; cursor: pointer;
  transition: background-color 120ms var(--ease-out); text-decoration: none; }
@media (hover: hover) { .ev:hover { background: rgba(255, 255, 255, .03); } }
.ev .d { width: 6px; height: 6px; border-radius: 99px; margin-top: 6px; flex: 0 0 auto; }
.ev .d.hi { background: var(--red); } .ev .d.md { background: var(--amber); } .ev .d.lo { background: var(--ink-3); }
.ev .d.pos { background: var(--mint); }
.ev .bd { min-width: 0; }
.ev .t { font-size: 15px; font-weight: 500; color: #ececec; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev .m { margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.ev .m .hi { color: var(--red); } .ev .m .md { color: var(--amber); } .ev .m .lo { color: var(--ink-3); }
.ev .m .yr { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ev.news .t { font-size: 14px; -webkit-line-clamp: 1; }
.ev.news .m { font-size: 12px; color: var(--ink-4); }
.ev.stag { opacity: 0; transform: translateY(6px); animation: rowIn 220ms var(--ease-out) forwards; }
@keyframes rowIn { to { opacity: 1; transform: none; } }
/* 에이전트 레저 — 진행 중에만 보이고 완료되면 접힘 */
.rp-ledger { margin-top: 14px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06); }
.lg { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13px; color: var(--ink-3); }
.lg .g { width: 18px; flex: 0 0 auto; text-align: center; color: var(--ink-4); }
.lg.done .g { color: var(--mint); }
.lg.run { color: var(--ink-2); }
.lg.run .g { color: var(--mint); animation: pulseTx 1.6s ease-in-out infinite; }
@keyframes pulseTx { 50% { opacity: .35; } }
.lg .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg .ts { font-family: var(--mono); font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ---- 생각 중 (Spark & Morph): 스파크 트윙클 + 블러 모프 단계 텍스트 + 퍼캐릭터 웨이브
   background-clip:text 금지(강제다크 확장 면역), 스피너·점셋·오브 금지 ---- */
.think { display: inline-flex; align-items: center; gap: 10px; height: 24px; padding: 18px 0 2px; }
.spark { color: var(--mint); transform-origin: 50% 50%; flex: 0 0 auto;
  animation: sparkTurn 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes sparkTurn {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(90deg) scale(.78); opacity: .72; }
  100% { transform: rotate(180deg) scale(1); opacity: 1; }
}
.spark.pulse { animation: sparkPulse 240ms cubic-bezier(.32, .72, 0, 1); }
@keyframes sparkPulse { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.phase { display: inline-block; font-size: 15.5px; font-weight: 500; letter-spacing: -.1px; color: #C9CFD6;
  will-change: filter, opacity, transform; }
.phase.out { animation: phOut 180ms cubic-bezier(.4, 0, 1, 1) forwards; }
.phase.in { animation: phIn 240ms cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes phOut { to { opacity: 0; filter: blur(6px); transform: translateY(-3px); } }
@keyframes phIn { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
.phase span { display: inline-block; animation: charWave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -70ms); }
@keyframes charWave { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
.th-line { position: relative; width: 160px; height: 1px; margin: 4px 0 6px;
  background: rgba(255, 255, 255, .07); overflow: hidden; border-radius: .5px; }
.th-line::after { content: ""; position: absolute; inset: 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(46, 229, 157, .55), transparent);
  animation: hlSweep 1.8s linear infinite; }
@keyframes hlSweep { from { transform: translateX(-110%); } to { transform: translateX(410%); } }
@media (prefers-reduced-motion: reduce) {
  .spark, .phase span, .th-line::after { animation: none; }
  .phase span { opacity: .75; }
}

/* ---- 지도 앵커 v2.1: 글리프 핀(번호+지명 통합) + 아크 화살촉 ---- */
.apin2 { display: flex; align-items: center; gap: 7px; cursor: pointer; }
/* 구형 롤리팝 침 — v3에서는 고정 루트의 역삼각 포인터가 좌표를 담당 */
.apin2 .n { position: relative; }
.apin2 .n::after { content: ""; position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); width: 2.5px; height: 9px; border-radius: 2px; background: #10141a; box-shadow: 0 0 0 1.1px rgba(255, 255, 255, .85); }
.apin2 .n { width: 23px; height: 23px; border-radius: 50%; background: var(--mint); color: #06130c;
  font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(8, 9, 10, .85), 0 2px 10px rgba(0, 0, 0, .55); flex: 0 0 auto;
  transition: transform 140ms var(--ease-out); }
.apin2.k-risk .n { background: var(--red); color: #200606; }
.apin2.k-info .n { background: var(--blue); color: #071120; }
/* 뱃지 이원 체계(오너): 초록=호재·상승, 빨강=리스크. 랭킹은 크기 위계 */
.apin2.k-rank1 .n { width: 28px; height: 28px; font-size: 13.5px;
  box-shadow: 0 0 0 2px rgba(8, 9, 10, .85), 0 0 16px rgba(46, 229, 157, .55), 0 2px 10px rgba(0, 0, 0, .55); }
.apin2.k-rank2 .n { width: 25px; height: 25px; font-size: 12.5px; }
.apin2.k-rank3 .n { }

.apin2.k-win .n { background: var(--mint); color: #06130c;
  box-shadow: 0 0 0 2px rgba(8, 9, 10, .85), 0 0 14px rgba(251, 191, 36, .55), 0 2px 10px rgba(0, 0, 0, .55);
  animation: winPulse 2.2s ease-in-out infinite; }
@keyframes winPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(8, 9, 10, .85), 0 0 10px rgba(46, 229, 157, .4), 0 2px 10px rgba(0, 0, 0, .55); }
  50% { box-shadow: 0 0 0 2px rgba(8, 9, 10, .85), 0 0 22px rgba(46, 229, 157, .75), 0 2px 10px rgba(0, 0, 0, .55); } }
/* 라벨 A '미니멀 엔터프라이즈' (오너 2026-07-14, 세로 구분선은 2026-07-15 제거): 검은 지명 + 딥그린 첨언 — 흰 외곽선은 스트로크 언더 기법(구글맵식), 두 베이스 공통 */
.apin2 .tag { padding: 0 0 0 2px; white-space: nowrap; }
.apin2 .tag b { display: block; position: relative; z-index: 0; color: #0f1418; font-size: 14.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.apin2 .tag b::before { content: attr(data-t); position: absolute; left: 0; top: 0; -webkit-text-stroke: .27em rgba(255, 255, 255, .96); z-index: -1; }
.apin2.hot .n, .apin2:hover .n { transform: scale(1.3); }
/* 첨언 = 직관 색 (초록 좋음/빨강 나쁨), 무상자 헤일로 2줄째 */
.apin2 .tag i.sub { display: block; position: relative; z-index: 0; font-style: normal; color: #067c3d; font-weight: 800; font-size: 12px; line-height: 1.25; margin: 2px 0 0; }
.apin2 .tag i.sub::before { content: attr(data-t); position: absolute; left: 0; top: 0; -webkit-text-stroke: .3em rgba(255, 255, 255, .96); z-index: -1; }
/* 빨간 첨언 가독 (오너 2026-07-16): 위성=밝은 로즈, 2D=딥 크림슨 — 딥그린 첨언과 동급 대비 */
.apin2.k-risk .tag i.sub { color: #fda4a4; }
body.base-2d .apin2.k-risk .tag i.sub { color: #991b1b; }
/* v3 progressive disclosure: compact numbers → hover/zoom name → click detail card */
.apin2 {
  --pin-accent: #22e6a8; --pin-stack-x: 0px; --pin-stack-y: 0px;
  position: absolute; isolation: isolate; width: 48px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 0;
  cursor: default; pointer-events: none;
}
.apin2.k-risk { --pin-accent: #ef4444; }
.apin2.k-info { --pin-accent: #3b82f6; }
.apin2.k-news, .apin2.lnpin { --pin-accent: #8b5cf6; }
.apin2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: 0; width: 13px; height: 12px;
  background: var(--pin-accent); clip-path: polygon(3% 0, 97% 0, 50% 100%); transform: translateX(-50%);
  transform-origin: 50% 100%; pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.98)) drop-shadow(0 2px 2px rgba(15,23,42,.34));
  transition: opacity 150ms, filter 150ms, transform 150ms;
}
.apin2.pin-stack-secondary::after { display: none; }
.apin2.pin-collision-shift::before {
  content: ""; position: absolute; left: 50%; bottom: 1px; z-index: 1; width: var(--pin-leader-l); height: 1.5px;
  border-radius: 2px; background: color-mix(in srgb, var(--pin-accent) 72%, #334155); transform-origin: 0 50%;
  transform: rotate(var(--pin-leader-a)); box-shadow: 0 0 0 1px rgba(255,255,255,.7); pointer-events: none;
}
.apin2 .n, .apin2.k-rank1 .n, .apin2.k-rank2 .n, .apin2.k-rank3 .n, .apin2.k-win .n {
  position: relative; z-index: 2; left: var(--pin-stack-x); top: var(--pin-stack-y); width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--pin-accent);
  background: #121719; color: #fff; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 9px rgba(15, 23, 42, .28); animation: none; cursor: pointer; pointer-events: auto;
  transition: transform 150ms var(--ease-out), opacity 150ms, background-color 150ms, box-shadow 150ms; }
.apin2 .n::after { display: none; }
.apin2.k-rank1 .n { width: 31px; height: 31px; font-size: 14px; }
.apin2.k-rank2 .n { width: 29px; height: 29px; }
.apin2.hot .n, .apin2:hover .n, .apin2:focus-visible .n { transform: scale(1.1); }
.apin2.is-selected .n, .apin2.k-win.is-selected .n { width: 36px; height: 36px; background: var(--pin-accent); color: #07120e; border-color: rgba(255,255,255,.96);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--pin-accent) 18%, transparent), 0 5px 16px rgba(15,23,42,.25); }
.apin2.k-risk.is-selected .n, .apin2.k-info.is-selected .n, .apin2.k-news.is-selected .n { color: #fff; }
.apin2.k-win.is-selected .n { animation: winPulse 2.2s ease-in-out infinite; }
body.map-has-selection .apin2:not(.is-selected) .n { opacity: .62; }
body.map-has-selection .apin2:not(.is-selected):not(.is-ki-related)::after { opacity: .62; }
.apin2:hover::after, .apin2.hot::after, .apin2:focus-visible::after, .apin2.is-selected::after, .apin2.is-ki-related::after {
  transform: translateX(-50%) scaleY(1.06);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 3px 3px rgba(15,23,42,.34));
}
@keyframes winPulse { 0%, 100% { box-shadow: 0 0 0 7px rgba(34,230,168,.14), 0 5px 16px rgba(15,23,42,.25); }
  50% { box-shadow: 0 0 0 11px rgba(34,230,168,.08), 0 5px 18px rgba(15,23,42,.28); } }
.apin2 .tag { position: absolute; left: calc(50% + 23px + var(--pin-stack-x)); top: calc(50% + var(--pin-stack-y)); z-index: 3; max-width: 190px; padding: 7px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden; opacity: 0;
  transform: translate(-5px, -50%); border-radius: 9px; color: #111827; background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.09); box-shadow: 0 5px 16px rgba(15,23,42,.16); transition: opacity 130ms, transform 130ms, visibility 130ms; }
.apin2 .tag b { display: block; overflow: hidden; text-overflow: ellipsis; color: #111827; font-size: 12.5px; font-weight: 780; line-height: 1.15; letter-spacing: -.01em; }
.apin2 .tag b::before { display: none; }
.apin2 .tag i.sub, .apin2 .tag i.strow { display: none !important; }
.apin2:hover .tag, .apin2.hot .tag, .apin2.is-selected .tag, .apin2:focus-visible .tag, body.map-labelzoom .apin2.label-auto .tag {
  visibility: visible; opacity: 1; transform: translate(0, -50%); }
body.map-detailzoom .apin2.is-selected .tag i.sub:not(.strow) { display: block !important; margin-top: 3px; color: #047857; font-size: 11px; font-style: normal; font-weight: 750; }
.apin2:focus-visible { outline: none; }
.apin2:focus-visible .n { box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--pin-accent) 55%, transparent), 0 5px 16px rgba(15,23,42,.25); }
.pin-enter { animation: pinFadeIn 150ms var(--ease-out); }
@keyframes pinFadeIn { from { opacity: 0; } }
/* 비교·추천 승자 결론 배지 */
.vpill { display: flex; align-items: center; gap: 7px; background: rgba(8, 22, 17, .84); backdrop-filter: blur(10px);
  border: 1px solid rgba(251, 191, 36, .42); border-radius: 999px; padding: 6px 13px; color: #ecfdf5;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.vpill i { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto; }
.vpill small { font-weight: 500; color: rgba(236, 253, 245, .68); font-size: 11px; margin-left: 2px; }
body.base-2d .vpill { background: rgba(255, 255, 255, .93); border-color: rgba(180, 83, 9, .45); color: #1e293b; }
body.base-2d .vpill small { color: #64748b; }
/* ---- 작업 레저 (오너: 보더리스·별 제거 — 라이브 초 → 접이식 활동·출처 수납) ---- */
.lbox { margin: 2px 0 10px; }
.lb-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 4px 0 3px; background: none;
  border: 0; cursor: pointer; color: #cfd3d7; font: inherit; text-align: left; }
.lbox.busy .lb-head { cursor: default; }
.lb-grid { width: 13px; height: 13px; flex: 0 0 auto; opacity: .6;
  background-image: radial-gradient(circle, #9BA1A6 1.1px, transparent 1.4px); background-size: 5px 5px; background-position: 0.5px 0.5px; }
.lb-spin { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .14); border-top-color: #d7dbde; animation: lbRot .8s linear infinite; }
@keyframes lbRot { to { transform: rotate(360deg); } }
.lb-noic { width: 16px; flex: 0 0 auto; }
.lb-title { font-size: 14.5px; font-weight: 700; color: #dfe2e5; }
.lbox.busy .phase { font-size: 13.5px; }
.lb-title b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-chev { margin-left: auto; opacity: .45; transition: transform 180ms var(--ease-out); }
.lbox.open .lb-chev { transform: rotate(180deg); }
.lb-head:hover .lb-chev { opacity: .8; }
.lb-body { max-height: 0; overflow: hidden; transition: max-height 240ms var(--ease-out); }
.lbox.open .lb-body { max-height: 460px; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; color: #9BA1A6; font-size: 12.5px; }
.lb-row svg { flex: 0 0 auto; opacity: .55; width: 13px; height: 13px; }
.lb-tx { color: #a9aeb3; font-weight: 600; white-space: nowrap; }
.lb-q { color: #71767b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-cnt { margin-left: auto; color: #82878c; font-size: 11.5px; white-space: nowrap; flex: 0 0 auto; }
.lb-favs { display: flex; flex: 0 0 auto; }
.lb-favs img { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #101214; margin-left: -6px; background: #222; }
.lb-favs img:first-child { margin-left: 0; }
.lb-kick { padding: 9px 0 2px 22px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #64696e; }
.lb-src { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding: 2px 0 6px 22px; }
.lb-src a { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2.5px 0; color: #8b9096;
  font-size: 11.5px; text-decoration: none; }
.lb-src a:hover { color: #d7dbde; }
.lb-src img { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: #222; }
.lb-src b { color: #6b7075; font-size: 10px; flex: 0 0 auto; }
.lb-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-src small { color: #64696e; font-size: 10px; flex: 0 0 auto; }
.lbox .phase { font-size: 12.5px; }

.arealab { color: #a7f3d0; font-size: 11.5px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 0 rgba(4,18,14,.85), 0 -1px 0 rgba(4,18,14,.85), 1px 0 0 rgba(4,18,14,.85), -1px 0 0 rgba(4,18,14,.85), 0 0 5px rgba(4,18,14,.9); }
body.base-2d .arealab { color: #047857; text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 5px #fff; }
.rlab { color: #fca5a5; font-size: 11.5px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 0 rgba(4,18,14,.85), 0 -1px 0 rgba(4,18,14,.85), 1px 0 0 rgba(4,18,14,.85), -1px 0 0 rgba(4,18,14,.85), 0 0 5px rgba(4,18,14,.9); }
body.base-2d .rlab { color: #991b1b; text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 5px #fff; }
/* 화살촉 v2 (오너 2026-07-15 "삐뚤빼뚤"): CSS 삼각형 → SVG 다트(흰 테두리·앤티앨리어싱), 각도는 위도 보정 */
.aarrow { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(4, 18, 14, .45)); }
.aarrow svg { display: block; }
.arclab { color: #a7f3d0; font-size: 11.5px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 0 rgba(4,18,14,.85), 0 -1px 0 rgba(4,18,14,.85), 1px 0 0 rgba(4,18,14,.85), -1px 0 0 rgba(4,18,14,.85), 0 0 5px rgba(4,18,14,.9); }
.arclab.rk { color: #fca5a5; }
.maplgd { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 45; display: flex; gap: 13px; align-items: center;
  background: rgba(9, 11, 12, .88); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px;
  padding: 7px 16px; font-size: 10.5px; color: #b6bbbf; box-shadow: 0 6px 22px rgba(0, 0, 0, .4); pointer-events: none; }
.maplgd b { display: flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.maplgd i { display: inline-block; }
.maplgd .lg-g { width: 11px; height: 11px; border-radius: 50%; background: var(--mint); }
.maplgd .lg-r { width: 11px; height: 11px; border-radius: 50%; background: #ff6161; }
.maplgd .lg-fl { width: 17px; height: 0; border-top: 2.6px solid var(--mint); }
.maplgd .lg-sp { width: 17px; height: 0; border-top: 2.4px dashed var(--mint); }
.maplgd .lg-rf { width: 17px; height: 0; border-top: 2.4px dashed #ff6161; }
.maplgd .lg-vs { width: 17px; height: 0; border-top: 2.2px dotted #94a3b8; }
body.base-2d .maplgd { background: rgba(255, 255, 255, .95); border-color: rgba(15, 23, 42, .1); color: #334155; box-shadow: 0 6px 22px rgba(15, 23, 42, .15); }
body.base-2d .maplgd .lg-g, body.base-2d .maplgd .lg-fl { background: #059669; border-color: #047857; }
body.base-2d .maplgd .lg-fl { background: none; }
body.base-2d .maplgd .lg-sp { border-color: #047857; }
body.base-2d .maplgd .lg-r { background: #dc2626; }
body.base-2d .maplgd .lg-rf { border-color: #dc2626; }
body.base-2d .maplgd .lg-vs { border-color: #64748b; }
@media (max-width: 760px) { .maplgd { display: none; } }
/* 비교 연결선 VS 배지 (무조건 부품 — 흐름선 폴백) */
.vsbdg { font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #e2e8f0; background: rgba(15, 23, 42, .74); border: 1px solid rgba(148, 163, 184, .4); border-radius: 999px; padding: 2px 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); pointer-events: none; }
body.base-2d .vsbdg { color: #475569; background: rgba(255, 255, 255, .94); border-color: rgba(71, 85, 105, .3); box-shadow: 0 1px 6px rgba(15, 23, 42, .16); }
/* 배치 A: 카드 상단 슬롯 + 점 리더선 (오너 2026-07-14 — 핀에 붙던 사고 종결) */
.co3wrap { position: fixed; top: 84px; z-index: 60; }
.co3lead { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 59; transition: opacity .25s; }
.co3lead line { stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.co3lead circle { fill: #94a3b8; }
body.base-2d .co3lead line { stroke: #475569; }
body.base-2d .co3lead circle { fill: #475569; }
.co3wrap.hide { display: none; }
/* 멀티 카드 컬럼 (2026-07-15): 핀 클릭마다 스택, 카드별 리더선 */
.co3col { position: fixed; top: 84px; z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.co3col .callout.hide { display: none; }
.co3col .ccard3 { pointer-events: auto; }
.co3wrap .ccard3 { pointer-events: auto; }   /* .callout의 pointer-events:none 잔재가 X·자세히 보기를 죽이던 사고 (오너 실측) */
.ccard3 .c3-desc { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: #b6c7bf;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.base-2d .ccard3 .c3-desc { color: #3c434b; }
.ccard3 .c3-nw { display: flex; gap: 8px; margin-bottom: 8px; }
.ccard3 .c3-nw i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; margin-top: 6px; }
.ccard3 .c3-nw span { font-size: 12px; font-weight: 600; line-height: 1.45; color: #d7e5de; }
body.base-2d .ccard3 .c3-nw span { color: #1c232b; }
/* 우측 크롬 세로 컬럼 (오너 2026-07-16): 카드 → 뉴스 → 위성토글 → 줌 순서로 한 줄 정렬 */
.co3btn { position: fixed; right: 16px; bottom: 296px; z-index: 46; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .16); color: #ecfdf5; background: rgba(17, 24, 28, .78);
  backdrop-filter: blur(18px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.co3btn:hover { transform: scale(1.06); }
body.base-2d .co3btn { background: rgba(255, 255, 255, .93); color: #1c232b; border-color: rgba(15, 23, 42, .08); box-shadow: 0 10px 30px rgba(15, 23, 42, .16); }
.ccard3 .c3-x { margin-left: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .09); color: #b6c7bf; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; flex: 0 0 auto; }
body.base-2d .ccard3 .c3-x { background: rgba(17, 24, 32, .055); color: #4b5563; }
/* 답변 '최근 동향' 섹션 (오너 2026-07-15): Recent News 킥 + 보라 도트 행 */
.ans-kick.nws { margin-top: 14px; }
.ans-nws { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 12px; }
.ans-nws .nw { display: flex; gap: 9px; font-size: 13px; line-height: 1.55; }
.ans-nws .nw i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; margin-top: 6px; }
/* GDELT 동네 소식 레이어 (2026-07-15): 토글 버튼 + 피드 카드 */
.lnbtn { position: fixed; right: 16px; bottom: 248px; z-index: 46; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .14); color: #9aa7a1; background: rgba(17, 24, 28, .8); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.lnbtn.on { color: #d8c7ff; background: rgba(63, 38, 120, .55); border-color: rgba(167, 139, 250, .45); }
body.base-2d .lnbtn { background: rgba(255, 255, 255, .92); color: #64748b; border-color: rgba(15, 23, 42, .08); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
body.base-2d .lnbtn.on { color: #6d28d9; background: rgba(237, 233, 254, .95); border-color: rgba(124, 58, 237, .35); }
.lncard { position: fixed; right: 78px; bottom: 64px; z-index: 46; width: 302px; border-radius: 20px; padding: 15px 15px 9px;
  background: linear-gradient(165deg, rgba(17, 24, 28, .88), rgba(17, 24, 28, .72)); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 22px 60px rgba(0, 0, 0, .5); color: #ecfdf5; }
.lncard .ln-t { display: flex; align-items: center; }
.lncard .ln-t b { font-size: 14.5px; font-weight: 800; flex: 1; }
.lncard .ln-x { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .09); color: #b6c7bf; display: flex; align-items: center; justify-content: center; font-size: 10.5px; cursor: pointer; }
.lncard .ln-cap { margin-top: 2px; font-size: 10px; color: #8fa79c; font-weight: 600; }
.lncard .ln-r { display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .07); text-decoration: none; }
.lncard .ln-r:first-of-type { border-top: none; margin-top: 7px; }
.lncard .ln-r .dt { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #a78bfa; font-variant-numeric: tabular-nums; margin-top: 2px; width: 33px; }
.lncard .ln-r .bb b { display: block; font-size: 11.5px; font-weight: 700; color: #e7efe9; line-height: 1.4; }
.lncard .ln-r .bb small { display: block; margin-top: 2px; font-size: 9.5px; color: #8fa79c; font-weight: 600; }
.lncard .ln-r:hover .bb b { color: #a78bfa; }
body.base-2d .lncard { background: linear-gradient(165deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .76)); border-color: rgba(255, 255, 255, .8); box-shadow: 0 22px 60px rgba(15, 23, 42, .2); color: #101418; }
body.base-2d .lncard .ln-r .bb b { color: #1c232b; }
body.base-2d .lncard .ln-r .bb small, body.base-2d .lncard .ln-cap { color: #8b939c; }
body.base-2d .lncard .ln-r { border-top-color: rgba(17, 24, 32, .07); }
body.base-2d .lncard .ln-x { background: rgba(17, 24, 32, .055); color: #4b5563; }
body.base-2d .lncard .ln-r:hover .bb b { color: #6d28d9; }
@media (max-width: 760px) { .lncard, .lnbtn { display: none; } }
/* M6 지도 네이티브 스탯 (오너 확정 2026-07-16) — ① 핀 라벨 스택: 지명 밑에 스탯 행(카토그래픽 타이포) */
.apin2 .tag i.strow { display: block; font-size: 10px; font-weight: 750; letter-spacing: .02em; color: #065f46; margin-top: 1.5px; }
.apin2 .tag i.strow.dn { color: #fda4a4; }
body.base-2d .apin2 .tag i.strow.dn { color: #991b1b; }
/* ② 고스트 수치 — 수역명 문법: 면 위 대형 반투명 숫자, 포인터 투과. 위성=화이트 고스트 / 2D=딥그린·딥레드 */
.gstat { pointer-events: none; text-align: center; transform: rotate(-4deg); }
.gstat b { display: block; font: 900 46px/0.95 Inter, sans-serif; letter-spacing: -1.5px; color: rgba(255, 255, 255, .15); }
.gstat span { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .36); }
.gstat.dn b { color: rgba(255, 122, 110, .16); }
body.base-2d .gstat b { color: rgba(11, 95, 60, .16); }
body.base-2d .gstat.dn b { color: rgba(160, 35, 30, .15); }
body.base-2d .gstat span { color: rgba(23, 59, 44, .45); }
/* 줌 밀도 관리 (2026-07-16): 저줌에서 위성 핀은 원판만(라벨 접힘), 국가 뷰에선 배지·보조 라벨 정리 */
.apin2.sat-fold .tag { display: none; }
.apin2.sat-fold { opacity: .9; }
body.map-lowzoom .vpill, body.map-lowzoom .rlab, body.map-lowzoom .arclab { display: none; }
/* 뉴스 핀 (오너 2026-07-14: 좌표에 실제 뉴스 — 검색 인용만) + NEWS 마이크로 라벨(식별) */
.apin2.k-news .n { background: #7c3aed; color: #fff; }
.apin2.k-news .tag i.sub { color: #6d28d9; }
.apin2.k-news .tag::before { content: "NEWS"; display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .16em; color: #7c3aed;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 0 4px #fff; margin-bottom: 1px; }
@media (max-width: 900px) {
  .co3wrap, .co3lead, .co3btn { display: none; }
  .co3col { display: block; left: 12px !important; right: 12px !important; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; }
  .co3col .callout { width: 100%; }
  .co3col .ccard3 { width: 100%; max-height: min(48vh, 420px); box-sizing: border-box; overflow-y: auto; }
}
/* 팝업 셸 리디자인 (오너 확정 2026-07-23, Emil 원칙): 실선 테두리 대신 반투명 링+레이어 그림자,
   등장은 ease-out 180ms scale(.97)→1 — 트리거(핀) 쪽에서 자라나는 느낌 */
.z-news-popup .maplibregl-popup-content { padding: 0; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -8px rgba(15, 23, 42, .22);
  transform-origin: 50% 100%; animation: znPop 180ms cubic-bezier(0, 0, .2, 1); }
.z-news-popup .maplibregl-popup-tip { border-top-color: #fff; border-bottom-color: #fff; }

/* 랭킹 핀 + 장소 카드 (Ask Maps 카드 수술, 오너 확정 2026-07-27) */
.apin2.k-rankpin .n { background: #7c3aed; }
.apin2.k-rankpin.rank1 .n { background: #059669; transform: scale(1.22); box-shadow: 0 0 0 3px rgba(5, 150, 105, .22); }
.zplace-card { width: 278px; background: #fff; border-radius: 14px; overflow: hidden; font-family: Inter, "Noto Sans KR", sans-serif; }
.zplace-card .zp-ph { position: relative; }
.zplace-card .zp-ph img { width: 100%; height: 138px; object-fit: cover; display: block; }
.zplace-card .zp-ph small { position: absolute; right: 7px; bottom: 6px; font-size: 9.5px; font-weight: 600; color: #fff; background: rgba(15, 23, 42, .55); padding: 2px 7px; border-radius: 999px; }
.zplace-card .zp-b { padding: 11px 13px 12px; }
.zplace-card .zp-h { display: flex; align-items: center; gap: 8px; }
.zplace-card .zp-h b { font-size: 13.5px; color: #0f172a; flex: 1; line-height: 1.3; }
.zplace-card .zp-badge { font-size: 10px; font-weight: 800; color: #047857; background: rgba(5, 150, 105, .1); padding: 3px 8px; border-radius: 999px; flex: 0 0 auto; }
.zplace-card .zp-x { border: 0; background: transparent; color: #94a3b8; font-size: 12.5px; cursor: pointer; padding: 2px 4px; flex: 0 0 auto; }
.zplace-card .zp-why { margin: 6px 0 9px; font-size: 12px; line-height: 1.5; color: #475569; }
.zplace-card .zp-acts { display: flex; gap: 6px; }
.zplace-card .zp-act { font-size: 11.5px; font-weight: 650; padding: 6px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; cursor: pointer; text-decoration: none; }
.zplace-card .zp-act.pri { background: #059669; border-color: #059669; color: #fff; }
.zplace-card .zp-act:hover { filter: brightness(.97); }
@keyframes znPop { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.zn-region-tip { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; color: #0f172a; white-space: nowrap; }
.zn-region-tip b { font-size: 12.5px; font-weight: 850; letter-spacing: -.01em; }
.zn-region-tip span { color: #475569; font-size: 10.5px; font-weight: 700; }
/* 콜아웃 카드 v3 — 레퍼런스 1:1 (오너 2026-07-14): 반투명 유리 + 무채색, 초록 하이라이트 한 줄만. 위성=다크 글래스 / 2D=라이트 글래스 */
.ccard3 { width: 300px; border-radius: 22px; padding: 18px 18px 14px; color: #ecfdf5;
  background: linear-gradient(165deg, rgba(17, 24, 28, .84), rgba(17, 24, 28, .64));
  backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 26px 70px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .3); }
.ccard3 .c3-top { display: flex; align-items: flex-start; gap: 8px; }
.ccard3 .c3-ttl { flex: 1; }
.ccard3 .c3-ttl b { display: block; font-size: 18.5px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.ccard3 .c3-ttl small { display: block; margin-top: 4px; font-size: 11.5px; color: #8fa79c; font-weight: 500; }
.ccard3 .c3-ico { color: #7d8b85; padding-top: 2px; }
.ccard3 .c3-hl { margin: 13px 0 2px; font-size: 17px; font-weight: 800; color: #2ee59d; letter-spacing: -.01em; }
.ccard3 .c3-hl.dn { color: #fca5a5; }
body.base-2d .ccard3 .c3-hl.dn { color: #dc2626; }
.ccard3 .c3-mrow { display: flex; margin-top: 13px; border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ccard3 .c3-m { flex: 1; padding: 10px 5px 11px 0; min-width: 0; }
.ccard3 .c3-m + .c3-m { border-left: 1px solid rgba(255, 255, 255, .09); padding-left: 11px; }
.ccard3 .c3-m i { display: block; font-style: normal; font-size: 10px; color: #8fa79c; font-weight: 600; white-space: nowrap; }
.ccard3 .c3-m b { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ccard3 .c3-m b small { font-size: 10px; font-weight: 700; color: #8fa79c; margin-left: 1px; }
.ccard3 .c3-sect { margin: 13px 0 9px; font-size: 11px; font-weight: 700; color: #8fa79c; }
.ccard3 .c3-ft { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ccard3 .c3-ft .chip { width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .09); display: flex; align-items: center; justify-content: center; color: #d7e5de; flex: 0 0 auto; }
.ccard3 .c3-ft .chip.rk { color: #fca5a5; background: rgba(220, 38, 38, .14); }
.ccard3 .c3-ft .tx { font-size: 12.5px; font-weight: 600; color: #d7e5de; line-height: 1.35; }
.ccard3 .c3-foot { display: flex; align-items: center; margin-top: 12px; }
.ccard3 .c3-src { font-size: 11px; font-weight: 600; color: #b6c7bf; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 5px 11px; }
.ccard3 .c3-more { margin-left: auto; font-size: 12px; font-weight: 700; color: #cbd8d2; cursor: pointer; }
.ccard3 .c3-more::after { content: " →"; }
.ccard3 .c3-asof { margin-top: 10px; font-size: 9.5px; color: #6b7f76; font-weight: 500; }
body.base-2d .ccard3 { color: #101418; background: linear-gradient(165deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .68));
  border-color: rgba(255, 255, 255, .78); box-shadow: 0 26px 70px rgba(15, 23, 42, .2), 0 2px 10px rgba(15, 23, 42, .06); }
body.base-2d .ccard3 .c3-ttl small, body.base-2d .ccard3 .c3-m i, body.base-2d .ccard3 .c3-sect, body.base-2d .ccard3 .c3-m b small { color: #8b939c; }
body.base-2d .ccard3 .c3-ico { color: #9aa2ab; }
body.base-2d .ccard3 .c3-hl { color: #0ea04e; }
body.base-2d .ccard3 .c3-mrow, body.base-2d .ccard3 .c3-m + .c3-m { border-color: rgba(17, 24, 32, .08); }
body.base-2d .ccard3 .c3-ft .chip { background: rgba(17, 24, 32, .055); color: #26303a; }
body.base-2d .ccard3 .c3-ft .chip.rk { color: #dc2626; background: rgba(220, 38, 38, .09); }
body.base-2d .ccard3 .c3-ft .tx { color: #1c232b; }
body.base-2d .ccard3 .c3-src { color: #4b5563; background: rgba(17, 24, 32, .055); }
body.base-2d .ccard3 .c3-more { color: #374151; }
body.base-2d .ccard3 .c3-asof { color: #a2aab2; }
/* 리더선 콜아웃 카드 v2 — 대기업급 (라벨 위 · 초대형 값 · 지표 행 · 배지), 다크/라이트 듀얼 */
.callout { position: relative; pointer-events: none; }
.callout svg.lead { position: absolute; left: 0; bottom: -4px; overflow: visible; }
.callout .ccard { position: absolute; left: 58px; bottom: 66px; width: 246px; pointer-events: auto;
  background: rgba(9, 11, 12, .9); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 13px 16px 11px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5); }
.ccard .t { color: #fff; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.ccard .t .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ccard .t .cp { color: #6E747B; font-weight: 500; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard .cc-badge { margin-left: auto; background: rgba(251, 191, 36, .16); border: 1px solid rgba(251, 191, 36, .4);
  color: #fde68a; border-radius: 99px; padding: 1.5px 8px; font-size: 10px; font-weight: 700; flex: 0 0 auto; }
.ccard .cc-note { color: #C9CFD6; font-size: 11.5px; margin: 1px 0 2px; }
.ccard .cc-note.solo { color: #e9edef; font-size: 14px; font-weight: 650; margin: 4px 0 3px; line-height: 1.4; }
body.base-2d .ccard .cc-note.solo { color: #1e293b; }
.ccard .cc-lab { color: #8b9096; font-size: 10.5px; margin-top: 7px; }
.ccard .cc-hero { color: var(--mint); font-size: 29px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.ccard.cc-win .cc-hero { color: #fbbf24; }
.ccard .cc-hero small { font-size: 12.5px; font-weight: 700; color: #9BA1A6; margin-left: 3px; letter-spacing: 0; }
.ccard .cc-hero-s { font-size: 21px; }
.ccard .cc-chg { font-size: 12.5px; font-weight: 800; margin-top: 2px; }
.ccard .cc-chg.up { color: var(--mint); } .ccard .cc-chg.dn { color: var(--red); }
.ccard .cc-chg small { color: #6E747B; font-weight: 500; }
.ccard .cc-rows { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 7px; }
.ccard .cc-r { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2.5px 0; }
.ccard .cc-r span { color: #8b9096; }
.ccard .cc-r b { color: #e6e9eb; font-weight: 700; font-variant-numeric: tabular-nums; }
.ccard .cc-asof { margin-top: 6px; font-size: 10px; color: #6E747B; }
.ccard .src2 { margin-top: 6px; display: inline-flex; gap: 5px; }
.ccard .src2 span { background: rgba(255, 255, 255, .07); border-radius: 99px; padding: 2px 8px; font-size: 10px; color: #9BA1A6; }
body.base-2d .callout .ccard { background: rgba(255, 255, 255, .95); border-color: rgba(15, 23, 42, .1); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
body.base-2d .ccard .t { color: #0f172a; }
body.base-2d .ccard .cc-note { color: #475569; }
body.base-2d .ccard .cc-hero { color: #0a7a4d; }
body.base-2d .ccard.cc-win .cc-hero { color: #b45309; }
body.base-2d .ccard .cc-r b { color: #1e293b; }
body.base-2d .ccard .cc-rows { border-top-color: rgba(15, 23, 42, .09); }
body.base-2d .ccard .src2 span { background: rgba(15, 23, 42, .06); color: #64748b; }

/* 비교 요약 패널 (우상단 부유) */
.cmpp { position: fixed; bottom: 64px; right: 78px; width: 236px; z-index: 55; pointer-events: auto;
  background: rgba(9, 11, 12, .9); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: 12px 15px 13px; box-shadow: 0 12px 36px rgba(0, 0, 0, .5); }
.cmpp .cm-t { color: #fff; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.cmpp .cm-row { padding: 6px 0 7px; border-top: 1px solid rgba(255, 255, 255, .07); }
.cmpp .cm-row:first-of-type { border-top: 0; }
.cmpp .cm-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cmpp .cm-nm { color: #d7dbde; font-size: 12px; font-weight: 700; }
.cmpp .cm-val { color: var(--mint); font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmpp .cm-row.win .cm-val { color: #fbbf24; }
.cmpp .cm-val small { color: #8b9096; font-size: 9.5px; font-weight: 500; margin-left: 2px; }
.cmpp .cm-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .07); margin: 5px 0 4px; overflow: hidden; }
.cmpp .cm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--mint); opacity: .85; }
.cmpp .cm-row.win .cm-bar i { background: #fbbf24; }
.cmpp .cm-sub { color: #8b9096; font-size: 10.5px; }
body.base-2d .cmpp { background: rgba(255, 255, 255, .95); border-color: rgba(15, 23, 42, .1); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
body.base-2d .cmpp .cm-t { color: #0f172a; }
body.base-2d .cmpp .cm-nm { color: #334155; }
body.base-2d .cmpp .cm-val { color: #0a7a4d; }
body.base-2d .cmpp .cm-row.win .cm-val { color: #b45309; }
body.base-2d .cmpp .cm-bar { background: rgba(15, 23, 42, .08); }
body.base-2d .cmpp .cm-bar i { background: #0a9e63; }
body.base-2d .cmpp .cm-row.win .cm-bar i { background: #d97706; }
@media (max-width: 900px) { .cmpp { display: none; } }

/* 답변 구조화 (Executive Summary / Key Insights) */
.ans-kick { display: flex; align-items: center; gap: 7px; margin: 14px 0 6px; color: #cfd3d7; font-size: 12.5px; font-weight: 700; }
.rp-para .ans-kick:first-child { margin-top: 2px; }
.ans-kick svg { opacity: .8; }
.ans-p { margin: 0 0 4px; }
.ans-ins { margin: 2px 0 6px; }
.ins { display: flex; gap: 10px; margin: 9px 0; }
.ins-n { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #231303;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.ins-b { min-width: 0; }
.ins-b b { display: block; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 1px; }
.ins-b span { color: #B9BEC3; }
.ins[data-ki] { border-radius: 8px; transition: background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
.ins[data-ki].is-ki-active { background: linear-gradient(90deg, rgba(0, 168, 132, .12), rgba(0, 168, 132, .025)); box-shadow: inset -2px 0 0 var(--mint); }

/* Query-owned map scope: one compact HUD. Numbered citywide items stay in the report,
   so they cannot masquerade as geospatial pins or cover half the map. */
.ki-scope-hud {
  position: fixed; z-index: 34; display: flex; align-items: center; gap: 10px;
  max-width: 218px; padding: 9px 12px 9px 10px; border: 1px solid rgba(0,215,163,.36); border-radius: 12px;
  background: rgba(7,18,15,.88); color: #f3faf7; box-shadow: 0 8px 24px rgba(0,0,0,.24);
  backdrop-filter: blur(12px) saturate(.9); pointer-events: none;
}
body.base-2d .ki-scope-hud { background: rgba(250,253,251,.92); color: #102a23; box-shadow: 0 8px 22px rgba(21,59,47,.14); }
.ki-scope-dot { width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,215,163,.12); }
.ki-scope-hud div { min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 9px; align-items: baseline; }
.ki-scope-hud small { grid-column: 1 / -1; color: var(--mint); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.ki-scope-hud strong { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 820; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.ki-scope-hud div > span { color: rgba(220,235,228,.68); font-size: 9px; font-weight: 680; white-space: nowrap; }
body.base-2d .ki-scope-hud div > span { color: #61756e; }
.ki-scope-hud.is-tight, body.drawer-open .ki-scope-hud { display: none; }

.ki-n { display: grid; place-items: center; width: 23px; height: 23px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--mint); font-size: 11px; font-weight: 850; text-shadow: none; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.ki-map-title {
  position: relative; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; row-gap: 1px; padding: 2px;
  border: 0; background: transparent; color: #f3faf7; box-shadow: none; backdrop-filter: none; font: inherit;
  font-size: 12px; font-weight: 780; letter-spacing: -.025em; white-space: nowrap; cursor: pointer; pointer-events: auto;
  transition: transform 150ms var(--ease-out);
}
body.base-2d .ki-map-title { background: transparent; color: #153028; box-shadow: none; }
.ki-map-title::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: var(--ki-leader, 18px); background: linear-gradient(var(--mint), rgba(0,168,132,.18)); transform: translateX(-50%); pointer-events: none; }
.ki-map-title::before { content: ""; position: absolute; left: 50%; top: calc(100% + var(--ki-leader, 18px) - 2px); width: 6px; height: 6px; border: 1.5px solid #fff; border-radius: 50%; background: var(--mint); box-shadow: 0 1px 5px rgba(0,0,0,.28); transform: translateX(-50%); pointer-events: none; }
.ki-map-n { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--mint); color: #062018; box-shadow: 0 3px 10px rgba(0,0,0,.28); font-size: 11px; font-weight: 880; letter-spacing: 0; }
.ki-map-copy { position: relative; z-index: 0; color: #f3faf7; font-size: 13px; font-weight: 850; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.85); }
body.base-2d .ki-map-copy { color: #10251f; text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 0 5px #fff; }
.ki-map-title:hover, .ki-map-title:focus-visible, .ki-map-title.is-active { outline: none; transform: translateY(-2px); }
.ki-map-title.is-risk::after { background: linear-gradient(var(--red), rgba(255,93,93,.16)); }
.ki-map-title.is-risk::before { background: var(--red); }
.ki-map-title.is-risk .ki-map-n { background: var(--red); color: #fff; }
/* 발견형 랭킹 스킨 (카드 수술 2026-07-27): 1위 = 확대 + 링 강조 */
.ki-map-title.is-rank1 .ki-map-n { transform: scale(1.28); box-shadow: 0 0 0 3px rgba(5, 150, 105, .28), 0 3px 10px rgba(0, 0, 0, .3); }
.ki-map-title.is-rankpin { cursor: pointer; }
.ki-map-title.is-up .ki-map-n { background: var(--mint); color: #062018; }
.apin2.is-ki-evidence .n { opacity: .9 !important; outline: 1.5px dashed rgba(0,168,132,.58); outline-offset: 4px; }
.apin2.is-ki-related .n { transform: scale(1.12); opacity: 1 !important; outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.94), 0 0 0 7px rgba(0,215,163,.18), 0 8px 18px rgba(0,0,0,.32); }
.apin2.is-ki-related.is-ki-risk { --pin-accent: #ef4444; }
.apin2.is-ki-related.is-ki-risk .n { background: #ef4444; color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.94), 0 0 0 7px rgba(239,68,68,.18), 0 8px 18px rgba(0,0,0,.32); }
.apin2.is-ki-related.is-ki-up { --pin-accent: #22e6a8; }
.apin2.is-ki-related.is-ki-up .n { background: #22e6a8; color: #062018; }
body.map-has-ki .apin2:not(.is-ki-related):not(.is-ki-evidence) { opacity: .72; }
body.map-has-ki .apin2.is-ki-evidence { opacity: .72; }
body.map-has-ki .apin2.is-ki-related { opacity: 1; }
.ki-mobile { display: none; }
@media (max-width: 900px) {
  body.report-open .ki-map-title { display: none; }
  .ki-mobile[aria-hidden="false"] {
    display: block; flex: 0 0 auto; min-width: 0;
    border-bottom: 1px solid rgba(255,255,255,.07); background: transparent;
  }
  .ki-mobile-toggle {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) 18px; align-items: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 16px; color: var(--ink-2); text-align: left; background: transparent;
  }
  .ki-mobile-toggle small { color: var(--mint); font-size: 9px; line-height: 1; font-weight: 850; letter-spacing: .12em; white-space: nowrap; }
  .ki-mobile-now { display: flex; min-width: 0; align-items: center; gap: 8px; }
  .ki-mobile-now b { flex: 0 0 auto; color: var(--ink-3); font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .ki-mobile-now span { min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 730; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
  .ki-mobile-chev { position: relative; width: 16px; height: 16px; color: var(--ink-3); transition: transform 160ms var(--ease-out); }
  .ki-mobile-chev::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: rotate(45deg); }
  .ki-mobile.is-open .ki-mobile-chev { transform: rotate(180deg); }
  .ki-mobile-list {
    display: grid; max-height: 0; overflow: hidden; opacity: 0; padding: 0 12px;
    transition: max-height 180ms var(--ease-out), opacity 140ms var(--ease-out), padding 180ms var(--ease-out);
  }
  .ki-mobile.is-open .ki-mobile-list { max-height: min(36dvh, 320px); overflow-y: auto; opacity: 1; padding: 2px 12px 10px; }
  .ki-mobile-item {
    position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px;
    width: 100%; min-height: 44px; padding: 4px 6px 4px 10px; color: var(--ink-2); text-align: left; background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.045); transition: color 140ms var(--ease-out), background-color 140ms var(--ease-out);
  }
  .ki-mobile-item:last-child { border-bottom: 0; }
  .ki-mobile-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: transparent; }
  .ki-mobile-item .ki-n { width: 22px; height: 22px; box-shadow: none; }
  .ki-mobile-item .ki-title { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 720; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
  .ki-mobile-item.is-active { color: var(--mint); background: rgba(46,229,157,.045); }
  .ki-mobile-item.is-active::before { background: var(--mint); }
  .ki-mobile-item.is-active .ki-n { background: var(--mint); color: #062019; }
  .ki-mobile-item.is-risk .ki-n { color: var(--red); border-color: currentColor; }
  .ki-mobile-item.is-risk.is-active { color: var(--red); background: rgba(255,97,97,.045); }
  .ki-mobile-item.is-risk.is-active::before { background: var(--red); }
  .ki-mobile-item.is-risk.is-active .ki-n { background: var(--red); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .ki-item, .ki-n, .ki-map-title, .ki-mobile-chev, .ki-mobile-list, .ki-mobile-item, .apin2::after, .apin2 .n { transition: none; }
  .pin-enter { animation: none; }
}
.cit { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 15px;
  margin: 0 1.5px; padding: 0 4px; border-radius: 6px; background: rgba(255, 255, 255, .09);
  color: #9BA1A6; font-size: 9.5px; font-weight: 700; text-decoration: none; vertical-align: 1px; }
.cit:hover { background: rgba(255, 255, 255, .16); color: #e6e9eb; }
.pct-up { color: var(--mint); font-weight: 800; font-style: normal; }
.pct-dn { color: var(--red); font-weight: 800; font-style: normal; }
body.base-2d .arclab { color: #047857; text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 5px #fff; }
body.base-2d .arclab.rk { color: #991b1b; }

/* ---- 지도 앵커: 넘버드 핀 + 텍스트 칩 (양방향 hot/flash) ---- */
.apin { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #06130c; background: var(--mint); cursor: pointer;
  box-shadow: 0 0 0 2px rgba(10, 12, 14, .85), 0 2px 10px rgba(0, 0, 0, .5);
  transition: transform 140ms var(--ease-out); }
.apin-risk { background: var(--red); color: #200606; }
.apin-info { background: var(--blue); color: #071120; }
.apin.hot { transform: scale(1.32); }
@media (hover: hover) { .apin:hover { transform: scale(1.32); } }
.anch { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 5px; margin: 0 3px; border-radius: 99px; font-size: 11px; font-weight: 700; vertical-align: 2px;
  background: var(--mint-soft); color: var(--mint); cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out); }
.anch-risk { background: var(--red-soft); color: var(--red); }
.anch-info { background: rgba(96, 165, 250, .14); color: var(--blue); }
.anch.hot { background: var(--mint); color: #06130c; }
.anch-risk.hot { background: var(--red); color: #fff; }
.anch-info.hot { background: var(--blue); color: #071120; }
@media (hover: hover) { .anch:hover { background: var(--mint); color: #06130c; }
  .anch-risk:hover { background: var(--red); color: #fff; }
  .anch-info:hover { background: var(--blue); color: #071120; } }
.anch.flash { animation: anchFlash 1.1s ease; }
@keyframes anchFlash { 30% { background: var(--mint); color: #06130c; transform: scale(1.25); } }
/* 지명 알약 (2026-07-16 답변↔지도 1:1): 번호 원판 + 지명 단어 하이라이트 — 핀과 동번호·동색 */
.anch-pl { font-size: 12.5px; height: auto; padding: 1.5px 8px 1.5px 3px; gap: 5px; vertical-align: 0; font-weight: 650; }
.anch-pl i { font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; border-radius: 99px; padding: 0 3px;
  background: var(--mint); color: #06130c; font-size: 9.5px; font-weight: 800; }
.anch-pl.anch-risk i, .anch-pl.anch-riskflow i { background: var(--red); color: #fff; }
.anch-pl.anch-info i { background: var(--blue); color: #071120; }
.anch-pl.anch-news i { background: #8b5cf6; color: #fff; }
.anch-news { background: rgba(139, 92, 246, .14); color: #c4b5fd; }
.anch-news.hot, .anch-news:hover { background: #8b5cf6; color: #fff; }
.anch-pl:hover i, .anch-pl.hot i { background: rgba(0, 0, 0, .25); color: #fff; }
/* 이전 답변의 칩 — 새 답변이 핀을 교체하면 비활성 (kind 색 규칙보다 뒤라 우선) */
.anch-old { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 5px; margin: 0 3px; border-radius: 99px; font-size: 11px; font-weight: 700; vertical-align: 2px;
  background: rgba(255, 255, 255, .07); color: #6E747B; pointer-events: none; }

/* ---- 답변 출처 칩 ---- */
.src-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9999px;
  background: var(--s2); border: 1px solid var(--hair); font-size: 12px; color: var(--ink-2);
  text-decoration: none; max-width: 100%; }
.src-chip b { font-weight: 600; font-size: 11px; color: var(--ink-4); }
.src-chip small { font-size: 10.5px; color: var(--ink-4); }
@media (hover: hover) { .src-chip:hover { border-color: var(--mint); color: var(--ink); } }

/* ---- 지도 마킹 + 펄스 ---- */
.ring { border-radius: 50%; pointer-events: none; }
.ring.pos { border: 1.25px solid var(--mint); background: rgba(46, 229, 157, .06); }
.ring.neg { border: 1.25px dashed var(--red); background: rgba(255, 97, 97, .06); }
.co { display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .66); border-radius: 5px; padding: 3px 7px; white-space: nowrap;
  transform-origin: left center; }
.co .d { width: 6px; height: 6px; border-radius: 99px; }
.co .t { font-size: 11px; font-weight: 500; color: var(--ink); }
.co .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.pop-in { animation: popIn 150ms var(--ease-out); }
@keyframes popIn { from { opacity: 0; transform: scale(.97); } }
.pulse { width: 14px; height: 14px; position: relative; pointer-events: none; }
.pulse i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(46, 229, 157, .8);
  animation: pw 1.5s cubic-bezier(.2, .6, .35, 1) infinite; }
.pulse i:nth-child(2) { animation-delay: .5s; }
.pulse i:nth-child(3) { animation-delay: 1s; }
@keyframes pw { from { transform: scale(1); opacity: .9; } to { transform: scale(7.5); opacity: 0; } }
.cur { display: inline-block; width: 7px; height: 14px; background: var(--mint); vertical-align: -2px;
  margin-left: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- 우하 크롬: 베이스맵 토글 + 줌 ---- */
.basetoggle {
  position: fixed; right: 16px; bottom: 156px; z-index: 30; width: 40px;
  border-radius: 20px; overflow: hidden;
  background: rgba(20, 22, 26, .72); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px rgba(0, 0, 0, .35);
  transition: opacity 200ms var(--ease-out);
}
.bt-seg { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out); }
.bt-seg + .bt-seg { border-top: 1px solid rgba(255, 255, 255, .08); }
.bt-seg svg { width: 16px; height: 16px; }
.bt-seg.active { background: var(--mint-soft); color: var(--mint); }
@media (hover: hover) { .bt-seg:not(.active):hover { background: var(--s2); color: var(--ink-2); } }
.zoom {
  position: fixed; right: 16px; bottom: 64px; z-index: 30; width: 40px;
  border-radius: 20px; overflow: hidden;
  background: rgba(20, 22, 26, .72); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px rgba(0, 0, 0, .35);
  transition: opacity 200ms var(--ease-out);
}
.zoom button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.zoom button + button { border-top: 1px solid rgba(255, 255, 255, .08); }
.zoom svg { width: 16px; height: 16px; }
/* 패널이 왼쪽이라 우하 크롬은 제자리 유지 */

/* ---- 로그인·요금제 모달 (v1 이식 — v2 토큰으로 치환) ---- */
.login-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center;
  overflow-y: auto; padding: 16px 0; }
.login-modal.show { display: flex; }
.login-backdrop { position: fixed; inset: 0; background: rgba(8, 10, 14, 0.66); }
.login-card {
  position: relative; width: 400px; max-width: calc(100vw - 32px); margin: auto; padding: 30px 26px 28px;
  background: var(--s1); border: 1px solid var(--hair); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
  text-align: center; animation: loginPop .22s cubic-bezier(.2, .8, .3, 1.1);
}
@keyframes loginPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.login-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.login-x svg { width: 15px; height: 15px; }
@media (hover: hover) { .login-x:hover { color: var(--ink); background: var(--s2); } }
.login-logo { display: inline-block; width: 140px; height: auto; }
.login-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 14px; }
.login-sub { font-size: 13px; color: var(--ink-3); margin-top: 8px; line-height: 1.55; }
.login-gbtn { display: flex; justify-content: center; margin-top: 20px; min-height: 44px; }
.login-unavail { font-size: 12px; color: var(--ink-4); margin-top: 10px; }
/* 요금제 (v1 디자인 그대로) */
.login-card.plan-card { width: min(940px, calc(100vw - 32px)); max-width: none; padding: 46px 40px 34px; }
.plan-card .login-logo { font-size: 24px; letter-spacing: 4px; }
.plan-card .login-title { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-top: 12px; }
.plan-ea { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--mint); }
/* 사용량 게이지 — B안 '모노 스플릿 라인' (오너 확정 2026-07-16): 박스·그라디언트·도넛 전폐,
   오버라인 라벨 + %(카운트 금지) + 라인(쓴 만큼 잉크 화이트, 90%+ 앰버). 세로폭 2.5px(오너: 좀만 넓게) */
.plan-usage { margin: 26px auto 0; max-width: 560px; text-align: left; }
.plan-usage .pu-t { display: flex; align-items: baseline; }
.plan-usage .pu-ov { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); font-weight: 650; }
.plan-usage .pu-pct { margin-left: auto; font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-usage .pu-rs { margin-left: 8px; font-size: 11px; color: var(--ink-4); }
.plan-usage .pu-ln { position: relative; margin-top: 12px; height: 2.5px; background: rgba(255, 255, 255, .13); }
.plan-usage .pu-ln i { position: absolute; left: 0; top: 0; bottom: 0; background: #eef1f4; transition: width .5s ease; }
.plan-usage.hot .pu-pct { color: #f5a623; font-weight: 700; }
.plan-usage.hot .pu-ln i { background: #f5a623; }
.plan-cta.plan-join:disabled { opacity: .55; filter: saturate(.35); cursor: default; }
.plan-grid.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; text-align: left; }
.plan-col { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.plan-col.pro { border-color: rgba(46, 229, 157, .42);
  background: radial-gradient(130% 55% at 50% 0%, rgba(46, 229, 157, .09), transparent 62%), rgba(46, 229, 157, .025);
  box-shadow: 0 0 0 1px rgba(46, 229, 157, .1), 0 14px 44px -18px rgba(46, 229, 157, .28); }
.plan-name-row { display: flex; align-items: center; gap: 9px; min-height: 28px; }
.plan-name { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.plan-badge { padding: 3px 9px; border-radius: 999px; background: var(--mint-soft); color: var(--mint);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.plan-for { margin-top: 3px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-top: 18px;
  font-family: Fraunces, Georgia, serif; font-size: 42px; font-weight: 600; letter-spacing: -0.5px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price small { font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--ink-4); }
.plan-feats { flex: 1; margin: 22px 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.plan-feats li { font-size: 14px; color: var(--ink); line-height: 1.5; padding-left: 26px; position: relative; }
.plan-feats li::before { content: ""; position: absolute; left: 0; top: 2.5px; width: 16px; height: 16px;
  background: var(--ink-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan-feats li.plan-inc { padding-left: 0; padding-bottom: 12px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.plan-feats li.plan-inc::before { content: none; }
.plan-cta { margin-top: auto; width: 100%; height: 48px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: filter .15s ease, border-color .15s ease, color .15s ease; }
.plan-cta-cur { background: none; border: 1px solid rgba(255, 255, 255, .1); color: var(--ink-4); cursor: default; }
.plan-cta-pro { background: linear-gradient(135deg, #2ee59d, #1fc8e3); border: 0; color: #04110b; font-weight: 700; }
.plan-cta-pro:hover { filter: brightness(1.07); }
.plan-cta-max { background: none; border: 1px solid rgba(255, 255, 255, .16); color: var(--ink); }
.plan-cta-max:hover { border-color: var(--mint); color: var(--mint); }
.plan-note { margin-top: 22px; font-size: 13px; color: var(--ink-4); }
/* 지원 접점 (오너 확정 2026-07-26 시안1 단독): 라벨은 묵음 회색, 이메일만 민트 세미볼드 — 시각 구분 */
.plan-support { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .13); font-size: 12.5px; letter-spacing: .01em; text-align: center; color: rgba(148, 163, 184, .55); }
.plan-support a { color: #34d399; font-weight: 600; text-decoration: none; }
.plan-support a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .plan-grid.three { grid-template-columns: 1fr; gap: 14px; }
  .login-card.plan-card { width: min(480px, calc(100vw - 24px)); padding: 34px 22px 26px; }
  .plan-card .login-title { font-size: 24px; }
  .plan-price { font-size: 36px; }
  .plan-col { padding: 22px 20px 20px; }
}
/* 유료 플랜 활성 — 무테 유지 (박스 강조 폐지, 오너 2026-07-16). 상태는 도넛 링+캡션이 전달 */
.dr-plan.plan-active { border: none; background: transparent; box-shadow: none; }

/* ---- 토스트 ---- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(6px); bottom: 40px; z-index: 70;
  background: var(--s2); border: 1px solid var(--hair); border-radius: 10px;
  padding: 9px 14px; font-size: 13px; color: var(--ink-2);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---- 모바일 ---- */
.mobilebar { display: none; }
@media (max-width: 900px) {
  :root { --panel-w: auto; }
  /* 바텀시트 2단 스냅 (오너 2026-07-27 '어중간한 중간 폐지, 풀 아니면 피크'): 풀 88dvh ↔ 피크 112px.
     헤더 전체 = 그랩 핸들(app.js 드래그·탭 토글), 드래그 중엔 트랜지션 정지 */
  .chatp { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 88dvh;
    border-radius: 24px 24px 0 0; transition: transform 280ms var(--ease-drawer); will-change: transform; }
  .chatp.peek { transform: translateY(calc(100% - 112px)); }
  .chatp.dragging { transition: none; }
  .chatp::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4.5px; border-radius: 99px; background: rgba(255, 255, 255, .26); z-index: 2; }
  .ch-head { touch-action: none; cursor: grab; padding-top: 10px; }
  body.report-open .zoom, body.report-open .basetoggle { right: 16px; opacity: 0; pointer-events: none; }
}
@media (max-width: 640px) {
  .rail { display: none; }
  #map, .ov { left: 0; }
  .stage { left: 0; }
  /* 상단바: 메뉴(드로어) + Z(홈) — 레일 대체 */
  .mobilebar { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 42;
    display: flex; gap: 8px; }
  .mb-btn { width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 22, 26, .72); backdrop-filter: blur(16px);
    border: 1px solid var(--glass-edge); color: var(--ink-2); }
  .mb-btn svg { width: 19px; height: 19px; }
  .mb-btn img { width: 18px; height: auto; }
  /* 첫 화면 */
  .greet { display: none; }
  .composer { width: calc(100vw - 24px); left: 50%; top: auto; bottom: 18px; border-radius: 22px; }   /* 모바일도 하단 중앙 */
  .sugg { left: 50%; top: calc(29% + 126px); width: calc(100vw - 24px);
    overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; }
  .sugg::-webkit-scrollbar { display: none; }
  .sg { flex: 0 0 auto; }
  /* 지도 크롬: 줌버튼 제거(핀치), 토글은 우하 */
  .zoom { display: none; }
  /* 입력창(하단 18px 고정)과 충돌 회피 — 토글이 전송 버튼을 깔고 앉던 실측(2026-07-28) */
  .basetoggle { bottom: calc(98px + env(safe-area-inset-bottom)); }
  /* 드로어 */
  /* 모바일엔 레일이 없으므로 화면 끝에서 시작 (데스크톱만 레일 옆 56px) */
  .drawer { left: 0; width: min(304px, 86vw); padding-top: calc(12px + env(safe-area-inset-top)); }
  .drawer-back { inset: 0; }
  /* 채팅 = 바텀시트 (핸들·스냅은 ≤900 공통 규칙이 담당) */
  .chatp { left: 0; right: 0; width: auto; height: 88dvh; border-radius: 20px 20px 0 0; }
  .ch-head { height: 50px; padding-top: 10px; }
  .ch-scroll { padding: 12px 16px 8px; }
  .pcomposer { margin: 6px 10px calc(10px + env(safe-area-inset-bottom)); }
  .rp-title { font-size: 21px; }
  .rp-strip { flex-wrap: wrap; gap: 14px 18px; }
  body.drawer-open .chatp { left: 0; }   /* 시트는 밀지 않음 — 드로어가 위로 덮음 */
  /* 모달 */
  .login-card { padding: 26px 18px 22px; }
  /* iOS 포커스 자동 줌 방지: 입력은 16px 고정 */
  #cmd, #pcmd, #drq { font-size: 16px; }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
}

/* 생성형 지도 배지 */
.gen-badge {
  position: fixed; right: 18px; top: 16px; z-index: 70;
  background: rgba(10, 12, 13, .85); backdrop-filter: blur(10px);
  border: 1px solid rgba(46, 229, 157, .35); color: var(--mint);
  border-radius: 99px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  animation: genPulse 1.6s ease-in-out infinite;
}
@keyframes genPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ═══ 하이브리드 라벨 (오너 확정 2026-07-19, 시안 R6): 기본 = v2 맨몸 스트로크 상시 노출,
   선택·호버 = v3 흰 카드 승격. v3 블록(위) 무수정 — 캐스케이드 오버라이드로만 구현.
   2D = 흰 스트로크, 위성 = 다크 헤일로(v2 위성 문법 복원). DOM의 data-t 속성이 스트로크 재료 ═══ */
/* 기본(비선택): 무배경 맨몸 텍스트 상시 노출 */
.apin2 .tag { visibility: visible; opacity: 1; transform: translate(0, -50%);
  background: none; border: 0; box-shadow: none; padding: 0 0 0 2px; max-width: none; overflow: visible; backdrop-filter: none; }
.apin2 .tag b { position: relative; z-index: 0; overflow: visible; color: #0f1418; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.apin2 .tag b::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; -webkit-text-stroke: .27em rgba(255, 255, 255, .96); display: block; }
.apin2 .tag i.sub:not(.strow) { display: block !important; position: relative; z-index: 0; font-style: normal;
  color: #067c3d; font-weight: 800; font-size: 12px; line-height: 1.25; margin-top: 2px; }
.apin2 .tag i.strow { display: block !important; position: relative; z-index: 0; font-style: normal;
  color: #92400e; font-weight: 800; font-size: 11px; line-height: 1.3; margin-top: 1.5px; }
.apin2 .tag i.sub::before, .apin2 .tag i.strow::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; -webkit-text-stroke: .3em rgba(255, 255, 255, .96); }
.apin2.k-risk .tag i.sub:not(.strow) { color: #991b1b; }
.apin2.k-news .tag i.sub:not(.strow) { color: #6d28d9; }
.apin2 .tag i.strow.dn { color: #991b1b; }
/* 위성(비 2D) 기본: 밝은 글자 + 다크 헤일로 — 스트로크 대신 v2 위성 문법(다방향 text-shadow).
   두꺼운 스트로크가 한글 획 안쪽을 파먹어 탁해지던 문제(헤드리스 실측 수리) */
body:not(.base-2d) .apin2 .tag b { color: #f2f7f4; }
body:not(.base-2d) .apin2 .tag b::before, body:not(.base-2d) .apin2 .tag i.sub::before,
body:not(.base-2d) .apin2 .tag i.strow::before { content: none; }
body:not(.base-2d) .apin2 .tag b, body:not(.base-2d) .apin2 .tag i.sub, body:not(.base-2d) .apin2 .tag i.strow {
  text-shadow: 0 1px 0 rgba(5,16,11,.9), 0 -1px 0 rgba(5,16,11,.9), 1px 0 0 rgba(5,16,11,.9), -1px 0 0 rgba(5,16,11,.9),
    1px 1px 0 rgba(5,16,11,.9), -1px -1px 0 rgba(5,16,11,.9), 0 0 6px rgba(5,16,11,.95); }
body:not(.base-2d) .apin2 .tag i.sub:not(.strow) { color: #a7f3d0; }
body:not(.base-2d) .apin2.k-risk .tag i.sub:not(.strow) { color: #fca5a5; }
body:not(.base-2d) .apin2.k-news .tag i.sub:not(.strow) { color: #c4b5fd; }
body:not(.base-2d) .apin2 .tag i.strow { color: #fcd34d; }
body:not(.base-2d) .apin2 .tag i.strow.dn { color: #fca5a5; }
/* 선택·호버: v3 카드 승격 (스트로크 제거, 카드 표면 위 일반 텍스트) */
.apin2.is-selected .tag, .apin2.hot .tag, .apin2:hover .tag, .apin2:focus-visible .tag {
  background: rgba(255, 255, 255, .96); border: 1px solid rgba(15, 23, 42, .09); border-radius: 9px;
  padding: 7px 10px; max-width: 190px; overflow: hidden; box-shadow: 0 5px 16px rgba(15, 23, 42, .16); }
.apin2.is-selected .tag b, .apin2.hot .tag b, .apin2:hover .tag b, .apin2:focus-visible .tag b {
  color: #111827; font-size: 12.5px; font-weight: 780; overflow: hidden; text-overflow: ellipsis; }
.apin2.is-selected .tag b, .apin2.hot .tag b, .apin2:hover .tag b, .apin2:focus-visible .tag b,
.apin2.is-selected .tag i.sub, .apin2.hot .tag i.sub, .apin2:hover .tag i.sub, .apin2:focus-visible .tag i.sub,
.apin2.is-selected .tag i.strow, .apin2.hot .tag i.strow, .apin2:hover .tag i.strow, .apin2:focus-visible .tag i.strow { text-shadow: none; }
/* 위성 카드 = 다크 글래스 (흰 카드×밝은 글자 특이도 충돌 실측 수리 — vpill 위성 문법과 통일) */
body:not(.base-2d) .apin2.is-selected .tag, body:not(.base-2d) .apin2.hot .tag,
body:not(.base-2d) .apin2:hover .tag, body:not(.base-2d) .apin2:focus-visible .tag {
  background: rgba(10, 20, 15, .9); border-color: rgba(255, 255, 255, .14); box-shadow: 0 5px 18px rgba(0, 0, 0, .5); }
.apin2.is-selected .tag b::before, .apin2.hot .tag b::before, .apin2:hover .tag b::before, .apin2:focus-visible .tag b::before,
.apin2.is-selected .tag i.sub::before, .apin2.hot .tag i.sub::before, .apin2:hover .tag i.sub::before, .apin2:focus-visible .tag i.sub::before,
.apin2.is-selected .tag i.strow::before, .apin2.hot .tag i.strow::before, .apin2:hover .tag i.strow::before, .apin2:focus-visible .tag i.strow::before { content: none; }
.apin2.is-selected .tag i.sub:not(.strow), .apin2.hot .tag i.sub:not(.strow),
.apin2:hover .tag i.sub:not(.strow), .apin2:focus-visible .tag i.sub:not(.strow) { color: #047857; font-size: 11px; font-weight: 750; }
/* 저줌 정리: 국가 뷰(z<6.2)에선 맨몸 라벨도 숨김 (핀 번호만) — 상시 노출의 밀집 안전판 */
body.map-lowzoom .apin2 .tag { display: none; }

/* ─── 그림판 (오너 확정 2026-07-20): 뉴스 카드 버튼 자리 → 붓 도구 ─── */
.zdraw-cv { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
.zdraw-cv.on { pointer-events: auto; cursor: crosshair; z-index: 60; }
.zdraw-btn { position: fixed; right: 16px; bottom: 248px; z-index: 46; width: 40px; height: 40px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 12, .72); color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); cursor: pointer;
  backdrop-filter: blur(8px); transition: transform 120ms var(--ease-out); }
.zdraw-btn:hover { transform: scale(1.06); }
.zdraw-btn.on { color: #06130c; background: var(--mint); border-color: rgba(255, 255, 255, .5); }
body.base-2d .zdraw-btn { background: rgba(255, 255, 255, .92); color: #64748b; border-color: rgba(15, 23, 42, .08); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
body.base-2d .zdraw-btn.on { background: #059669; color: #fff; }
.zdraw-bar { position: fixed; right: 64px; top: calc(100% - 268px); bottom: auto; z-index: 61; display: none;
  flex-direction: column; align-items: center; gap: 2px; transform: translateY(-50%);
  padding: 8px; border-radius: 13px; background: rgba(10, 14, 12, .85); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
.zdraw-bar.on { display: flex; }
body.base-2d .zdraw-bar { background: rgba(255, 255, 255, .95); border-color: rgba(15, 23, 42, .1); box-shadow: 0 10px 30px rgba(15, 23, 42, .18); }
.zdraw-bar .zd-g { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0;
  border-right: 0; border-bottom: 1px solid rgba(128, 140, 150, .25); }
.zdraw-bar .zd-g:last-child { border-bottom: 0; padding-bottom: 0; }
.zdraw-bar .zd-g:first-child { padding-top: 0; }
.zdraw-bar button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: none;
  color: #94a3b8; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; padding: 0; }
body.base-2d .zdraw-bar button { color: #64748b; }
.zdraw-bar button.on { background: rgba(46, 229, 157, .16); color: var(--mint); border-color: rgba(46, 229, 157, .4); }
body.base-2d .zdraw-bar button.on { background: rgba(5, 150, 105, .1); color: #059669; border-color: rgba(5, 150, 105, .35); }
.zdraw-bar .sw { border-radius: 50%; width: 18px; height: 18px; background: var(--c); border: 2px solid rgba(255, 255, 255, .55); }
.zdraw-bar .sw.on { box-shadow: 0 0 0 2.5px rgba(46, 229, 157, .65); }
body.base-2d .zdraw-bar .sw { border-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(15, 23, 42, .15); }
body.base-2d .zdraw-bar .sw.on { box-shadow: 0 0 0 2.5px rgba(5, 150, 105, .55); }
.zdraw-bar .sz i { display: block; border-radius: 50%; background: currentColor; }

@media (max-width: 900px) {
  .zdraw-bar { right: 64px; top: auto; bottom: 248px; transform: none; flex-direction: row; padding: 8px 12px; }
  .zdraw-bar .zd-g { flex-direction: row; padding: 0 9px; border-right: 1px solid rgba(128, 140, 150, .25); border-bottom: 0; }
  .zdraw-bar .zd-g:last-child { border-right: 0; padding-right: 0; }
  .zdraw-bar .zd-g:first-child { padding-left: 0; }
}

/* ── 뉴스 카드 리디자인 (오너 확정 2026-07-23, Emil Kowalski 원칙 적용):
   보이지 않는 디테일 — 구분선 대신 여백·호버 서피스, 실선 대신 반투명, :active 눌림, focus-visible만 링 ── */
.znews-card { width: 248px; max-width: calc(100vw - 40px); padding: 12px 14px 10px; color: #0f172a; }
.znews-card .zn-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(15,23,42,.07); }
.znews-card .zn-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--news-accent, #7c3aed); display: grid; place-items: center; flex: 0 0 auto; }
.znews-card .zn-h small { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: color-mix(in srgb, var(--news-accent, #7c3aed) 72%, #1e293b); }
.znews-card .zn-x { margin-left: auto; width: 24px; height: 24px; border: 0; padding: 0; background: none; color: #9ca3af;
  font-size: 11px; cursor: pointer; border-radius: 7px; display: grid; place-items: center; outline: none;
  transition: background-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out; }
.znews-card .zn-x:hover { background: rgba(15, 23, 42, .05); color: #1e293b; }
.znews-card .zn-x:active { transform: scale(.94); }
.znews-card .zn-x:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--news-accent, #7c3aed) 45%, transparent); }
.znews-card b { display: block; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; line-height: 1.35; color: #0f172a; }
.znews-card p { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #64748b; line-height: 1.5; }
.znews-card .zn-cnt { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 5px; }
.znews-card .nk { font-size: 11.5px; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }
.znews-card .nk-up { color: #059669; } .znews-card .nk-down { color: #dc2626; } .znews-card .nk-mix { color: #b45309; } .znews-card .nk-ins { color: #6d5fd6; }
.znews-card .zn-go { margin-top: 10px; width: 100%; padding: 8px 0; border: 1px solid color-mix(in srgb, var(--news-accent, #6d28d9) 22%, transparent); border-radius: 9px;
  background: color-mix(in srgb, var(--news-accent, #7c3aed) 6%, transparent); color: var(--news-accent, #6d28d9); font-size: 11.5px; font-weight: 750; cursor: pointer;
  transition: background-color 120ms ease-out, transform 100ms ease-out; }
.znews-card .zn-go:hover { background: color-mix(in srgb, var(--news-accent, #7c3aed) 12%, transparent); }
.znews-card .zn-go:active { transform: scale(.98); }
.znews-cluster-card { width: 272px; }
.znews-cluster-card > b { color: #0f172a; font-size: 13px; }
.zn-stories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 9px -8px 0; }
.zn-story { width: auto; min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border: 0; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer; outline: none;
  transition: background-color 120ms ease-out; }
.zn-story:hover { background: #f8fafc; }
.zn-story:active { background: #f1f5f9; }
.zn-story:focus-visible { box-shadow: inset 0 0 0 2px rgba(100, 116, 139, .3); }
.zn-story i { width: 6px; height: 6px; margin-top: 5.5px; border-radius: 50%; background: #d97706; flex: 0 0 auto; }
.zn-story.up i { background: #059669; } .zn-story.down i { background: #dc2626; }
.zn-story.nt i { background: #a8b3bf; }   /* 중립 = 회색 — 혼재(주황)와 혼동되던 카운트 불일치 수리 (오너 리포트 2026-07-23) */
.zn-story span { min-width: 0; flex: 1; display: block; }
.zn-story b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; color: #1e293b; line-height: 1.4; }
.zn-story small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; color: #94a3b8; font-size: 10.5px; font-weight: 600; }
.zn-zoom { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--news-accent) 20%, transparent); border-radius: 9px;
  background: color-mix(in srgb, var(--news-accent) 6%, white); color: var(--news-accent); font-size: 11px; font-weight: 750; cursor: pointer;
  transition: background-color 120ms ease-out, transform 100ms ease-out; }
.zn-zoom:hover { background: color-mix(in srgb, var(--news-accent) 12%, white); }
.zn-zoom:active { transform: scale(.98); }

/* ── 측정 도구 (오너 확정 2026-07-22): 그림판 위 2버튼 — 거리 재기·반경, 측정 전용색 시안(#22d3ee) ── */
.zdraw-btn.zm-dist { bottom: 344px; }
.zdraw-btn.zm-rad { bottom: 296px; }
.zdraw-btn.zm-btn.on { background: #22d3ee; border-color: rgba(255, 255, 255, .5); color: #052a30; }
body.base-2d .zdraw-btn.zm-btn.on { background: #0891b2; color: #fff; }

/* 저장 핀: 거리 재기 바로 위. 채팅/뉴스 핀과 다른 북마크 실루엣으로 구분한다. */
.zdraw-btn.zp-btn { bottom: 392px; }
.zdraw-btn.zp-btn.on { background: #2ee59d; color: #062217; border-color: rgba(255, 255, 255, .58); }
body.base-2d .zdraw-btn.zp-btn.on { background: #059669; color: #fff; }
.zp-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center; background: #0f172a; border: 2px solid #fff; color: #fff;
  font-size: 9px; line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.zp-count[hidden] { display: none; }

/* 정립 슬림 핀 v2 (오너 2026-07-25): 회전 사각형 → SVG 물방울, 28×38, 호버=바닥 고정 리프트 */
.zp-marker { position: relative; width: 28px; height: 38px; padding: 0; border: 0; background: transparent; cursor: pointer; outline: none;
  color: #059669; filter: drop-shadow(0 5px 9px rgba(5, 91, 66, .35)); transform-origin: 50% 100%;
  transition: transform 130ms var(--ease-out), filter 130ms ease-out; }
.zp-marker svg { display: block; width: 100%; height: 100%; }
.zp-marker .zp-body { fill: currentColor; stroke: rgba(255, 255, 255, .97); stroke-width: 2.2; }
.zp-marker .zp-glyph { fill: #fff; }
.zp-marker:hover, .zp-marker:focus-visible { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 8px 13px rgba(5, 91, 66, .42)); }
.zp-marker.is-shared { color: #0f766e; }

/* zp 카드 v2 (오너 2026-07-25 '대기업급'): 리사이즈 그립 제거·포커스 링·버튼 위계(주=채움, 부=고스트)·우측 정렬·마이크로 트랜지션 */
.zp-popup .maplibregl-popup-content { padding: 0; border-radius: 15px; background: #fff; color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 24px 56px rgba(15, 23, 42, .16), 0 4px 14px rgba(15, 23, 42, .07); overflow: hidden; }
.zp-popup .maplibregl-popup-tip { border-top-color: #fff; border-bottom-color: #fff; }
.zp-card { width: 288px; padding: 14px 16px 14px; box-sizing: border-box; font-family: inherit; }
.zp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.zp-head > b { color: #047857; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zp-mini { width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(145deg, #ecfdf5, #d3f5e4); color: #059669; }
.zp-mini svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zp-close { margin-left: auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center;
  background: transparent; color: #a4afbd; font-size: 19px; line-height: 1; cursor: pointer; transition: background .13s, color .13s; }
.zp-close:hover { background: #f1f5f9; color: #334155; }
.zp-card label { display: block; margin: 11px 0 0; color: #7c8794; font-size: 10.5px; line-height: 1.3; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.zp-card input, .zp-card textarea { width: 100%; margin-top: 5px; padding: 9px 11px; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #0f172a; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.45; outline: none; resize: none;
  transition: border-color .13s, box-shadow .13s; }
.zp-card textarea { min-height: 74px; }
.zp-card input::placeholder, .zp-card textarea::placeholder { color: #a4afbd; font-weight: 500; }
.zp-card input:hover, .zp-card textarea:hover { border-color: #cbd5e1; }
.zp-card input:focus, .zp-card textarea:focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .13); }
.zp-card > strong { display: block; overflow-wrap: anywhere; color: #0f172a; font-size: 16.5px; line-height: 1.34; font-weight: 800; letter-spacing: -.015em; }
.zp-card > p { margin: 6px 0 0; max-height: 108px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #475569; font-size: 12.5px; line-height: 1.55; font-weight: 570;
  scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .28) transparent; }
.zp-card > p.is-empty { color: #a4afbd; font-weight: 520; }
.zp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.zp-actions button { min-height: 34px; padding: 0 14px; border-radius: 10px; font-family: inherit; font-size: 12px; font-weight: 760; line-height: 1; cursor: pointer;
  transition: background .13s, color .13s, transform .1s, box-shadow .13s; }
.zp-actions button:active { transform: scale(.97); }
.zp-actions .zp-primary { border: 0; background: #059669; color: #fff; box-shadow: 0 1px 2.5px rgba(5, 150, 105, .4), inset 0 1px 0 rgba(255, 255, 255, .14); }
.zp-actions .zp-primary:hover { background: #047857; box-shadow: 0 2px 7px rgba(5, 150, 105, .38); }
.zp-actions .zp-secondary { border: 0; background: transparent; color: #64748b; }
.zp-actions .zp-secondary:hover { background: #f1f5f9; color: #0f172a; }
.zp-actions .zp-delete { order: -1; margin-right: auto; min-width: 34px; padding: 0 9px; border: 0; background: transparent; color: #ef4444; }
.zp-actions .zp-delete:hover { background: #fef2f2; }
/* 지도 신호 로딩 칩 — 답변 종료~셰이딩 도착 사이 공백 안내 (오너 2026-07-25) */
.zn-wait { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(8px); display: flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px; background: rgba(10, 15, 22, .88); border: 1px solid rgba(255, 255, 255, .15);
  color: #dfe6ee; font-size: 12px; font-weight: 750; letter-spacing: .01em; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; z-index: 60; backdrop-filter: blur(6px); }
.zn-wait.on { opacity: 1; transform: translateX(-50%); }
.zn-wait i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(46, 229, 157, .25); border-top-color: #2ee59d; animation: znspin .8s linear infinite; }
@keyframes znspin { to { transform: rotate(360deg); } }
.zm-cv, .zm-ov { position: absolute; inset: 0; pointer-events: none; z-index: 45; }
.zm-ov { z-index: 46; }
.zm-chip { position: absolute; transform: translate(-50%, -135%); background: rgba(10, 15, 22, .92);
  border: 1px solid rgba(34, 211, 238, .4); border-radius: 8px; padding: 3px 8px; white-space: nowrap;
  font-size: 12px; font-weight: 800; color: #e8eef4; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.zm-chip b { color: #67e8f9; font-weight: 850; }
.zm-chip small { font-size: 10.5px; font-weight: 800; margin-left: 1px; }
.zm-chip .zm-esc { color: #8b98a5; font-size: 10px; font-weight: 650; margin-left: 6px; font-style: normal; }
.zm-chip.zm-live { transform: translate(16px, 12px); border-color: rgba(255, 255, 255, .2); opacity: .95; }
.zm-card { position: absolute; width: 192px; background: rgba(10, 15, 22, .93); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: auto; }
.zm-card .rw { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.zm-card .rw span { color: #9aa7b4; font-size: 12px; font-weight: 650; }
.zm-card .rw i { font-style: normal; color: #e8eef4; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.zm-card .rw.tot > span:first-child { color: #c9d4de; font-size: 12.5px; font-weight: 750; }
.zm-card .rw.tot b, .zm-card .big b { color: #67e8f9; font-size: 19px; font-weight: 850; font-variant-numeric: tabular-nums; }
.zm-card .rw.tot small, .zm-card .big small { color: #67e8f9; font-size: 11.5px; font-weight: 800; margin-left: 1px; }
.zm-card .big { display: flex; align-items: baseline; }
.zm-card .big > span:last-child { margin-left: auto; color: #9aa7b4; font-size: 12px; font-weight: 650; }
.zm-card .hnt { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1);
  color: #77828e; font-size: 10.5px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
.zm-card .hnt b { color: #c3cdd6; font-size: 10.5px; }
/* 카드 우상단 작은 ✕ = 지우기 (오너 확정 2026-07-22, 뉴스 카드 .zn-x와 같은 문법) — ESC는 키보드 지름길로 유지 */
.zm-card { padding-top: 14px; }
.zm-card .zm-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; padding: 0;
  background: none; color: #8b98a5; font-size: 11px; cursor: pointer; border-radius: 6px; display: grid; place-items: center; }
.zm-card .zm-x:hover { background: rgba(255, 255, 255, .1); color: #e8eef4; }
.zm-card .rw.tot, .zm-card .big { padding-right: 20px; }

/* ── 모바일 지도 도구 재배치 v2 (오너 확정 2026-07-23 "위성 위로 올려"): 위성 토글 바로 위 한 컬럼(우측) —
   모바일 컴포저는 상단(29%)이라 우하단 컬럼이 안전. 그리기 팔레트는 버튼 왼쪽에 세로. 패널·드로어 열림 시 숨김 ── */
@media (max-width: 900px) {
  body.report-open .zdraw-btn { opacity: 0; pointer-events: none; }   /* 줌·위성 토글과 같은 페이드 규칙 동참 */
}
@media (max-width: 640px) {
  .zdraw-btn { right: 16px; left: auto; width: 40px; height: 40px; border-radius: 13px; bottom: calc(108px + env(safe-area-inset-bottom)); }
  .zdraw-btn.zm-rad { bottom: calc(156px + env(safe-area-inset-bottom)); }
  .zdraw-btn.zm-dist { bottom: calc(204px + env(safe-area-inset-bottom)); }
  .zdraw-btn.zp-btn { bottom: calc(252px + env(safe-area-inset-bottom)); }
  .zp-card { width: min(292px, calc(100vw - 40px)); }
  .zdraw-bar { left: auto; right: 64px; top: auto; bottom: calc(108px + env(safe-area-inset-bottom)); transform: none;
    flex-direction: column; padding: 8px; }
  .zdraw-bar .zd-g { flex-direction: column; padding: 8px 0; border-right: 0; border-bottom: 1px solid rgba(128, 140, 150, .25); }
  .zdraw-bar .zd-g:last-child { border-bottom: 0; padding-bottom: 0; }
  .zdraw-bar .zd-g:first-child { padding-top: 0; }
  body.working .zdraw-btn, body.drawer-open .zdraw-btn,
  body.working .zdraw-bar, body.drawer-open .zdraw-bar { display: none; }
}

.plan-manage{background:none;border:none;color:#8b9bab;text-decoration:underline;cursor:pointer;font:inherit;padding:0;margin-left:6px}
.plan-manage:hover{color:#c8d0d8}

.plan-status{margin:10px 2px 2px;font-size:12.5px;color:#c8d0d8}
.plan-status b{color:#f5c518}
.plan-status .plan-resume{background:none;border:none;color:#2ee59d;text-decoration:underline;cursor:pointer;font:inherit;padding:0;margin-left:8px}

/* zn-card v3 (2026-07-23 오너 '제목 잘림·대기업급'): 제목 2줄 클램프 + 메타줄 + 행 호버 + 4행 스크롤 */
.znews-card{min-width:264px}
.znews-card .zn-stories{max-height:248px;overflow-y:auto;overscroll-behavior:contain;margin-top:2px;
  /* 모던 슬림 스크롤바 (오너 2026-07-25 '올드티') — OS 기본 화살표 바 제거, 호버 시만 진해지는 알약 썸 */
  scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.28) transparent;scrollbar-gutter:stable}
.znews-card .zn-stories::-webkit-scrollbar{width:5px}
.znews-card .zn-stories::-webkit-scrollbar-track{background:transparent}
.znews-card .zn-stories::-webkit-scrollbar-thumb{background:rgba(100,116,139,.28);border-radius:999px}
.znews-card .zn-stories:hover::-webkit-scrollbar-thumb{background:rgba(100,116,139,.5)}
.znews-card .zn-stories::-webkit-scrollbar-button{display:none;height:0}
.znews-card .zn-story{align-items:flex-start;padding:8px 9px;border-radius:10px;transition:background .12s}
.znews-card .zn-story:hover{background:rgba(15,23,42,.055)}
.znews-card .zn-story b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.34;font-size:12.8px}
.znews-card .zn-story small{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;margin-top:3px}
.znews-card .zn-story small .zn-sub{color:#64748b;font-weight:600}
.znews-card .zn-story small em{font-style:normal;color:#94a3b8;font-size:10.5px}
.znews-card .zn-more{margin-top:6px;font-size:11px;color:#94a3b8;text-align:center}

/* 번역 대기 블러 — 현지어 원문이 먼저 읽혔다 바뀌는 혼란 방지 */
.znews-card .zn-trwait{filter:blur(3.5px);opacity:.45;animation:znTrPulse 1.1s ease-in-out infinite;pointer-events:none}
@keyframes znTrPulse{0%,100%{opacity:.45}50%{opacity:.72}}

/* 모바일 지도 도구 4종 = 상단 Z 오른쪽 가로열 (오너 2026-07-26 — 세로 스택이 화면 중앙을 가리던 것) */
@media (max-width: 640px) {
  .zdraw-btn { top: 10px; bottom: auto; right: auto; width: 38px; height: 38px; }
  .zdraw-btn.zp-btn { left: 112px; }
  .zdraw-btn.zm-dist { left: 158px; }
  .zdraw-btn.zm-rad { left: 204px; }
  .zdraw-btn:not(.zp-btn):not(.zm-dist):not(.zm-rad) { left: 250px; }
}

/* 로딩 칩의 지도 마커 변형 — 구역 중앙 앵커 (오너 2026-07-26) */
.zn-wait.zn-wait-map { position: relative; left: auto; bottom: auto; transform: none; }
.zn-wait.zn-wait-map.on { transform: none; }

/* ---- 뉴스핀 8종 레이어 (2026-07-23 오너: 카테고리 8종 글로벌) ---- */
.newsctl {
  /* 우측 레일 최상단 — 줌64·베이스156·그리기248·반경296·측정344·핀392 위 = 440 (오너 2026-07-24 겹침 스샷 2회 실측) */
  position: fixed; right: 16px; bottom: 440px; z-index: 46; width: 40px;
  border-radius: 20px; overflow: hidden;
  background: rgba(20, 22, 26, .72); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px rgba(0, 0, 0, .35);
  transition: opacity 200ms var(--ease-out);
}
.newsctl button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.newsctl button svg { width: 16px; height: 16px; }
.newsctl button.active { background: var(--mint-soft); color: var(--mint); }
body.report-open .newsctl { right: 16px; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .newsctl { bottom: calc(146px + env(safe-area-inset-bottom)); } }
@media (max-width: 720px) { .newsctl { bottom: calc(190px + env(safe-area-inset-bottom)); } }

.znp { cursor: pointer; pointer-events: auto; }   /* position은 maplibre 마커(absolute)가 관리 — relative로 덮으면 플로우로 밀림 */
.znp:hover, .znp.sel { z-index: 9; }              /* 호버·선택 핀은 이웃 마커 위로 — 소환된 라벨이 깔리지 않게 */
/* 스쿼클 + 역삼각 꼬리 (오너 확정 2026-07-28 "V3에 꼬리 — 통일형"): 카카오맵 말풍선 문법 —
   몸통이 45° 회전 꼬리의 상단을 덮어 이음새 없음, 흰 테두리·그림자 모두 실루엣째 연속. 크기 단일 28px — 중요도 서열은 5급 펄스가 담당 */
.znp-mk {
  position: absolute; left: -14px; bottom: 0; width: 28px; height: 34px; z-index: 2;
  filter: drop-shadow(0 1.5px 2.5px rgba(16, 24, 40, .22)) drop-shadow(0 6px 14px rgba(16, 24, 40, .16));
  transition: transform .15s cubic-bezier(.2, .9, .3, 1.45); transform-origin: 50% 100%;
}
.znp:hover .znp-mk { transform: scale(1.08); }
.znp-badge {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 31%;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  border: 1.5px solid #fff;
}
.znp-tail {
  position: absolute; left: 50%; bottom: 1.5px; width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg); border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  border-radius: 0 0 3px 0; z-index: 1;
}
.znp-badge svg { width: 15px; height: 15px; }   /* fill 강제 금지 (2026-07-28 "산" 버그) — 옛 채움 잔재가 스트로크 아이콘을 통짜로 칠해 느낌표가 사라졌음 */
/* 겹침 수 배지 = 우상단, 색은 전 카테고리 단일 빨강 (오너 2026-07-28 "전부 통일" — 알림 배지 문법) */
.znp-ct {
  position: absolute; left: 6px; bottom: 26px; min-width: 17px; height: 17px; border-radius: 99px;
  background: #ff3b30; color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; padding: 0 3px; box-sizing: border-box; z-index: 3;
}
/* 도킹 알약 (오너 확정 2026-07-28): 칩과 한 몸 — 무테두리 + 이중 그림자 + 유리, 순백·순흑 금지 */
.znp-lb {
  position: absolute; left: -14px; bottom: 7px; white-space: nowrap; z-index: 1;   /* 칩 왼끝(-14)과 정렬 — 어두운 알약이 왼쪽으로 비치던 2px 제거 (오너 2026-07-28) */
  background: rgba(255, 255, 255, .95); color: #1a1c20; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; letter-spacing: -.1px; line-height: 1;
  padding: 7px 13px 7px 37px; border-radius: 999px;   /* 좌 37 = 칩과 글자 사이 숨통 (오너 2026-07-28 "아이콘·글자 너무 붙음") */
  box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 4px 14px rgba(16, 24, 40, .16);
  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.znp-lb em { font-style: normal; margin-left: 6px; color: #9aa4b0; font-weight: 700; font-size: 10.5px; }
/* 우측 끝 핀 = 라벨 좌측 전개 (오너 2026-07-28 모바일 "흰 아이콘 겹침" — 알약이 화면 밖 + 흰 컨트롤 밑 통과 실측 331+163>375) */
.znp.lbf .znp-lb { left: auto; right: -14px; padding: 7px 37px 7px 13px; }
.znp.sel .znp-lb { background: rgba(17, 24, 39, .94); color: #eef2f7; }
.znp.sel .znp-lb em { color: #aab4c0; }
@media (max-width: 720px) { .znp-lb { max-width: 170px; font-size: 11px; } }

.maplibregl-popup { z-index: 30; }   /* 열린 목록은 어떤 핀·라벨(호버 z9)보다 위 — 핀이 팝업을 뚫던 겹침 버그 (오너 2026-07-28) */
.znpop { width: 292px; font-family: inherit; }
/* 대기업급 미니멀 (오너 2026-07-24 "심플 이즈 베스트"): 알약·요약 전폐 — 지역명 + 회색 숫자 하나 */
.znh { display: flex; align-items: center; gap: 7px; margin: 2px 2px 8px; }
.znh b { font-size: 15px; font-weight: 800; color: #191f28; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.2px; }
/* 건수 = 회색 칩 (오너 2026-07-28 "숫자 대기업급") */
.znh span { background: #eef1f4; color: #6b7684; font-size: 11px; font-weight: 800; padding: 2.5px 8px; border-radius: 99px; flex: none; line-height: 1; }
/* 겹침 목록 리스트 (오너 2026-07-24): 전량 스크롤 — 지도 줌 이벤트로 새지 않게 격리 */
.znlist { max-height: 296px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.znr { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-radius: 9px; }
.znr:hover { background: #f4f6f8; }
.znr.lnk { cursor: pointer; }
/* 카테고리 필터 칩 레일 (상단 중앙, 모바일 = 가로 스크롤) */
.znfilt { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 6px;
  max-width: min(96vw, 900px); overflow-x: auto; padding: 4px; scrollbar-width: none;
  transition: left .18s ease, max-width .18s ease; }   /* 한 줄 고정 (오너 2026-07-28 "두 줄 말고 한 줄") — 상한 900, 꽉 차면 아래 압축 모드 */
/* 트렌드 패널 열림 = 남은 지도 폭(레일 56px+패널 --ztw 제외) 기준 재중앙 (오너 2026-07-28 "사이드바가 전체·사건속보 칩 가림"):
   뷰포트 중앙 고정이라 패널이 왼쪽 칩을 깔던 것. 두 줄 금지라 좁아지면 칩 자체를 압축해 한 줄 수용 */
@media (min-width: 641px) {
  body.zt-open .znfilt { left: calc(50% + (56px + var(--ztw, 420px)) / 2);
    max-width: min(100vw - 56px - var(--ztw, 420px) - 28px, 900px); }
}
/* 한 줄 자동 맞춤 2단 (오너 2026-07-28 "아직도 오른쪽 잘림"): 패널 폭이 드래그 가변이라 고정 쿼리 불가 —
   JS 핏터(znFit)가 실측 넘침 시 낙하. s = 축소, xs = 색점까지 제거 */
.znfilt.znf-s button { font-size: 11px; padding: 5px 9px; gap: 4px; }
.znfilt.znf-s button i { width: 7px; height: 7px; }
.znfilt.znf-xs button { font-size: 10.5px; padding: 4px 8px; }
.znfilt.znf-xs button i { display: none; }
.znfilt::-webkit-scrollbar { display: none; }
.znfilt button { flex: none; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,30,45,.14); border-radius: 99px; padding: 6px 12px; font: 700 12px Inter, sans-serif;
  color: #3a4553; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 3px 10px rgba(20,30,50,.10); }
.znfilt button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.znfilt button.on { background: #111827; color: #fff; border-color: #111827; }
@media (max-width: 640px) { .znfilt { top: 58px; } }   /* 모바일 상단바 아래 — 한 줄 스와이프 */
/* 랭킹 🔥 = 레딧 화제 토픽 (오너 2026-07-28 "도파민"): 주황 스트로크 + 은은한 맥동 */
.zt-fire { width: 13px; height: 13px; flex: none; fill: none; stroke: #f97316; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; margin: 0 1px 0 2px; animation: ztfire 1.7s ease-in-out infinite; }
@keyframes ztfire { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .68; transform: scale(.9); } }
/* 라벨 충돌 회피: 자리 밀린 핀은 아이콘만 — 호버/선택 시 라벨 복귀 */
.znp.nolb .znp-lb { display: none; }
.znp.nolb:hover .znp-lb, .znp.nolb.sel .znp-lb { display: inline-flex; }
/* 겹침 핀 호버 = 기존 목록 팝업(znpop) 소환 (오너 2026-07-28 "굳이 새 창 말고 기존 목록"): 트리거 배선은 app.js, UI는 znpop 단일.
   ⚠️ 호버 시 라벨 숨김 금지 (오너 실측 "무한 깜빡"): 라벨 위 포인터 → 숨김 → 호버 이탈 → 복귀 루프.
   팝업은 오프셋 -52로 핀 위에 뜨므로 라벨(핀 옆)과 겹치지 않는다 — 숨길 이유 자체가 없음 */
.znr-i { width: 22px; height: 22px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.znr-i svg { width: 13px; height: 13px; }   /* fill 강제 금지 — 위 znp-badge와 같은 "산" 버그 */
.znr-b b { display: block; font-size: 12.5px; color: #26313c; line-height: 1.4; }
.znr-b small { font-size: 10.5px; color: #9aa4b0; margin-top: 1px; display: block; }
.znmore { text-align: center; color: #8a94a2; font-size: 11px; padding: 4px 0 2px; }
/* 물어보기 = 헤더 우측 아이콘 단추 (오너 2026-07-28 "하단 풀폭 버튼 대신 상단 아이콘 하나로 심플하게") —
   margin-right 20px는 maplibre 닫기 X 회피 */
.znask {
  margin-left: auto; margin-right: 20px; width: 26px; height: 26px; flex: none;
  background: #111827; border: none; color: #fff; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; outline: none;
}
.znask svg { width: 14px; height: 14px; fill: #fff; }
.znask:hover { background: #1f2937; }

/* 중요도 펄스 (오너 2026-07-28 "크기는 통일, 중요도는 빨간 펄스"): 5급 사건의 신호 */
.znp.lv .znp-badge::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: #ff3b30; border: 2px solid #fff; animation: znlv 1.4s ease-out infinite; }
@keyframes znlv { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
/* 5급 겹침 = 숫자 배지가 직접 맥동 (오너 2026-07-28 "펄스가 숫자에 밀림 — 숫자를 감싸서"): 점+숫자 두 소품 대신 한 몸 */
.znp.lv.hasct .znp-badge::after { display: none; }
.znp.lv.hasct .znp-ct { animation: znlv 1.4s ease-out infinite; }
/* 무인지대 안내 캡슐 은퇴 (오너 2026-07-28 "권유해주는 거 없애") */

/* 기사 리더 패널 (AI 요약 카드) */
.znread { position: fixed; right: 16px; top: 74px; z-index: 60; width: 344px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 170px); overflow-y: auto; background: #fff; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 30, 50, .28); border: 1px solid rgba(20, 30, 45, .08); padding: 14px 16px;
  animation: znrdIn .22s cubic-bezier(.23, 1, .32, 1); }
/* 핀 쪽에서 밀려나오는 등장 (오너 2026-07-27 "대기업급") — 오른쪽 배치면 왼쪽에서, 왼쪽 배치면 오른쪽에서 */
@keyframes znrdIn { from { opacity: 0; transform: translate(-8px, 4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes znrdInL { from { opacity: 0; transform: translate(8px, 4px) scale(.985); } to { opacity: 1; transform: none; } }
.znread.znrd-left { animation-name: znrdInL; }
.znrd-h { display: flex; gap: 9px; align-items: flex-start; }
.znrd-h b { flex: 1; font-size: 14px; line-height: 1.45; color: #191f28; }
.znrd-x { border: 0; background: #f2f4f6; color: #6b7684; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; flex: none; font-size: 12px; }
.znrd-meta { margin: 7px 0 10px; font-size: 11.5px; color: #9aa4b0; }
/* 요약 본문 = 노토산스KR 500 (오너 2026-07-24 '폰트 옛날 것 — 약간 굵게' : 맑은고딕 탈출) */
.znread, .znpop { font-family: Inter, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.znrd-sum p { font-size: 13.5px; font-weight: 500; line-height: 1.7; color: #2b3440; letter-spacing: -.01em; margin: 0 0 9px; }
.znrd-load { font-size: 12.5px; color: #9aa4b0; }
.znrd-fb { font-size: 10.5px; color: #9aa4b0; margin: 0 0 8px; }   /* ⓐ 폴백 출처 라벨 */
/* 4단 브리핑 (오너 2026-07-28 "성의껏"): 단 라벨 = 소형 대문자 청록 — 본문 타이포는 .znrd-sum p 상속 */
.znrd-sec { margin: 0 0 11px; }
.znrd-sec:last-child { margin-bottom: 2px; }
.znrd-sec i { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #0d9488; margin: 0 0 3px; }
.znrd-sec p { margin: 0; }
.znrd-btns { margin-top: 2px; text-align: center; }
.znrd-login { display: block; margin-top: 9px; background: var(--mint, #12b981); color: #08231a; border: 0;
  border-radius: 10px; padding: 8px 14px; font-weight: 800; font-size: 12px; cursor: pointer; }
/* 주연 = AI 요약 (슬림 민트 솔리드), 조연 = 원문 텍스트 링크 (오너 2026-07-24 "무식하게 큼" — 검은 슬래브 전폐).
   2026-07-28 재손질: 이모지 → 스파클 SVG, 그림자 완화, 눌림 반응 — 형광 큰소리 톤 다운 */
.znrd-go { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--mint, #12b981); color: #06231a; border: 0;
  border-radius: 11px; padding: 9px 0; font-weight: 800; font-size: 12.5px; letter-spacing: -.1px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 185, 129, .18), 0 4px 12px rgba(18, 185, 129, .16);
  transition: transform .1s, filter .12s; }
.znrd-go:hover { filter: brightness(1.04); }
.znrd-go:active { transform: scale(.985); }
.znrd-sp { width: 13px; height: 13px; fill: #06231a; flex: none; }
.znrd-src { background: none; border: 0; color: #8a94a2; font-size: 11.5px; font-weight: 600; padding: 7px 8px 2px;
  cursor: pointer; width: auto; }
.znrd-src:hover { color: #4b5563; background: none; }
/* AI 요약 로딩 = 스켈레톤 쉬머 (오너 2026-07-24 "대기업급 애니메이션") */
.znrd-skel { padding: 2px 0 4px; }
.znrd-skhd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #0d8a5f; margin-bottom: 10px; }
.znrd-spark { display: inline-block; animation: znspark 1.1s ease-in-out infinite; }
.znrd-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.znrd-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #0d8a5f; opacity: .25; animation: zndot 1.2s ease-in-out infinite; }
.znrd-dots i:nth-child(2) { animation-delay: .18s; }
.znrd-dots i:nth-child(3) { animation-delay: .36s; }
.znrd-ln { display: block; height: 11px; border-radius: 6px; margin: 9px 0;
  background: linear-gradient(90deg, #eef1f4 25%, #dfe5eb 37%, #eef1f4 63%);
  background-size: 400% 100%; animation: znshim 1.3s ease infinite; }
.znrd-ln:nth-of-type(2) { animation-delay: .12s; }
.znrd-ln:nth-of-type(3) { animation-delay: .24s; }
.znrd-ln.short { width: 58%; animation-delay: .36s; }
@keyframes znshim { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes znspark { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.35) rotate(20deg); opacity: .65; } }
@keyframes zndot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 640px) { .znread { left: 16px; right: 16px; width: auto; top: auto; bottom: 96px; max-height: 52vh; } }

/* ═══ 애플급 스크롤바 전역 (오너 2026-07-24 스샷 지시): 얇은 반투명 둥근 오버레이, 화살표·트랙 제거.
   기존 컴포넌트별 커스텀(7곳)은 특이도가 높아 그대로 우선 — 이건 기본값 교체용 전역층 ═══ */
* { scrollbar-width: thin; scrollbar-color: rgba(128, 138, 150, .35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(128, 138, 150, .35); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(128, 138, 150, .6); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ───────── 실시간 트렌드 패널 (오너 2026-07-27: SBH식 — 키워드 랭킹 → 기사 목록 → 지도 이동).
   첫 방문 30초 안에 "뭘 봐야 하는지"를 알려주는 지도의 목차. 레일 최상단 아이콘으로 토글. ───────── */
.zt-trend { position: relative; }
body.zt-open .zt-trend { background: var(--s3); }
body.zt-open .zt-trend svg { stroke: var(--mint); }
.zt-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--canvas); }
.zt-sep { width: 22px; height: 1px; background: var(--hair); margin: 5px auto; }
.ztp {
  position: fixed; left: 56px; top: 0; bottom: 0; width: var(--ztw, 420px); z-index: 39;   /* 폭 = 손잡이 드래그로 조절 (오너 2026-07-27) */
  background: var(--s1); border-right: 1px solid var(--hair);
  display: flex; flex-direction: column;
  transform: translateX(calc(-100% - 60px)); transition: transform 260ms var(--ease-drawer);
}
body.zt-open .ztp { transform: none; }
/* 서랍이 열려 있으면 트렌드는 무조건 숨김 — 클래스가 레이스로 둘 다 붙어도 포개짐 불가 (2026-07-27 짤림 사고) */
body.drawer-open .ztp { transform: translateX(calc(-100% - 60px)); }
.ztp-h { padding: 14px 14px 12px; border-bottom: 1px solid var(--hair); flex: 0 0 auto; }
.ztp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.ztp-top svg { width: 17px; height: 17px; stroke: var(--mint); }
.ztp-t { font-size: 15px; font-weight: 700; color: #ececec; letter-spacing: -.01em; }
.ztp-as { margin-left: auto; font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ztp-seg { display: flex; background: var(--s3); border-radius: 9px; padding: 3px; gap: 2px; }
.ztp-seg button { flex: 1; padding: 6px 0; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: background 180ms var(--ease-out), color 180ms; }
.ztp-seg button.on { background: var(--s1); color: #ececec; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
/* 토픽 랭킹 = 2열 5+5 복귀 (오너 확정 2026-07-28 레퍼런스): 토픽이 짧아져 밀도형 2열이 정답 */
.ztp-kw { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  gap: 2px 8px; padding: 10px 10px 12px;   /* 세로 우선 = 1~5 왼쪽, 6~10 오른쪽 (오너 2026-07-27) */
  border-bottom: 1px solid var(--hair); flex: 0 0 auto; perspective: 700px; }
/* 순위 변동 = FLIP 이동 (오너 2026-07-27 "3D 뒤집기는 촌스럽다"): 살아남은 항목은 미끄러지고,
   새 진입만 흐릿하게 떠오른다 — 장식이 아니라 '어디서 어디로 갔는지'를 눈이 따라가게 하는 연출 */
.zt-face { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; }
.zt-k.zt-in { animation: ztEnter 480ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ztEnter {
  from { opacity: 0; transform: translateY(9px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* 등락 표식 — 붉은 알림 대신 정밀한 델타 (대기업급) */
/* 등락 표시 (오너 확정 2026-07-28 "대기업이 게이지 쓰나" — 게이지 철거, 네이버식 ▲▼): 상승 빨강·하락 파랑·유지 – */
.zt-mv { flex: none; margin-left: auto; line-height: 1; font-size: 10.5px; font-weight: 800; cursor: help; }
.zt-mv-u { color: #ef4444; }
.zt-mv-d { color: #3b82f6; }
.zt-mv-s { color: var(--ink-3); opacity: .5; font-weight: 600; }
.zt-mv-n { color: var(--mint); background: var(--mint-soft); padding: 2.5px 5px; border-radius: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.zt-k {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
  animation: ztIn 340ms var(--ease-out) both;
}
.zt-k::before {   /* 선택 강조 = 좌측 민트 바 (배경 채우기보다 조용하고 정확) */
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: var(--mint); opacity: 0; transition: opacity 160ms var(--ease-out);
}
.zt-k.on { background: var(--s2); }
.zt-k.on::before { opacity: 1; }
/* 가독성 (오너 2026-07-27 "랭킹 숫자 잘 안 보여"): 순위는 회색 최하단계에서 한 단계 올리고,
   1~3위는 민트+굵게로 확실히 구분. 폰트도 한 톤 키움 */
.zt-kr { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink-3); min-width: 15px;
  text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.zt-k:nth-child(-n+3) .zt-kr { color: var(--mint); font-weight: 800; }
.zt-kn { font-size: 14px; font-weight: 650; color: #f2f3f3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; min-width: 0; letter-spacing: -.012em; }
.zt-k.on .zt-kn { color: var(--mint); }
.zt-new {   /* 급상승 = 2시간 내 기사가 과반인 키워드 */
  flex: none; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: var(--red);
  background: var(--red-soft); padding: 2px 4px; border-radius: 4px; line-height: 1;
}
@keyframes ztIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.zt-k:nth-child(2) { animation-delay: 20ms } .zt-k:nth-child(3) { animation-delay: 40ms }
.zt-k:nth-child(4) { animation-delay: 60ms } .zt-k:nth-child(5) { animation-delay: 80ms }
.zt-k:nth-child(6) { animation-delay: 100ms } .zt-k:nth-child(7) { animation-delay: 120ms }
.zt-k:nth-child(8) { animation-delay: 140ms } .zt-k:nth-child(9) { animation-delay: 160ms }
.zt-k:nth-child(10) { animation-delay: 180ms }
.ztp-nh { display: flex; align-items: center; gap: 8px; padding: 11px 14px 9px; flex: 0 0 auto; }
.ztp-nt { font-size: 14px; font-weight: 700; color: #ececec; }
.ztp-nc { font-size: 12px; color: var(--ink-4); }
.ztp-x { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.ztp-x svg { width: 14px; height: 14px; }
.ztp-q {
  margin: 11px 14px 10px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 11px;
  border: 1px solid var(--hair); border-radius: 10px; background: var(--s2); flex: 0 0 auto; cursor: text;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.ztp-q:focus-within { border-color: rgba(46, 229, 157, .6); background: var(--s3); }
.ztp-q svg { width: 15px; height: 15px; stroke: var(--ink-3); flex: none; }
.ztp-q input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 13.5px; font-weight: 550; color: #ececec; }
.ztp-q input::placeholder { color: var(--ink-4); font-weight: 400; }
/* hidden 속성이 display:flex에 지던 것 (2026-07-27 '빈 초록 막대' 사고) — 명시 display가 UA hidden을 이김 */
.ztp-x[hidden], #ztNews[hidden], .ztp-em[hidden] { display: none !important; }
/* 트렌드 열림 시 하단 입력창이 패널에 깔리던 것 — 남은 공간 중앙으로 이동 (폭 변수 연동) */
body.zt-open .stage .composer {
  left: calc(50% + (56px + var(--ztw, 420px)) / 2);
  max-width: calc(100vw - 56px - var(--ztw, 420px) - 48px);
}
@media (max-width: 900px) { body.zt-open .stage .composer { left: 50%; max-width: none; } }

/* 손잡이 = 리사이즈 핸들 (오너 2026-07-27 "가로영역 조절하는 버튼 잘 어울리게"):
   평소엔 모서리에 조용히 걸린 슬림 필, 호버하면 모서리 전체에 민트 선이 켜져 "여기가 드래그 경계"임을 알린다.
   전역 포커스 링(초록 아웃라인)이 알약 밖으로 튀던 것도 여기서 안쪽 링으로 교체. */
.ztp-grip {
  position: fixed; top: 50%; left: 56px; margin-left: -11px; transform: translateY(-50%);
  z-index: 41; width: 22px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s2); border: 1px solid var(--hair); color: var(--ink-4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); cursor: col-resize; touch-action: none; opacity: .8;
  transition: left 260ms var(--ease-drawer), background-color 150ms var(--ease-out),
    color 150ms var(--ease-out), border-color 150ms, opacity 150ms, width 150ms var(--ease-out);
}
body:not(.zt-open) .ztp-grip { cursor: pointer; }
.ztp-grip::before {   /* 드래그 경계 라이트 — 모서리를 따라 위아래로 흐르는 얇은 민트 선 */
  content: ""; position: absolute; left: 50%; top: -46vh; bottom: -46vh; width: 2px;
  transform: translateX(-50%); border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(46, 229, 157, .55) 22%, rgba(46, 229, 157, .55) 78%, transparent);
  transition: opacity 200ms var(--ease-out);
}
.ztp-grip:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(46, 229, 157, .38), 0 2px 10px rgba(0, 0, 0, .35); }
body.zt-open .ztp-grip { left: calc(56px + var(--ztw, 420px)); }
/* 채팅 서랍이 열려도 손잡이는 살아 있어야 함 (오너 2026-07-27 "다른 아이콘 누르면 안 보임")
   — 서랍(z:60) 위로 올려 그 모서리에 붙이고, 누르면 그 서랍을 닫는다 */
body.drawer-open .ztp-grip { left: calc(56px + 420px); z-index: 61; }
.ztp-grip svg { width: 14px; height: 14px; transition: transform 260ms var(--ease-drawer); }
body:not(.zt-open) .ztp-grip svg { transform: rotate(180deg); }
@media (hover: hover) {
  .ztp-grip:hover { opacity: 1; width: 24px; background: var(--s3); color: var(--ink-2); border-color: var(--hair-2); }
  .ztp-grip:hover::before { opacity: .45; }
}
.ztp-grip.zt-drag {
  opacity: 1; width: 24px; background: var(--s4); color: var(--mint);
  border-color: rgba(46, 229, 157, .42); transition: none;
}
.ztp-grip.zt-drag::before { opacity: .85; transition: none; }
body.zt-resizing .ztp, body.zt-resizing .stage .composer { transition: none; }
@media (max-width: 900px) { .ztp-grip { display: none; } }
.ztp-ch { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; flex: 0 0 auto; scrollbar-width: none; }
.ztp-ch::-webkit-scrollbar { display: none; }
.ztp-ch button { flex: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hair); font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: background-color 140ms var(--ease-out), color 140ms, border-color 140ms; }
.ztp-ch button.on { background: #ececec; color: #0b0c0d; border-color: #ececec; }
/* 목록 스크롤 (오너 2026-07-27 "아래까지 안 내려감"): #ztNews가 flex 컨테이너가 아니라
   .ztp-l이 높이를 못 받아 넘치는 부분이 잘려 있었음 */
#ztNews { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#ztNews[hidden] { display: none; }
.ztp-l { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 18px; }
.zt-r {
  padding: 13px 12px 14px; border-radius: 11px; cursor: pointer; position: relative;
  transition: background-color 130ms var(--ease-out);
  animation: ztIn 300ms var(--ease-out) both;
}
.zt-r::before {   /* 호버 시 좌측 카테고리 컬러 힌트 */
  content: ""; position: absolute; left: 2px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: var(--accent, var(--ink-4)); opacity: 0; transition: opacity 150ms var(--ease-out);
}
.zt-r + .zt-r { border-top: 1px solid rgba(255, 255, 255, .05); }   /* 구획선은 존재만 알릴 만큼 얇게 */
.zt-rm { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 11px; letter-spacing: .005em; }
.zt-cat { color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; font-weight: 550; font-size: 11.5px; }
.zt-cd { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.zt-ago { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 11.5px; }
@keyframes ztblink { 50% { opacity: .25; } }
.zt-ti { font-size: 14px; line-height: 1.5; font-weight: 600; color: #eef0f2; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 위치 = 흰 글씨로 또렷하게 (오너 2026-07-27 "위치도 흰 글씨로, 잘 안 보인다" — 도메인 뺀 자리의 주인공) */
.zt-ci { margin-top: 7px; font-size: 12px; font-weight: 550; color: var(--ink-2); display: flex; align-items: center; gap: 5px; min-width: 0; }
.zt-pin { width: 12px; height: 12px; flex: none; stroke: var(--ink-3); }   /* 이모지 📍 대체 — 크기 고정 필수 */
.zt-ci-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ztp-em { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--ink-4); line-height: 1.6; }
/* 로딩 스켈레톤 — 데이터 도착 전 빈 패널 대신 (대기업급 체감) */
.zt-sk { padding: 10px 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.zt-sk i { display: block; height: 15px; margin: 7px 8px; border-radius: 5px;
  background: linear-gradient(90deg, var(--s3) 25%, var(--s4) 37%, var(--s3) 63%); background-size: 400% 100%;
  animation: ztShim 1.5s linear infinite; }
@keyframes ztShim { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (hover: hover) {
  .zt-k:hover { background: var(--s2); transform: translateX(1px); }
  .zt-r:hover { background: var(--s2); }
  .zt-r:hover::before { opacity: .9; }
  .ztp-x:hover { background: var(--s2); color: var(--ink-2); }
  .ztp-ch button:hover { border-color: var(--hair-2); color: var(--ink-2); }
}
.ztp-close { display: none; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; color: var(--ink-3); margin-left: 4px; }
.ztp-close svg { width: 16px; height: 16px; }
.mb-trend { position: relative; }
.mb-trend .zt-dot { top: 4px; right: 4px; border-color: var(--canvas); }

/* ── 모바일 (오너 2026-07-27 "모바일 최적화"): 풀스크린 시트 + 상단바 진입 + 자체 닫기 버튼.
   레일이 없는 폭이라 트렌드로 들어가고 나올 통로를 상단바·헤더 X가 담당 ── */
@media (max-width: 900px) {
  .ztp {
    left: 0; width: 100%; z-index: 61; border-right: none;
    top: 0; height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateY(-100%); transition: transform 300ms var(--ease-drawer);
  }
  body.zt-open .ztp { transform: none; }
  body.drawer-open .ztp { transform: translateY(-100%); }   /* 모바일 시트도 동일 봉인 */
  .ztp-close { display: flex; }
  .ztp-h { padding: 12px 14px 11px; }
  .ztp-t { font-size: 16px; }
  /* 모바일 압축 (오너 2026-07-28 스샷 "랭킹 줄이고 뉴스 목록 잘 보이게"): 랭킹 행 피치 ~36→30px,
     검색 42→38, 목록 제목 3줄→2줄 클램프 — 첫 화면에 기사 1.5개 → 3개대 */
  .ztp-kw { padding: 7px 8px 8px; gap: 0 6px; }
  .zt-k { padding: 5px 6px; gap: 6px; }
  .zt-kn { font-size: 13px; }
  .zt-kr { font-size: 11.5px; min-width: 13px; }
  .zt-mv-n { font-size: 8px; padding: 2px 4px; }
  .zt-fire { width: 12px; height: 12px; }
  .ztp-q { height: 38px; }
  .ztp-q input { font-size: 16px; }        /* iOS 자동 확대 방지 = 16px 하한 */
  .zt-r { padding: 10px 11px 11px; }
  .zt-rm { margin-bottom: 5px; }
  .zt-ti { font-size: 13.5px; -webkit-line-clamp: 2; }
  .zt-ci { margin-top: 5px; }
  .ztp-ch button { padding: 6px 11px; font-size: 12px; }
  .zt-go { padding: 10px 12px; font-size: 13px; }
}

/* 새 채팅 = 줌아웃되며 입력창이 멀어짐 → 초록 아우라로 "여기가 프롬프트" 안내 (오너 2026-07-27 "간지나게") */
@keyframes ztAura {
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.35), 0 0 0 0 rgba(46,229,157,.5), 0 0 26px 3px rgba(46,229,157,.34); }
  70%  { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.35), 0 0 0 15px rgba(46,229,157,0), 0 0 34px 7px rgba(46,229,157,.16); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.35), 0 0 0 0 rgba(46,229,157,0), 0 0 0 0 rgba(46,229,157,0); }
}
.composer.zt-aura { animation: ztAura 1500ms var(--ease-out) 2; border-color: rgba(46, 229, 157, .55); }
@media (prefers-reduced-motion: reduce) { .composer.zt-aura { animation: none; border-color: rgba(46, 229, 157, .55); } }