/* keyword.css — 키워드 조회
 *
 * 근거: plan-keyword-tool.md · 팔레트/타이포는 common.css 의 :root 가 진실
 *
 * 🔴 하드코딩 색 금지 — 전부 토큰(:root)을 쓴다.
 */

/* 🔴 **맨 위에 둔다.** 없으면 아래 display 규칙이 [hidden] 을 이겨서
   숨긴 요소가 그대로 보인다 (세 번 재발한 함정). */
[hidden] { display: none !important; }

.kw-app {
  max-width: 960px;
}

/* ── 탭 ────────────────────────────────── */
.kw-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: var(--spacing-lg);
}

.kw-tab {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--ink-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.kw-tab:hover { color: var(--ink-900); }

.kw-tab.is-active {
  color: var(--ink-900);
  border-bottom-color: var(--brand-500);
}

/* 안내 밑에 붙는 로그인 유도 버튼 — 체험 소진이 «막힘»이 아니라 «다음 단계»로 읽히게 한다 */
.kw-login-cta { margin-top: var(--spacing-md); }

.kw-panel.is-active { display: block; }

/* ── 입력 ──────────────────────────────── */
/* 🔴 **좌측정렬을 유지한다.** 이것만 가운데로 보내면 아래 결과·표와 축이
   어긋나 페이지가 둘로 갈린 것처럼 보인다. 대신 ① 높이를 키우고
   ② 입력칸을 절반으로 줄여 **[검색] 버튼까지의 동선**을 짧게 만든다. */
.kw-form {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  max-width: 480px;               /* 🔴 동선 단축의 핵심 — 폼 자체를 좁힌다 */
}

/* 🔴 키워드는 길어야 열 글자 남짓이라 480px 이면 넉넉하다. 폼을 안 좁히고
   입력칸만 줄이면 버튼이 오른쪽 끝에 남아 동선이 그대로다. */
.kw-form .kw-input {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--font-base);
}

/* 🔴 **가로 패딩을 덧칠하지 않는다.** 예전엔 여기서 `--spacing-xl`(2rem)을
   좌우에 얹었는데, `.kw-btn` 이 이미 `--spacing-lg` 를 갖고 있어 합이 64px 이
   됐다 — 높이까지 키운 탓에 버튼이 **검은 덩어리**로 보였다.
   폭은 `.kw-btn` 기본값에 맡기고 여기선 **높이만** 입력칸과 맞춘다. */
.kw-form .kw-btn {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--font-base);
}

/* 카테고리 탭의 3단 셀렉트는 좁히지 않는다 — 경로가 길어 480px 이면 잘린다 */
.kw-form-category { max-width: none; }

/* 🔴 모바일에서 줄바꿈되게 — 고정 px 폭을 쓰지 않는다 */
.kw-form-category { flex-wrap: wrap; }

.kw-input,
.kw-select {
  flex: 1 1 180px;
  min-width: 0;                   /* 🔴 없으면 flex 자식이 안 줄어 가로 스크롤이 생긴다 */
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-base);
  color: var(--ink-900);
}

.kw-input:focus,
.kw-select:focus {
  outline: none;
  border-color: var(--brand-500);
}

.kw-select:disabled {
  background: var(--ink-100);
  color: var(--ink-400);
  cursor: not-allowed;
}

.kw-btn {
  flex: 0 0 auto;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}

.kw-btn-primary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--bg-surface);
}

.kw-btn-primary:hover:not(:disabled) { background: var(--ink-800); }

.kw-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kw-note {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-sm);
  color: var(--ink-500);
}

/* ── 결과 ──────────────────────────────── */
.kw-block { margin-bottom: var(--spacing-xl); }

.kw-block-title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--ink-900);
}

.kw-block-sub {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-sm);
  color: var(--ink-500);
}

/* ── 표 위 바: 좁혀 찾기 + 건수 ──
   🔴 이 입력은 **서버를 부르지 않는다**(쿼터 0). 받아온 행을 좁힐 뿐이다 —
      새 키워드를 찾는 위 검색창과 성격이 다르므로 생김새도 작게 둔다. */
.kw-tablebar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.kw-filter {
  flex: 1 1 160px;
  min-width: 0;               /* 🔴 없으면 flex 자식이 안 줄어 가로 스크롤이 생긴다 */
  max-width: 260px;
  padding: 6px var(--spacing-sm);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--font-sm);
  color: var(--ink-900);
}

.kw-filter:focus {
  outline: none;
  border-color: var(--brand-500);
}

/* ── 검색량 하한 칩 ──
   🔴 새 색을 만들지 않는다. 활성 칩은 `.kw-btn-primary`(ink-900 바탕)와 같은 꼴,
      비활성은 `.kw-btn`(surface + ink-300 테두리)과 같은 꼴이다 — 도팡의 버튼
      언어를 그대로 쓰면 «처음 보는 위젯»이 되지 않는다.
   🔴 판다랭크처럼 초록을 쓰지 않는다. 팔레트는 `common.css` 의 `:root` 가 진실이고
      brand-500 은 주황이다. */
.kw-chips {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.kw-chips-label {
  font-size: var(--font-xs);
  color: var(--ink-500);
  margin-right: 2px;
}

.kw-chip {
  padding: 4px var(--spacing-sm);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kw-chip:hover { border-color: var(--ink-400); color: var(--ink-900); }

.kw-chip.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--bg-surface);
}

.kw-chip:focus-visible,
.kw-chip-reset:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* 직접 입력(구간) — 🔴 프리셋보다 **작고 흐리게**. 같은 크기로 두면 «둘 중
   뭘 쓰지»가 된다. 프리셋이 주(主)고 이건 예외용이다. */
.kw-vol-range {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* 물결표 — 두 칸이 «한 쌍»임을 말한다 */
.kw-vol-sep {
  font-size: var(--font-xs);
  color: var(--ink-400);
}

.kw-vol-input {
  width: 62px;
  padding: 4px var(--spacing-xs);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: var(--font-xs);
  color: var(--ink-900);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.kw-vol-input:focus {
  outline: none;
  border-color: var(--brand-500);
}

/* 프리셋에 없는 값을 쓰는 중이면 칩처럼 켜 보인다 — 어디가 먹고 있는지 알아야 한다 */
.kw-vol-input.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--bg-surface);
  font-weight: 700;
}

/* 🔴 숫자 스피너를 지운다 — 68px 안에서 화살표가 자리를 다 먹는다 */
.kw-vol-input::-webkit-outer-spin-button,
.kw-vol-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kw-vol-input { -moz-appearance: textfield; appearance: textfield; }

/* 초기화 — 🔴 칩이 아니라 «되돌리기»라 테두리를 주지 않는다(같은 줄의 선택지로
   보이면 안 된다). 아이콘만 두고 title 로 뜻을 말한다. */
.kw-chip-reset {
  padding: 4px 6px;
  border: none;
  background: none;
  font-size: var(--font-base);
  line-height: 1;
  color: var(--ink-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.kw-chip-reset:hover { color: var(--ink-900); background: var(--ink-100); }

.kw-tablebar-count {
  font-size: var(--font-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  margin-left: auto;          /* 건수는 오른쪽 끝에 — 표의 오른쪽 열과 줄이 맞는다 */
}

/* 필터로 0건이 됐을 때 — 🔴 빈 표로 두면 조회가 실패한 줄 안다 */
.kw-empty {
  text-align: center !important;
  padding: var(--spacing-lg) !important;
  color: var(--ink-500);
  white-space: normal !important;
}

/* ── 더보기 ──
   🔴 표 **밑**에 둔다. 표 안(tfoot·tr)에 넣으면 정렬할 때 행처럼 섞인다. */
.kw-more {
  display: block;
  width: 100%;
  margin-top: var(--spacing-sm);
}

/* 실패했을 때 — 🔴 버튼만 죽이면 이유를 모른다. 서버 메시지를 그 자리에 남긴다 */
.kw-more-failed {
  color: var(--ink-500);
  cursor: default;
  font-weight: 400;
}

/* 🔴 표는 좁은 화면에서 넘칠 수 있다 — 자기 컨테이너 안에서만 가로 스크롤.
   본문 전체가 가로로 흐르면 안 된다. */
.kw-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}

.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.kw-table th,
.kw-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-100);
}

.kw-table th {
  background: var(--ink-50);
  font-weight: 700;
  color: var(--ink-600);
  font-size: var(--font-xs);
  /* 🔴 <th> 의 패딩을 지우고 버튼이 칸을 꽉 채우게 한다 — 안 그러면 글자에
     정확히 대야만 정렬된다(칸의 빈 곳을 눌러도 안 먹는다). */
  padding: 0;
}

/* 🔴 정렬 손잡이는 **버튼**이다. <th> 에 onclick 을 걸면 키보드로 닿지 않는다.
   버튼이라 Tab 으로 가고 Enter 로 눌린다. */
.kw-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* 숫자 열은 오른쪽 정렬이라 손잡이도 오른쪽에 붙어야 머리글과 값이 한 줄로 읽힌다 */
  justify-content: flex-end;
}

.kw-table th.kw-col-kw .kw-sort,
.kw-table th.kw-col-cat .kw-sort { justify-content: flex-start; }

.kw-sort:hover { background: var(--ink-100); color: var(--ink-900); }

.kw-sort:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

/* 🔴 화살표 자리를 **늘 비워 둔다**(min-width). 정렬할 때만 자리가 생기면
   머리글 폭이 흔들려 표 전체가 덜컥거린다. */
/* 🔴 다중 정렬이면 «▼2» 처럼 순번이 붙어 두 글자가 된다 — 자리를 미리 잡아
   두지 않으면 정렬할 때마다 머리글 폭이 흔들린다. */
.kw-sort-ind {
  min-width: 1.4em;
  text-align: left;
  font-size: 0.9em;
  color: var(--brand-500);
  font-variant-numeric: tabular-nums;
}

.kw-table th.is-sorted {
  background: var(--ink-100);
  color: var(--ink-900);
}

.kw-table tbody tr:last-child td { border-bottom: none; }
.kw-table tbody tr:hover td { background: var(--ink-50); }

/* 키워드 열만 왼쪽 정렬 — 나머지는 숫자라 오른쪽이 읽기 쉽다 */
.kw-table .kw-col-kw {
  text-align: left;
  white-space: normal;
  font-weight: 600;
  color: var(--ink-900);
}

/* 카테고리는 길어서 줄여 보여준다 */
.kw-table .kw-col-cat {
  text-align: left;
  white-space: normal;
  color: var(--ink-500);
  font-size: var(--font-xs);
}

/* 숫자는 자릿수가 흔들리지 않게 */
.kw-table .kw-num { font-variant-numeric: tabular-nums; }

/* 태그 열 — 🔴 가운데 정렬. ✓ 하나뿐이라 오른쪽에 붙이면 머리글과 어긋나 보인다.
   🔴 색을 brand-500 으로 두지 않는다 — 「좋은 것」이라는 뜻이 되어 버린다(§2-2).
      태그가 없는 것도 쓸모없지 않다(젠다이 같은 업계 은어다). 그냥 «표시»다. */
.kw-table .kw-col-tag {
  text-align: center;
  color: var(--ink-600);
  width: 1%;              /* 내용만큼만 — 남는 폭은 키워드·카테고리가 가져간다 */
}

/* 🔴 경쟁률에 「좋음/나쁨」 색을 칠하지 않는다.
   낮은 값이 늘 기회인 것이 아니다 — 판매 상품이 아니라서 낮은 경우가 섞여 있다
   (마인크래프트·카피바라). 숫자를 그대로 보여주고 판단은 사람이 한다. */

/* 완전일치 행 — 찾던 그 키워드 */
.kw-exact {
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.kw-exact-kw {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--spacing-sm);
}

/* 🔴 카드 셋 — 판다랭크처럼 숫자를 크게 세운다. `auto-fit` 이라 좁은 화면에서
   저절로 한 줄씩 쌓인다(미디어쿼리 없이). */
.kw-exact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-sm);
}

.kw-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 0;                   /* 🔴 grid 자식이 안 줄어 넘치는 것을 막는다 */
}

.kw-stat-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--ink-500);
  margin-bottom: 2px;
}

/* 🔴 `--font-xl`(20px). 24px 은 실화면에서 과했다 — 이 페이지 `<h1>` 과
   경쟁해서 «요약이 제목처럼» 읽혔다. 목록 한 줄(13px)보다는 확실히 크되
   제목을 넘지 않는 자리가 여기다. */
.kw-stat-value {
  display: block;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

/* 단위는 숫자에 딸린 것이라 작고 흐리게 — 숫자와 같은 크기면 자릿수처럼 읽힌다 */
.kw-stat-unit {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--ink-500);
  margin-left: 2px;
}

/* 🔴 키워드 글자만 더블클릭으로 잡히게. `user-select:none` 이 없으면 배지까지
   한 덩어리로 잡혀 「스탠리텀블러브랜드」가 복사된다(실제 신고된 증상). */
.kw-kwname { user-select: text; }

/* 브랜드 키워드 표시 */
.kw-badge {
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  margin-left: var(--spacing-xs);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: var(--font-2xs);
  font-weight: 600;
  vertical-align: middle;
}

/* 상태 메시지 */
.kw-msg {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--ink-500);
  font-size: var(--font-base);
}

.kw-msg-strong {
  color: var(--ink-900);
  font-weight: 600;
}

/* ── FAQ 와 결과 사이 ──
   🔴 예전엔 `.kw-faq` 로 적었는데 **마크업엔 그런 클래스가 없다**(`tool-faq` 다).
      규칙이 아무것도 안 맞아 표와 설명글이 맞붙어 있었다 — 에러 없이 조용히.
   🔴 `.tool-doc-block` 은 아래쪽 여백만 갖는다(문서 블록끼리 쌓이는 것을 전제로 한
      규칙이다). 여기선 **위에 결과 표**가 오므로 이 페이지에서 위 여백을 준다.
      tools.css 를 고치면 다른 도구의 첫 블록까지 밀린다. */
.kw-app .tool-doc-block {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--ink-200);
}

/* ── v2 수집 참여 (미스 키워드) ──
   🔴 색·간격은 전부 토큰이다 — 하드코딩 금지(파일 상단 규칙).
   🔴 고정 px 폭을 두지 않는다. 모바일에서 버튼이 밀려나지 않게 세로로 쌓고,
      좁아지면 버튼이 폭을 꽉 채우도록 둔다. */
.kw-collect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  border: 1px dashed var(--ink-200);
  border-radius: var(--radius-md);
  background: var(--ink-50);
}

/* 박스 안의 안내문은 자체 여백을 갖지 않는다 — gap 이 간격을 맡는다
   (.kw-msg 의 padding 을 그대로 두면 위아래가 과하게 벌어진다) */
.kw-collect .kw-msg {
  padding: 0;
}

/* 조회 중 — 🔴 스피너는 common.css 의 `.loading`/`spin` 을 **재사용**한다.
   여기서 또 만들면 돌아가는 속도·굵기가 두 벌로 갈린다. */
.kw-collect.is-loading .kw-msg::before {
  content: '';
  display: inline-block;
  vertical-align: -3px;
  margin-right: var(--spacing-sm);
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink-200);
  border-top-color: var(--primary-color);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

/* 🔴 움직임을 싫어하거나 어지러움을 느끼는 사용자를 위해 — 회전만 멈춘다
   (표시 자체는 남겨야 «조회 중»임을 알 수 있다) */
@media (prefers-reduced-motion: reduce) {
  .kw-collect.is-loading .kw-msg::before { animation: none; }
}

@media (max-width: 480px) {
  .kw-collect-btn { width: 100%; }
}