/* RankFinder 보조 스타일 — Untitled UI + shadcn 톤 + Pretendard */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  letter-spacing: -0.01em;
}

/* === 회색 톤 일괄 진하게 (가독성 ↑) === */
.text-gray-400 { color: #475467 !important; }  /* 원래 #98A2B3 → 더 진하게 */
.text-gray-500 { color: #344054 !important; }  /* 원래 #667085 → 더 진하게 */
.text-gray-600 { color: #1D2939 !important; }  /* 원래 #475467 → 더 진하게 */
.text-gray-700 { color: #101828 !important; }
.text-gray-800 { color: #0B121E !important; }
.text-gray-900 { color: #000000 !important; }

/* placeholder 도 더 진하게 */
input::placeholder, textarea::placeholder { color: #667085 !important; }

/* 한글 굵은 weight 강화 — 헤드라인은 800/900 */
h1, h2, h3, .text-2xl, .text-3xl, .text-4xl { font-weight: 800; letter-spacing: -0.02em; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-black, [data-kpi] { font-weight: 900; letter-spacing: -0.02em; }

/* ===== 매트릭스 표 ===== */
.matrix-table { border-collapse: separate; border-spacing: 0; }
.matrix-table th,
.matrix-table td { border-bottom: 1px solid #F2F4F7; }
.matrix-table th:first-child,
.matrix-table td:first-child {
  position: sticky; left: 0; background: #fff; z-index: 1;
  min-width: 150px; max-width: 220px;
}
.matrix-table thead th {
  background: #F9FAFB; font-weight: 700; color: #1D2939;
  font-size: 12px; padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid #EAECF0;
  letter-spacing: 0;
}
.matrix-table thead th.today { background: #EFF6FF; color: #1D4ED8; }
.matrix-table tbody td { padding: 7px 12px; font-size: 13px; vertical-align: middle; }
.matrix-table tbody tr:nth-child(even) td { background: #FCFCFD; }
.matrix-table tbody tr:nth-child(even) td:first-child { background: #FCFCFD; }
.matrix-table tbody td.today { background: #F5F8FF !important; }
.matrix-table tbody tr:hover td { background: #EFF6FF !important; cursor: pointer; }
.matrix-table tbody tr:hover td.today { background: #DBEAFE !important; }
.matrix-table tbody tr.kw-main td { background: #F5F8FF !important; }
.matrix-table tbody tr.kw-main td:first-child { box-shadow: 3px 0 0 0 #2563EB inset, 1px 0 0 0 #F2F4F7; }

/* ===== 랭크 셀 — 컴팩트 (PC/M 한 줄에) ===== */
.rank-cell { display: flex; flex-direction: column; gap: 2px; align-items: center; line-height: 1; }
.rank-line { display: inline-flex; align-items: center; gap: 5px; line-height: 1.1; position: relative; }
.rank-line .label {
  font-size: 10px; color: #667085; width: 14px; font-weight: 800;
  letter-spacing: 0.04em;
}
.rank-line .num {
  font-weight: 700; min-width: 22px; text-align: right; color: #101828;
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.rank-line.mo .num { color: #344054; font-weight: 600; }
.rank-line .delta { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: #12B76A; }
.delta.down { color: #F04438; }
.dim { color: #D0D5DD; font-weight: 400; }

.ad-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 9999px; background: #2563EB; margin-left: 2px;
}

/* sticky 컬럼 미세 그림자 */
.matrix-table tbody td:first-child { box-shadow: 1px 0 0 0 #F2F4F7; }
.matrix-table thead th:first-child { box-shadow: 1px 0 0 0 #EAECF0; }

/* ===== 모바일 반응형 ===== */
@media (max-width: 640px) {
  .matrix-table th:first-child,
  .matrix-table td:first-child { min-width: 120px; max-width: 160px; }
  .matrix-table thead th { padding: 6px 8px; font-size: 10px; }
  .matrix-table tbody td { padding: 6px 8px; font-size: 11px; }
  .rank-line .label { display: none; }
  .rank-line .num { min-width: 18px; }
}

/* ===== 확장 수집 중 회전 스피너 ===== */
.rf-spin { animation: rf-spin 0.8s linear infinite; }
@keyframes rf-spin { to { transform: rotate(360deg); } }

/* ===== 추출된 키워드 그리드 칩 hover ===== */
#kwExtractedGrid label { transition: all 0.12s; }
#kwExtractedGrid label:hover { border-color: #93C5FD; background: #EFF6FF; }

/* ===== 셀렉트 화살표 일관화 ===== */
select { appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center;
}

/* ===== 스크롤바 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #98A2B3; }