.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4);
}

.logo-button,
.mobile-logo-button {
  border: 0;
  background: transparent;
}

.logo-button {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2) var(--space-4);
}

.logo-button img {
  width: 132px;
  height: auto;
}

.main-nav {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.nav-item,
.nav-subitem {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  text-align: left;
}

.nav-item {
  padding: 0 var(--space-3);
}

/* 왼쪽 여백은 «아이콘 자리를 건너뛴 만큼»이다. 38px은 손으로 어림한 값이라 실제
   (padding 10.5 + 아이콘 24 + gap 7 = 41.5)보다 3.5px 모자랐고, 그만큼 하위 항목 글자가
   상위 항목 글자보다 왼쪽으로 튀어나와 있었다(2026-08-19). 어림수 대신 실제 구성으로 적는다. */
.nav-subitem {
  padding: 0 var(--space-3) 0 calc(var(--space-3) + var(--icon-size-large) + var(--space-2));
}

.nav-group {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-1) 0;
}

.nav-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  /* .nav-item·.nav-subitem은 호버 테두리 자리로 1px 투명 테두리를 갖는데 이것만 없어서
     아이콘·글자가 1px 왼쪽으로 밀려 있었다(2026-08-19). 보이지는 않지만 자리는 맞춘다. */
  border: 1px solid transparent;
}

.nav-group.active .nav-group-label {
  color: var(--text);
}

.sidebar-bottom {
  min-width: 0;
  overflow: hidden;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* 배경 작업 상태 — 사이드바 하단에 늘 보인다(2026-08-08).
   문제일 때만 알리면 평소에 정상인지 알 수 없다는 지적을 반영한 자리다. */
.sidebar-health {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.sidebar-health[hidden] {
  display: none;
}

.sidebar-health-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--green);
}

.sidebar-health[data-tone="idle"] .sidebar-health-dot { background: var(--muted); }
.sidebar-health[data-tone="bad"] .sidebar-health-dot { background: var(--red); }

/* 도는 중일 때만 숨을 쉰다 — 멈춘 것과 눈으로 구분된다. */
.sidebar-health[data-tone="ok"] .sidebar-health-dot {
  animation: sidebar-health-pulse 2s ease-in-out infinite;
}

@keyframes sidebar-health-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-health[data-tone="ok"] .sidebar-health-dot { animation: none; }
}

.sidebar-health-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sidebar-health-text > strong {
  font-size: 12px;
  font-weight: 700;
}

.sidebar-health-text > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.account-button {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  padding: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

/* 툴팁 온/오프는 설명 아이콘(14px)과 달리 직접 누르는 버튼이라 크게 둔다(2026-08-02). */
.sidebar-tips-toggle .icon {
  width: var(--icon-size-large);
  height: var(--icon-size-large);
  font-size: var(--icon-size-large);
}

.sidebar-tips-toggle {
  width: var(--control-action-size);
  height: var(--control-action-size);
  flex: 0 0 var(--control-action-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.sidebar-tips-toggle.is-active {
  color: var(--green);
}

.sidebar-tips-toggle:hover,
.sidebar-tips-toggle:active {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.account-button > span:last-child,
.mobile-account-summary > div {
  min-width: 0;
  overflow: hidden;
}

.account-button strong,
.mobile-account-summary strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.account-button small,
.mobile-account-summary small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 12px;
  font-weight: 800;
}

.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sidebar-account-row .avatar {
  aspect-ratio: 1;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  clip-path: circle(50% at 50% 50%);
}

.workspace {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.topbar-left {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.eyebrow,
.comparison-note,
.detail-list,
.benchmark-facts {
  color: var(--muted);
}

.topbar-right,
.row-actions,
.integration-actions,
.modal-actions,
.control-row,
.event-data-toolbar,
.keyword-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.view {
  padding: var(--space-5) var(--space-8) var(--space-8);
}

/* 전 페이지 공통 카피라이트(2026-07-31) — 뷰는 한 번에 하나만 .active라, .workspace 맨 끝에 하나만
   두면 어느 페이지를 보든 그 내용 아래에 붙는다. 스크롤을 끝까지 내렸을 때만 눈에 들어오도록
   흐린 톤으로 두고, 모달(dialog)은 .workspace 밖이라 자연히 제외된다. */
.app-footer {
  padding: var(--space-6) var(--space-8) var(--space-8);
  color: var(--color-text-muted, var(--muted));
  font-size: 12px;
  text-align: center;
  opacity: 0.55;
}

.dashboard-grid,
.dashboard-overview,
.keyword-summary,
.settings-grid,
.quality-workspace,
.benchmark-workspace,
.public-detail-metrics,
.comparison-detail-grid {
  display: grid;
}

.dashboard-grid,
.keyword-summary,
.settings-grid,
.public-detail-metrics,
.comparison-detail-grid {
  gap: var(--space-4);
}

/* 대시보드 상단 3열(2026-08-02 재구성).
     1행: 전체 HaruScore · 최근 HaruScore · 실효 지표
     2행: 방문자 추이(2칸)          · 실효 지표가 세로로 이어짐
   실효 지표는 옮겨온 지표가 많아 두 행을 관통하는 긴 카드가 된다. */
.dashboard-overview {
  grid-template-columns: minmax(0, 32fr) minmax(0, 32fr) minmax(0, 26fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.dashboard-overview > .dashboard-signals-panel {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.dashboard-overview > .dashboard-blog-panel {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin-bottom: 0;
}

.dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard-blog-panel {
  margin-bottom: var(--space-4);
}

.dashboard-actions {
  margin-top: 0;
}
.span-6 { grid-column: span 6; }

/* 모달이 열려 있는 동안 배경 스크롤을 잠근다(2026-08-05).
   <dialog>는 배경 스크롤을 막아주지 않아서, 모달 안에서 굴리면 뒤 화면이 같이 움직였다.
   position:fixed 대신 overflow:hidden을 쓰는 이유 — fixed는 스크롤 위치를 잃어버려
   모달을 닫았을 때 목록 맨 위로 튕긴다. */
body.modal-open {
  overflow: hidden;
}