/* HaruLab 테마 레이어 — 2026-08-02에 4개 파일을 하나로 합쳤다.

   합치기 전 상태: m3-primitives / compatibility / m3-theme / open-props-theme 가
   각각 하나의 세대였다. Material 3로 한 번, Open Props로 또 한 번 갈아타면서
   이전 층을 걷어내지 않고 위에 덮었고, 그 결과 같은 선택자가 여러 파일에 흩어져
   무엇이 이기는지 파일을 다 열어봐야 알 수 있었다.

   순서는 원래 import 순서를 그대로 유지한다 — 뒤쪽이 이긴다. 즉 같은 선택자가
   두 번 나오면 아래쪽이 실제로 화면에 적용되는 값이다.
   ------------------------------------------------------------------ */

/* ═══════════ 원래 m3-primitives.css ═══════════ */

/* M3 component primitives — token hooks reserved for future theming */
.card {
  border: 1px solid var(--line);
  background: var(--surface);
}

.card-outlined {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.status-text {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}

.status-text.error {
  color: var(--red);
}

.data-row {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.data-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.data-row strong {
  color: var(--text);
  font-weight: 750;
}

.data-row span {
  color: var(--muted);
}

.chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  font-size: 12px;
}

.chip:disabled {
  opacity: 0.45;
}

.linear-progress {
  height: 4px;
  overflow: hidden;
}

.linear-progress > span {
  display: block;
  height: 100%;
  transition: width 0.25s ease;
}

.post-analysis-panel {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* ═══════════ 원래 compatibility.css ═══════════ */

/* ── 2026-07-26 추가분: index.html이 실제로 로드하는 건 이 m3.css인데, 그동안 여러 세션에 걸쳐
   styles.css(레거시, m3.css 도입 이후 아무 데서도 안 불러옴)에만 규칙을 추가해와서 아래 클래스들이
   실제 화면에는 전혀 적용되지 않고 있었다 — 발견 즉시 이 파일의 실제 토큰(--text/--muted/--line/
   --surface, box-shadow 대신 border 위주의 플랫한 스타일)에 맞춰 이식. ────────────────────── */

.count-badge {
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.count-badge:empty { display: none; }

.improvement-group { margin-bottom: var(--space-5); }
.improvement-group:last-child { margin-bottom: 0; }

/* 머리글과 행이 열 정의를 따로 갖고 있으면 한쪽만 고쳤을 때 조용히 어긋난다(2026-08-03).
   한 변수에서만 정하고 둘 다 그걸 쓴다 — 열을 늘리거나 줄일 때 한 곳만 고치면 된다. */
.improvement-group {
  --improvement-columns: 20px 88px minmax(220px, 1.35fr) minmax(220px, 1fr) 44px;
}

.improvement-row {
  cursor: pointer;
  grid-template-columns: var(--improvement-columns);
  column-gap: var(--space-3);
}

.improvement-group .content-item-list {
  overflow: visible;
}

.improvement-head {
  position: sticky;
  top: 72px;
  z-index: 8;
  min-height: 48px;
  display: grid;
  grid-template-columns: var(--improvement-columns);
  align-items: center;
  column-gap: var(--space-3);
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.improvement-title-cell,
.improvement-reason-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.improvement-reason-cell {
  color: var(--muted);
  font-size: 11px;
}
.improve-hide-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--text);
}

/* AI 브리핑 탭(2026-08-01) — 숨김 체크박스와 키워드 열이 없는 대신, 밀린 검색어들과
   대신 인용된 글을 한 행에 담아서 "무엇이 나를 이겼나"까지 바로 읽히게 한다. */
.improvement-group:has(.briefing-row),
.improvement-group:has(.briefing-head) {
  --improvement-columns: 88px minmax(0, 1fr) 44px;
}
.briefing-summary {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: 12px;
}
.briefing-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.briefing-keyword {
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11px;
}
.briefing-rival {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* 상대가 블로그인지 기관인지 — 손댈 값어치가 갈리므로 색으로 바로 구분되게 한다. */
.briefing-kind {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 650;
}
.briefing-kind.is-blog { color: var(--green); }
.briefing-kind.is-other { color: var(--yellow); }
.briefing-kind.is-official { color: var(--muted); }
.briefing-kind.is-unknown { color: var(--faint); }

/* 품질 향상: 예정 글을 열었을 때 뜨는 연결 표시와 상단 버튼 묶음(2026-08-01). */
.draft-actions {
  display: flex;
  gap: var(--space-2);
}
.draft-schedule-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  background: var(--active-bg);
  color: var(--muted);
  font-size: 12px;
}
.briefing-caution {
  display: inline-block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 11px;
}

.improvement-detail-group { display: grid; gap: 6px; }
.improvement-detail-group h4 { margin: 0 0 2px; font-size: 13px; }
.improvement-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
}
.improvement-detail-row small { color: var(--muted); }
.improvement-empty { margin: 0; color: var(--muted); font-size: 12px; }

/* 개선 가이드(2026-08-01) — 진단 행과 같은 그리드를 쓰되 펼치면 처방이 나온다.
   점수 행(.improvement-detail-row)과 같은 골격이라 시각적으로 한 덩어리로 읽힌다. */
.improvement-detail-group h4 small { margin-left: var(--space-2); color: var(--muted); font-weight: 400; font-size: 11px; }
.guide-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2, 8px);
  background: var(--surface);
}
.guide-item + .guide-item { margin-top: 6px; }
.guide-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.guide-summary::-webkit-details-marker { display: none; }
.guide-summary small { color: var(--muted); }
/* 예전엔 "+20" 같은 숫자를 띄웠는데 그 20은 배점표와 무관한 내부 척도였다(2026-08-04).
   항목마다 배점이 달라 진짜 값을 넣으면 3.5·10.5처럼 뒷자리가 제각각이라 오히려 헷갈린다 —
   숫자를 빼고 "고치면 오른다"는 뜻만 전한다. 정렬은 실제 배점 기준으로 하고 있다. */
.guide-summary strong { color: var(--green); font-variant-numeric: tabular-nums; }
.guide-summary .guide-gain { font-size: var(--type-caption-size); white-space: nowrap; }
.guide-toggle-icon {
  color: var(--muted);
  font-size: var(--icon-size);
  transition: transform var(--motion-standard);
}
.guide-item[open] .guide-toggle-icon { transform: rotate(180deg); }
.guide-item[open] .guide-summary { border-bottom: 1px solid var(--line); }
.guide-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
.guide-body { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--active-bg); }
.guide-action { margin: 0; font-size: 13px; font-weight: 650; }
.guide-why { margin: 0; color: var(--muted); font-size: 12px; }
.guide-patterns { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; }
.guide-reference { margin: 0; font-size: 12px; }
.guide-reference a { overflow-wrap: anywhere; }
.content-list-panel {
  padding: 0;
}

.content-list-panel > .panel-header {
  padding-bottom: var(--space-3);
}

.content-item-list {
  gap: 0;
}

.content-item-list .recommend-row,
.content-item-list .published-row,
.content-item-list .improvement-row {
  margin: 0;
}

.content-item-list > .empty-state {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding-inline: var(--space-3);
}

.content-list-panel .source-tabs {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.recommend-title-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.recommend-title-cell strong { overflow-wrap: anywhere; white-space: normal; }

.shopping-badge {
  flex-shrink: 0;
  width: fit-content;
  margin-left: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.recommend-row .shopping-badge { color: var(--color-on-warm-soft); }

/* 배지가 링크가 됐다(2026-08-04) — 통합검색으로 보내 AI 브리핑을 직접 확인하게 한다.
   링크지만 배지 모양은 그대로 유지한다. */
.ai-briefing-badge {
  text-decoration: none;
  width: fit-content;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ai-briefing-badge.cited { color: var(--green); }
.ai-briefing-badge.uncited { color: var(--yellow); }
.ai-briefing-badge.none { color: var(--muted); }

/* 순위를 미노출/노출 이분법이 아니라 페이지 구간 5단계 색으로 보여준다(2026-07-26 확정) —
   1페이지(최상)→2~3페이지(양호)→4~6페이지(보통)→7~10페이지(약함)→10페이지 밖(미노출). */

/* 키워드 칸: 대표 키워드 1개 + "갱신" 버튼을 한 줄로 고정한다 — 칩이 줄바꿈되면 버튼 위치가
   행마다 들쭉날쭉해지던 문제(2026-07-30)가 있어서, 칩 쪽만 줄어들고(ellipsis) 버튼은 항상
   오른쪽 같은 자리에 고정되게 한다. */
.keyword-rank-cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.keyword-rank-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.keyword-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  min-width: 0;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.keyword-rank-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyword-more { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.keyword-rank-chip small { color: var(--muted); font-size: 10px; font-weight: 700; }
.keyword-rank-chip.rank-excellent, .rank-tier.rank-excellent { color: var(--green); }
.keyword-rank-chip.rank-excellent { border-color: var(--green); }
.keyword-rank-chip.rank-excellent small { color: var(--green); }
.keyword-rank-chip.rank-good, .rank-tier.rank-good { color: #0a6ebd; }
.keyword-rank-chip.rank-good { border-color: #0a6ebd; }
.keyword-rank-chip.rank-good small { color: #0a6ebd; }
.keyword-rank-chip.rank-fair, .rank-tier.rank-fair { color: var(--yellow); }
.keyword-rank-chip.rank-fair { border-color: var(--yellow); }
.keyword-rank-chip.rank-fair small { color: var(--yellow); }
.keyword-rank-chip.rank-weak, .rank-tier.rank-weak { color: #c2410c; }
.keyword-rank-chip.rank-weak { border-color: #c2410c; }
.keyword-rank-chip.rank-weak small { color: #c2410c; }
.keyword-rank-chip.rank-none, .rank-tier.rank-none { color: var(--red); }
.keyword-rank-chip.rank-none { border-color: var(--red); }
.keyword-rank-chip.rank-none small { color: var(--red); }
/* 아직 확인 안 함 · 확인 실패 — 둘 다 "모른다"는 상태라 같은 흐린 회색을 쓴다.
   실제 미노출(rank-none, 빨강)과 반드시 구분해야 한다. 모르는 것을 없는 것으로
   보이게 하면 점수를 오해하게 된다(2026-08-04). */
.rank-tier.pending { color: var(--muted); }

.decision-badge {
  width: fit-content;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.decision-badge.improve-exposure { color: var(--red); border-color: var(--red); }
.decision-badge.improve-body { color: #b4530c; border-color: #b4530c; }
.decision-badge.keep { color: var(--green); border-color: var(--green); }
.decision-badge.seasonal { color: var(--yellow); border-color: var(--yellow); }
.decision-badge.hold { color: var(--yellow); border-color: var(--yellow); }
.decision-badge.watch { color: var(--green); border-color: var(--green); }
.decision-badge.none { color: var(--muted); }
.decision-badge.pending { color: var(--muted); }
.decision-badge.unverified { color: var(--muted); }

.score-state {
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 30px;
  padding: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.score-state.blog-challenge { color: #2862a8; border-color: #2862a8; }
.score-state.large { width: auto; min-width: 76px; min-height: 42px; padding: 8px 10px; }

/* ═══════════ 원래 m3-theme.css ═══════════ */

/* Material 3 visual layer
   Keeps existing layout and data hooks while applying M3 color, shape,
   elevation, state-layer, and component conventions. */

html {
  color-scheme: light;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.keyword-tools,
.day-card {
  transition: background-color var(--motion-standard),
    border-color var(--motion-standard),
    box-shadow var(--motion-standard),
    color var(--motion-standard);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 2px;
}

/* App shell */
.sidebar {
  padding: var(--space-5) var(--space-3);
}

.logo-button {
  min-height: 48px;
}

.nav-group-label {
  border-radius: var(--radius-full);
}

.nav-item,
.nav-group-label {
  min-height: 48px;
}

.nav-subitem {
  min-height: 40px;
}

.account-button:hover {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.sidebar-bottom {
  border-top-color: var(--color-border-subtle);
}

.account-button {
  min-height: 56px;
}

.avatar {
  border-color: var(--color-border-subtle);
  background-color: var(--color-brand-soft);
}

.topbar {
  min-height: 72px;
  padding: var(--space-3) var(--space-8);
}

.mobile-user-button,
.mobile-menu-button,
.mobile-close-button {
  border-radius: var(--radius-full);
}

.view {
  padding-top: var(--space-6);
}

/* Typography */
h1 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
}

h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

h3 {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

.dashboard-score-panel,
.dashboard-signals-panel,
.quality-workspace > .panel {
  border-radius: var(--radius-lg);
}

.note-box,
.empty-state,
.status-box,
.keyword-data-status,
.comparison-recommendation,
.comparison-detail,
.access-row,
.public-detail-metrics span,
.comparison-detail-grid > div {
  border-color: transparent;
}

.info-line {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  margin-top: var(--space-4);
  margin-bottom: 0;
  padding: var(--space-2) var(--space-3);
}

.dashboard-blog-panel > .info-line {
  width: 100%;
}

.benchmark-score-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Shared metric rows */
.metric-list {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0;
}

.metric-row {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
}

/* 설정 > 키워드 후보 수집 현황 — 소스 이름·설명은 왼쪽에 쌓고, 켜짐/꺼짐 상태는 오른쪽 배지로
   따로 뗀다(2026-07-31 요청: 상태가 설명 문구에 섞여 있어 한눈에 안 보였음). */
.data-source-row {
  min-height: 56px;
}

/* 행의 왼쪽 — 이름을 위, 설명을 아래로 쌓는다. 원래 설정 화면 전용 이름이었는데
   상세 모달도 같은 구조가 필요해 공용 이름으로 바꿨다(2026-08-03).
   모달만 자기 방식으로 그려서 화면을 옮길 때 시각 언어가 끊긴다는 지적. */
.metric-label,
.data-source-label {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.metric-label > small,
.data-source-label > small {
  color: var(--color-text-muted);
  font-size: 12px;
  /* 설명은 길어지면 줄바꿈해서 다 보이게 — 잘라내면 왜 그 점수인지 알 수 없다. */
  white-space: normal;
  line-height: 1.4;
}

/* 행의 오른쪽 값. 숫자를 크게, 분모는 작고 흐리게 — 척도가 다른 항목을 나란히 둬도
   "얼마 중 얼마"가 바로 읽힌다(20/20과 100/100이 같은 자리에 오는 문제). */
.metric-value {
  justify-self: end;
  white-space: nowrap;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.metric-value > small {
  margin-left: 1px;
  color: var(--muted);
  font-weight: 550;
}

.data-source-state {
  justify-self: end;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.data-source-state.is-on {
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}

/* 아직 서버에 물어보는 중. 꺼진 것과 구분해야 한다 — 재접속 직후 잠깐 "꺼짐"으로 보여
   API가 끊긴 줄 알았다는 지적(2026-08-07). */
.data-source-state.is-pending {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  color: var(--color-text-muted);
  opacity: 0.7;
}

.data-source-state.is-off {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text-muted);
}

.dashboard-score-pair {
  --dashboard-score-actual-size: 32px;
  --dashboard-score-reference-size: 16px;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.score-total .dashboard-score-pair {
  --dashboard-score-actual-size: 74px;
  --dashboard-score-reference-size: 19px;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.view[data-view-panel="dashboard"] .score-total .dashboard-score-actual {
  line-height: 0.82;
}

.view[data-view-panel="dashboard"] .score-total .dashboard-score-reference {
  line-height: 0.9;
}

.dashboard-standalone-value {
  --dashboard-score-actual-size: 32px;
}

.view[data-view-panel="dashboard"] .dashboard-score-actual {
  color: inherit;
  font-family: var(--dashboard-score-actual-font);
  font-size: var(--dashboard-score-actual-size);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.view[data-view-panel="dashboard"] .dashboard-score-reference,
.view[data-view-panel="dashboard"] .dashboard-score-reference > span {
  color: var(--color-text-muted);
  font-family: var(--dashboard-score-reference-font);
  font-size: var(--dashboard-score-reference-size);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.dashboard-score-pending {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.metric-row > .label-with-info,
.metric-row button > .label-with-info {
  min-width: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 650;
}

.metric-row > strong,
.metric-row button > strong {
  color: var(--color-text);
  font-family: var(--score-font);
  font-size: 28px;
  font-weight: var(--score-font-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--score-letter-spacing);
  line-height: 1;
  text-align: right;
}

.metric-row > small {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: 12px;
}

.metric-row-interactive {
  position: relative;
  overflow: visible;
  padding: 0;
}

.metric-row-interactive > button {
  min-height: 72px;
  grid-template-columns: minmax(0, 1fr) auto var(--icon-size);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}

.metric-row-interactive > a {
  width: 40px;
  height: 40px;
  min-height: 40px;
  align-self: center;
  margin-right: var(--space-3);
  border: 0;
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}

.metric-row-interactive > a:hover {
  background: color-mix(in srgb, var(--color-accent-soft) 88%, var(--color-on-accent-soft));
  color: var(--color-on-accent-soft);
}

.metric-row button > strong small {
  color: var(--color-text-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}

.metric-info-tip {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.dashboard-improvement-row {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  border: 0;
  cursor: pointer;
}

.dashboard-improvement-row > .score-dot {
  min-width: 0;
}

@keyframes row-highlight-flash {
  0% { background: color-mix(in srgb, var(--color-brand) 22%, transparent); }
  100% { background: transparent; }}

#dashboardImprovementList > .empty-state {
  border: 0;
  background: transparent;
}

.dashboard-improvement-row > strong,
.dashboard-candidate-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-candidate-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(72px, 1.5fr) minmax(112px, 2.5fr);
  align-items: center;
  column-gap: var(--space-5);
  padding: var(--space-3);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}

.dashboard-candidate-row > span,
.dashboard-candidate-row > time {
  min-width: 0;
  color: var(--color-text-muted);
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-candidate-date {
  font-variant-numeric: tabular-nums;
}

.dashboard-candidate-progress {
  text-align: center;
}

.dashboard-actions {
  align-items: stretch;
}

.dashboard-actions > .panel {
  min-height: 356px;
  display: flex;
  flex-direction: column;
}

.dashboard-actions .table-list,
.dashboard-actions .opportunity-mini-list {
  flex: 1 1 auto;
  align-content: start;
}

.dashboard-actions .dashboard-improvement-row,
.dashboard-actions .dashboard-candidate-row {
  min-height: 52px;
}

.status-box.error,
.keyword-data-status.error,
.benchmark-progress.error {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-on-danger-soft);
}

/* Buttons */
.primary-button,
.naver-login-button,
.action-button-filled {
  min-height: 40px;
  padding-inline: var(--space-5);
}

.ghost-button {
  min-height: 40px;
  padding-inline: var(--space-4);
}

.action-button-tonal {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}

.mini-button {
  min-height: 32px;
}

button:disabled {
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  background-color: color-mix(in srgb, var(--color-text) 12%, transparent);
  box-shadow: none;
}

/* Form controls */
input,
select,
textarea {
  position: relative;
  z-index: var(--layer-field);
  min-height: 48px;
  padding-inline: var(--space-4);
}

textarea {
  padding-block: var(--space-3);
}

input:focus,
select:focus,
textarea:focus {
  border: 2px solid var(--color-brand);
}

.fixed-url-input,
.clearable-input {
  min-height: 48px;
  border-color: var(--color-border);
}

.fixed-url-input:focus-within,
.clearable-input:focus-within {
  border: 2px solid var(--color-brand);
}

.fixed-url-input > input,
.clearable-input > input {
  min-height: 44px;
  border-radius: 0;
  outline: 0;
}

.fixed-url-input > input:hover,
.clearable-input > input:hover,
.fixed-url-input > input:focus,
.clearable-input > input:focus,
.fixed-url-input > input:focus-visible,
.clearable-input > input:focus-visible {
  outline: 0;
}

.fixed-url-input > input:hover,
.clearable-input > input:hover,
.fixed-url-input > input:focus-visible,
.clearable-input > input:focus-visible {
  border: 0;
  box-shadow: none;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: auto;
}

.chip {
  min-height: 32px;
  border-color: var(--color-border);
}

.score-state,
.decision-badge,
.count-badge {
  border-color: var(--color-border-subtle);
}

/* Tooltips and information */
.view.active,
.view.active .panel {
  overflow: visible;
}

.view.active [data-tooltip]::after {
  z-index: var(--layer-tooltip);
}

.modal {
  z-index: var(--layer-modal);
}

.modal [data-tooltip]:hover,
.modal [data-tooltip]:focus-visible,
.modal [data-tooltip]:hover::after,
.modal [data-tooltip]:focus-visible::after {
  z-index: var(--layer-modal-tooltip);
}

.dashboard-signals-panel [data-tooltip]::after,
.visitor-goal [data-tooltip]::after,
.dashboard-actions > article:last-child [data-tooltip]::after {
  right: 0;
  left: auto;
  transform: none;
}

/* Lists and data rows */
.keyword-list-head,
.recommend-head,
.published-head,
.comparison-head,
.benchmark-post-head,
.benchmark-compare-head {
  border-bottom-color: var(--color-border-subtle);
}

.keyword-row,
.compare-item,
.recommend-row,
.table-row,
.published-row,
.comparison-row,
.benchmark-post-row,
.benchmark-compare-row,
.detail-keyword-row {
  border-bottom-color: var(--color-border-subtle);
}

.compare-item,
.recommend-row,
.table-row,
.published-row,
.detail-keyword-row {
  min-height: 48px;
}

/* Charts and progress */
.visitor-chart,
.benchmark-visitor-chart {
  border-radius: 0;
}

.dashboard-blog-panel .visitor-chart.has-line-chart {
  width: calc(100% + var(--space-4));
  max-width: none;
  align-self: stretch;
  margin-left: calc(var(--space-4) * -1);
  box-sizing: border-box;
}

.visitor-chart > .empty-state,
.benchmark-visitor-chart > .empty-state {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Benchmark */

.benchmark-topic-grid > div {
  border-radius: var(--radius-sm);
}

.score-composition-row i {
  border-radius: var(--radius-full);
}

.score-composition-row i b {
  border-radius: inherit;
}

/* Settings, calendar, and dialogs */
.calendar-weekdays {
  margin-bottom: calc(var(--space-3) * -1);
  overflow: hidden;
}

.calendar-item {
  border: 0;
}

.modal-sheet {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.modal-detail .modal-sheet {
  width: min(920px, calc(100vw - 32px));
}

.modal-evidence .modal-sheet {
  width: min(920px, calc(100vw - 32px));
}

.modal-form .modal-sheet {
  width: min(560px, calc(100vw - 32px));
}

.modal-account .modal-sheet {
  width: min(460px, calc(100vw - 32px));
}

.modal-sheet .modal-header {
  position: sticky;
  top: 0;
  z-index: 4;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-4);
}

.modal-header > div {
  min-width: 0;
}

.modal-header h2 {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-category {
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.modal-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-5) var(--space-6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.modal-body img,
.modal-body picture,
.modal-body video,
.modal-body canvas,
.modal-body svg {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.modal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.modal-section-head h3 {
  font-size: 15px;
}

.modal-section-head > span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.modal-form-body,
.modal-account-body {
  display: grid;
  gap: var(--space-4);
}

.modal-form-body > label {
  display: grid;
  gap: var(--space-2);
}

.modal-sheet > .modal-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
  padding: var(--space-4) var(--space-6) var(--space-5);
}

.modal-form .modal-actions {
  justify-content: space-between;
}

.modal-detail-body > .modal-actions {
  position: sticky;
  bottom: calc(var(--space-5) * -1);
  margin: var(--space-5) calc(var(--space-6) * -1) calc(var(--space-5) * -1);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.improvement-modal-verdict {
  grid-template-columns: minmax(0, 1fr);
}

.improvement-modal-verdict .detail-verdict-body {
  border-left: 0;
}

.improvement-check-state {
  justify-self: end;
  font-size: var(--type-caption-size);
  font-weight: 750;
  white-space: nowrap;
}

.improvement-check-state.is-good { color: var(--green); }
.improvement-check-state.is-needs { color: var(--orange); }
.improvement-check-state.is-na { color: var(--faint); }
.guide-toggle-icon.is-placeholder { visibility: hidden; }
.guide-summary.is-static { cursor: default; }

.modal-detail-body .detail-keyword-groups {
  gap: var(--space-4);
}

.modal-detail-body .detail-keyword-group {
  gap: 0;
  overflow: hidden;
}

.modal-detail-body .detail-keyword-group > h4 {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.modal-detail-body .detail-keyword-group > h4 small {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}

.modal-detail-body .detail-keyword-row {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 88px minmax(120px, 1fr) minmax(220px, auto) 116px 40px 48px 36px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
}

.modal-detail-body .detail-keyword-row:last-child {
  border-bottom: 0;
}

.modal-detail-body .detail-keyword-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-detail-body .detail-keyword-row > .rank-tier {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-detail-body .detail-keyword-row > .icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-strong);
}

.toast {
  min-height: 48px;
  padding-inline: var(--space-4);
}

/* Non-dashboard M3 page system */
.view:not([data-view-panel="dashboard"]) {
  --page-section-gap: var(--space-6);
}

.view:not([data-view-panel="dashboard"]) .content-section,
.view[data-view-panel="improvement"],
.view[data-view-panel="quality"],
.view[data-view-panel="calendar"],
.view[data-view-panel="settings"] {
  color: var(--color-text);
}

.view:not([data-view-panel="dashboard"]) .panel:not(.content-list-panel),
.view[data-view-panel="quality"] .panel,
.view[data-view-panel="settings"] .panel {
  padding: var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--elevation-1);
}

.view:not([data-view-panel="dashboard"]) .panel-header {
  align-items: center;
  margin-bottom: var(--space-5);
}

.view:not([data-view-panel="dashboard"]) .panel-copy {
  margin-top: var(--space-1);
  font-size: 13px;
  line-height: 1.5;
}

/* Search and filter containers */
.view[data-view-panel="content"] .keyword-tools {
  min-height: 64px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-strong);
  box-shadow: none;
}

.view[data-view-panel="content"] .keyword-tools > input {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
}

.view[data-view-panel="content"] .keyword-tools > input:focus {
  border: 0;
  outline-offset: 0;
}

.event-data-toolbar,
.view[data-view-panel="improvement"] > .control-row {
  min-height: 56px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.keyword-data-status,
.event-data-toolbar .keyword-data-status {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
}

.event-data-toolbar .keyword-data-status {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

/* Keyword discovery cards and chips */
.keyword-summary > .panel,
.keyword-pool > .panel {
  padding: var(--space-5);
}

.keyword-pool > .panel {
  border-radius: var(--radius-lg);
}

.keyword-card-head > span {
  min-height: 32px;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-warm-soft);
  color: var(--color-on-warm-soft);
}

.source-tabs button {
  min-height: 32px;
  padding-inline: var(--space-3);
  border-color: var(--color-border);
}

/* Flat M3 data lists */
.content-list-panel > .panel-header {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* 목록 컨테이너는 종류를 가리지 않고 같은 규칙을 쓴다(2026-08-02 공통화).
   키워드 목록만 따로 surface-container-low 배경을 갖고 있어서, 검색어 탐색 페이지의
   행이 전부 회색으로 깔려 다른 페이지 목록과 결이 달랐다(사용자 지적). 배경은 카드가
   이미 흰색이므로 목록이 따로 칠할 이유가 없다. */
.content-item-list,
.keyword-rank-list {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
}

.recommend-head,
.published-head,
.comparison-head,
.benchmark-post-head,
.benchmark-compare-head,
.keyword-list-head {
  min-height: 48px;
  padding: 0 var(--space-4);
}

.content-item-list .recommend-row,
.content-item-list .published-row,
.content-item-list .improvement-row,
.comparison-row,
.benchmark-post-row,
.benchmark-compare-row,
.keyword-row {
  min-height: 56px;
  padding-inline: var(--space-4);
}

.content-item-list .recommend-row,
.content-item-list .published-row,
.content-item-list .improvement-row {
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
}

.content-item-list .recommend-row:last-child,
.content-item-list .published-row:last-child,
.content-item-list .improvement-row:last-child,
.comparison-row:last-child,
.benchmark-post-row:last-child,
.benchmark-compare-row:last-child,
.keyword-row:last-child {
  border-bottom: 0;
}

.recommend-source-link {
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-strong);
}

/* Analysis and quality cards */
.analysis-results-toolbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
}

.analysis-results-toolbar:has(#improvementControls[hidden]) {
  display: none;
}

.view[data-view-panel="improvement"] .analysis-results-toolbar > .control-row {
  justify-content: flex-end;
  padding: 0;
  background: transparent;
}

.quality-workspace {
  gap: var(--space-5);
}

.quality-workspace input {
  min-height: 56px;
}

.quality-workspace textarea {
  border-radius: var(--radius-sm);
}

.check-list {
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.check-list > div {
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
}

.check-list > div:last-child {
  border-bottom: 0;
}

/* Benchmark, settings, and calendar */
.benchmark-progress {
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.settings-column {
  gap: var(--space-5);
}

.settings-grid .panel > h2 {
  margin-bottom: var(--space-5);
}

.settings-grid .panel > label {
  gap: var(--space-2);
}

.settings-grid .note-box {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

/* 발급 안내 단계(ol) 아래에 붙는 한 줄 주의사항 — 단계와 섞이지 않게 살짝 떼고 톤을 낮춘다
   (2026-07-31, 단계는 적게·설명은 구체적으로 요청에 맞춰 추가). */
.settings-grid .note-box > ol + p {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.calendar-legend span::before {
  border: 0;
  border-radius: var(--radius-xs);
}

.legend-published::before {
  background: var(--color-warm-soft);
}

.legend-planned::before {
  background: var(--color-accent-soft);
}

@media (max-width: 760px) {
  .topbar,
  .view {
    padding-inline: var(--space-4);
  }

  .panel,
.keyword-tools,
.modal-content {
    border-radius: var(--radius-lg);
  }

  .analysis-results-toolbar {
    grid-template-columns: 1fr;
  }

  .view[data-view-panel="improvement"] .analysis-results-toolbar > .control-row {
    justify-content: stretch;
  }

  .modal-sheet .modal-header,
  .modal-body,
  .modal-sheet > .modal-actions {
    padding-inline: var(--space-4);
  }

  .modal-detail-body > .modal-actions {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .modal-detail-body .detail-keyword-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .modal-detail-body .detail-keyword-row > .keyword-confidence,
  .modal-detail-body .detail-keyword-row > .rank-tier,
  .modal-detail-body .detail-keyword-row > .ai-briefing-badge {
    grid-column: 1;
  }

  .modal-detail-body .detail-keyword-row > .icon {
    grid-column: 2;
    grid-row: 1 / span 4;
  }}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }}

/* ═══════════ 원래 open-props-theme.css ═══════════ */

/* HaruLab Open Props component recipes.
   Loaded after the legacy compatibility layer so Open Props determines
   the final visual language while markup and layout hooks remain stable. */

body {
  background: var(--color-page);
  color: var(--color-text);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a,
input,
select,
textarea,
.panel,
.modal-content,
.chip,
.info-line {
  transition:
    color 160ms var(--ease-3),
    background-color 160ms var(--ease-3),
    border-color 160ms var(--ease-3),
    box-shadow 160ms var(--ease-3),
    transform 160ms var(--ease-3);
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 42%, transparent);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
}

::selection {
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

/* Shell */
.sidebar {
  border-right: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(14px);
}

.topbar {
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.logo-button,
.account-button {
  border-radius: var(--radius-2);
}

.main-nav {
  gap: var(--size-1);
}

.nav-group-label {
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.nav-item,
.nav-subitem {
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  color: var(--color-text-muted);
}

.nav-item:hover,
.nav-subitem:hover {
  border-color: var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text);
}

.nav-item.active,
.nav-subitem.active {
  border-color: transparent;
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
  box-shadow: none;
}

.avatar {
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, var(--color-border-subtle));
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

.icon-button {
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
}

.icon-button:hover {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.recommend-dismiss-cell .icon-button,
.recommend-dismiss-cell .icon-button:hover {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.recommend-dismiss-cell .icon-button {
  color: var(--color-text-muted);
}

.recommend-dismiss-cell .icon-button:hover {
  color: var(--color-text);
}

.topbar-sync-btn {
  border: 1px solid var(--color-brand-strong);
  border-radius: var(--radius-2);
  background: var(--color-brand);
  color: var(--color-on-brand);
  box-shadow: none;
}

.topbar-sync-btn:hover {
  background: var(--color-brand-hover);
  box-shadow: none;
  transform: translateY(-1px);
}

.fill-progress-button.is-syncing,
.fill-progress-button.is-syncing:hover {
  border-color: var(--green-8);
  background: var(--green-6);
  color: white;
  transform: none;
}

.fill-progress-button .fill-progress-track > span {
  background: var(--green-9);
}

/* Typography */
.topbar-title {
  color: var(--color-text);
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-line);
  letter-spacing: -0.025em;
}

.h2,
.panel h2,
.modal-content h2,
.modal-sheet h2 {
  color: var(--color-text);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-line);
  letter-spacing: -0.02em;
}

.h3,
.panel h3,
.modal-content h3,
.modal-sheet h3 {
  color: var(--color-text);
  font-size: var(--type-component-title-size);
  font-weight: var(--type-component-title-weight);
  line-height: var(--type-component-title-line);
}

.panel-copy,
.supporting-text,
.topbar-subtitle,
small,
.info-line,
.status-box,
.note-box {
  font-size: var(--type-supporting-size);
  line-height: var(--type-supporting-line);
}

.panel-copy,
.supporting-text,
.topbar-subtitle,
small,
.status-box,
.note-box {
  color: var(--color-text-muted);
}

small {
  font-weight: var(--type-supporting-weight);
}

.label-with-info,
label,
th {
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
}

.label-with-info {
  font-weight: var(--type-label-weight);
}

.eyebrow {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.eyebrow {
  font-weight: var(--type-caption-weight);
}

/* Surfaces */
.panel,
.keyword-tools,
.post-analysis-panel,
.settings-grid .panel {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-3);
  background: var(--color-surface);
  box-shadow: none;
}

.dashboard-actions > .panel,
.keyword-summary > .panel {
  border-radius: var(--radius-3);
}

.content-list-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.note-box,
.empty-state,
.status-box,
.keyword-data-status,
.comparison-recommendation,
.comparison-detail,
.access-row,
.public-detail-metrics span,
.comparison-detail-grid > div {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-surface-subtle);
  box-shadow: none;
}

.info-line {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-text-muted);
  box-shadow: none;
}

.empty-state {
  color: var(--color-text-muted);
}

.empty-state.error {
  border-color: color-mix(in srgb, var(--color-danger) 32%, var(--color-border-subtle));
  background: var(--color-danger-soft);
  color: var(--color-on-danger-soft);
}

/* Buttons */
.primary-button,
.action-button-filled,
.naver-login-button {
  border: 1px solid var(--color-brand-strong);
  border-radius: var(--radius-2);
  background: var(--color-brand);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-1);
  font-weight: var(--font-weight-7);
}

.primary-button:hover,
.action-button-filled:hover,
.naver-login-button:hover {
  background: var(--color-brand-hover);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.ghost-button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}

.ghost-button:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

.mini-button {
  border: 0;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--color-brand-strong);
  box-shadow: none;
}

.mini-button:hover {
  background: var(--color-brand-soft);
}

/* Form controls */
input,
select,
textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 72%, transparent);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-text-muted);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-brand);
  outline: 0;
  box-shadow: none;
}

.fixed-url-input,
.clearable-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  box-shadow: none;
}

.fixed-url-input:focus-within,
.clearable-input:focus-within {
  border-color: var(--color-brand);
  outline: 0;
  box-shadow: none;
}

.fixed-url-input > input,
.clearable-input > input,
.fixed-url-input > input:focus,
.clearable-input > input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-brand);
}

/* Chips, tabs, and status */
.source-tabs {
  gap: var(--size-1);
  border: 0;
  background: transparent;
  padding-block: var(--space-3);
}

.source-tabs button,
.chip,
.count-badge,
.decision-badge,
.score-state,
.source-badge,
.ai-briefing-badge,
.shopping-badge,
.keyword-rank-chip {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-round);
  background: var(--color-surface);
  box-shadow: none;
}

.source-tabs button,
.chip,
.count-badge,
.decision-badge,
.score-state,
.ai-briefing-badge,
.shopping-badge,
.keyword-rank-chip {
  color: var(--color-text-muted);
}

.source-tabs button:hover,
.chip:hover {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.source-tabs button.active,
.chip.selected {
  border-color: color-mix(in srgb, var(--color-brand) 32%, var(--color-border-subtle));
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

.source-badge {
  color: var(--color-brand-strong);
}

/* Shared metrics and rows */
.metric-list {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.metric-list.metric-list-compact > .metric-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: 2px;
  padding: var(--space-2) var(--space-3);
}

.metric-list.metric-list-compact > .metric-row > .label-with-info {
  align-self: end;
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.25;
}

.metric-list.metric-list-compact > .metric-row > strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  line-height: 1;
  text-align: right;
}

.metric-list.metric-list-compact > .metric-row > small {
  grid-column: 1;
  grid-row: 2;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.metric-list.metric-list-compact > .metric-row:has(> small) > strong {
  grid-row: 1 / span 2;
}

.metric-list.metric-list-compact > .metric-row-interactive {
  padding: 0;
}

.metric-list.metric-list-compact > .metric-row-interactive > button {
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
}

.metric-list.metric-list-compact > .metric-row-interactive > button > .label-with-info {
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.25;
}

.metric-list.metric-list-compact > .metric-row-interactive > button > strong {
  align-self: center;
  line-height: 1;
  text-align: right;
}

.visitor-summary-list.metric-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.visitor-summary-list > .visitor-summary-row {
  border-bottom: 0;
}

.metric-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.metric-row-interactive > button,
.metric-row-interactive > a {
  border-radius: var(--radius-2);
}

.dashboard-improvement-row,
.dashboard-candidate-row {
  border-bottom: 0;
  background: transparent;
}

.dashboard-improvement-row:hover,
.dashboard-candidate-row:hover {
  background: var(--color-surface-subtle);
}

.row-highlight {
  background: var(--color-brand-soft);
  box-shadow: none;
  animation: row-highlight-flash 1.6s ease-out;
}

/* Lists and tables */
.keyword-list-head,
.recommend-head,
.published-head,
.comparison-head,
.benchmark-post-head,
.benchmark-compare-head {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.keyword-row,
.compare-item,
.recommend-row,
.table-row:not(.dashboard-improvement-row),
.published-row,
.comparison-row,
.benchmark-post-row,
.benchmark-compare-row,
.detail-keyword-row,
.content-item-list > article {
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.keyword-row:hover,
.recommend-row:hover,
.published-row:hover,
.comparison-row:hover,
.benchmark-post-row:hover,
.benchmark-compare-row:hover,
.detail-keyword-row:hover,
.table-row:hover,
.content-item-list > article:hover {
  background: var(--color-surface-subtle);
}

/* Tooltips */
.info-tip {
  border-radius: var(--radius-round);
  color: var(--color-text-muted);
}

.info-tip:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

body:not(.tips-disabled) [data-tooltip]:hover::after,
body:not(.tips-disabled) [data-tooltip]:focus-visible::after {
  border: 0;
  border-radius: var(--radius-2);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  box-shadow: var(--shadow-3);
}

/* Charts and progress */
.visitor-chart,
.benchmark-visitor-chart {
  background: transparent;
}

.visitor-guide {
  stroke: var(--color-border-subtle);
}

.visitor-line,
.visitor-comparison-line.mine {
  stroke: var(--color-brand);
}

.visitor-point,
.visitor-comparison-point.mine {
  stroke: var(--color-brand);
}

.visitor-point.is-today,
.visitor-comparison-point.mine.is-latest {
  fill: var(--color-brand);
}

.visitor-comparison-line.target,
.visitor-comparison-point.target {
  stroke: var(--color-warm);
}

.visitor-comparison-point.target.is-latest {
  fill: var(--color-warm);
}

.visitor-comparison-value.target {
  fill: var(--color-warm);
}

.progress-track,
.linear-progress {
  border-radius: var(--radius-round);
  background: var(--color-surface-strong);
}

.progress-track span,
.progress-track i,
.linear-progress > span {
  border-radius: inherit;
  background: var(--color-brand);
}

.radar-backplate {
  fill: var(--color-surface-subtle);
}

.radar-grid,
.radar-axis {
  stroke: var(--color-border-subtle);
}

.radar-grid.is-outer {
  stroke: var(--color-border);
}

.radar-shape,
.radar-point {
  stroke: var(--color-brand);
}

/* Benchmark */
.benchmark-topic-grid > div,
.benchmark-score-section {
  border-color: var(--color-border-subtle);
  background: var(--color-surface);
}

.benchmark-chart-legend .target::before,
.score-composition.target .score-composition-row i b {
  background: var(--color-warm);
}

.score-composition.target .score-composition-head strong {
  color: var(--color-warm);
}

.score-composition.mine .score-composition-head strong {
  color: var(--color-brand);
}

.score-composition-row i {
  background: var(--color-surface-strong);
}

.score-composition-row i b {
  background: var(--color-brand);
}

/* Analysis */
.analysis-results-toolbar {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-3);
  background: var(--color-surface);
  box-shadow: none;
}

.check-list > div {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Settings */
.settings-grid .settings-actions .primary-button,
.settings-grid .action-button-group .action-button-filled {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.settings-grid .settings-actions .ghost-button,
.settings-grid .action-button-group .action-button-tonal {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

/* Calendar */
.calendar-weekdays,
.calendar-month-grid {
  border-color: var(--color-border-subtle);
  background: var(--color-surface);
}

.calendar-weekdays {
  border-radius: var(--radius-3) var(--radius-3) 0 0;
}

.day-card {
  border-color: var(--color-border-subtle);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

.day-card:hover {
  background: var(--color-surface-subtle);
}

.day-card.today {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.day-card.outside {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.calendar-item {
  border-radius: var(--radius-2);
}

.calendar-item.published {
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

.calendar-item.planned {
  background: var(--color-warm-soft);
  color: var(--color-on-warm-soft);
}

/* Dialogs and feedback */
.modal-content,
.modal-sheet {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-3);
  background: var(--color-surface);
  box-shadow: var(--shadow-5, var(--shadow-3));
}

.modal-sheet .modal-header {
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.modal-category {
  color: var(--color-brand-strong);
}

.modal-sheet > .modal-actions {
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.modal-detail-body .detail-keyword-group,
.account-dialog-profile {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  background: var(--color-surface-subtle);
}

.modal::backdrop {
  background: rgb(0 0 0 / 36%);
  backdrop-filter: blur(3px);
}

.toast {
  border: 1px solid color-mix(in srgb, white 18%, transparent);
  border-radius: var(--radius-2);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  box-shadow: var(--shadow-4, var(--shadow-3));
}

/* Softer reading hierarchy: reserve heavy weight for primary numeric values. */
.nav-group-label,
.nav-item,
.nav-subitem,
.action-button,
button,
label,
th,
.chip,
.dashboard-signal-row,
.metric-row {
  font-weight: 550;
}

/* 2026-08-19: .nav-group-label(«콘텐츠»·«성과 개선»)이 여기 없고 .eyebrow와 묶여
   caption 크기(11px)를 쓰고 있었다. 그 결과 그룹 이름이 자기 **자식**(.nav-subitem 13px)
   보다도, 같은 층의 형제(.nav-item 13px)보다도 작아 위계가 뒤집혀 보였다. 사이드바에서
   그룹 이름은 아이콘 24px에 높이 48px로 .nav-item과 똑같이 생긴 «줄»이지 작은 머리말이
   아니다 — 같은 크기로 맞춘다. */
.nav-group-label,
.nav-item,
.nav-subitem,
.action-button,
button,
input,
select,
textarea {
  font-size: 13px;
}

p,
td,
.panel-copy,
.supporting-text,
.topbar-subtitle,
.info-line,
.note-box,
.status-box,
.empty-state {
  font-weight: 400;
}

strong {
  font-weight: 650;
}

.dashboard-score-actual,
.score-value {
  font-weight: var(--score-font-weight);
}

/* Mobile shell */
@media (max-width: 760px) {
  .visitor-summary-list.metric-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .visitor-summary-list > .visitor-summary-row + .visitor-summary-row {
    border-top: 1px solid var(--color-border-subtle);
  }

  .sidebar {
    box-shadow: var(--shadow-4, var(--shadow-3));
  }

  .mobile-overlay {
    background: rgb(0 0 0 / 32%);
    backdrop-filter: blur(2px);
  }}

/* 밀집된 상세 목록에만 붙이는 구분선(AGENTS.md 규약의 list-divided — 이름만 정해져 있고
   정의가 없었다). 요약·지표 목록은 기본이 무선이고, 항목이 많아 눈이 미끄러지는 목록에만 건다.
   theme.css 끝에 두는 이유: 위쪽의 .metric-row { border: 0 }이 뒤에 와서 덮어버린다. */
.list-divided > * + * {
  border-top: 1px solid var(--line);
}

/* 순위 상태 셋을 색으로 가른다(2026-08-05).
   내 다른 글에 밀린 것은 "미노출"(빨강)이 아니다 — 고칠 게 없다는 뜻이라 중립색으로 둔다. */
.keyword-rank-chip.rank-sibling, .rank-tier.rank-sibling { color: var(--muted); }
.keyword-rank-chip.rank-sibling { border-color: var(--line); }
.keyword-rank-chip.rank-sibling small { color: var(--muted); }

/* 검색 상태 줄 — 펼치는 게 아니라 사실만 알리는 항목이라 화살표·커서가 없다. */
.guide-item.guide-static {
  padding: var(--space-3) var(--space-4);
  cursor: default;
}
.guide-item.guide-static .guide-summary { display: flex; gap: var(--space-3); align-items: baseline; }
.guide-item.guide-static.is-keep > .guide-summary > span { color: var(--green); }
.guide-item.guide-static.is-todo > .guide-summary > span { color: var(--red); }