/* signals.css — 「신시장 신호」 화면. 색·글자는 mi-base.css 토큰만 쓴다(CLAUDE.md). */

.pg-signals .lead { max-width: 900px }

/* 경로 알약 — new 와 fast-follow 를 한눈에 가른다 */
.pg-signals .rt {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2);
}
.pg-signals .rt.new { border-color: var(--ink); color: var(--ink); }
.pg-signals .rt.ff { background: var(--bg-2, #f3f4f6); }

/* 자리표시라는 사실은 눈에 띄게 둔다 — 실측인 척하지 않는다 */
.pg-signals .warn-src {
  margin: 12px 0 16px; padding: 11px 14px; line-height: 1.65; font-size: 12.5px;
  color: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: 7px; background: var(--bg-2, #fafafa);
}

.pg-signals .bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px }
.pg-signals .bar .sp { flex: 1 }
.pg-signals .chip {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); color: var(--ink-2); background: #fff; user-select: none;
}
.pg-signals .chip:hover { border-color: var(--ink-3) }
.pg-signals .chip.on { background: var(--ink); border-color: var(--ink); color: #fff }
.pg-signals .bar select,
.pg-signals .bar input { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff }
.pg-signals .bar input { min-width: 220px }

.pg-signals .tbl.sig td { vertical-align: top; line-height: 1.6 }
.pg-signals .tbl.sig .c-f { white-space: nowrap }
.pg-signals .tbl.sig .cat { font-size: 12px; font-weight: 700; color: var(--ink-2) }
.pg-signals .tbl.sig .t { font-weight: 700; margin-bottom: 4px }
.pg-signals .tbl.sig .ref { font-size: 11.5px; color: var(--ink-3); margin-top: 3px }
.pg-signals .tbl.sig .ref.note { font-style: italic }
.pg-signals .tbl.sig .age { font-size: 11px; color: var(--ink-3); margin-top: 3px }
.pg-signals .tbl.sig .c-w { max-width: 380px }
.pg-signals .tbl.sig .c-a { min-width: 250px }

/* 사용자 피드백 단추 — 청(기회) · 적(아니다) · 앰버(보관).
   보관은 판정이 아니라 「나중에 쓰겠다」는 표시라 글자 없이 책갈피 아이콘 하나로 둔다. */
.pg-signals .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.pg-signals .sg {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 6px 11px; border-radius: 6px; background: #fff;
  border: 1px solid currentColor; color: var(--ink-3);
}
.pg-signals .sg.good { color: var(--opp) }
.pg-signals .sg.bad { color: var(--crit) }
.pg-signals .sg.keep { color: var(--keep); padding: 6px 8px; display: inline-flex; align-items: center }
.pg-signals .sg.good:hover { background: var(--opp); color: #fff; border-color: var(--opp) }
.pg-signals .sg.bad:hover { background: var(--crit); color: #fff; border-color: var(--crit) }
.pg-signals .sg.keep:hover { background: var(--keep); color: #fff; border-color: var(--keep) }
.pg-signals .sg:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }

.pg-signals .said { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--ink-2) }
.pg-signals .said.bad { color: var(--crit, #b42318) }
.pg-signals .said.ask { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.pg-signals .said .q { font-weight: 700; color: var(--ink-2) }
.pg-signals .said .q i { font-weight: 400; font-style: normal; color: var(--ink-3) }
.pg-signals .said .rs { display: flex; gap: 5px; flex-wrap: wrap }
.pg-signals .said .rs button {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2);
}
.pg-signals .said .rs button.on { background: var(--ink); border-color: var(--ink); color: #fff }
.pg-signals .said .rt-note { font: inherit; font-size: 12px; width: 100%; resize: vertical;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px }
.pg-signals .said .rs-send {
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 5px 12px;
  border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fff;
}

.pg-signals .foot { margin-top: 14px; color: var(--ink-3); line-height: 1.7 }