/* 관측소 — 바탕. 2026-09-22 처음부터 다시 지음. DESIGN.md(Cohere) 를 한국어 B2C 지도 앱에 맞춰 옮겼다.

   ┌ 이 파일이 하는 일 ─────────────────────────────────────────────────────┐
   │ 토큰(색·글·간격·반지름·그림자), 리셋, 글의 역할, 모두가 같이 쓰는 낱개  │
   │ (단추·칩·입력·스위치·세그먼트·꼬리표·빈 화면·뼈대). 배치는 shell.css,  │
   │ 화면별 부품은 css/*.css 가 맡는다. 새 색·새 반지름·새 그림자는 여기에만  │
   │ 더한다 — 다른 파일은 var() 만 쓴다.                                     │
   └────────────────────────────────────────────────────────────────────────┘

   말투.
   - 흰 캔버스 위에 먹(#17171c) 하나. 채운 단추·켜진 것·내 말이 먹이다.
   - 돌빛(#eeece7)은 유일한 조용한 채움 — 입력의 바탕, 눌린 면, 값 타일, 세그먼트 홈.
   - 초록은 브랜드. 깊은 초록(#003c33)은 AI 의 목소리 — AI 꼬리표·AI 탭·한 줄 판단·묻기 단추·진행 알림.
     지도의 값 램프(--map-seq-*)는 그보다 옅은 초록 계열이라 겹치지 않는다.
   - 코럴(#ff7759)은 찜, 그리고 지도의 오름(--rise-map). 파랑(#1863dc)은 링크·초점에만.
   - 글·표의 오름·내림은 --rise/--fall(빨강·파랑). 지도의 변동은 --rise-map/--fall-map(코럴·파랑), 수준은 돌빛→초록.
     규제·조심은 주황 옅은 면, 나은 점은 초록 옅은 면.
   - 그림자는 떠 있는 것(팝오버·창)에만. 카드는 1px 선이거나 돌빛 한 겹. 굵기는 400·500 둘.
   - 반지름 다섯 단: 4 견본 · 8 입력·작은 덩이 · 16 카드·팝오버 · 22 창·지도 위 판 · 알약 단추·칩·꼬리표. */

:root {
  /* ── 색 ── */
  --bg: #ffffff;
  --surface: #ffffff;
  --stone: #eeece7;
  --stone-2: #e4e1da;
  --stone-3: #f6f5f1;
  --ink: #212121;
  --ink-2: #616161;
  --ink-3: #75758a;
  --ink-4: #93939f;
  --line: #e5e7eb;
  --line-2: #d9d9dd;
  --line-soft: #f0f0f2;

  --primary: #17171c;
  --primary-hover: #2a2a31;
  --on-primary: #ffffff;

  --green: #003c33;
  --green-hover: #002b25;
  --green-wash: #edfce9;
  --green-ink: #0b5c4f;

  --coral: #ff7759;
  --coral-wash: #ffe4dc;
  --coral-ink: #7a2e1c;

  --blue: #1863dc;
  --blue-hover: #124ba8;
  --blue-wash: #f1f5ff;
  --focus: #4c6ee6;

  --rise: #c4382c;
  --rise-wash: #fdeae7;
  --fall: #1f54c2;
  --fall-wash: #e9effc;
  --rise-map: #ff7759;
  --fall-map: #4d7fe6;
  /* 지도 — 판과 같은 종이 위에(2026-09-22). map.js 는 JS 라 같은 값을 RGB 로 적는다 */
  --map-seq-0: #f4f3ee; /* 순차 램프 — 돌빛에서 깊은 초록으로. 값·거래·전세가율·미분양 */
  --map-seq-1: #dfe6dd;
  --map-seq-2: #a9c3b3;
  --map-seq-3: #5f9280;
  --map-seq-4: #1f5c4d;
  --map-bg: #f7f6f2; /* 베이스맵 바탕·물·길·공원 */
  --map-water: #e3e8ea;
  --map-road: #ffffff;
  --map-park: #e6ece3;
  --teal: #0fbcb0;
  /* 차트 비교 — 계열 여덟 색. 먹·초록·코럴과 겹치지 않는 채도 낮은 여덟(2026-09-27) */
  --c0: #c4382c;
  --c1: #1f54c2;
  --c2: #1f5c4d;
  --c3: #b8860b;
  --c4: #7b3fa0;
  --c5: #0fbcb0;
  --c6: #d2691e;
  --c7: #5c5c6b;

  --warn-wash: #fbe9dc;
  --warn-ink: #8a3a25;
  --good: #0b5c4f;
  --good-wash: #e3f4e6;

  /* ── 반지름 ── */
  /* 2026-09-22 "과하게 둥글다" — 카드 10, 창·판 14 로 낮췄다. 이름은 그대로(척도의 자리) */
  --r-4: 4px;
  --r-8: 8px;
  --r-16: 10px;
  --r-22: 14px;
  --r-pill: 9999px;

  /* ── 간격 (DESIGN.md spacing) ── */
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;

  /* ── 글 ── */
  --font:
    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;

  /* 역할 토큰(2026-09-22 §5) — 큰 수치 카드 36, 본문 15/1.55, 라벨 12.5 슬레이트 */
  --fs-hero: 36px;
  --fs-body: 15px;
  --lh-body: 1.55;
  --fs-label: 12.5px;

  /* ── 높이 ── */
  --sh-pop: 0 0 0 1px rgba(23, 23, 28, 0.06), 0 16px 40px -12px rgba(23, 23, 28, 0.18);
  --sh-float: 0 0 0 1px rgba(23, 23, 28, 0.06), 0 2px 8px rgba(23, 23, 28, 0.06);
  --sh-modal: 0 24px 64px -16px rgba(23, 23, 28, 0.28);
  --sh-panel: 0 0 0 1px rgba(23, 23, 28, 0.06), 0 12px 40px -16px rgba(23, 23, 28, 0.16);

  /* ── 움직임 ── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.18s;

  /* ── 틀 ── */
  --top-h: 60px;
  --top-h-m: 56px;
  --panel-w: clamp(400px, 37%, 600px);
  --dock-h: calc(60px + env(safe-area-inset-bottom));
  --timeline-h: 106px; /* 넓은 화면의 시간줄 높이 — 이름표+흐름 선+한 줄. 범례와 지도 단추가 이 위에 앉는다 */
  --peek-h: 44dvh;

  /* 옛 이름 — 지도 JS 가 만드는 인라인 스타일과 다른 파일이 잠깐 쓸 수 있다 */
  --panel: var(--surface);
  --night: var(--primary);
  --link: var(--blue);
}

/* ── 리셋 ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  height: 100%;
  margin: 0;
}
html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
}
p {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: 500;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
svg {
  display: inline-block;
  vertical-align: middle;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
::selection {
  background: var(--stone);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 글의 역할 ────────────────────────────────────────────────────────────
   display 40/1.05/-0.025em 500 — 지역 이름, 단지 이름(창)
   title   24/1.2/-0.02em  500 — 판·창의 제목, 첫 카드 머리
   heading 17/1.4/-0.01em  500 — 절 제목
   body    15/1.55          400 — 기본
   read    15/1.65          400 — 답·리포트처럼 오래 읽는 글
   caption 13/1.5           400 — 보조 설명 (ink-2)
   label   12.5/1.4         400 — 작은 보조 (ink-3)
   mono    11.5/1.4 0.02em      — 시점·단위·범위·기술 표식 (ink-3) */
.t-display {
  font-size: var(--fs-40);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.t-title {
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.t-heading {
  font-size: var(--fs-17);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.t-caption {
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--ink-2);
}
.t-micro {
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--ink-3);
}
.t-mono,
.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* 값의 방향·색 — JS 가 up/down/dim/num/n/c 를 그대로 뿜는다 */
.up,
.rise {
  color: var(--rise);
}
.down,
.fall {
  color: var(--fall);
}
.dim {
  color: var(--ink-3);
}
.good {
  color: var(--good);
}
.bad {
  color: var(--rise);
}
.num,
td.n,
th.n {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
td.c,
th.c {
  text-align: center;
}

/* ── 단추 ─────────────────────────────────────────────────────────────────
   .btn        흰 알약, 1px 선. 보조 행동.
   .btn-send   먹 알약. 한 화면에 하나.
   .btn-green  초록 알약 — AI 에게 묻는 것만.
   .btn-ghost  선 없는 글자 단추.
   .btn-sm     32px, .btn-lg 46px. 기본 40px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  height: 40px;
  padding: 0 var(--s-20);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--dur),
    border-color var(--dur),
    color var(--dur),
    transform 0.1s;
}
.btn:hover {
  border-color: var(--ink);
}
.btn:active {
  transform: scale(0.98);
}
.btn:disabled {
  background: var(--stone);
  border-color: var(--stone);
  color: var(--ink-4);
  cursor: progress;
  transform: none;
}
.btn-send {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn-send:hover,
.btn-send:active {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn-green {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.btn-green:hover,
.btn-green:active {
  background: var(--green-hover);
  border-color: var(--green-hover);
}
.btn-ghost {
  border-color: transparent;
  background: none;
  color: var(--ink-2);
}
.btn-ghost:hover {
  border-color: transparent;
  background: var(--stone);
  color: var(--ink);
}
.btn-sm {
  height: 32px;
  padding: 0 var(--s-12);
  font-size: var(--fs-13);
}
.btn-lg {
  height: 46px;
  padding: 0 var(--s-24);
  font-size: var(--fs-15);
}
.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* 글자 링크 단추 — 밑줄, 파랑 */
.why-link,
.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur);
  cursor: pointer;
}
.why-link:hover,
.link:hover {
  text-decoration-color: currentColor;
}

/* 동그란 아이콘 단추 — 닫기·정보 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--stone);
  color: var(--ink);
  transition:
    background var(--dur),
    color var(--dur);
}
.icon-btn:hover {
  background: var(--primary);
  color: #fff;
}
.icon-btn svg {
  width: 14px;
  height: 14px;
}

/* ── 칩 — 눌러서 무엇을 하는 알약. 질문·프리셋·평형 ────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}
.chip,
.preset {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  transition:
    border-color var(--dur),
    color var(--dur),
    background var(--dur);
}
.chip:hover,
.preset:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.chip.is-on,
.preset.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}

/* ── 꼬리표 — 상태를 말하는 작은 알약. 누르지 않는다 ───────────────────────
   기본 돌빛. .is-warn 주황(규제·조심), .is-good 초록(나은 점), .is-rise/.is-fall 값의 색 */
.tag,
.phase,
.fit,
.cx-tag,
.rule-tag,
.hc-mark,
.cm-tier {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--stone);
  color: var(--ink-2);
  font-size: var(--fs-11);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: 1px;
}
.tag.is-warn,
.cx-tag,
.rule-tag,
.fit-near {
  background: var(--warn-wash);
  color: var(--warn-ink);
}
.tag.is-good,
.fit-in {
  background: var(--good-wash);
  color: var(--good);
}
.fit-over,
.cx-tag.is-soft,
.rule-tag.is-plain {
  background: var(--stone);
  color: var(--ink-2);
}
.cx-tag.is-warn {
  background: var(--warn-wash);
  color: var(--warn-ink);
}
.phase.p-rise {
  background: var(--rise-wash);
  color: var(--rise);
}
.phase.p-fall {
  background: var(--fall-wash);
  color: var(--fall);
}
.phase.p-rec {
  background: var(--warn-wash);
  color: var(--warn-ink);
}
.cm-tier {
  background: none;
  border: 1px solid var(--line-2);
}

/* 수 배지 — 찜 수 같은 것. 코럴 */
.badge,
.tab-n,
.dock-n {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-11);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  font-style: normal;
}

/* ── 입력 ─────────────────────────────────────────────────────────────────
   글 입력은 8px 모서리, 1px 선. 초점이면 먹 선. 검색·질문 칸처럼 넓은 것은 돌빛 채움 알약(shell) */
.input,
input[type='text'],
input[type='search'],
input[type='number'],
input[type='password'],
textarea {
  height: 42px;
  padding: 0 var(--s-12);
  border: 1px solid var(--line-2);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-14);
  transition:
    border-color var(--dur),
    background var(--dur);
}
textarea {
  height: auto;
  padding: var(--s-8) var(--s-12);
  line-height: 1.5;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}
input:hover,
textarea:hover {
  border-color: var(--ink-4);
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--ink);
}
input[type='search']::-webkit-search-cancel-button {
  appearance: none;
}
input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
input[type='checkbox'],
input[type='radio'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

/* 셀렉트 — 화살표는 우리 것 */
select {
  appearance: none;
  height: 42px;
  padding: 0 32px 0 var(--s-12);
  border: 1px solid var(--line-2);
  border-radius: var(--r-8);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2375758a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
}
select:focus {
  outline: none;
  border-color: var(--ink);
}

/* 이름표 달린 칸 — [정렬 | 거래 많은 순 ▾]. 셀렉트·숫자를 안에 품는다 */
.field {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  height: 40px;
  padding: 0 var(--s-4) 0 var(--s-12);
  border: 1px solid var(--line-2);
  border-radius: var(--r-8);
  background: var(--surface);
  transition: border-color var(--dur);
}
.field:hover {
  border-color: var(--ink-4);
}
.field:focus-within {
  border-color: var(--ink);
}
.field-label {
  flex: none;
  font-size: var(--fs-12);
  color: var(--ink-3);
  white-space: nowrap;
}
.field select,
.field input {
  height: 100%;
  border: 0;
  background-color: transparent;
  padding-left: 0;
}
.field select:focus,
.field input:focus {
  border: 0;
}
.field-num {
  width: 72px;
  text-align: right;
}
.field-unit {
  padding-right: var(--s-8);
  font-size: var(--fs-12);
  color: var(--ink-3);
  white-space: nowrap;
}

/* 스위치 — 30×18 트랙, 켜지면 먹 */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 var(--s-12) 0 var(--s-8);
  border: 1px solid transparent;
  border-radius: var(--r-8);
  background: none;
  color: var(--ink-2);
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    color var(--dur),
    background var(--dur);
}
.toggle:hover {
  background: var(--stone-3);
  color: var(--ink);
}
.toggle:has(input:checked) {
  color: var(--ink);
}
.toggle input {
  appearance: none;
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line-2);
  cursor: pointer;
  transition: background var(--dur);
}
.toggle input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 23, 28, 0.25);
  transition: transform var(--dur) var(--ease);
}
.toggle input:checked {
  background: var(--primary);
}
.toggle input:checked::after {
  transform: translateX(12px);
}

/* 체크 한 줄 */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 36px;
  font-size: var(--fs-13);
  color: var(--ink);
  cursor: pointer;
}

/* 세그먼트 — 돌빛 홈 안의 흰 알약 */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-8);
  background: var(--stone);
}
.seg-btn {
  border: 0;
  border-radius: 6px;
  padding: 6px 14px;
  background: none;
  color: var(--ink-2);
  font-size: var(--fs-13);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background var(--dur),
    color var(--dur),
    box-shadow var(--dur);
}
.seg-btn:hover {
  color: var(--ink);
}
.seg-btn.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(23, 23, 28, 0.08);
}

/* ── 카드 — 흰 판 1px 선(.card) 또는 돌빛 한 겹(.card-stone). 그림자 없음 ── */
.card,
.card-line {
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: var(--surface);
  padding: var(--s-20) var(--s-24);
}
.card-stone {
  border: 0;
  border-radius: var(--r-16);
  background: var(--stone);
  padding: var(--s-20) var(--s-24);
}

/* 값 타일 — 이름표(모노, ink-3) 위, 값(500, -0.02em) 아래. 돌빛 */
.tile {
  padding: 14px 16px 13px;
  border-radius: var(--r-16);
  background: var(--stone);
}
.tile b,
.tile .k {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.tile span,
.tile .v {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tile small {
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--ink-3);
}

/* ── 표 — 선으로 나눈 줄. 머리는 ink-3 12px, 칸은 13px, 값은 오른쪽 ─────── */
.tbl,
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.tbl th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  font-size: var(--fs-12);
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
}
.tbl td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.tbl tr:last-child td {
  border-bottom: 0;
}

/* ── 비었을 때·기다릴 때·못했을 때 ─────────────────────────────────────── */
.empty,
.panel-empty {
  margin: var(--s-24) 0;
  padding: var(--s-32) 28px;
  border-radius: var(--r-22);
  background: var(--stone);
}
.empty > b {
  display: block;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.empty p,
.panel-empty p {
  margin: 8px 0 16px;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--ink-2);
}
.empty p:last-child,
.panel-empty p:last-child {
  margin-bottom: 0;
}
.panel-empty p:first-child {
  margin-top: 0;
  font-size: var(--fs-15);
  color: var(--ink);
}
.gmeta {
  padding: 8px 0 4px;
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.gerr {
  padding: 10px 0;
  font-size: var(--fs-13);
  color: var(--rise);
}
.skel {
  height: 14px;
  margin-bottom: 10px;
  border-radius: var(--r-4);
  background: linear-gradient(90deg, var(--stone-3) 0%, var(--stone) 50%, var(--stone-3) 100%);
  background-size: 200% 100%;
  animation: skel 1.2s ease-in-out infinite;
}
.skel.short {
  width: 60%;
}
@keyframes skel {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.spin,
.cm-spin {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── 접는 줄 — <details> 의 summary. 작은 꺾쇠 하나 ─────────────────────── */
.fold > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--ink-2);
  padding: 4px 0;
}
.fold > summary::-webkit-details-marker {
  display: none;
}
.fold > summary::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 2px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur);
}
.fold[open] > summary::before {
  transform: rotate(45deg);
}

/* ── 팝오버·창의 재질 ─────────────────────────────────────────────────────
   .pop   흰 판 16px, 떠 있는 그림자. 검색 결과·대화 목록·답하는 방식.
   .modal <dialog> 22px, 큰 그림자, 뒤는 먹 40% 흐림. */
.pop {
  border: 0;
  border-radius: var(--r-16);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-pop);
}
.pop-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-8);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pop-item:hover,
.pop-item:focus-visible,
.pop-item.is-on {
  background: var(--stone);
  outline: none;
}

dialog.modal {
  padding: 0;
  border: 0;
  border-radius: var(--r-22);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-modal);
  overflow: hidden;
}
dialog.modal[open] {
  animation: modal-in 0.22s var(--ease);
}
dialog.modal::backdrop {
  background: rgba(23, 23, 28, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 가로로 굴리는 표의 틀 — 세로로 굴러가는 판 안에서 표만 옆으로 */
.scroll-x,
.cm-scroll,
.cmp-scroll,
.md-scroll,
.mth-table-wrap,
.gscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}