.panel,
.keyword-tools,
.day-card,
.modal-content {
  color: var(--text);
}

.day-card {
  border: 1px solid var(--line);
}

.panel,
.keyword-tools {
  padding: var(--space-4);
}

.panel-header,
.keyword-card-head,
.detail-section-head,
.comparison-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.panel-header {
  margin-bottom: var(--space-3);
}

/* 대시보드 카드 제목을 눌러 바로 그 페이지로 이동(2026-07-31, 버튼 대신 제목 자체를 링크로) —
   버튼 기본 스타일을 지우고 부모 h2의 폰트를 그대로 물려받게 한다.
   호버 밑줄은 뺐다(2026-08-02) — 표시를 배경으로 옮겼는데 밑줄까지 겹치면 지저분하다. */
.panel-header-link {
  display: block;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* 호버 배경을 글자에만 씌우면 지표 행(행 전체가 물드는 방식)과 결이 달라 보인다. 그래서 배경은
   링크가 아니라 제목 행(h2) 전체에 건다(2026-08-02).
   링크만 늘리지 않는 이유: 제목 옆 (i) 아이콘은 링크의 형제라, 링크를 100%로 펴면 아이콘이
   카드 오른쪽 끝까지 밀려난다. 행을 칠하면 아이콘은 글자 옆에 그대로 둘 수 있다. */
.panel-header > :has(> h2 > .panel-header-link) {
  flex: 1;
  min-width: 0;
}
.panel-header h2:has(> .panel-header-link) {
  /* .label-with-info는 inline-flex라 글자 폭까지만 줄어든다 — 행을 칠하려면 폭을 다 써야 하므로
     제목이 붙은 h2는 아이콘 유무와 상관없이 같은 flex 행으로 맞춘다. */
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* 좌우 패딩을 카드 패딩과 같은 값으로 두고 같은 크기의 음수 마진으로 상쇄한다.
     이러면 제목 글자는 링크가 없는 카드의 제목과 정확히 같은 선에 남고(항상 보이는 정렬),
     칠해지는 띠만 카드 폭 끝까지 나간다(호버할 때만 보이는 폭).
     좌우 마진을 0으로 두면 띠는 행과 맞지만 글자가 10.5px 안으로 밀려, 옆 카드 제목과
     늘 어긋나 보인다 — 그쪽 손해가 더 크다.
     세로도 음수로 당겨, 패딩이 붙어도 제목 줄이 차지하는 높이는 그대로 둔다. */
  padding: var(--space-2) var(--space-4);
  margin: calc(var(--space-2) * -1) calc(var(--space-4) * -1);
  border-radius: var(--radius-sm);
  transition: background var(--motion-standard);
}

/* 판정도 행 전체로 준다 — 칠하는 곳이 행인데 판정만 글자에 걸면, 행 위아래 패딩(7px)에
   마우스를 올렸을 때 아무 반응이 없어 배경이 깜빡이는 것처럼 보인다.
   커서는 h2에 주지 않는다. 배경은 "여기가 제목 영역"이라는 신호고, 정확히 어디를 누르는지는
   손 모양 커서가 글자 위에서만 바뀌며 알려준다.
   :focus-visible을 같이 받는 이유 — 호버 표시를 밑줄에서 배경으로 바꿨으니, 키보드로 탭해서
   왔을 때도 같은 배경이 떠야 지금 어디에 있는지 보인다(브라우저 기본 외곽선은 링크에 그대로 남는다). */
.panel-header h2:has(> .panel-header-link):hover,
.panel-header h2:has(> .panel-header-link:focus-visible) {
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}
.panel-header h2:has(> .panel-header-link:active) {
  background: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-text) 12%);
}

.eyebrow {
  display: none;
}

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

.progress-track span,
.progress-track i {
  display: block;
  height: 100%;
}

/* 「숨김글 제외하고 보기」가 켜졌을 때 제목 옆에 붙는 표기(2026-08-13). 지금 보는 숫자가
   전체가 아니라는 걸 제목 자리에서 바로 알려준다 — 제목보다는 약하게 둔다. */
.score-scope-note {
  color: var(--muted);
  font-weight: 500;
}

.label-with-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* 설명(i) 아이콘은 어느 페이지·어느 글자 크기 옆에 있든 같은 크기로 보이게 한다(2026-08-02).
   아이콘 폰트가 width/height: 1em이라 부모 라벨을 따라 커지고 작아졌다 — 박스와 글자 크기를
   모두 토큰으로 못 박고, font-size 상속 사슬도 여기서 끊는다.
   호버 영역(24px)은 아이콘(14px)보다 크게 유지한다 — 아이콘을 줄이면서 영역까지 같이 줄이면
   툴팁을 띄우려고 조준해야 한다. 보이는 크기와 누르는 크기는 따로 정한다. */
.info-tip {
  width: var(--control-tap-size);
  height: var(--control-tap-size);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--icon-size-info);
}

.info-tip .icon {
  width: var(--icon-size-info);
  height: var(--icon-size-info);
  font-size: var(--icon-size-info);
}

[data-tooltip] {
  position: relative;
}

body:not(.tips-disabled) [data-tooltip]:hover,
body:not(.tips-disabled) [data-tooltip]:focus-visible {
  z-index: var(--layer-tooltip);
}

body:not(.tips-disabled) [data-tooltip]:hover::after,
body:not(.tips-disabled) [data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--layer-tooltip);
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: 280px;
  transform: translateX(-50%);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

body.tips-disabled .info-tip {
  opacity: 0.42;
}

/* 카드 안의 설명(info-line)은 어느 카드든 맨 아래에 붙인다(2026-08-02 공통 규칙).
   카드 높이가 옆 카드에 맞춰 늘어나도 설명이 본문에 붙어 뜨지 않게 한다.
   대시보드 점수 카드·실효 지표·방문자 추이·벤치마크 진행 표시가 모두 이 구조다.

   높이는 3줄로 고정한다 — 문구가 해석문이라 상황에 따라 1~3줄로 달라지는데
   (실측: 카드 폭 303px 기준 모든 경우가 3줄 이내), 그대로 두면 나란한 두 카드의
   본문 높이가 어긋난다. 3줄 자리를 늘 확보하고 짧은 문구는 위로 정렬한다. */

/* margin-top: auto는 부모가 flex/grid일 때만 먹는다 — 방문자 추이 카드가 block이라
   혼자 아래 여백 114px을 남겼다(2026-08-02). 설명을 바닥에 붙이려면 카드 자체가
   세로 흐름을 가져야 하므로, 이 규칙을 쓰는 카드는 모두 flex 열로 맞춘다. */
.panel:has(> .info-line) {
  display: flex;
  flex-direction: column;
}

.panel > .info-line {
  margin-top: auto;
  min-height: calc(3lh + var(--space-3) * 2);
  display: flex;
  align-items: center;
}

/* 전체·최근 점수 카드. 위에서부터 제목 · 육각형 · 축 목록 · 설명. */
.dashboard-score-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  container: dashboard-score / inline-size;
}

.score-visual {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}

/* 그래프는 카드에 남는 공간을 채운다(2026-08-02) — 카드 높이가 옆 카드에 맞춰 늘어날 때
   그래프가 그대로면 아래에 빈 틈만 생긴다. flex:1로 세로를 채우고, 가로는 카드 폭에 맞춘다. */
.dashboard-score-panel .score-visual {
  flex: 1 1 auto;
  min-height: 0;
}

.dashboard-score-panel .score-radar {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
}

/* 실효 지표의 위·아래 6개 묶음을 한 카드 안의 연속된 12개 행으로 취급한다. */
.dashboard-signal-metrics {
  padding: 0;
  border: 0;
}

/* 12개를 성격별 4묶음으로 나눈다(2026-08-02) — 규모 / 활동 / 검색 성과 / 수익 연결.
   라벨은 값을 읽는 데 방해되지 않도록 작고 흐리게 두고, 묶음 사이만 벌린다. */
.signal-group {
  display: flex;
  flex-direction: column;
}

.dashboard-signal-sequence .metric-row,
.dashboard-signal-sequence .metric-row-interactive > button {
  min-height: var(--signal-row-height);
  padding-block: var(--space-2);
}

/* 클릭 영역이 패딩까지 덮도록 패딩은 안쪽 button이 갖는다 — 바깥 행까지 패딩을 주면 두 겹이 된다. */
.dashboard-signal-sequence .metric-row-interactive {
  padding-block: 0;
}

/* 바깥 행은 button 하나만 담는데 2열 그리드라, button이 1열만 차지하고 빈 2열 + column-gap
   만큼(11px) 좁아져 값 우측이 위 6행과 어긋났다(2026-08-02). 두 열에 걸치게 해 행 폭을 다 쓴다. */
.dashboard-signal-sequence .metric-row-interactive > button {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-inline: var(--space-4);
}

.signal-group-label {
  margin: 0 0 var(--space-1);
  color: var(--faint);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.score-radar {
  position: relative;
  width: min(100%, 410px);
  aspect-ratio: 1.35;
}

.score-radar svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.radar-backplate {
  stroke: none;
}

.radar-grid,
.radar-axis {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.radar-grid {
  opacity: 0.68;
}

.radar-grid-level-1,

.radar-grid.is-zero {
  opacity: 0.92;
  stroke: color-mix(in srgb, var(--color-border) 64%, transparent);
}

.radar-grid.is-outer {
  opacity: 1;
  stroke-width: 1.25;
  stroke-dasharray: none;
}

.radar-axis {
  opacity: 0.58;
  stroke-dasharray: 2 5;
}

.radar-vertex {
  fill: var(--color-border-subtle);
}

.radar-shape {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.radar-fill-center {
  stop-color: var(--color-brand);
  stop-opacity: 0;
}

.radar-fill-middle {
  stop-color: var(--color-brand);
  stop-opacity: 0.12;
}

.radar-fill-edge {
  stop-color: var(--color-brand);
  stop-opacity: 0.42;
}

.radar-point-halo {
  fill: color-mix(in srgb, var(--color-brand) 16%, transparent);
  stroke: none;
}

.radar-point {
  fill: var(--color-surface);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.radar-label {
  fill: var(--color-text-muted);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.radar-label-info {
  cursor: help;
  outline: none;
}

/* 육각형 라벨의 설명 아이콘도 나머지 화면과 같은 아이콘을 쓴다(2026-08-02).
   예전엔 원+텍스트 "i"를 직접 그려서, 크기는 비슷해도(13px vs 14px) 속이 빈 동그라미라
   무게감이 달라 혼자 커 보였다. 투명한 원은 호버 영역으로만 남긴다.
   2026-08-19: 이건 Material Symbols 합자("info"라는 **글자**를 폰트가 아이콘 모양으로
   바꿔 그리는 방식)였다. 아이콘을 SVG 스프라이트로 옮기면서(a34c802) 폰트가 사라져
   합자가 안 풀렸고, 축 라벨마다 «info»라는 글자가 그대로 찍혔다. 스프라이트의 #i-info를
   쓴다 — 크기는 use의 width/height로 잡으므로 font-size는 필요 없다. */
.radar-label-info-hit {
  fill: transparent;
  stroke: none;
}

.radar-label-info-glyph {
  fill: var(--color-text-muted);
}

.radar-label-info:hover .radar-label-info-glyph,
.radar-label-info:focus .radar-label-info-glyph {
  fill: var(--color-brand);
}

.radar-tooltip {
  position: absolute;
  z-index: var(--layer-tooltip);
  width: max-content;
  max-width: min(260px, calc(100% - 12px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-3);
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.radar-tooltip[hidden] {
  display: none;
}

.score-total {
  position: absolute;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.score-total strong {
  font-size: 52px;
  line-height: 1;
}

.score-total span {
  color: var(--muted);
  font-size: 12px;
}

/* 점수 6개는 기본적으로 한 줄을 유지하고, 카드 자체가 충분히 좁아질 때만 3개씩 나눈다. */
.score-component-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: center;
  margin-top: var(--space-6);
}

@container dashboard-score (max-width: 440px) {
  .score-component-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.score-component-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  text-align: center;
}

.score-component-list span,
.score-component-list strong,
.score-status {
  font-size: 12px;
}

.score-component-list span,
.score-status {
  color: var(--muted);
}

.score-component-list > .metric-row > strong {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  text-align: center;
  white-space: nowrap;
}

/* 전체 대비 변화량(2026-08-02). 색은 이 글자에만 준다 — 점수 숫자 본체까지 칠하면
   "점수가 높다/낮다"(scoreClass)와 "올랐다/내렸다"가 같은 색을 두 뜻으로 쓰게 된다.
   변화가 없으면 하이픈으로 자리만 지켜, 전체 카드와 최근 카드의 행 높이를 맞춘다. */
.score-delta {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

.score-delta.is-up { color: var(--green); }
.score-delta.is-down { color: var(--orange); }
.score-delta.is-flat { color: var(--faint); }

/* 검색어의 추이 화살표(2026-08-02). classify_trend가 up/down/same 세 값을 아이콘에 붙이는데
   대응하는 색 규칙이 아예 없어서 세 방향이 전부 같은 회색으로 보였다 — 아이콘 모양만으로는
   목록을 훑을 때 구분되지 않는다.
   검색어 탐색 목록과 비교 목록 두 곳이 같은 마크업을 쓰므로 한 규칙으로 덮는다.
   .up/.down/.same은 이름이 너무 흔해 다른 요소에 잘못 걸릴 수 있으니 아이콘에 한정한다.

   위 score-delta와 색이 다른 이유: 저쪽은 내 블로그 점수의 등락이라 하락을 경고가 아닌
   주의(주황)로 두었고, 이쪽은 외부 검색 수요의 방향이라 하락이 곧 나쁜 신호다. */
.icon.up { color: var(--green); }
.icon.down { color: var(--red); }
.icon.same { color: var(--faint); }

.score-component-list > div > .label-with-info {
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  font-size: 12px;
  text-align: center;
}

.score-component-list > div > .label-with-info .icon {
  font-size: 16px;
}

.score-component-list .dashboard-score-reference {
  display: none;
}

.view[data-view-panel="dashboard"] .score-component-list .dashboard-score-actual {
  font-size: 36px;
}

.score-component-list .info-tip {
  display: none;
}

.dashboard-signals-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* 성격별 4묶음이 들어오면서 "12행 고정 그리드 + display:contents"를 쓸 수 없게 됐다
   (2026-08-02) — 묶음 래퍼가 생기면 그리드가 12개가 아니라 4개만 배치해 행이 겹친다.
   행 높이를 고정하는 대신 자연 높이로 쌓고, 카드가 남으면 묶음 사이 여백이 늘어나게 한다. */

/* space-between은 남는 공간을 묶음 사이에 몰아줘서 간격이 49/129/49로 들쭉날쭉해졌다
   (2026-08-02) — 위에서부터 채우고 남는 공간은 카드 아래에 두어 간격을 균일하게 한다. */
.dashboard-signal-sequence {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-5);
  --signal-row-height: 68px;
}

/* 묶음이 두 컨테이너(HTML 고정 6 + JS 렌더 6)에 나뉘어 있어 남는 공간을 4등분할 수 없다.
   억지로 space-between을 걸면 컨테이너 안쪽만 벌어져 간격이 73/38/73으로 어긋난다
   (2026-08-02) — 균일한 간격을 택하고 남는 공간은 카드 아래에 둔다. */
.dashboard-signal-sequence > .metric-list {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

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

.visitor-summary-list > .visitor-summary-row + .visitor-summary-row {
  padding-left: var(--space-6);
  border-left: 1px solid var(--line);
}

.visitor-goal {
  text-align: left;
}

.source-badge,
.keyword-card-head > span,
.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.source-badge {
  min-height: 24px;
}

.primary-button,
.naver-login-button,
.ghost-button,
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.action-button {
  min-height: var(--control-height);
}

.primary-button,
.naver-login-button,
.ghost-button {
  font-size: 13px;
}

.ghost-button {
  font-weight: 750;
}

.inline-action-link {
  width: fit-content;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--active);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: none;
}

/* 배경·글자색은 아래 공통 상호작용 블록이 정한다(밑줄 대신 배경으로 통일, 2026-08-02).
   여기서는 버튼 기본값으로 남는 그림자·이동만 지운다. */
.inline-action-link:hover {
  box-shadow: none;
  transform: none;
}

.inline-action-link:disabled {
  opacity: 0.52;
}

.icon-button,
.mobile-user-button,
.mobile-menu-button,
.mobile-close-button {
  width: var(--control-action-size);
  height: var(--control-action-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
}

/* «tiny»는 표 안에 들어가는 작은 아이콘 버튼이다. 규칙이 styles.css에 있었는데 그 파일이
   통째로 지워질 때(4734160) 같이 사라졌고, 클래스만 마크업 13곳에 남아 아무 일도 하지
   않고 있었다(2026-08-19 발견). 그 사이 추천 표에서는 «관련 사이트» 버튼 42px 옆에
   «제외» 버튼 32px이 나란히 놓이는 어긋남이 생겼다 — 제외 쪽만 다른 규칙이 크기를
   잡아주고 있었기 때문이다.
   되살리되 **크기만** 되살린다. 옛 규칙의 border-radius: 8px은 지금 아이콘 버튼이 쓰는
   알약 모양(--radius-round)과 다른 옛 디자인 언어라 가져오지 않는다.
   위치도 일부러 여기다 — 아래 [data-clear-input] 규칙보다 **앞**이라야 입력칸 안의
   지우기 버튼은 지금처럼 칸 너비를 꽉 채운다(거기선 32px로 줄이면 오른쪽이 빈다). */
.icon-button.tiny {
  width: 32px;
  height: 32px;
}

.mobile-user-button,
.mobile-menu-button,
.mobile-close-button {
  border: 0;
  background: transparent;
  color: var(--text);
}

.fill-progress-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.fill-progress-button .fill-progress-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.fill-progress-button .fill-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 220ms var(--ease-3);
}

.fill-progress-button.is-syncing .fill-progress-track {
  opacity: 1;
}

.fill-progress-button.is-syncing:disabled {
  opacity: 1;
}

.fill-progress-button.is-syncing .fill-progress-label {
  position: relative;
  z-index: 1;
  min-width: 74px;
  font-variant-numeric: tabular-nums;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: 0 var(--space-2);
  outline: none;
}

textarea {
  padding-top: var(--space-2);
  resize: none;
}

.fixed-url-input,
.clearable-input {
  display: grid;
  align-items: center;
}

.fixed-url-input {
  grid-template-columns: auto minmax(0, 1fr) var(--control-action-size);
}

.clearable-input {
  grid-template-columns: minmax(0, 1fr) var(--control-action-size);
}

.fixed-url-prefix {
  padding: 0 var(--space-2);
  color: var(--faint);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.fixed-url-input input,
.clearable-input input {
  min-height: var(--control-inner-height);
  border: 0;
  background: transparent;
}

.fixed-url-input input {
  padding-left: 0;
}

.fixed-url-input [data-clear-input],
.clearable-input [data-clear-input] {
  width: var(--control-action-size);
  height: var(--control-inner-height);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  flex: 0 0 var(--control-action-size);
}

.fixed-url-input [data-clear-input] .icon,
.clearable-input [data-clear-input] .icon {
  font-size: var(--icon-size);
  line-height: 1;
}

.fixed-url-input [data-clear-input]:hover,
.clearable-input [data-clear-input]:hover {
  color: var(--text);
}

label {
  display: grid;
  gap: var(--space-1);
  color: var(--text);
}

label:has(input[type="checkbox"]),
.analysis-limit label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

.note-box,
.empty-state,
.comparison-recommendation,
.comparison-detail,
.access-row,
.public-detail-metrics span,
.comparison-detail-grid > div {
  padding: var(--space-3);
}

.status-box strong,
.status-box span,
.keyword-data-status strong,
.keyword-data-status span {
  display: inline;
  color: inherit;
  font: inherit;
}

.status-box strong + span::before,
.keyword-data-status strong + span::before {
  content: " · ";
}

.status-box {
  padding: 8px 10px;
}

.keyword-data-status {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.dashboard-signal-row span,
.dashboard-signal-row small,
.table-row small,
.recommend-row,
.published-row,
.comparison-row,
.benchmark-post-row,
.benchmark-compare-row,
.detail-keyword-row {
  font-size: 12px;
}

.dashboard-signal-row strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
}

.dashboard-signal-list,
.table-list,
.opportunity-mini-list,
.check-list,
.detail-keyword-section,
.detail-keyword-groups,
.detail-keyword-group,
.writing-panel,
.analysis-panel,
.category-bars,
.benchmark-posts {
  display: grid;
}

.dashboard-signal-list,
.table-list,
.opportunity-mini-list,
.detail-keyword-section,
.detail-keyword-groups,
.detail-keyword-group,
.writing-panel,
.analysis-panel,
.category-bars,
.benchmark-posts {
  gap: var(--space-2);
}

.dashboard-signal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}

.dashboard-signal-row button,
.dashboard-signal-row a {
  min-height: 42px;
  display: grid;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.dashboard-signal-row button {
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  text-align: left;
}

.dashboard-signal-row a {
  width: 42px;
  place-items: center;
  border-left: 1px solid var(--line);
}

.visitor-chart,
.benchmark-visitor-chart {
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  align-items: end;
  gap: var(--space-4);
  padding: var(--space-4);
}

.visitor-chart.has-line-chart {
  display: block;
  min-height: 220px;
  padding: var(--space-4) 0 var(--space-1);
}

.visitor-line-chart {
  width: 100%;
  height: 210px;
  overflow: visible;
}

.visitor-area-start {
  stop-color: var(--green);
  stop-opacity: 0.24;
}

.visitor-area-middle {
  stop-color: var(--green);
  stop-opacity: 0.09;
}

.visitor-area-end {
  stop-color: var(--green);
  stop-opacity: 0;
}

.visitor-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-guide {
  stroke-width: 1;
}

.visitor-point {
  fill: var(--surface);
  stroke-width: 2;
}

.visitor-point.is-today {
  stroke-width: 4;
}

.visitor-chart-label,
.visitor-chart-value {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 10px;
}

.visitor-chart-value.is-today {
  fill: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.visitor-comparison-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visitor-comparison-point {
  fill: var(--surface);
  stroke-width: 2;
}

.visitor-comparison-value {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
}

.visitor-comparison-value.mine {
  fill: var(--benchmark-own);
}

/* ── 클릭 가능한 요소의 공통 상태(2026-08-02) ──────────────────────────────────
   그동안 호버 배경이 파일마다 달랐다 — compatibility는 --active-bg, open-props는
   --color-surface-subtle, m3-theme은 color-mix 6%. 같은 "누를 수 있다"는 신호가
   화면마다 다른 색으로 보였다. 좌측 메뉴가 쓰던 방식(배경 옅게)으로 통일하고
   호버/누름/선택됨 세 상태를 한 곳에서 정한다.
   새 클래스를 만들지 않고 이미 있는 선택자를 묶어, 마크업은 그대로 둔다. */
.metric-row-interactive > button,
.metric-row-interactive > a,
.content-item-list .recommend-row,
.content-item-list .published-row,
.content-item-list .improvement-row,
.keyword-row,
.comparison-row,
.benchmark-post-row,
.benchmark-compare-row,
.panel-header-link,
.inline-action-link {
  cursor: pointer;
}

.metric-row-interactive > button:hover,
.content-item-list .recommend-row:hover,
.content-item-list .published-row:hover,
.content-item-list .improvement-row:hover,
.inline-action-link:hover {
  background: var(--color-accent-soft);
}

.metric-row-interactive > button:hover,
.content-item-list .recommend-row:hover,
.content-item-list .published-row:hover,
.content-item-list .improvement-row:hover,
.keyword-row:hover,
.comparison-row:hover,
.benchmark-post-row:hover,
.benchmark-compare-row:hover,
.inline-action-link:hover {
  color: var(--color-on-accent-soft);
}

/* 누르는 순간에는 한 단계 더 짙게 — 클릭이 먹었는지 손끝으로 확인된다. */
.metric-row-interactive > button:active,
.metric-row-interactive > a:active,
.content-item-list .recommend-row:active,
.content-item-list .published-row:active,
.content-item-list .improvement-row:active,
.keyword-row:active,
.comparison-row:active,
.benchmark-post-row:active,
.benchmark-compare-row:active,
.inline-action-link:active {
  background: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-text) 12%);
}

/* 눌러서 열려 있는 상태(펼침·선택됨)는 호버와 같은 배경을 유지해 "지금 이걸 보고 있다"를 남긴다. */
.benchmark-post-item[open] > .benchmark-post-row,
.guide-item[open] > .guide-summary {
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}

/* 상세 모달의 섹션 제목. 예전엔 13px/750으로 본문 행(12px)과 1px 차이라 어디서 섹션이
   갈리는지 눈으로 안 잡혔다(2026-08-03 "그루핑이 필요하다"). 크기·색·여백을 벌려
   제목은 제목으로 읽히게 한다. 다른 화면의 .panel-header와 같은 역할이므로 같은 톤을 쓴다. */
.detail-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--type-component-title-size);
  line-height: var(--type-component-title-line);
  font-weight: var(--type-component-title-weight);
  color: var(--text);
}

.detail-group-head:first-child {
  margin-top: 0;
}

/* 상세 모달을 보고서로 읽히게 한다(2026-08-03) — 맨 위에 결론, 아래에 근거, 끝에 할 일.
   요약 카드는 대시보드 점수 카드와 같은 구성을 쓴다: 큰 숫자 · 축 목록 · 해석 한 줄. */
.modal-summary-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal-summary-panel .score-component-list {
  margin-top: 0;
}

/* 액션 필드 — 버튼만 덩그러니 두지 않고 "여기서 할 수 있는 것"이라고 이름을 붙인다
   (2026-08-03 사용자 요청). 보고서의 마지막 칸이라 위와 선으로 끊는다. */
.modal-actions-label {
  display: block;
  color: var(--muted);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: 1.2;
}

.modal-actions-copy {
  min-width: 0;
  flex: 1 1 320px;
  align-self: center;
  display: grid;
  gap: 2px;
  margin-right: auto;
}

.modal-detail-body > .modal-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
}

/* 화면 맨 아래 단서. 판정 근거는 요약 카드로 올라갔고, 여기 남는 건 읽는 법에 대한 주석뿐이다. */
.modal-detail-footnote {
  margin: 0;
  color: var(--faint);
  font-size: var(--type-caption-size);
  line-height: 1.2;
}

/* ── 상세 모달(2026-08-04 시안) ──────────────────────────────────────────────
   보고서로 읽히게 두괄식으로 짠다. 세부 점수를 숫자로 늘어놓지 않고 "됐나 안 됐나"로
   보여준다 — 사용자가 20/20을 봐도 판단이 서지 않는다는 지적. 꺼진 항목은 아래
   개선 가이드로 이어지므로, 켜짐과 꺼짐이 한눈에 갈려야 그 연결이 보인다. */
.detail-title-head h2 {
  margin: 0;
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line);
  font-weight: var(--type-section-title-weight);
}

.detail-title-meta {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--type-supporting-size);
}

.modal-detail-body {
  --detail-section-gap: var(--space-6);
  --detail-section-edge: var(--space-6);
}

.detail-verdict {
  display: grid;
  grid-template-columns:
    minmax(var(--layout-detail-score-min), var(--layout-detail-score-ratio))
    minmax(0, var(--layout-detail-content-ratio));
  align-items: stretch;
  gap: 0;
  margin: var(--detail-section-gap) 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2, 8px);
}

/* 2026-08-06: 큰 점수를 뺀 판정 전용 모양. 두 칸 격자를 한 칸으로 되돌려 판정 박스가
   머리 전체를 쓰게 한다 — 점수 칸만 지우면 빈 칸이 남는다. */
.detail-verdict.verdict-only {
  grid-template-columns: minmax(0, 1fr);
}

.detail-verdict-note {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 13px;
}

/* 총점은 이 화면에서 가장 먼저 읽혀야 하는 값이라 크게 둔다 — 목록의 작은 점수 배지와
   같은 크기면 두괄식이 되지 않는다. 배지 모양(원형 배경)은 벗기고 숫자만 남긴다. */
.detail-verdict-score > .score-dot,
.detail-verdict-score > .score-state {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  letter-spacing: 0;
}

.detail-verdict-score > .score-dot {
  font-family: var(--dashboard-score-actual-font);
  font-size: 96px;
  line-height: 0.9;
  font-weight: 400;
}

.detail-verdict-score > .score-state {
  font-family: var(--font);
  font-size: var(--type-component-title-size);
  line-height: var(--type-component-title-line);
  font-weight: var(--type-component-title-weight);
}

.detail-verdict-score > span {
  color: var(--text);
  font-size: var(--type-component-title-size);
  font-weight: var(--type-component-title-weight);
}

.detail-verdict-body {
  flex: 1;
  min-width: 0;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: var(--space-5) var(--space-6);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}

.detail-verdict-body h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--type-component-title-size);
  font-weight: var(--type-component-title-weight);
  text-align: left;
}

.detail-verdict-body ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--text);
  font-size: var(--type-supporting-size);
  line-height: 1.7;
}

.detail-verdict-body li + li {
  margin-top: var(--space-2);
}

.detail-section-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--detail-section-gap) * 2) calc(var(--detail-section-edge) * -1) var(--detail-section-gap);
}

.detail-section-divider::before {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--line);
  content: "";
}

.detail-section-divider > span {
  position: relative;
  z-index: 1;
  min-width: 220px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--type-component-title-size);
  font-weight: var(--type-component-title-weight);
  line-height: var(--type-component-title-line);
  text-align: center;
}

.detail-block {
  margin: var(--space-5) 0;
}

.detail-block-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  font-size: var(--type-component-title-size);
  font-weight: var(--type-component-title-weight);
  text-align: center;
}

.detail-block-head > em {
  color: var(--green);
  font-style: normal;
}

/* 점수판 머리(2026-08-07) — 왼쪽에 좁게 세우고, 제목 두 줄 아래 점수를 크게.
   가운데 정렬 한 줄이던 것을 바꿨다: 항목 칸이 오른쪽을 넓게 쓰도록 폭을 양보한다.
   칸 안에서는 가로·세로 모두 가운데(2026-08-07 사용자). */
.detail-score-panel > .detail-block-head {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  height: 100%;
  margin: 0;
  text-align: center;
}

.detail-block-title {
  display: grid;
  gap: 2px;
  line-height: 1.2;
}

.detail-block-title > small {
  color: var(--muted);
  font-size: var(--type-caption-size);
  font-weight: 600;
}

/* 큰 점수 지표는 전부 Bebas Neue로 통일돼 있다(대시보드·목록 뱃지와 같은 글꼴). */
.detail-score-panel > .detail-block-head > .detail-block-score {
  font-family: var(--dashboard-score-actual-font);
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
}

.detail-block-score.green { color: var(--green); }
.detail-block-score.yellow { color: var(--yellow); }
.detail-block-score.orange { color: var(--orange); }
.detail-block-score.red { color: var(--red); }
.detail-block-score.crimson { color: var(--crimson); }

.detail-score-panel {
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-6);
  margin: var(--detail-section-gap) 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2, 8px);
}

.modal-detail-body > .improvement-detail-group,
.modal-detail-body > .detail-keyword-section {
  margin: var(--detail-section-gap) 0;
}

.detail-score-panel .detail-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-8) var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* 콘텐츠 품질 10개 항목은 넓은 화면에서 정확히 5개씩 두 줄로 맞춘다. */
.detail-score-panel .detail-completeness-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 항목 수가 늘거나 줄어도 안 깨지게 auto-fit으로 둔다 — 배점 항목은 앞으로 바뀔 예정이다. */
.detail-stat-grid {
  display: grid;
  /* 다섯 칸을 기준으로 접히게 한다 — 항목이 10개면 5+5로 두 줄이 되어 시안과 같아진다.
     항목 수가 바뀌어도 auto-fit이 알아서 맞추므로 개수에 묶이지 않는다. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.detail-stat {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}

.detail-stat > span {
  color: var(--muted);
  font-size: var(--type-caption-size);
}

.detail-stat > strong {
  font-size: 17px;
  font-weight: 750;
}

/* 켜짐은 본문색, 꺼짐은 흐리게 — 색을 더 쓰지 않고 명도만으로 가른다.
   빨강을 쓰면 "틀렸다"로 읽히는데, 안 넣은 것이 잘못은 아니다(감성 글에 지도가 없는 것처럼). */
.detail-stat.is-off > span,
.detail-stat.is-off > strong {
  color: var(--faint);
}

.detail-stat.is-partial > strong {
  color: var(--color-on-warm-soft);
}

/* 검색어 세부 — 한 줄에 검색어·순위·포화도·AI배지·교정이 들어간다. */
.keyword-detail-group {
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.keyword-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
}

.keyword-detail-head h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.keyword-detail-head small {
  color: var(--muted);
  font-size: var(--type-caption-size);
  text-align: right;
}

/* 칸 폭을 고정한다(2026-08-07) — auto로 두면 내용 길이에 따라 행마다 자리가 달라져서
   같은 뜻의 값("2페이지 안에 없음")이 들쭉날쭉하게 놓였다. 다섯 칸을 항상 같은 자리에 둔다. */
.keyword-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 190px) 92px 78px;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.keyword-detail-row + .keyword-detail-row {
  border-top: 1px solid var(--line);
}

.keyword-detail-row:hover {
  background: var(--color-accent-soft);
}

/* 목록 열 머리글 클릭 정렬(2026-08-07). 위쪽 정렬 선택과 별개로, 아무 열이나 눌러 바로 뒤집어 본다. */
/* 저장 실패 띠(2026-08-07) — 화면 맨 위에 고정. 조용히 실패하는 것이 가장 나쁘다(§5-24). */
.save-alert {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-soft, #fdd);
  color: var(--color-on-danger-soft, #400);
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

/* 배경 작업이 멈춘 것은 저장 실패보다 덜 급하다 — 붉은색 대신 경고색. */
.save-alert.is-warn {
  background: color-mix(in srgb, var(--orange) 18%, var(--surface));
  color: var(--color-text);
}

.save-alert[hidden] {
  display: none;
}

.save-alert-text {
  flex: 1;
  min-width: 0;
}

.save-alert-retry {
  flex: none;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* 띠가 떠 있는 동안 상단 내용이 가리지 않게 밀어둔다. */
body.has-save-alert .workspace {
  padding-top: 52px;
}

.is-sortable {
  cursor: pointer;
  user-select: none;
}

.is-sortable:hover {
  color: var(--color-brand);
}

.is-sortable::after {
  content: "";
  margin-left: 4px;
  font-size: 10px;
  opacity: 0;
}

.is-sortable:hover::after {
  content: "↕";
  opacity: 0.4;
}

.is-sortable.is-sorted-asc::after {
  content: "▲";
  opacity: 1;
}

.is-sortable.is-sorted-desc::after {
  content: "▼";
  opacity: 1;
}

.keyword-detail-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keyword-detail-rank,
.keyword-detail-briefing {
  justify-self: end;
  text-align: right;
}

.keyword-detail-briefing:empty,
.keyword-row-actions:empty {
  display: block;
}

.keyword-saturation {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--type-caption-size);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keyword-row-actions {
  display: flex;
  gap: var(--space-2);
  justify-self: end;
}

.keyword-detail-empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-caption-size);
}

/* 항목마다 "몇 점 만점에 몇 점"을 같이 보여준다(2026-08-05, 원칙 5).
   값 아래 작은 글씨로 두어 판정(반영/미반영)을 읽는 흐름을 방해하지 않는다. */
.detail-stat-score {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums;
}