/*!
 * 모먼트 인사이트 · C 30일 순위(쿠팡) 화면 CSS — 명세 v3 §8.6, N30 틀 맞춤(2026-10-16), 디테일 고도화(2026-10-23)
 * 범위는 #mi-admin .mi-coupang-rank-… 와 #mi-clean .mi-coupang-rank-…(2b용) 두 곳뿐이다.
 * 카드·요약칸·선택 항목 정리·그룹·날짜 칸은 N30 클래스(mi-rank-tracker-card · mi-rank-auto-center ·
 * mi-rank-bulk-bar · mi-rank-group-section · mi-rank-day-card 등)를 그대로 써서 admin.html 인라인 CSS 가
 * 똑같이 적용되게 한다. 여기서는 쿠팡에만 있는 칸·버튼과 C30 만 다른 모양(대표 결정 2026-10-23: 'N30 과 달라지는 부분은 쿠팡만 바꿈')만
 * 조정한다. N30 화면과 admin.html 인라인 공용 .mi-rank-* 규칙은 건드리지 않는다.
 * 색은 var(--mi-*) 토큰만 쓴다(16진 색 0). 이 파일은 인라인 <style> 보다 먼저 읽히므로, 공용 클래스를 덮을 때는
 * .mi-coupang-rank-* 를 하나 더 붙여 특이도를 올린다.
 * 너비 기준은 N30 과 같은 900px(휴대폰·태블릿 세로) · 901~1180px · 901~1360px · 720px 이다.
 */

#mi-admin .mi-coupang-rank-root,
#mi-clean .mi-coupang-rank-root {
  display: grid;
  gap: 14px;
  min-width: 0;
  /* 오른쪽 아래 카카오 '채널 문의' 단추가 마지막 칸을 가리지 않게 */
  padding-bottom: 96px;
}

#mi-admin .mi-coupang-rank-root [hidden],
#mi-clean .mi-coupang-rank-root [hidden] {
  display: none !important;
}

/* 화면 읽기 프로그램에만 보이는 글('선택' · 상태 알림) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-sr,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 화면 머리(admin.html, 한 겹): 대상 알약은 오른쪽(옛 '관리자 확인용' 배지 자리) ── */
#mi-admin .mi-coupang-rank-screen-head .mi-target-echo,
#mi-clean .mi-coupang-rank-screen-head .mi-target-echo {
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
}

#mi-admin .mi-coupang-rank-screen-head h1,
#mi-clean .mi-coupang-rank-screen-head h1 {
  word-break: keep-all;
}

/* ── 큰 카드(N30 상품 카드와 같은 article.mi-card.mi-rank-card) ── */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-main,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-main {
  min-width: 0;
  margin: 0;
}

/* 등록 줄: N30 .mi-rank-form 의 칸 비율에서 고정 범위 칩(104px)을 뺀 4칸(키워드·URL·그룹·버튼, 높이 44px).
   사이드바가 있는 좁은 너비(901~1070px)에서 줄을 넘지 않게 최소 너비만 0 으로 둔다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-create,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-create {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.8fr) auto;
}

#mi-admin .mi-coupang-rank-create .mi-input,
#mi-clean .mi-coupang-rank-create .mi-input {
  min-width: 0;
  width: 100%;
}

/* 등록 줄 아래 안내 한 줄 + 오른쪽 한도 알약(추적 N / M개) */
#mi-admin .mi-coupang-rank-form-foot,
#mi-clean .mi-coupang-rank-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-top: 8px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-form-hint,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-form-hint {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  line-height: 1.5;
}

#mi-admin .mi-coupang-rank-limit,
#mi-clean .mi-coupang-rank-limit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 28px;
  margin: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  padding: 0 11px;
  color: var(--mi-navy);
  background: var(--mi-grey-50);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-black);
  white-space: nowrap;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-status,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-status {
  margin: 10px 0 0;
}

#mi-admin .mi-coupang-rank-help,
#mi-admin .mi-coupang-rank-muted,
#mi-clean .mi-coupang-rank-help,
#mi-clean .mi-coupang-rank-muted {
  margin: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  line-height: 1.5;
}

#mi-admin .mi-coupang-rank-muted.is-warn,
#mi-admin .mi-coupang-rank-capacity,
#mi-clean .mi-coupang-rank-muted.is-warn,
#mi-clean .mi-coupang-rank-capacity {
  color: var(--mi-warn);
}

#mi-admin .mi-coupang-rank-capacity,
#mi-clean .mi-coupang-rank-capacity {
  margin: 10px 0 0;
  border: 1px solid var(--mi-warn);
  border-radius: var(--mi-radius);
  padding: 9px 11px;
  background: var(--mi-warn-bg);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
  line-height: 1.5;
}

/* ── 목록 패널(N30 .mi-rank-panel.mi-rank-history) ── */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-board,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-board {
  min-width: 0;
}

/* 목록 제목(개수는 N30 처럼 필터 줄 끝 알약 .mi-rank-filter-count) */
#mi-admin .mi-coupang-rank-board-head,
#mi-clean .mi-coupang-rank-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 10px;
}

#mi-admin .mi-coupang-rank-board-head h3,
#mi-clean .mi-coupang-rank-board-head h3 {
  margin: 0;
  color: var(--mi-navy);
  font-size: 14px;
  font-weight: var(--mi-weight-black);
}

/* 필터 줄: N30 .mi-rank-filterbar 와 같은 칸·순서 [검색][그룹][상태 버튼][개수 알약]. 상태 버튼이 7개(N30 4개)라 한 줄에 다 넣으면
   검색칸이 좁아져, 1361px 이상은 [검색(늘어남)][그룹][개수] / [상태 버튼] 두 줄 칸으로 둔다. 901~1360px 는 N30 같은 너비 규칙처럼
   감기는 줄(아래 901~1360px 규칙), 900px 이하는 한 줄씩(아래 900px 규칙). 아래 flex 값은 감기는 줄일 때만 쓰인다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-filterbar,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 250px) max-content;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#mi-admin .mi-coupang-rank-filterbar > .mi-input,
#mi-clean .mi-coupang-rank-filterbar > .mi-input {
  flex: 1 1 260px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-filterbar > .mi-rank-group-filter,
#mi-clean .mi-coupang-rank-filterbar > .mi-rank-group-filter {
  flex: 0 1 250px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-filterbar > .mi-rank-filter-actions,
#mi-clean .mi-coupang-rank-filterbar > .mi-rank-filter-actions {
  flex: 1 1 auto;
}

#mi-admin .mi-coupang-rank-filterbar > .mi-rank-filter-count,
#mi-clean .mi-coupang-rank-filterbar > .mi-rank-filter-count {
  flex: 0 0 auto;
}

#mi-admin .mi-coupang-rank-filterbar > .mi-rank-filter-actions,
#mi-clean .mi-coupang-rank-filterbar > .mi-rank-filter-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-filter-actions,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-filter-actions {
  align-items: center;
}

/* 상태 버튼 글자는 N30 공용 값(11px) 그대로 · 개수는 같은 버튼 안 흐린 숫자 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button {
  white-space: nowrap;
}

#mi-admin .mi-coupang-rank-filter-num,
#mi-clean .mi-coupang-rank-filter-num {
  color: var(--mi-muted);
  font-style: normal;
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-root .mi-rank-filter-button.is-active .mi-coupang-rank-filter-num,
#mi-clean .mi-coupang-rank-root .mi-rank-filter-button.is-active .mi-coupang-rank-filter-num {
  color: var(--mi-gold);
}

#mi-admin .mi-coupang-rank-filter-sep,
#mi-clean .mi-coupang-rank-filter-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--mi-line);
}

#mi-admin .mi-coupang-rank-list-note,
#mi-clean .mi-coupang-rank-list-note {
  margin: 0 0 10px;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 8px 11px;
  color: var(--mi-muted);
  background: var(--mi-grey-50);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-list-note.is-warn,
#mi-clean .mi-coupang-rank-list-note.is-warn {
  border-color: var(--mi-warn);
  color: var(--mi-warn);
  background: var(--mi-warn-bg);
}

#mi-admin .mi-coupang-rank-list,
#mi-clean .mi-coupang-rank-list {
  min-width: 0;
}

/* ── ① 지금 확인 상태판(N30 요약칸 .mi-rank-auto-center 자리·칸 모양): [알약·제목·한 줄] [칸 3개] [끄기/켜기] + 아래 넓은 줄 ── */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual {
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2.2fr) auto;
  gap: 10px 12px;
  min-width: 0;
  margin-bottom: 12px;
}

#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-pill.is-wait,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-pill.is-wait {
  border-color: var(--mi-line);
  color: var(--mi-blue);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-pill.is-muted,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-pill.is-muted {
  border-color: var(--mi-line);
  color: var(--mi-muted);
  background: var(--mi-panel);
}

/* 한 줄 글은 어절 단위로 줄을 바꾼다(글자 중간 꺾임 '닫|습니다' 방지, 2026-10-24 재검사 3차). 아주 긴 낱말만 넘칠 때 끊는다. */
#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-line,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-line {
  word-break: keep-all;
  overflow-wrap: break-word;
}

#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-line.is-warn,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-line.is-warn {
  color: var(--mi-warn);
}

#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics .mi-rank-auto-metric.is-wait strong,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics .mi-rank-auto-metric.is-wait strong {
  color: var(--mi-blue);
}

#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics .mi-rank-auto-metric.is-ok strong,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics .mi-rank-auto-metric.is-ok strong {
  color: var(--mi-green);
}

#mi-admin .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics .mi-rank-auto-metric.is-warn strong,
#mi-clean .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics .mi-rank-auto-metric.is-warn strong {
  color: var(--mi-warn);
}

/* 오른쪽 칸은 버튼 글자(11px)보다 조금 넓게 잡아 둔다(136px, 901~1360px 의 전체 확인 자리와 같은 폭): 버튼 폭만 따르면
   '키워드 5개 · 약 15분' 같은 한 줄 사유가 두 줄로 꺾였다(2026-10-26 실측). */
#mi-admin .mi-coupang-rank-manual-side,
#mi-clean .mi-coupang-rank-manual-side {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 136px;
}

/* 전체 확인 · 지금 확인 끄기: N30 버튼 크기(34px · 11px · 900) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-button {
  min-height: 34px;
  border-radius: var(--mi-radius);
  padding: 0 11px;
  font-size: var(--mi-font-label);
  font-weight: 900;
  white-space: nowrap;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-button.subtle,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-button.subtle {
  border: 1px solid var(--mi-line);
  color: var(--mi-navy);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-manual-hint,
#mi-clean .mi-coupang-rank-manual-hint {
  color: var(--mi-muted);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-bold);
  text-align: right;
}

/* ── 전체 확인(대표 승인 2026-10-24): '지금 확인 끄기' 위 버튼 + 사유·예상 한 줄 · 진행 줄 · 끝 요약 ──
   상태판 오른쪽 칸(auto)은 '지금 확인 끄기' 자리 폭 그대로 둔다: 전체 확인 자리(버튼·사유 한 줄)는 칸 폭 계산에서 빼고
   (contain: inline-size) 그 폭 안에서 줄바꿈한다 — '…2개는 횟수 모자람'처럼 긴 사유나 '멈추는 중…'이 칸을 넓혀 옆 칸 3개를 줄이거나
   시작·멈춤마다 칸 폭이 흔들리지 않게(2026-10-24 검토). 901~1360px 는 세 칸이 아래 줄이라 정한 폭(136px)으로 조금 넓히고(아래 901~1360px 규칙),
   900px 이하는 한 줄 전체 폭이라 풀어 둔다(아래 900px 규칙). 작은 글은 단어(띄어쓰기) 단위로만 줄을 바꾼다(2026-10-24 재검사 2차). */
#mi-admin .mi-coupang-rank-all,
#mi-clean .mi-coupang-rank-all {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 6px;
  /* 칸 폭 계산에서 빠지는 대신 칸 폭만큼 늘려 둔다(안 늘리면 폭 0 으로 줄어든다) */
  justify-self: stretch;
  contain: inline-size;
}

/* 한국어도 글자 사이가 아니라 띄어쓰기에서만 줄을 바꾼다('끝까 / 지 기록' 막기). 한 단어가 칸보다 길 때만 그 단어를 자른다. */
#mi-admin .mi-coupang-rank-all-hint,
#mi-clean .mi-coupang-rank-all-hint {
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* '횟수 모자람'은 다음 줄에 따로(줄 앞 '·' 없이). 900px 이하(한 줄 전체 폭)는 ' · '로 이어 쓴다(아래 900px 규칙). */
#mi-admin .mi-coupang-rank-all-hint-sep,
#mi-clean .mi-coupang-rank-all-hint-sep {
  display: none;
}

#mi-admin .mi-coupang-rank-all-hint-more,
#mi-clean .mi-coupang-rank-all-hint-more {
  display: block;
}

/* 못 누를 때도 버튼 모양이 보이게(상태판 회색 바탕 위 흰 바탕 · 회색 테두리). 사유는 아래 작은 글.
   꺼짐은 disabled 대신 aria-disabled(누른 '멈추기'가 꺼질 때 포커스가 사라지지 않게) → 공용 .mi-button:disabled 모양(흐림·움직임 없음)을 여기서 맞춘다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-coupang-rank-all-button[aria-disabled="true"],
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-coupang-rank-all-button[aria-disabled="true"] {
  border: 1px solid var(--mi-line);
  color: var(--mi-muted);
  background: var(--mi-panel);
  cursor: not-allowed;
  opacity: 0.64;
  transform: none;
  box-shadow: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-coupang-rank-all-button.is-stop:not([aria-disabled="true"]),
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-coupang-rank-all-button.is-stop:not([aria-disabled="true"]) {
  border: 1px solid var(--mi-warn);
  color: var(--mi-warn);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-all-hint.is-warn,
#mi-clean .mi-coupang-rank-all-hint.is-warn {
  color: var(--mi-warn);
}

#mi-admin .mi-coupang-rank-all-progress,
#mi-clean .mi-coupang-rank-all-progress {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--mi-line);
  border-left: 4px solid var(--mi-blue);
  border-radius: var(--mi-radius);
  padding: 8px 12px;
  color: var(--mi-navy);
  background: var(--mi-panel);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-all-countdown,
#mi-clean .mi-coupang-rank-all-countdown {
  color: var(--mi-blue);
  font-variant-numeric: tabular-nums;
}

#mi-admin .mi-coupang-rank-all-summary,
#mi-clean .mi-coupang-rank-all-summary {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--mi-line);
  padding-top: 8px;
  color: var(--mi-ink);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-all-summary.is-ok,
#mi-clean .mi-coupang-rank-all-summary.is-ok {
  color: var(--mi-green);
}

#mi-admin .mi-coupang-rank-all-summary.is-warn,
#mi-clean .mi-coupang-rank-all-summary.is-warn {
  color: var(--mi-warn);
}

/* '안 한 상품 N개 보기'(링크 모양 단추) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-text-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-text-button {
  border: 0;
  padding: 0;
  color: var(--mi-blue);
  background: transparent;
  font: inherit;
  font-weight: var(--mi-weight-black);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

#mi-admin .mi-coupang-rank-manual-banner,
#mi-clean .mi-coupang-rank-manual-banner {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--mi-warn);
  border-left-width: 4px;
  border-radius: var(--mi-radius);
  padding: 10px 12px;
  color: var(--mi-warn);
  background: var(--mi-warn-bg);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-manual-banner,
#mi-admin .mi-coupang-rank-manual-note,
#mi-admin .mi-coupang-rank-manual-result,
#mi-clean .mi-coupang-rank-manual-banner,
#mi-clean .mi-coupang-rank-manual-note,
#mi-clean .mi-coupang-rank-manual-result {
  grid-column: 1 / -1;
}

#mi-admin .mi-coupang-rank-manual-note,
#mi-admin .mi-coupang-rank-manual-result,
#mi-clean .mi-coupang-rank-manual-note,
#mi-clean .mi-coupang-rank-manual-result {
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--mi-line);
  padding-top: 8px;
  color: var(--mi-muted);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-bold);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-manual-result.is-ok,
#mi-admin .mi-coupang-rank-manual-note.is-ok,
#mi-clean .mi-coupang-rank-manual-result.is-ok,
#mi-clean .mi-coupang-rank-manual-note.is-ok {
  color: var(--mi-green);
}

#mi-admin .mi-coupang-rank-manual-result.is-warn,
#mi-admin .mi-coupang-rank-manual-note.is-warn,
#mi-clean .mi-coupang-rank-manual-result.is-warn,
#mi-clean .mi-coupang-rank-manual-note.is-warn {
  color: var(--mi-warn);
}

/* ── 선택 항목 정리: 1361px 이상은 N30 막대처럼 한 줄 [제목 열(N30 칸 비율) | 안내 글·동작 줄(겹친 칸) | 보이는 항목 전체 선택]
   (2026-10-26 N30 맞춤). N30 도 1360px 이하는 제목 아래 동작 줄이라 901~1360px 는 [제목 · n개 선택 | 보이는 항목 전체 선택] 아래 한 칸
   (아래 901~1360px 규칙), 900px 이하는 휴대폰 막대(아래 900px 규칙). 한 칸에 '안내 글'과 '동작 줄'을 겹쳐 둔다.
   고르면 안내 글을 감추고 동작 줄을 보인다. 같은 칸을 쓰고 고르기 전에도 동작 줄 자리를 잡아 두므로(visibility) 카드를 체크하거나
   '보이는 항목 전체 선택'·'선택 해제'를 눌러도 막대 높이가 바뀌지 않는다(목록이 밀리지 않음). 대가: 동작 줄이 두 줄이 되는 너비
   (약 901~1230px)는 접혀 있어도 막대가 136px 이다 — 자리를 비우면(display: none) 그 너비에서 고를 때마다 목록이 42px 밀렸다
   (2026-10-23 재검사 3차, 빈 공간보다 밀림이 더 나쁘다고 판단). 동작 줄이 한 줄인 너비(1240px 이상)는 94px. ── */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk {
  grid-template-columns: minmax(168px, 0.42fr) minmax(0, 1.8fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 10px 8px 14px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-title,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-title {
  grid-column: 1;
  grid-row: 1;
  flex-wrap: wrap;
  min-width: 0;
}

/* 제목 앞 '●'(라디오 단추처럼 보임)는 쓰지 않는다 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-title strong::before,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-title strong::before {
  content: none;
  display: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-title .mi-coupang-rank-bulk-count,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-title .mi-coupang-rank-bulk-count {
  color: var(--mi-navy);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* 겹친 칸: 안내 글(msg) · 동작 줄(actions)이 같은 자리(grid-area 1/1)를 쓴다 */
#mi-admin .mi-coupang-rank-bulk-stack,
#mi-clean .mi-coupang-rank-bulk-stack {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  min-width: 0;
  min-height: 34px;
}

#mi-admin .mi-coupang-rank-bulk-msg,
#mi-admin .mi-coupang-rank-bulk-actions,
#mi-clean .mi-coupang-rank-bulk-msg,
#mi-clean .mi-coupang-rank-bulk-actions {
  grid-area: 1 / 1;
}

#mi-admin .mi-coupang-rank-bulk-msg,
#mi-clean .mi-coupang-rank-bulk-msg {
  display: grid;
  align-items: center;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-msg > small,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-msg > small {
  grid-area: 1 / 1;
  min-width: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-bold);
  line-height: 1.5;
}

/* 휴대폰 안내 글('아래 막대에서 정리합니다')은 900px 이하에서만 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-msg > .mi-coupang-rank-bulk-sheet-hint,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-msg > .mi-coupang-rank-bulk-sheet-hint {
  display: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-open .mi-coupang-rank-bulk-msg,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-open .mi-coupang-rank-bulk-msg {
  visibility: hidden;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk:not(.is-open) .mi-coupang-rank-bulk-actions,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk:not(.is-open) .mi-coupang-rank-bulk-actions {
  visibility: hidden;
}

/* 모두 지워 목록이 빈 뒤 결과 한 줄만 떠 있는 동안(is-note-only, 약 6초): 넓은 화면은 막대를 감춘다(결과는 맨 위 상태줄).
   휴대폰은 900px 규칙이 화면 아래 막대 안 결과 줄만 남긴다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only {
  display: none;
}

/* 넓은 화면: 아래 막대(dock)는 제자리라 상자 없이 동작 줄만 칸에 남긴다. 막대 머리·결과 줄 사본은 휴대폰 전용 */
#mi-admin .mi-coupang-rank-bulk-dock,
#mi-clean .mi-coupang-rank-bulk-dock {
  display: contents;
}

#mi-admin .mi-coupang-rank-bulk-dock-head,
#mi-admin .mi-coupang-rank-bulk-dock-note,
#mi-clean .mi-coupang-rank-bulk-dock-head,
#mi-clean .mi-coupang-rank-bulk-dock-note {
  display: none;
}

#mi-admin .mi-coupang-rank-bulk-actions,
#mi-clean .mi-coupang-rank-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

/* 그룹 입력·그룹으로 옮기기·그룹 해제 | 일시중지·다시 시작 | 이미지 저장·선택 해제 … 선택 삭제(맨 끝) */
#mi-admin .mi-coupang-rank-bulk-group,
#mi-admin .mi-coupang-rank-bulk-set,
#mi-clean .mi-coupang-rank-bulk-group,
#mi-clean .mi-coupang-rank-bulk-set {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-bulk-set,
#mi-clean .mi-coupang-rank-bulk-set {
  border-left: 1px solid var(--mi-line);
  padding-left: 8px;
}

#mi-admin .mi-coupang-rank-bulk-group .mi-input,
#mi-clean .mi-coupang-rank-bulk-group .mi-input {
  flex: 1 1 170px;
  width: 190px;
  min-width: 0;
  min-height: 34px;
  border-radius: 8px;
  font-size: var(--mi-font-label);
}

/* 버튼 크기·글자는 N30 선택 항목 정리 버튼(34px · 10.5px · 900, admin.html .mi-rank-bulk-actions button) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button,
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-rank-share-image,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-rank-share-image {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

/* 보조 버튼('보이는 항목 전체 선택'·'그룹 해제'·'일시중지'·'선택 해제' 등): 연파랑 바탕 · 테두리 없음 · 남색 글자 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button.subtle,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button.subtle {
  border: 1px solid var(--mi-gold);
  color: var(--mi-navy-2);
  background: var(--mi-gold);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button.subtle:hover,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button.subtle:hover {
  color: var(--mi-navy-2);
  background: var(--mi-grey-50);
  box-shadow: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button.mi-coupang-rank-danger,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-button.mi-coupang-rank-danger {
  border-color: var(--mi-danger);
  color: var(--mi-danger);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-coupang-rank-bulk-delete,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-coupang-rank-bulk-delete {
  margin-left: auto;
}

#mi-admin .mi-coupang-rank-bulk-sheet-count,
#mi-clean .mi-coupang-rank-bulk-sheet-count {
  display: none;
}

#mi-admin .mi-coupang-rank-bulk-note,
#mi-clean .mi-coupang-rank-bulk-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-bulk-note.is-ok,
#mi-clean .mi-coupang-rank-bulk-note.is-ok {
  color: var(--mi-green);
}

#mi-admin .mi-coupang-rank-bulk-note.is-warn,
#mi-clean .mi-coupang-rank-bulk-note.is-warn {
  color: var(--mi-warn);
}

/* 비활성: 흐림(투명도) 대신 회색 바탕에 진회색 글자(대비를 지킨다) */
#mi-admin .mi-coupang-rank-root .mi-link-button:disabled,
#mi-admin .mi-coupang-rank-root .mi-button:disabled,
#mi-admin .mi-coupang-rank-root .mi-rank-share-image:disabled,
#mi-admin .mi-coupang-rank-root .mi-rank-group-edit:disabled,
#mi-clean .mi-coupang-rank-root .mi-link-button:disabled,
#mi-clean .mi-coupang-rank-root .mi-button:disabled,
#mi-clean .mi-coupang-rank-root .mi-rank-share-image:disabled,
#mi-clean .mi-coupang-rank-root .mi-rank-group-edit:disabled {
  border-color: var(--mi-line);
  color: var(--mi-muted);
  background: var(--mi-grey-50);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-danger,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-danger {
  border-color: var(--mi-danger);
  color: var(--mi-danger);
}

/* 키보드 포커스: C30 안의 버튼·링크·입력·접힘 머리에 2px 남색 테두리 */
#mi-admin .mi-coupang-rank-root button:focus-visible,
#mi-admin .mi-coupang-rank-root a:focus-visible,
#mi-admin .mi-coupang-rank-root input:focus-visible,
#mi-admin .mi-coupang-rank-root select:focus-visible,
#mi-admin .mi-coupang-rank-root textarea:focus-visible,
#mi-admin .mi-coupang-rank-root summary:focus-visible,
#mi-clean .mi-coupang-rank-root button:focus-visible,
#mi-clean .mi-coupang-rank-root a:focus-visible,
#mi-clean .mi-coupang-rank-root input:focus-visible,
#mi-clean .mi-coupang-rank-root select:focus-visible,
#mi-clean .mi-coupang-rank-root textarea:focus-visible,
#mi-clean .mi-coupang-rank-root summary:focus-visible {
  outline: 2px solid var(--mi-navy);
  outline-offset: 2px;
}

/* 공용 카드 버튼 포커스(18% 투명 파랑)보다 특이도를 높여 덮는다 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-link-button:focus-visible,
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-group-edit:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-link-button:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-group-edit:focus-visible {
  outline: 2px solid var(--mi-navy);
  outline-offset: 2px;
}

/* 넘침을 자르는 상자 안(카드 1행 링크 · 그룹 머리 · 보조 상자 접힘 머리)은 테두리를 안쪽(-2px)에 그린다(바깥에 그리면 잘려 안 보였다) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-primary a:focus-visible,
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-group .mi-rank-group-head:focus-visible,
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-aux > details > summary:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-primary a:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-group .mi-rank-group-head:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-aux > details > summary:focus-visible {
  outline: 2px solid var(--mi-navy);
  outline-offset: -2px;
}

/* 누른 버튼이 잠시 꺼져(확인 중·처리 중) 키보드 위치를 맡긴 카드 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card[tabindex]:focus,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card[tabindex]:focus {
  outline: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card[tabindex]:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card[tabindex]:focus-visible {
  outline: 2px solid var(--mi-navy);
  outline-offset: -2px;
}

#mi-admin .mi-coupang-rank-owner-actions .mi-link-button,
#mi-admin .mi-coupang-rank-row-actions .mi-link-button,
#mi-admin .mi-coupang-rank-line-head .mi-link-button,
#mi-admin .mi-coupang-rank-collector .mi-link-button,
#mi-admin .mi-coupang-rank-group-editor .mi-link-button,
#mi-clean .mi-coupang-rank-owner-actions .mi-link-button,
#mi-clean .mi-coupang-rank-row-actions .mi-link-button,
#mi-clean .mi-coupang-rank-line-head .mi-link-button,
#mi-clean .mi-coupang-rank-collector .mi-link-button,
#mi-clean .mi-coupang-rank-group-editor .mi-link-button {
  cursor: pointer;
  background: var(--mi-panel);
  font-family: inherit;
  white-space: nowrap;
}

/* ── 카드(N30 .mi-rank-tracker-card) ── */
/* 1행 [선택][키워드][상품번호][상품명] 4칸(끌기·검색량 없음). 체크칸 옆 '선택' 글자는 N30 처럼 보인다(2026-10-26).
   키워드는 다 들어갈 만큼(모자라면 68px 까지), 상품번호는 줄지 않고, 남는 폭은 상품명이 받는다(줄어드는 몫도 상품명이 먼저, 말줄임·title). */
#mi-admin .mi-coupang-rank-card .mi-rank-track-primary,
#mi-clean .mi-coupang-rank-card .mi-rank-track-primary {
  grid-template-columns: max-content minmax(68px, max-content) max-content minmax(84px, 1fr);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select {
  position: relative;
  min-width: 24px;
  min-height: 24px;
  justify-content: center;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select input,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select input {
  width: 16px;
  height: 16px;
}

#mi-admin .mi-coupang-rank-ext-mark,
#mi-clean .mi-coupang-rank-ext-mark {
  margin-left: 3px;
  color: var(--mi-muted);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-card.is-paused .mi-rank-track-row-head,
#mi-admin .mi-coupang-rank-card.is-paused .mi-coupang-rank-day.is-none,
#mi-clean .mi-coupang-rank-card.is-paused .mi-rank-track-row-head,
#mi-clean .mi-coupang-rank-card.is-paused .mi-coupang-rank-day.is-none {
  background: var(--mi-grey-50);
}

/* 방금 등록한 카드: 2초 동안 테두리 강조 */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card.is-new,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card.is-new {
  border-color: var(--mi-navy);
  box-shadow: 0 0 0 2px var(--mi-navy);
}

/* 1행 오른쪽: 현재 · 최고 · 지금 확인(주 버튼) | 일시중지 · 삭제. 글자·알약·버튼은 N30 공용 값(알약·버튼 높이 25px · 9.8px · 700,
   admin.html .mi-rank-pill · .mi-rank-row-actions .mi-link-button)을 그대로 쓴다(덮어쓰지 않는다, 2026-10-26 N30 맞춤). */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions {
  gap: 6px;
}

/* 알약 안 숫자(b)는 키우지도 더 굵게도 하지 않는다(N30 '현재 12위 · 상품'처럼 한 글자 모양). 공용 알약은 inline-flex 라
   '현재 ' 끝 띄어쓰기가 사라지므로 이름과 숫자 사이는 칸 간격으로 둔다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-rank-pill,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-rank-pill {
  gap: 3px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-rank-pill b,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-rank-pill b {
  font-weight: inherit;
}

/* 지금 50위 밖이면 '현재'를 빨간 테두리로(판정 알약 '점검 필요'는 그대로 둔다, 대표 결정 2026-10-23) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-coupang-rank-current.is-out,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-coupang-rank-current.is-out {
  border-color: var(--mi-danger);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-coupang-rank-current.is-out b,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions > .mi-coupang-rank-current.is-out b {
  color: var(--mi-danger);
}

/* 카드 '지금 확인': 남색 채운 주 버튼. 높이·글자는 1행 N30 버튼과 같고(25px · 9.8px), 초 세기로 글자가 바뀌어도 폭이 흔들리지 않게
   최소 폭 84px · 같은 폭 숫자. 오늘 이미 확인한 카드는 테두리 모양(보조). */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button {
  min-width: 84px;
  min-height: 25px;
  border: 1px solid var(--mi-navy);
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  color: var(--mi-panel);
  background: var(--mi-navy);
  font-family: inherit;
  font-weight: var(--mi-weight-black);
  white-space: nowrap;
  cursor: pointer;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button.is-done,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button.is-done {
  border-color: var(--mi-navy);
  color: var(--mi-navy);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button.is-running,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button.is-running {
  border-color: var(--mi-line);
  color: var(--mi-navy);
  background: var(--mi-gold-soft);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button[disabled],
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button[disabled] {
  border-color: var(--mi-line);
  color: var(--mi-muted);
  background: var(--mi-grey-50);
  opacity: 1;
  cursor: not-allowed;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button.is-running[disabled],
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-coupang-rank-manual-button.is-running[disabled] {
  color: var(--mi-navy);
  background: var(--mi-gold-soft);
}

#mi-admin .mi-coupang-rank-same-kw,
#mi-clean .mi-coupang-rank-same-kw {
  color: var(--mi-muted);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-bold);
  white-space: nowrap;
}

/* 일시중지·삭제는 세로 줄 뒤로 떨어뜨린다 */
#mi-admin .mi-coupang-rank-card-tools,
#mi-clean .mi-coupang-rank-card-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--mi-line);
  padding-left: 8px;
}

/* 2행 운영줄: 알약 글자는 N30 공용 값(11px) 그대로. '그룹 변경'·'측정 기록'은 N30 '그룹 변경'과 같은 둥근 알약 버튼으로
   줄 흐름 안에 둔다(오른쪽 끝 네모 버튼 아님, 2026-10-26 N30 맞춤). '오늘 HH:MM 확인'은 N30 판정 알약(정상)과 같은 초록 톤. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .is-today,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .is-today {
  border-color: var(--mi-green-bg);
  color: var(--mi-green);
  background: var(--mi-green-bg);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-today.is-warn,
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-card-note.is-warn,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-today.is-warn,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-card-note.is-warn {
  border-color: var(--mi-warn);
  color: var(--mi-warn);
  background: var(--mi-warn-bg);
  font-weight: 850;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-card-note,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-card-note {
  border-color: var(--mi-navy);
  color: var(--mi-navy);
  background: var(--mi-gold-soft);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-card-note.is-ok,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-card-note.is-ok {
  border-color: var(--mi-green);
  color: var(--mi-green);
  background: var(--mi-green-bg);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-paused-pill,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-ops-row .mi-coupang-rank-paused-pill {
  border-color: var(--mi-line);
  color: var(--mi-navy);
  background: var(--mi-grey-50);
  font-weight: 850;
}

#mi-admin .mi-coupang-rank-ops-buttons,
#mi-clean .mi-coupang-rank-ops-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-group-edit,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-group-edit {
  font-family: inherit;
  white-space: nowrap;
}

/* ── 3행 날짜 칸: N30 칸 모양(108×78 · 날짜 13px · 이름표 '순위' 10px · 값 14px, admin.html .mi-rank-day-card · .mi-rank-day-slots)
   · 안 잰 날은 회색 칸 '-' · 잰 결과(50위 밖·없음·결과 없음)는 흰 칸 진한 글 · 실패·이동은 주황 · '오늘' 글자·위 줄은 두지 않는다
   (N30 대표 결정 2026-10-17과 같게) · 옆으로 더 있을 때만 오른쪽 끝을 흐리게 한다(끝까지 밀면 사라짐) ── */
#mi-admin .mi-coupang-rank-days,
#mi-clean .mi-coupang-rank-days {
  min-width: 0;
}

#mi-admin .mi-coupang-rank-days-scroll,
#mi-clean .mi-coupang-rank-days-scroll {
  position: relative;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-days-scroll::after,
#mi-clean .mi-coupang-rank-days-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--mi-panel));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#mi-admin .mi-coupang-rank-days-scroll.has-more::after,
#mi-clean .mi-coupang-rank-days-scroll.has-more::after {
  opacity: 1;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-day-grid,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-day-grid {
  scroll-padding-inline: 0 40px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-day,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-day {
  flex: 0 0 108px;
  min-height: 78px;
  padding: 0;
}

#mi-admin .mi-coupang-rank-day-button,
#mi-clean .mi-coupang-rank-day-button {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 78px;
  border: 0;
  padding: 9px 8px;
  color: var(--mi-navy);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-day strong,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-day strong {
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* 이름표('순위') 아래 값: N30 .mi-rank-day-slots span(small + b)과 같은 칸 */
#mi-admin .mi-coupang-rank-day-slot,
#mi-clean .mi-coupang-rank-day-slot {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-day-slot small,
#mi-clean .mi-coupang-rank-day-slot small {
  display: block;
  overflow: hidden;
  color: var(--mi-muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mi-admin .mi-coupang-rank-day-button b,
#mi-clean .mi-coupang-rank-day-button b {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* 안 잰 날은 회색 칸 · 흐린 '-'(잰 결과 '50위 밖'·'결과 없음'은 흰 칸 진한 글이라 헷갈리지 않는다) */
#mi-admin .mi-coupang-rank-day.is-none,
#mi-clean .mi-coupang-rank-day.is-none {
  background: var(--mi-grey-50);
}

#mi-admin .mi-coupang-rank-day.is-none b,
#mi-clean .mi-coupang-rank-day.is-none b {
  color: var(--mi-muted);
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-day.is-out b,
#mi-clean .mi-coupang-rank-day.is-out b {
  color: var(--mi-ink);
}

#mi-admin .mi-coupang-rank-day.is-fail b,
#mi-clean .mi-coupang-rank-day.is-fail b {
  color: var(--mi-warn);
}

#mi-admin .mi-coupang-rank-day.is-selected,
#mi-clean .mi-coupang-rank-day.is-selected {
  background: var(--mi-gold-soft);
  box-shadow: inset 0 -3px 0 var(--mi-blue);
}

/* 키보드 포커스: 날짜 줄(N30 공용 .mi-rank-day-grid)은 넘침을 잘라(overflow-x: auto · overflow-y: hidden) 바깥 테두리가 보이지 않는다
   → 칸 안쪽(-3px)에 네 변 남색 테두리로 그리고 옆 칸 위로 올린다. 펼친 날(옅은 바탕 + 아래 파란 줄)과 모양이 다르다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-day-button:focus-visible,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-day-button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--mi-navy);
  outline-offset: -3px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-day-detail,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-day-detail {
  margin: 0;
  border-top: 1px solid var(--mi-gold-soft);
  padding: 7px 12px;
  color: var(--mi-ink);
  background: var(--mi-grey-50);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* 첫 기록 전 안내(작은 상자) */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-board-empty,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-board-empty {
  margin: 10px 12px 12px;
  min-height: 0;
  padding: 11px 12px;
  font-size: 12.5px;
}

#mi-admin .mi-coupang-rank-group-editor,
#mi-admin .mi-coupang-rank-owner-actions,
#mi-admin .mi-coupang-rank-row-actions,
#mi-clean .mi-coupang-rank-group-editor,
#mi-clean .mi-coupang-rank-owner-actions,
#mi-clean .mi-coupang-rank-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-group-editor,
#mi-clean .mi-coupang-rank-group-editor {
  border-top: 1px dashed var(--mi-line);
  padding: 10px 12px;
}

#mi-admin .mi-coupang-rank-group-editor span,
#mi-clean .mi-coupang-rank-group-editor span {
  color: var(--mi-navy);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-group-editor .mi-input,
#mi-clean .mi-coupang-rank-group-editor .mi-input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 34px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-group-editor .mi-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-group-editor .mi-button {
  min-height: 34px;
}

#mi-admin .mi-coupang-rank-runs,
#mi-clean .mi-coupang-rank-runs {
  display: grid;
  gap: 6px;
  min-width: 0;
  border-top: 1px dashed var(--mi-line);
  padding: 10px 12px 12px;
}

#mi-admin .mi-coupang-rank-runs h4,
#mi-clean .mi-coupang-rank-runs h4 {
  margin: 4px 0 0;
  color: var(--mi-navy);
  font-size: var(--mi-font-body-lg);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-run-list,
#mi-admin .mi-coupang-rank-owner-lines,
#mi-admin .mi-coupang-rank-guide-list,
#mi-admin .mi-coupang-rank-owner-steps,
#mi-clean .mi-coupang-rank-run-list,
#mi-clean .mi-coupang-rank-owner-lines,
#mi-clean .mi-coupang-rank-guide-list,
#mi-clean .mi-coupang-rank-owner-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--mi-ink);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-run-list,
#mi-clean .mi-coupang-rank-run-list {
  max-height: 260px;
  overflow-y: auto;
}

/* ── 큰 카드 아래 보조 상자: 사용 방법 · 내 크롬 확장 · 자동 수집(접힌 줄) ── */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-aux,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-aux {
  overflow: hidden;
  min-width: 0;
  padding: 0;
}

#mi-admin .mi-coupang-rank-aux > details,
#mi-clean .mi-coupang-rank-aux > details {
  min-width: 0;
}

#mi-admin .mi-coupang-rank-aux > details + details,
#mi-clean .mi-coupang-rank-aux > details + details {
  border-top: 1px solid var(--mi-line);
}

#mi-admin .mi-coupang-rank-aux > details > summary,
#mi-clean .mi-coupang-rank-aux > details > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 13px 18px;
  color: var(--mi-navy);
  cursor: pointer;
  list-style: none;
}

#mi-admin .mi-coupang-rank-aux > details > summary::-webkit-details-marker,
#mi-clean .mi-coupang-rank-aux > details > summary::-webkit-details-marker {
  display: none;
}

#mi-admin .mi-coupang-rank-aux > details > summary::after,
#mi-clean .mi-coupang-rank-aux > details > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--mi-muted);
}

#mi-admin .mi-coupang-rank-aux > details[open] > summary::after,
#mi-clean .mi-coupang-rank-aux > details[open] > summary::after {
  content: "▴";
}

#mi-admin .mi-coupang-rank-aux > details > summary strong,
#mi-clean .mi-coupang-rank-aux > details > summary strong {
  min-width: 112px;
  font-size: 14px;
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-aux-sub,
#mi-clean .mi-coupang-rank-aux-sub {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-guide-list,
#mi-clean .mi-coupang-rank-guide-list {
  padding: 0 18px 16px 36px;
}

/* ── 보조 상자 안 상태 알약 · 자동 수집(옛 수집기 관리) · 내 크롬 확장 ── */
#mi-admin .mi-coupang-rank-owner-state,
#mi-clean .mi-coupang-rank-owner-state {
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  padding: 3px 9px;
  color: var(--mi-muted);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-owner-state:empty,
#mi-clean .mi-coupang-rank-owner-state:empty {
  display: none;
}

#mi-admin .mi-coupang-rank-owner-state.is-ok,
#mi-clean .mi-coupang-rank-owner-state.is-ok {
  border-color: var(--mi-green);
  color: var(--mi-green);
  background: var(--mi-green-bg);
}

#mi-admin .mi-coupang-rank-owner-state.is-warn,
#mi-clean .mi-coupang-rank-owner-state.is-warn {
  border-color: var(--mi-warn);
  color: var(--mi-warn);
  background: var(--mi-warn-bg);
}

#mi-admin .mi-coupang-rank-owner-body,
#mi-clean .mi-coupang-rank-owner-body {
  display: grid;
  gap: 14px;
  min-width: 0;
  border-top: 1px solid var(--mi-line);
  padding: 14px 18px 18px;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-owner-hold,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-owner-hold {
  margin: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 10px 12px;
  color: var(--mi-navy);
  background: var(--mi-panel);
  font-size: var(--mi-font-body);
  font-weight: 800;
  line-height: 1.55;
}

#mi-admin .mi-coupang-rank-owner-steps,
#mi-clean .mi-coupang-rank-owner-steps {
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 10px 12px 10px 30px;
  background: var(--mi-grey-50);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-owner-note,
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext-note,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-owner-note,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext-note {
  margin: 0;
  min-height: 0;
}

#mi-admin .mi-coupang-rank-owner-section,
#mi-clean .mi-coupang-rank-owner-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-owner-section:empty,
#mi-clean .mi-coupang-rank-owner-section:empty {
  display: none;
}

#mi-admin .mi-coupang-rank-owner-title,
#mi-clean .mi-coupang-rank-owner-title {
  margin: 0;
  border-top: 1px dashed var(--mi-line);
  padding-top: 12px;
  color: var(--mi-navy);
  font-size: var(--mi-font-body-lg);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-owner-subtitle,
#mi-clean .mi-coupang-rank-owner-subtitle {
  color: var(--mi-navy);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-capacity-line,
#mi-clean .mi-coupang-rank-capacity-line {
  margin: 0;
  color: var(--mi-navy);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-capacity-line.is-warn,
#mi-clean .mi-coupang-rank-capacity-line.is-warn {
  color: var(--mi-warn);
}

#mi-admin .mi-coupang-rank-settings,
#mi-clean .mi-coupang-rank-settings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-settings > .mi-coupang-rank-owner-actions,
#mi-clean .mi-coupang-rank-settings > .mi-coupang-rank-owner-actions {
  grid-column: 1 / -1;
}

#mi-admin .mi-coupang-rank-setting-wrap,
#mi-clean .mi-coupang-rank-setting-wrap {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-setting,
#mi-clean .mi-coupang-rank-setting {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--mi-navy);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-toggle,
#mi-clean .mi-coupang-rank-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 0 12px;
  color: var(--mi-navy);
  background: var(--mi-panel);
  cursor: pointer;
}

#mi-admin .mi-coupang-rank-toggle input,
#mi-clean .mi-coupang-rank-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mi-navy);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-owner-actions .mi-button,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-owner-actions .mi-button {
  min-height: var(--mi-button-secondary-h);
  padding: 0 12px;
  font-size: var(--mi-font-body);
}

#mi-admin .mi-coupang-rank-setting .mi-input,
#mi-clean .mi-coupang-rank-setting .mi-input {
  width: 100%;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-setting-wrap small,
#mi-clean .mi-coupang-rank-setting-wrap small {
  font-size: var(--mi-font-label);
}

#mi-admin .mi-coupang-rank-field-error,
#mi-clean .mi-coupang-rank-field-error {
  color: var(--mi-danger);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-table,
#mi-clean .mi-coupang-rank-table {
  display: grid;
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-row,
#mi-clean .mi-coupang-rank-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.2fr) minmax(90px, 120px) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid var(--mi-line);
  padding: 8px 10px;
  color: var(--mi-ink);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-row:first-child,
#mi-clean .mi-coupang-rank-row:first-child {
  border-top: 0;
}

#mi-admin .mi-coupang-rank-row.is-head,
#mi-clean .mi-coupang-rank-row.is-head {
  color: var(--mi-muted);
  background: var(--mi-grey-50);
  font-size: var(--mi-font-label);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-row.is-orphan,
#mi-clean .mi-coupang-rank-row.is-orphan {
  background: var(--mi-warn-bg);
}

#mi-admin .mi-coupang-rank-row .mi-input,
#mi-clean .mi-coupang-rank-row .mi-input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

#mi-admin .mi-coupang-rank-code,
#mi-clean .mi-coupang-rank-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-inline-form,
#mi-clean .mi-coupang-rank-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-inline-form .mi-input,
#mi-clean .mi-coupang-rank-inline-form .mi-input {
  flex: 1 1 200px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-collector,
#mi-clean .mi-coupang-rank-collector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 10px 12px;
  background: var(--mi-panel);
}

#mi-admin .mi-coupang-rank-collector > div,
#mi-clean .mi-coupang-rank-collector > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-collector strong,
#mi-clean .mi-coupang-rank-collector strong {
  color: var(--mi-navy);
  font-size: var(--mi-font-body-lg);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-collector.is-revoked,
#mi-clean .mi-coupang-rank-collector.is-revoked {
  background: var(--mi-grey-50);
  opacity: 0.7;
}

#mi-admin .mi-coupang-rank-token-box,
#mi-clean .mi-coupang-rank-token-box {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--mi-warn);
  border-radius: var(--mi-radius);
  padding: 12px;
  background: var(--mi-warn-bg);
}

#mi-admin .mi-coupang-rank-token-box strong,
#mi-clean .mi-coupang-rank-token-box strong {
  color: var(--mi-navy);
  font-size: var(--mi-font-body-lg);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-code-field,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-code-field {
  width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#mi-admin .mi-coupang-rank-token-warning,
#mi-clean .mi-coupang-rank-token-warning {
  margin: 0;
  color: var(--mi-warn);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-line,
#mi-clean .mi-coupang-rank-line {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#mi-admin .mi-coupang-rank-line-head,
#mi-clean .mi-coupang-rank-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--mi-navy);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-code-block,
#mi-clean .mi-coupang-rank-code-block {
  display: block;
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 8px 10px;
  color: var(--mi-ink);
  background: var(--mi-grey-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--mi-font-label);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

/* ── '내 크롬 확장' 줄: 확장 ID · zip 내려받기 · 설치 안내(접이식) ── */
#mi-admin .mi-coupang-rank-manual-ext,
#mi-clean .mi-coupang-rank-manual-ext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-manual-id,
#mi-clean .mi-coupang-rank-manual-id {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 3px 8px;
  color: var(--mi-ink);
  background: var(--mi-grey-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--mi-font-label);
  word-break: break-all;
  user-select: all;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-download,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-download {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
}

#mi-admin .mi-coupang-rank-manual-guide,
#mi-clean .mi-coupang-rank-manual-guide {
  min-width: 0;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  padding: 10px 12px;
  background: var(--mi-panel);
}

/* 설치 안내는 '내 크롬 확장' 줄(details) 안의 details 다. 자기 열림 상태로 ▾▴ 를 보인다. */
#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 0;
  color: var(--mi-navy);
  cursor: pointer;
  list-style: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary::-webkit-details-marker,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary::-webkit-details-marker {
  display: none;
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary::after,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--mi-muted);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide[open] summary::after,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide[open] summary::after {
  content: "▴";
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary strong,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary strong {
  font-size: var(--mi-font-body-lg);
  font-weight: var(--mi-weight-black);
}

#mi-admin .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary span,
#mi-clean .mi-coupang-rank-root .mi-coupang-rank-ext .mi-coupang-rank-manual-guide summary span {
  color: var(--mi-muted);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
}

#mi-admin .mi-coupang-rank-manual-steps,
#mi-clean .mi-coupang-rank-manual-steps {
  display: grid;
  gap: 6px;
  margin: 10px 0 8px;
  padding-left: 20px;
  color: var(--mi-ink);
  font-size: var(--mi-font-body);
  font-weight: var(--mi-weight-bold);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#mi-admin .mi-coupang-rank-manual-steps strong,
#mi-clean .mi-coupang-rank-manual-steps strong {
  color: var(--mi-warn);
  font-weight: var(--mi-weight-black);
}

/* ── 사이드바가 있는 좁은 화면(901~1360px): N30 같은 너비 규칙(admin.html, N30 상품 카드 범위)과 같은 모양 ──
   카드 1행은 칸을 고정하지 않고 줄을 바꿔 흐르게 해서 상품번호가 잘리지 않고, 상품명은 남는 폭(모자라면 다음 줄)을 쓴다.
   1361px 이상은 위 데스크톱 규칙 그대로다. */
@media (min-width: 901px) and (max-width: 1360px) {
  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-track-controls,
  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-info,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-track-controls,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-info {
    flex: 0 0 auto;
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-keyword-name,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-keyword-name {
    flex: 0 1 auto;
    max-width: 100%;
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-title,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-title {
    flex: 1 1 160px;
  }

  /* 필터 줄은 N30 같은 너비 규칙처럼 감기는 줄(상태 버튼은 오른쪽 정렬, 공용 값) */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filterbar,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filterbar {
    display: flex;
  }

  #mi-admin .mi-coupang-rank-filterbar > .mi-rank-filter-actions,
  #mi-clean .mi-coupang-rank-filterbar > .mi-rank-filter-actions {
    justify-content: flex-end;
  }

  /* 선택 항목 정리: [제목 · n개 선택 | 보이는 항목 전체 선택] 아래 겹친 칸 */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select {
    grid-column: 2;
  }

  #mi-admin .mi-coupang-rank-bulk-stack,
  #mi-clean .mi-coupang-rank-bulk-stack {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* 상태판 칸 3개는 아래 줄로 */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* 세 칸이 아래 줄이라 오른쪽 칸을 넓혀도 세 칸 크기는 그대로다 → 전체 확인 자리를 정한 폭으로 조금 넓혀 작은 글 한 마디
     (가장 긴 '진행 중인 1건은 끝까지 기록' 맥 122px · 윈도우 글꼴 여유 포함)를 한 줄에 둔다. 더 넓히면 왼쪽 '지금 확인' 한 줄 글이
     1024px 등에서 새로 꺾인다(2026-10-24 실측). 폭을 정해 두어(글 길이를 따르지 않음) 시작·진행·멈춤마다 칸 폭이 흔들리지 않는다(contain 은 그대로). */
  #mi-admin .mi-coupang-rank-all,
  #mi-clean .mi-coupang-rank-all {
    width: 136px;
  }
}

/* 901~1180px: 카드가 좁아 현재·30일 최고·지금 확인·일시중지·삭제를 1행 아래 줄로 내린다(N30 같은 너비 규칙과 같음).
   화면 머리도 대상 알약을 제목 아래로 내린다(알약이 제목 폭을 잡아먹어 '…기록합니 / 다.'로 꺾였다, 900px 이하와 같은 모양). */
@media (min-width: 901px) and (max-width: 1180px) {
  #mi-admin .mi-coupang-rank-screen-head.mi-head,
  #mi-clean .mi-coupang-rank-screen-head.mi-head {
    flex-direction: column;
    gap: 10px;
  }

  #mi-admin .mi-coupang-rank-screen-head .mi-target-echo,
  #mi-clean .mi-coupang-rank-screen-head .mi-target-echo {
    justify-self: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    white-space: normal;
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-track-row-head,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-row-head {
    grid-template-columns: minmax(0, 1fr);
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-row-actions,
  #mi-clean .mi-coupang-rank-card .mi-rank-row-actions {
    justify-self: start;
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
    padding-left: 0;
  }
}

/* ── 휴대폰·태블릿 세로(900px 이하): N30 휴대폰 규칙(admin.html 900px)과 같은 너비 기준 ──
   등록 줄·필터 줄·요약칸은 N30 공용 900px 규칙(1칸)이 그대로 적용되고, C30 만 다른 곳은 아래에서 덮는다. */
@media (max-width: 900px) {
  #mi-admin .mi-coupang-rank-screen-head.mi-head,
  #mi-clean .mi-coupang-rank-screen-head.mi-head {
    flex-direction: column;
    gap: 10px;
  }

  #mi-admin .mi-coupang-rank-screen-head .mi-target-echo,
  #mi-clean .mi-coupang-rank-screen-head .mi-target-echo {
    justify-self: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    white-space: normal;
  }


  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-create,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-create {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 안쪽 목록 패널의 테두리·여백은 휴대폰에서만 없앤다(큰 카드 안 이중 테두리) */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-board,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-board {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  /* 상태판: 한 칸씩, 칸 3개는 '이름 | 값' 줄 */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual {
    grid-template-columns: minmax(0, 1fr);
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual .mi-coupang-rank-manual-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 8px;
    align-items: baseline;
    min-height: 0;
    padding: 7px 10px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric span,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric span {
    grid-row: 1 / span 2;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric strong,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric strong {
    margin: 0;
    font-size: 14px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric small,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual .mi-rank-auto-metric small {
    grid-column: 2;
  }

  #mi-admin .mi-coupang-rank-manual-side,
  #mi-clean .mi-coupang-rank-manual-side {
    grid-auto-flow: row;
    justify-items: start;
  }

  /* 전체 확인 자리도 왼쪽 정렬(아래 '지금 확인 끄기'와 같은 줄 시작) · 한 줄 전체 폭이라 칸 폭 빼기를 푼다 */
  #mi-admin .mi-coupang-rank-all,
  #mi-clean .mi-coupang-rank-all {
    justify-items: start;
    contain: none;
  }

  #mi-admin .mi-coupang-rank-all-hint-sep,
  #mi-admin .mi-coupang-rank-all-hint-more,
  #mi-clean .mi-coupang-rank-all-hint-sep,
  #mi-clean .mi-coupang-rank-all-hint-more {
    display: inline;
  }

  #mi-admin .mi-coupang-rank-manual-hint,
  #mi-clean .mi-coupang-rank-manual-hint {
    text-align: left;
  }

  /* 필터 줄: 검색 · 그룹 · 상태 버튼 · 개수 알약이 한 줄씩(N30 휴대폰과 같음). 상태 버튼은 가로로 밀지 않고 줄을 바꾼다. */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filterbar,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filterbar {
    display: flex;
  }

  #mi-admin .mi-coupang-rank-filterbar > .mi-input,
  #mi-admin .mi-coupang-rank-filterbar > .mi-rank-group-filter,
  #mi-admin .mi-coupang-rank-filterbar > .mi-rank-filter-actions,
  #mi-admin .mi-coupang-rank-filterbar > .mi-rank-filter-count,
  #mi-clean .mi-coupang-rank-filterbar > .mi-input,
  #mi-clean .mi-coupang-rank-filterbar > .mi-rank-group-filter,
  #mi-clean .mi-coupang-rank-filterbar > .mi-rank-filter-actions,
  #mi-clean .mi-coupang-rank-filterbar > .mi-rank-filter-count {
    flex: 1 1 100%;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filter-actions,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filter-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button {
    flex: 0 0 auto;
  }

  /* 선택 항목 정리(휴대폰): [제목 · n개 선택] / 겹친 안내 글 칸 / [보이는 항목 전체 선택]. 동작 줄은 화면 아래 막대(dock)에 띄운다:
     고르면 접힌 한 줄('n개 선택 · 정리 열기 ▴', 약 60px), 누르면 펼친다. 결과 한 줄은 막대 안에도 보이고, 선택이 0개가 되어도 잠시 남는다.
     막대 높이만큼 화면 맨 아래 여백을 늘려(.is-docked, JS 가 잰 높이) 마지막 칸·보조 상자를 가리지 않는다. 카카오 단추 위. */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk {
    grid-template-columns: minmax(0, 1fr);
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  #mi-admin .mi-coupang-rank-bulk-stack,
  #mi-clean .mi-coupang-rank-bulk-stack {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
  }

  /* 모두 지운 뒤 결과 한 줄(is-note-only): 막대 상자·제목·안내 글·전체 선택은 없애고 화면 아래 막대 안 결과 줄만 남긴다
     (맨 위 상태줄은 화면 밖이라 휴대폰에서 보이지 않았다, 2026-10-23 재검사). */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only .mi-coupang-rank-bulk-stack,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only .mi-coupang-rank-bulk-stack {
    display: contents;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only > :not(.mi-coupang-rank-bulk-stack),
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only .mi-coupang-rank-bulk-msg,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only > :not(.mi-coupang-rank-bulk-stack),
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-note-only .mi-coupang-rank-bulk-msg {
    display: none;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-msg > .mi-coupang-rank-bulk-sheet-hint,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-msg > .mi-coupang-rank-bulk-sheet-hint {
    display: block;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-open .mi-coupang-rank-bulk-msg,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-open .mi-coupang-rank-bulk-msg {
    visibility: visible;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk.is-open .mi-coupang-rank-bulk-hint,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk:not(.is-open) .mi-coupang-rank-bulk-sheet-hint,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk.is-open .mi-coupang-rank-bulk-hint,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk:not(.is-open) .mi-coupang-rank-bulk-sheet-hint {
    visibility: hidden;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock {
    position: fixed;
    right: 8px;
    bottom: 84px;
    left: 8px;
    z-index: 79;
    display: grid;
    gap: 8px;
    max-height: 62vh;
    overflow-y: auto;
    border: 1px solid var(--mi-line);
    border-radius: 12px;
    padding: 8px 10px;
    background: var(--mi-panel);
    box-shadow: var(--mi-shadow);
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock:not(.is-shown),
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock:not(.is-shown) {
    display: none;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-head,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk:not(.is-open) .mi-coupang-rank-bulk-dock-head,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk:not(.is-open) .mi-coupang-rank-bulk-dock-head {
    display: none;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-coupang-rank-bulk-dock-head .mi-coupang-rank-bulk-sheet-toggle,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-coupang-rank-bulk-dock-head .mi-coupang-rank-bulk-sheet-toggle {
    min-height: 44px;
    padding: 0 14px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-note,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-note {
    display: block;
    margin: 0;
    color: var(--mi-muted);
    font-size: var(--mi-font-body);
    font-weight: var(--mi-weight-black);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-note.is-ok,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-note.is-ok {
    color: var(--mi-green);
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-note.is-warn,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock-note.is-warn {
    color: var(--mi-warn);
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-coupang-rank-bulk-actions,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-coupang-rank-bulk-actions {
    grid-area: auto;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock:not(.is-expanded) .mi-coupang-rank-bulk-actions,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock:not(.is-expanded) .mi-coupang-rank-bulk-actions {
    display: none;
  }

  #mi-admin .mi-coupang-rank-bulk-sheet-count,
  #mi-clean .mi-coupang-rank-bulk-sheet-count {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mi-navy);
    font-size: 13px;
    font-weight: var(--mi-weight-black);
  }

  /* 아래 막대 안 단추·입력칸은 누르는 자리 40px 이상 */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-button,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-rank-share-image,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-input,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-rank-share-image,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk-dock .mi-input {
    min-height: 40px;
  }

  #mi-admin .mi-coupang-rank-root.is-docked,
  #mi-clean .mi-coupang-rank-root.is-docked {
    padding-bottom: calc(96px + var(--mi-coupang-rank-dock-space, 0px));
  }

  #mi-admin .mi-coupang-rank-bulk-group,
  #mi-admin .mi-coupang-rank-bulk-set,
  #mi-clean .mi-coupang-rank-bulk-group,
  #mi-clean .mi-coupang-rank-bulk-set {
    flex: 1 1 100%;
  }

  #mi-admin .mi-coupang-rank-bulk-set,
  #mi-clean .mi-coupang-rank-bulk-set {
    border-left: 0;
    border-top: 1px solid var(--mi-line);
    padding-left: 0;
    padding-top: 8px;
  }

  #mi-admin .mi-coupang-rank-bulk-group .mi-input,
  #mi-admin .mi-coupang-rank-bulk-set > *,
  #mi-clean .mi-coupang-rank-bulk-group .mi-input,
  #mi-clean .mi-coupang-rank-bulk-set > * {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  #mi-admin .mi-coupang-rank-bulk-group .mi-input,
  #mi-clean .mi-coupang-rank-bulk-group .mi-input {
    flex-basis: 100%;
    width: auto;
    /* 휴대폰 입력칸은 16px(누르면 화면이 확대되지 않게, admin.html 900px 규칙과 같다) */
    font-size: 16px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-coupang-rank-bulk-delete,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk .mi-coupang-rank-bulk-delete {
    flex: 1 1 100%;
    margin-left: 0;
  }

  /* 누르는 자리(휴대폰 44px 기준, 최소 40px). 글자 모양은 그대로 두고 높이·음수 여백으로 누르는 자리만 넓힌다. */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-text-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-text-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -14px 0;
    padding: 0 4px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-button,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-side .mi-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-bulk > .mi-coupang-rank-bulk-select {
    min-height: 44px;
  }

  /* 상태 버튼은 줄바꿈으로 여러 줄이 되므로 N30 높이(36px, 누르는 높이 32px 이상) */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button {
    min-height: 36px;
  }

  /* 1행 버튼(지금 확인 · 일시중지 · 삭제)은 누르는 높이 32px(합의안 2026-10-26: N30 25px 그대로면 휴대폰에서 작다) */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-link-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-row-actions .mi-link-button {
    min-height: 32px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-card-tools .mi-link-button,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-coupang-rank-card-tools .mi-link-button {
    min-width: 44px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-group-edit,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-group-edit {
    min-height: 32px;
    margin-block: -3px;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-keyword-name,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-title,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-keyword-name,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-title {
    padding-block: 4px;
    margin-block: -4px;
  }

  /* 필터 버튼 포커스 테두리는 안쪽에 그린다(목록 패널이 넘침을 잘라 가장자리 버튼의 바깥 테두리가 잘리지 않게) */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button:focus-visible,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filter-actions .mi-rank-filter-button:focus-visible {
    outline: 2px solid var(--mi-navy);
    outline-offset: -2px;
  }

  /* 검색칸·그룹 고르기는 목록 패널 폭을 꽉 채우고 패널이 넘침을 잘라(overflow: hidden) 바깥 테두리 양옆 4px 이 잘렸다 → 안쪽에 그린다
     (2026-10-23 재검사) */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filterbar .mi-input:focus-visible,
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-filterbar select:focus-visible,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filterbar .mi-input:focus-visible,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-filterbar select:focus-visible {
    outline: 2px solid var(--mi-navy);
    outline-offset: -2px;
  }

  /* 그룹 필터 이름('그룹', 공용 10.5px)은 C30 에서 본문 크기(12px) */
  #mi-admin .mi-coupang-rank-filterbar .mi-rank-group-filter span,
  #mi-clean .mi-coupang-rank-filterbar .mi-rank-group-filter span {
    font-size: var(--mi-font-body);
  }

  /* 카드: 키워드 / 상품번호 / 상품명 각 한 줄, 그 아래 [현재][최고][지금 확인][일시중지][삭제]가 N30처럼 한 흐름으로 감긴다 */
  #mi-admin .mi-coupang-rank-card .mi-rank-track-row-head,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-row-head {
    grid-template-columns: minmax(0, 1fr);
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 8px;
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-info,
  #mi-admin .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-title,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-info,
  #mi-clean .mi-coupang-rank-card .mi-rank-track-primary > .mi-rank-product-title {
    grid-column: 2;
  }

  /* 휴대폰은 '선택' 글자를 화면 읽기용으로만 두고 체크칸만 보인다(공용 900px 규칙이 글자를 16px 로 키워 체크칸이 카드 왼쪽 밖으로 밀렸다,
     2026-10-26 실측). 화면 읽기 이름은 체크칸 aria-label 그대로. */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select > span,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 체크칸 누르는 자리는 44px */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-select {
    min-width: 44px;
    min-height: 44px;
    margin: -10px -6px -10px -12px;
  }

  /* 카드 1행 칸(공용 .mi-rank-track-main, 넘침 자름)은 휴대폰에서 체크칸·키워드 링크가 가장자리에 붙어 포커스 테두리가 2px 씩 잘렸다
     (체크칸 왼쪽 · 키워드 링크 위쪽, 2026-10-23 재검사) → 자르는 상자만 사방 4px 넓히고(안쪽 여백 4px) 같은 만큼 바깥 여백을 당겨 칸 자리는 그대로 둔다. */
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-main,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-card .mi-rank-track-main {
    margin: -4px;
    padding: 4px;
  }

  #mi-admin .mi-coupang-rank-card .mi-rank-row-actions,
  #mi-clean .mi-coupang-rank-card .mi-rank-row-actions {
    justify-self: stretch;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    flex-wrap: wrap;
    padding-left: 0;
  }

  /* '같은 키워드 N개 함께 기록'은 버튼들 뒤 한 줄 */
  #mi-admin .mi-coupang-rank-same-kw,
  #mi-clean .mi-coupang-rank-same-kw {
    order: 1;
    flex: 1 1 100%;
  }

  /* 일시중지·삭제는 따로 떨어진 줄 없이 같은 흐름(세로 줄도 없음) */
  #mi-admin .mi-coupang-rank-card-tools,
  #mi-clean .mi-coupang-rank-card-tools {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
  }

  #mi-admin .mi-coupang-rank-ops-buttons,
  #mi-clean .mi-coupang-rank-ops-buttons {
    margin-left: 0;
  }

  #mi-admin .mi-coupang-rank-group .mi-rank-group-head-row,
  #mi-clean .mi-coupang-rank-group .mi-rank-group-head-row {
    flex-wrap: nowrap;
  }

  /* 그룹 머리 '전체 선택' 글자는 숨기고 체크칸만(aria-label 은 그대로) */
  #mi-admin .mi-coupang-rank-group .mi-rank-group-select span,
  #mi-clean .mi-coupang-rank-group .mi-rank-group-select span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 긴 알약(확인 필요 사유 · 7일 평균 등)이 휴대폰 폭(320~390px)에서 카드 밖으로 밀려
     잘리지 않게 알약 안에서 줄을 바꾼다(대표 결정 2026-10-17). 공용 규칙(admin.html)은 운영줄 알약과
     현재·최고 알약을 한 줄(white-space: nowrap)로 두고 카드는 overflow-x: hidden 이라 넘친 부분이 잘렸다.
     한 줄에 들어가는 알약은 모양이 그대로이고(줄 높이는 공용 값 그대로), 줄보다 긴 알약만 카드 폭 안에서 감긴다. */
  #mi-admin .mi-coupang-rank-card .mi-rank-ops-row > span,
  #mi-admin .mi-coupang-rank-card .mi-rank-ops-row > button,
  #mi-admin .mi-coupang-rank-card .mi-rank-row-actions > .mi-rank-pill,
  #mi-clean .mi-coupang-rank-card .mi-rank-ops-row > span,
  #mi-clean .mi-coupang-rank-card .mi-rank-ops-row > button,
  #mi-clean .mi-coupang-rank-card .mi-rank-row-actions > .mi-rank-pill {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: left;
  }

  #mi-admin .mi-coupang-rank-aux > details > summary,
  #mi-clean .mi-coupang-rank-aux > details > summary {
    row-gap: 2px;
    padding: 12px 14px;
  }

  #mi-admin .mi-coupang-rank-aux-sub,
  #mi-clean .mi-coupang-rank-aux-sub {
    flex-basis: 100%;
    order: 3;
  }
}

/* ── 휴대폰: 보조 상자 안(자동 수집·내 크롬 확장) ── */
@media (max-width: 720px) {
  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-line,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-line {
    line-height: 1.5;
  }

  #mi-admin .mi-coupang-rank-root .mi-coupang-rank-manual-download,
  #mi-clean .mi-coupang-rank-root .mi-coupang-rank-manual-download {
    justify-content: center;
    width: 100%;
  }

  #mi-admin .mi-coupang-rank-manual-steps,
  #mi-clean .mi-coupang-rank-manual-steps {
    padding-left: 18px;
  }

  #mi-admin .mi-coupang-rank-settings,
  #mi-clean .mi-coupang-rank-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  #mi-admin .mi-coupang-rank-row,
  #mi-clean .mi-coupang-rank-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #mi-admin .mi-coupang-rank-row.is-head,
  #mi-clean .mi-coupang-rank-row.is-head {
    display: none;
  }

  #mi-admin .mi-coupang-rank-row-actions,
  #mi-clean .mi-coupang-rank-row-actions {
    grid-column: 1 / -1;
  }

  #mi-admin .mi-coupang-rank-owner-body,
  #mi-clean .mi-coupang-rank-owner-body {
    padding: 12px 14px 14px;
  }
}