/* =========================================================
   슈퍼크롤링 — 컴포넌트 스타일시트 (사이드바 리디자인)
   =========================================================
   토큰 정본은 globals.css. 이 파일은 그 변수(var(--…))와 허용된 값 표만 쓴다.
     · 색: var(--…) 만 (헥사 직접 금지 — tests/web/test_design.py 가 검사한다)
     · 글자: 12·13·14·15·16·18·20·22·24·28·32·36·44px 만 (MD3 단계 — 가이드 §0: 24 · 22 · 16 · 14 · 12)
     · 모서리: 8·12·16·24·999px 만 (단추 999 · 입력·칩 8 · 카드 12)
     · 간격: 4의 배수만 (var(--space-*) 또는 4·8·16·24·32·48)
     · 이모지 없음 (CLAUDE.md 「슈퍼크롤링 예외」)
   화면 폭: 모바일 375~767 · 태블릿 768~1023 · PC 1024+ (모바일 우선으로 적는다)
   ========================================================= */

/* ───────────── 앱 껍데기 (사이드바 + 상단바 + 본문) ───────────── */

.app {
  display: flex;
  min-height: 100vh;
}

/* 사이드바 — 모바일/태블릿(<1024)에서는 화면 밖에 접어둔 서랍이다.
   PC 에서는 아래 @media 에서 고정 기둥으로 바뀐다. */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 268px;
  max-width: 84vw;
  padding: var(--space-6) var(--space-4) var(--space-4);
  padding-top: calc(var(--space-6) + var(--safe-top));
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 200ms ease;
}

[data-sidebar="open"] .sidebar { transform: translateX(0); }

/* 서랍이 열렸을 때 본문을 덮는 어두운 막 */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  border: none;
  padding: 0;
  background: var(--overlay);
}

[data-sidebar="open"] .scrim { display: block; }

.sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

/* 로고 — 둥근 네모 "b." + 보니애 + SUPER CRAWLING */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--bg-accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* 다크에서는 흰 네모 + 남색 글자로 뒤집는다 — 안 그러면 사이드바에 묻힌다 */
[data-theme="dark"] .logo-mark {
  background: var(--sidebar-fg-strong);
  color: var(--sidebar-bg);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.logo-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--sidebar-fg-strong);
}

.logo-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--sidebar-muted);
}

.sidebar-close {
  border-color: var(--sidebar-border);
  background: var(--sidebar-active);
  color: var(--sidebar-fg);
  font-size: 24px;
}

.sidebar-close:hover { background: var(--sidebar-hover); }

.sidebar-section {
  margin: 0 0 var(--space-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--sidebar-muted);
}

/* ADMIN 섹션이 WORKSPACE 아래와 같은 상단 간격을 갖도록 */
.sidebar-list + .sidebar-section {
  margin-top: var(--space-6);
}

.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--sidebar-fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  word-break: keep-all;
}

.sidebar-link:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
.sidebar-link-text { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar-emoji { width: 20px; text-align: center; font-size: 16px; }

/* 선택된 메뉴 = 조금 밝은 남색 알약 */
.sidebar-link-active,
.sidebar-link-active:hover {
  background: var(--sidebar-active);
  color: var(--sidebar-fg-strong);
  font-weight: 600;
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
}

/* 테마 토글(가이드 §7 — 사이드바 맨 아래). 켜진 테마에 맞는 글자 한 벌만 보인다 */
.sidebar-theme {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-btn);
  background: var(--sidebar-active);
  color: var(--sidebar-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.sidebar-theme:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
.sidebar-theme:focus-visible { outline: 2px solid var(--sidebar-fg-strong); outline-offset: 2px; }
.sidebar-theme .sidebar-theme-dark { display: none; }
[data-theme="dark"] .sidebar-theme .sidebar-theme-light { display: none; }
[data-theme="dark"] .sidebar-theme .sidebar-theme-dark { display: inline; }

.sidebar-note {
  margin: 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sidebar-muted);
}

/* 본문 기둥 */
.app-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ───────────── 상단 바 ───────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  padding-top: calc(12px + var(--safe-top));
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.topbar-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-toggle:hover { background: var(--bg-hover); }

.topbar-toggle-icon { font-size: 20px; line-height: 1; }

/* 모바일에서는 "메뉴 접기" 글자를 감추고 ≡ 만 남긴다 — 상단바가 두 줄로 깨지지 않게 */
.topbar-toggle-label { display: none; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.crumbs-root { display: none; }
.crumbs-sep { display: none; }

.crumbs-current {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.topbar-link {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.topbar-link:hover { background: var(--bg-hover); color: var(--text); }

.topbar-user { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

/* ───────────── 본문 ───────────── */

.content {
  flex: 1;
  width: 100%;
  max-width: 1344px;   /* 목록·현황 본문 1,280 + PC 좌우 여백 32 (가이드 §0) */
  /* 모바일 좌우 여백 16px(§21-4 가로 스크롤 금지의 기본 거터) */
  padding: var(--space-4) var(--space-4) var(--space-8);
}

/* 하단 탭 바 — 모바일(<768)에서만 */
.tabbar { display: none; }

@media (max-width: 767px) {
  .topbar-user { display: none; }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: var(--space-2); /* 터치 중첩 방지 — 탭 사이 8px 이상(§21-3) */
    padding: var(--space-1) var(--space-1);
    padding-bottom: max(var(--space-1), env(safe-area-inset-bottom, 0px));
    background: var(--bg-card);
    border-top: 1px solid var(--border);
  }
  .tabbar-link {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 56px;          /* MD3 navigation bar — 이모지 위 + 이름 아래 */
    min-width: 0;
    padding: 4px 4px;
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    word-break: keep-all;
  }
  .tabbar-emoji { font-size: 20px; line-height: 24px; }
  .tabbar-link-active { background: var(--tint); color: var(--active-line); font-weight: 600; }
  .tabbar-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 8px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--danger-solid);
    color: var(--text-white);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
  }
  /* 고정된 하단 탭 바에 마지막 항목이 가리지 않도록(모바일 체크리스트 5) */
  .content { padding-bottom: 96px; }
}

/* 태블릿 — 상단바에 글자 링크가 들어갈 자리가 생긴다 */
@media (min-width: 768px) {
  .content { padding: var(--space-6) var(--space-6) var(--space-12); }
  .topbar { padding: 12px var(--space-6); }
  .topbar-link { display: inline-flex; }
  .crumbs-root,
  .crumbs-sep { display: inline; }
}

/* PC — 사이드바가 서랍이 아니라 고정 기둥이 된다 */
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    transform: none;
    transition: none;
  }
  .scrim { display: none; }
  [data-sidebar="open"] .scrim { display: none; }
  .sidebar-close.icon-btn { display: none; }
  .topbar-toggle-label { display: inline; }
  .topbar-toggle { padding: 0 12px; }
  .content { padding: var(--space-8) var(--space-8) var(--space-12); }
  .topbar { padding: 12px var(--space-8); }   /* 높이 64 — MD3 small top app bar */

  /* 접기 — 사이드바를 통째로 치운다(본문이 그만큼 넓어진다) */
  [data-sidebar="collapsed"] .sidebar { display: none; }
}

/* ───────────── 공통 조각 ───────────── */

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-xs { display: flex; flex-direction: column; gap: 4px; }
/* 세로 묶음(카드·stack)의 간격은 gap 이 정한다 — 문단 기본 바깥 여백(1em)이 더해져 빈 줄이 두 배가 되지 않게 */
.card > p, .stack > p, .stack-sm > p, .stack-lg > p, .stack-xs > p { margin: 0; }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.row-wrap { flex-wrap: wrap; }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* 운영 상태 — 다시 로그인·Chrome 다시 켜기처럼 버튼이 달린 줄: 좁은 화면에서는 오른쪽
   배지·버튼 묶음이 글자를 누르지 않고 통째로 아래 줄로 내려간다(버튼 쪼개짐 방지).
   768px 부터는 기존 row-between 처럼 양 끝 정렬 한 줄. */
.status-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .status-row { flex-direction: row; justify-content: space-between; }
}

/* 운영 상태 — 자동 로그인 줄(fix round 2): 이름+배지는 모든 화면 폭에서 항상 같은 첫 줄에
   있고(배지는 항상 오른쪽 끝) — 다른 줄과 똑같이. 안내문은 그 아래 한 줄로. [다시 로그인]
   버튼이 있는 줄만 375px 에서는 안내문 아래 왼쪽 정렬로 떨어지고, 768px 부터는 배지 아래
   오른쪽에 그대로(기존과 동일) — 이름 옆 배지 위치는 바뀌지 않는다. */
.login-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name badge" "note note";
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  align-items: start;
}
.login-row .lr-name { grid-area: name; }
.login-row .lr-badge { grid-area: badge; justify-self: end; }
.login-row .lr-note { grid-area: note; }

.login-row.has-action {
  grid-template-areas: "name badge" "note note" "action action";
}
.login-row.has-action .lr-action { grid-area: action; justify-self: start; }

@media (min-width: 768px) {
  .login-row.has-action {
    grid-template-areas: "name badge" "note action";
  }
  .login-row.has-action .lr-action { justify-self: end; }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.whitespace-nowrap { white-space: nowrap; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--text-danger); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 14px; }
.text-sub { font-size: 13px; }
.text-xs { font-size: 12px; }
.align-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.self-start { align-self: flex-start; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.divider-row {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}

.divider-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* 짧은 UI 라벨은 어절 중간에서 쪼개지면 안 된다(모바일 체크리스트 #2) */
.chip, .badge, .btn { white-space: nowrap; }


/* 화면에는 안 보이지만 스크린리더·테스트(원문 상태값 등)에는 남겨야 하는 텍스트 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.link {
  color: var(--text-accent);
  text-decoration: none;
  font-weight: 500;
}

.link:hover { text-decoration: underline; }

/* ───────────── 페이지 머리(PageHeader, 가이드 §3) ─────────────
   이모지 + 제목 폰 24 / PC 28 · 부제 13 흐린 글자(제목 바로 아래 4) · 머리 아래 24(stack-lg 간격). */

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

.page-header-text { min-width: 0; flex: 1 1 240px; }

.page-header-title {
  margin: 0;
  font-size: var(--font-page);   /* 24 — MD3 Headline Small, 폰·PC 같음(D2) */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 32px;
}

.page-header-desc {
  margin: var(--space-1) 0 0;
  font-size: 14px;               /* 한 줄 요약(40자 안) — 긴 설명은 도움말 접기(ui.help) */
  line-height: 20px;
  color: var(--text-secondary);
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* 폰에서 주요 동작이 2개 이상이면 아랫줄을 가득 채운다 */
@media (max-width: 767px) {
  .page-header-actions { width: 100%; }
  .page-header-actions > *,
  .page-header-actions form { flex: 1 1 auto; }
  .page-header-actions .btn { width: 100%; }
}

@media (min-width: 768px) {
  .page-header-title { font-size: var(--font-page); }
}

/* 이모지 — 글자와 같은 줄, 크기는 글자를 따른다 */
.emoji { display: inline-block; font-style: normal; }

/* 제목 오른쪽 회색 알약 */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--shade);
  color: var(--text-secondary);   /* 회색 바탕 위 — --text-muted 는 대비 3.99 */
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pill-accent { background: var(--tint); color: var(--active-line); }

/* ───────────── 구역(Section, 가이드 §4) — 이모지 + 제목 20/600 · 제목 줄 최소 높이 32 · 오른쪽 작은 동작 · 아래 24 ───────────── */

.section { display: flex; flex-direction: column; gap: var(--space-4); }

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  min-height: 32px;
}

.section-text { min-width: 0; flex: 1 1 200px; }

.section-title {
  margin: 0;
  font-size: var(--font-section);   /* 22 — MD3 Title Large */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.section-sub {
  margin: var(--space-1) 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.section-body { display: flex; flex-direction: column; gap: var(--space-4); }

/* ───────────── 카드(Card, 가이드 §4) — 바탕 --bg-card · 테두리 · 모서리 16(큰 카드 24) · 안 여백 폰 16 / PC 24(큰 카드 32) ───────────── */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.card-lg { border-radius: var(--radius-card-lg); padding: var(--space-6); }

@media (min-width: 768px) {
  .card { padding: var(--space-6); }
  .card-lg { padding: var(--space-8); }
}

/* 카드 머리줄 — 제목 16/600 · 설명 13 · 오른쪽 동작 */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.card-text { min-width: 0; flex: 1 1 200px; }

.card-title {
  margin: 0;
  font-size: var(--font-card);   /* 16 — MD3 Title Medium */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 24px;
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ───────────── 쇼핑몰 고르기 카드 줄(홈 · 지금 수동 실행) ─────────────
   폰은 2열 격자(연동 몰 2곳 — 옆으로 미는 줄은 두 번째 카드가 반만 보여 「더 있다」는 신호가 약했다, 3-2), PC 는 폭에 맞춰 나뉜다 */

.mall-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .mall-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
}

.mall-cell { display: flex; min-width: 0; }

.mall-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: var(--tap);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: inherit;
  text-decoration: none;
  text-align: left;
}

.mall-card:hover { filter: brightness(0.98); }
.mall-card:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

.mall-card-logo {
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mall-card-name { font-size: 15px; font-weight: 600; color: var(--text); }
.mall-card-status { font-size: 13px; color: var(--text-muted); }

/* 선택된 몰 = 강조 테두리 + 옅은 채움(디자인 스타일을 따른다) */
.mall-card-selected { border-color: var(--active-border); background: var(--tint); }
.mall-card-selected .mall-card-logo,
.mall-card-selected .mall-card-status { color: var(--active-line); }

/* ───────────── 옵션 줄 ───────────── */

.option-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .option-row { grid-template-columns: repeat(3, 1fr); align-items: end; }
}

/* ───────────── 상태 줄 (초록/빨강 점) ───────────── */

.status-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.status-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--status-todo);
}

.status-dot-idle { background: var(--status-todo); }
.status-dot-on { background: var(--status-done); }
.status-dot-off { background: var(--danger); }
.status-dot-run { background: var(--bg-accent); }

/* ───────────── 단추 (가이드 §4-2) ─────────────
   primary(주요 · 디자인 스타일 --active-* 를 따름) · secondary(보조 · 흰 바탕 + 테두리) · danger(위험 · --danger-solid).
   높이 44 · 안 여백 0 20 · 모서리 12 · 글자 14/600 · nowrap. 마우스 올림 brightness(0.96) · 못 누를 때 투명도 0.5.
   compact(36) 는 PC(1024+) 표 줄 안처럼 좁은 자리에서만 — 폰·태블릿은 항상 44. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;              /* ::before 손가락 영역(48)의 기준 */
  min-height: var(--btn-h);        /* 40 — MD3 Button S */
  padding: 0 24px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover { filter: brightness(0.96); }
.btn:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.btn-primary {
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--active-fg);
}

.btn-secondary {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-secondary);
}

.btn-danger {
  background: var(--danger-solid);
  border-color: var(--danger-solid);
  color: var(--text-white);
}

.btn-lg { min-height: var(--hit); padding: 0 32px; font-size: 16px; }
.btn-sm { padding: 0 16px; }           /* 글자는 그대로 14 — 좁은 곳에서 안 여백만 줄인다 */
.btn-full { width: 100%; }
.btn-touch { min-width: var(--btn-h); }  /* 아이콘 하나짜리 — 가로도 40(+손가락 영역 48) */

/* 덜 중요한 동작(MD3 Tonal) — 옅은 보라 바탕 + 보라 글자 */
.btn-tonal { background: var(--tint); border-color: transparent; color: var(--text-accent); }

/* 손가락 영역(D1) — 보이는 단추 40 · 칩 32 밖으로 보이지 않는 영역을 넓혀 48 을 채운다. 옆 것과 사이 8 이면 영역끼리 맞닿기만 한다 */
.btn::before, .btn-text::before, .icon-btn::before, .topbar-toggle::before { content: ""; position: absolute; inset: -4px; }

/* PC(1024+) 표 줄 안만 XS 32 — 폰·태블릿은 늘 40(+영역 48). btn-compact 는 옛 이름 */
@media (min-width: 1024px) {
  .btn-xs, .btn-compact { min-height: var(--btn-h-xs); padding: 0 12px; }
}

/* ───────────── 칩(Chip · ChipRow, 가이드 §4) — 알약 999 · 높이 44 · 켜진 칩은 디자인 스타일(--active-*) ───────────── */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--chip-h);     /* 32 — MD3 Chip */
  padding: 0 var(--space-4);
  border-radius: var(--radius-chip);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover { filter: brightness(0.96); }
.chip:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

.chip-active {
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--active-fg);
  font-weight: 600;
}

.chip-danger { color: var(--text-danger); border-color: var(--danger); }
.chip-danger.chip-active { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--text-white); }

.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--bg-track);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.chip-active .chip-count { background: var(--bg-card); color: var(--text); }

.chip::before { content: ""; position: absolute; inset: -8px -4px; }   /* 손가락 영역 48 */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-2); }   /* 줄 사이 16 — 위아래 영역(8씩)이 겹치지 않게 */

/* ───────────── 거르기 줄(Toolbar, 가이드 §4) — 칩·선택칸·검색칸 한 줄, 간격 8, 아래 16 · right 는 오른쪽 끝 ───────────── */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;   /* 라벨 달린 선택칸 옆 단추가 칸 아래줄에 맞게 */
  gap: var(--space-2);
}

.toolbar-items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.toolbar-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.toolbar .field { flex: 1 1 160px; min-width: 0; }
@media (max-width: 767px) {
  /* 폰: 거르기 칸을 다 쌓은 뒤 단추는 맨 아래 한 줄 가득(칸 묶음 옆에 혼자 떠 있지 않게) */
  .toolbar-right { flex: 1 1 100%; }
  .toolbar-right .btn { width: 100%; }
}

/* ───────────── 배지(Badge, 가이드 §2-1) — 모서리 8 · 여백 4 10 · 12/600. 색은 globals.css 의 .badge-<tone> ─────────────
   tone: success · info · warn · danger · muted (+ 분류 10색). 라우터·화면은 tone 이름만 넘긴다. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-sm { padding: 4px 8px; }

/* ───────────── 입력 ───────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--text-secondary);
}

.input,
.select {
  display: block;
  width: 100%;
  min-height: var(--tap);          /* 44 — MD3 56 에서 밀도 −3(라벨이 칸 밖이라 안쪽 라벨 자리 불필요) */
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  /* 아이폰 사파리는 입력창 글자가 16px 미만이면 포커스 시 화면을 확대한다 — 16px 유지 */
  font-size: 16px;
  padding: 0 var(--space-4);
}

/* 읽기 전용 필드 — 입력 칸 모양이지만 수정 불가 */
.readonly-field {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 0 var(--space-4);
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--bg-accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.field-error { color: var(--text-danger); }

/* <textarea> 는 .input 과 같은 테두리·배경·16px 글자, 여러 줄에 맞게 세로 여백·높이만 더한다 */
.textarea {
  min-height: 88px;
  padding: var(--space-2) var(--space-4);
  line-height: 1.5;
  resize: vertical;
}

/* 파일 고르기 — 브라우저 기본 「파일 선택」 대신 같은 높이의 보조 단추 모양 */
.file-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) 0 0;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.file-input::file-selector-button {
  min-height: 40px;
  margin: 1px var(--space-2) 1px 1px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-track);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ───────────── 쇼핑몰별 수집 설정(설정 화면) ───────────── */
/* 모바일: 한 줄이 세로로 쌓인다(이름 → 항목·후속 처리 → 위로/아래로). 768px 이상: 한 줄 가로 배치. */

.mall-pref-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 쇼핑몰 한 장 = <details>. 연동된 쇼핑몰은 펼쳐 두고, 준비 중인 쇼핑몰은 머리줄 한 줄로 접는다(3-1, G1) */
.mall-pref {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}

.mall-pref-off { background: var(--shade-weak); }
.mall-pref-off .mall-pref-name { color: var(--text-secondary); }
.mall-pref:not([open]) { padding-bottom: 0; }

.mall-pref-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  min-height: 52px;
  list-style: none;
  cursor: pointer;
}
.mall-pref-head::-webkit-details-marker { display: none; }
.mall-pref-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); flex: 1 1 auto; min-width: 0; }
.mall-pref-fold { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.mall-pref-fold-close { display: none; }
.mall-pref[open] .mall-pref-fold-open { display: none; }
.mall-pref[open] .mall-pref-fold-close { display: inline; }

.mall-pref-body { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-2); }

.mall-pref-no {
  min-width: 24px;
  color: var(--text-secondary);
  font-size: 14px;
}

.mall-pref-name {
  font-size: 16px;
  font-weight: 600;
  word-break: keep-all;
}

.mall-pref-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

.mall-pref-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}

.mall-pref-move {
  display: flex;
  gap: var(--space-2);
}

/* 3-1(2026-10-15): 1360 전용 한 줄 배치(G4)를 버리고 3단(767/1023)만 쓴다 — 태블릿부터 칸을 2×2 로, PC 는 3열 */
@media (min-width: 768px) {
  .mall-pref-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
}
@media (min-width: 1024px) {
  .mall-pref-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .mall-pref-move { justify-content: flex-end; }
}

/* ───────────── 켬/끔 한 줄 ───────────── */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-2) 0;
  cursor: pointer;
}

.toggle-row-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.toggle-row-help {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 네이티브 <input type=checkbox> 를 44px 높이 행 안의 스위치 모양으로 그린다.
   손가락이 실제로 누르는 자리는 .toggle-row 전체(높이 44)다. */
.toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--border);
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bg-track);
  cursor: pointer;
  transition: background 150ms ease;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, background 150ms ease;
}

.toggle:checked { background: var(--active-bg); border-color: var(--active-border); }
.toggle:checked::after { transform: translateX(20px); background: var(--active-fg); }
.toggle:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

/* ───────────── 알림 관리 화면 ───────────── */

.alert-channel-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.alert-channel-row .toggle-row {
  flex: 1 1 auto;
  min-width: 0;
}

/* 양식 안 묶음 제목(3차 — 디스코드 봇 칸의 'AI 판단') — 위 구분선 + 16/600 */
.form-group-title { margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 16px; font-weight: 600; line-height: 24px; }

.alert-kind-list { gap: 0; }

.alert-kind-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.alert-kind-name {
  font-size: 14px;
  font-weight: 600;
  word-break: keep-all;
}

.alert-kind-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.check-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.check-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bg-accent);
}

/* 768px 이상에서는 분류 한 줄을 가로로(이름 · 체크들) — 그보다 좁으면 세로 카드(§21-4) */
@media (min-width: 768px) {
  .alert-kind-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ───────────── 빈 상태(EmptyState, 가이드 §4) — 이모지 40 + 본문 14 + 힌트 13 + 단추 · 위아래 48 ───────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-4);
  color: var(--text-secondary);
}

.empty-state-emoji { font-size: 40px; line-height: 1.1; }

.empty-state-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.empty-state-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.empty-state-action { margin-top: var(--space-2); }

/* ───────────── 불러오는 중(Loading) — 「⏳ 불러오는 중…」 13px 흐린 글자 하나로 ───────────── */

.loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ───────────── 글자 단추(TextButton) · 아이콘 단추(IconButton) ───────────── */

.btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-text:hover { background: var(--tint-weak); text-decoration: underline; text-underline-offset: 3px; }
.field > .btn-text { align-self: flex-start; margin-left: calc(var(--space-2) * -1); }   /* 입력칸 자리에 놓인 글자 단추는 칸 왼쪽 줄에 맞춘다(가운데로 뜨지 않게) */
.btn-text:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--btn-h);
  height: var(--btn-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

/* ───────────── 접힌 목록(FadeList) — 앞 N개만, 「더보기」 체크박스로 펼침(JS 없음) ───────────── */

.fade-list { display: flex; flex-direction: column; gap: var(--space-4); }
.fade-list-items { display: flex; flex-direction: column; gap: var(--space-4); }
.fade-list[data-show="2"] .fade-list-toggle:not(:checked) ~ .fade-list-items > :nth-child(n+3),
.fade-list[data-show="3"] .fade-list-toggle:not(:checked) ~ .fade-list-items > :nth-child(n+4),
.fade-list[data-show="4"] .fade-list-toggle:not(:checked) ~ .fade-list-items > :nth-child(n+5),
.fade-list[data-show="5"] .fade-list-toggle:not(:checked) ~ .fade-list-items > :nth-child(n+6),
.fade-list[data-show="6"] .fade-list-toggle:not(:checked) ~ .fade-list-items > :nth-child(n+7) { display: none; }
.fade-list-more-close { display: none; }
.fade-list-toggle:checked ~ .fade-list-more .fade-list-more-open { display: none; }
.fade-list-toggle:checked ~ .fade-list-more .fade-list-more-close { display: inline; }
.fade-list-toggle:focus-visible ~ .fade-list-more { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

/* ───────────── 하단 고정 단추(BottomBar, 가이드 §4-4) — 폰: 하단 탭 위에 고정, 단추가 나눠 가득 · PC: 본문 끝 오른쪽 ───────────── */

.bottom-bar-space { display: none; }

.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.bottom-bar-msg { margin-right: auto; font-size: 13px; color: var(--text-secondary); }
.bottom-bar-actions { display: flex; gap: var(--space-2); }

@media (max-width: 767px) {
  /* 같은 높이의 빈 자리를 먼저 깔아 마지막 내용이 가려지지 않게 한다 */
  .bottom-bar-space { display: block; height: 76px; }
  /* 폼 뒤에 다른 카드가 이어지는 화면(설정)에서 빈 자리가 중간에 생기지 않게 — :has 를 아는 브라우저는 본문 끝에 여백을 둔다 */
  @supports selector(:has(*)) {
    .bottom-bar-space { display: none; }
    .content:has(.bottom-bar) { padding-bottom: calc(88px + 96px); }
  }
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));   /* 하단 탭(44 + 4·4) 위 */
    z-index: 35;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
  }
  .bottom-bar-msg { margin: 0; }
  .bottom-bar-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .bottom-bar-actions .btn, .bottom-bar-actions form, .bottom-bar-actions form .btn { width: 100%; }
}

/* ───────────── 알림 상자 ───────────── */

.callout {
  padding: var(--space-4);
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.callout-info { background: var(--tint); border-color: var(--bg-accent); color: var(--text); }
.callout-success { background: var(--tint-success); border-color: var(--status-done); color: var(--text); }
.callout-warn { background: var(--tint-warn); border-color: var(--priority-high); color: var(--text); }
.callout-danger { background: var(--tint-danger); border-color: var(--danger); color: var(--text); }

/* ───────────── 저장 막대 ───────────── */

.save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border);
}

.save-bar-msg {
  margin-right: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ───────────── 통계 ───────────── */

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.stat-value-sm { font-size: 20px; }

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ───────────── 진행 단계 줄 ───────────── */

.run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: 13px;
  color: var(--text-secondary);
}

.stage-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  font-weight: 500;
}

.stage-row:last-child { border-bottom: none; }

/* ───────────── 표(ResponsiveTable, 가이드 §4-3) — 한 벌의 마크업: 768+ 는 표, 폰(767 이하)은 줄마다 카드 ─────────────
   칸마다 data-label(폰에서 「라벨 값」) · .table-title(카드 윗줄) · .table-actions(동작 단추) */

.table-wrap { overflow-x: auto; }   /* 표만 옆으로 밀리게 — 페이지는 절대 가로로 밀리지 않는다 */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th,
.table td {
  padding: 12px var(--space-4);   /* 줄 높이 ≈ 44~48(MD3 밀도) */
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  overflow-wrap: break-word;   /* body 의 anywhere 는 표 칸 최소 폭을 0 으로 만들어 「운영/자」 처럼 세로로 쪼갠다 */
}
.table-text td { vertical-align: top; }   /* 글이 긴 표(매뉴얼) — 줄 첫머리를 맞춘다 */
.table-text td.table-title { min-width: 96px; font-weight: 600; }   /* 첫 칸(이름)이 「보기/전용」 처럼 좁게 꺾이지 않게 */

.table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: none; }
.table-actions { white-space: nowrap; }
.table-actions, .table-actions form { display: inline-flex; gap: var(--space-2); align-items: center; }
.table-file { max-width: 220px; }
.table-file .truncate { display: block; }

/* 카드 안에 표 하나만 있을 때 */
.card-table { gap: 0; }
.card-table > .card-head { margin-bottom: var(--space-2); }   /* 머리 오른쪽 단추와 첫 줄 링크 사이 8 이상 */

@media (min-width: 768px) {
  .table tbody tr:hover { background: var(--bg-hover); }
}

@media (max-width: 767px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { padding: var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border); }
  .table tbody tr:last-child { border-bottom: none; padding-bottom: 0; }
  /* 카드 윗줄 = .table-title, 아랫줄 = 「라벨 값」 을 가로로 나열(가이드 §4-3 meta) */
  .table td { padding: 0; border-bottom: 0; }
  .table td[data-label] { display: inline-block; margin: var(--space-1) 12px var(--space-1) 0; font-size: 13px; color: var(--text-secondary); vertical-align: top; }
  .table td:empty { display: none; }
  .table td[data-label]::before { content: attr(data-label); margin-right: var(--space-1); font-size: 12px; font-weight: 500; color: var(--text-muted); }
  .table td.table-title { display: block; margin: 0 0 var(--space-1); font-size: 16px; font-weight: 600; color: var(--text); }
  .table td.table-title::before { display: none; }
  /* 글이 긴 표(매뉴얼): 칸마다 라벨 한 줄 + 본문 14 — 짧은 값을 옆으로 늘어놓는 기본 카드와 달리 */
  .table-text td[data-label] { display: block; margin: var(--space-1) 0 0; font-size: 14px; color: var(--text); }
  .table-text td[data-label]::before { display: block; margin: 0; }
  .table td.table-badge { vertical-align: middle; }
  .table td.table-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }   /* .table td(block) 보다 세게 — 단추 사이 8 */
  .table-file { max-width: none; }
  .table tbody tr:hover { background: transparent; }
}

/* ───────────── 로그인 ───────────── */

.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-6);
}

.login-logo .logo-name { color: var(--text); }
.login-logo .logo-sub { color: var(--text-secondary); }

/* 로그인은 밝은 바탕 위라 반대로 — 남색 네모 + 흰 글자(라이트·다크 모두 읽힌다) */
.login-logo .logo-mark {
  background: var(--sidebar-bg);
  color: var(--text-white);
}
[data-theme="dark"] .login-logo .logo-mark { outline: 1px solid var(--border); outline-offset: -1px; }   /* 다크 바탕에서 남색 네모 테두리가 사라지지 않게 */


/* ───────────── 진행 화면 상태 띠(시작·진행 중·완료·실패) — 2026-09-23 ───────────── */

.run-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  background: var(--bg-card);
}
.run-hero-running, .run-hero-queued { border-color: var(--bg-accent); background: var(--tint); }
.run-hero-done { border-color: var(--status-done); background: var(--tint-success); }
.run-hero-failed { border-color: var(--danger); background: var(--tint-danger); }
.run-hero-head { display: flex; align-items: center; gap: var(--space-2); }
.run-hero-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; word-break: keep-all; }
.run-hero-done .run-hero-title { color: var(--text-success); }
.run-hero-failed .run-hero-title { color: var(--text-danger); }
.run-hero-sub { margin: 0; font-size: 14px; color: var(--text-secondary); }
.run-hero-now, .run-hero-where { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.run-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.run-hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}
.run-hero-stat-value { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--text); }
.run-hero-stat-label { font-size: 13px; color: var(--text-secondary); word-break: keep-all; }

/* 로딩 표시 — 회전은 로딩에만(§22-8) */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--tint-strong);
  border-top-color: var(--bg-accent);
  border-radius: 999px;
  animation: spin 800ms linear infinite;
  flex: 0 0 auto;
}
.spinner-sm { width: 12px; height: 12px; border-width: 2px; margin-right: var(--space-2); vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

.progress-indeterminate {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-strong);
}
.progress-indeterminate span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 999px;
  background: var(--bg-accent);
  animation: progress-slide 1200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.stage-row-running { font-weight: 600; color: var(--text-accent); }

@media (prefers-reduced-motion: reduce) {
  .spinner, .progress-indeterminate span { animation-duration: 3000ms; }
}

/* 쇼핑몰 행 아래 한 줄 전체 — 고객 취소요청 자동 처리(2026-09-24). 한 줄 배치 격자에서도 칸을 차지하지 않게 */
.mall-pref-extra { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: var(--space-2); }

/* 쇼핑몰별 자동 중지 띠 + '다시 켜기'(2026-09-27) — 모바일은 위아래, 넓은 화면은 한 줄 */
.pause-row { display: flex; flex-direction: column; gap: var(--space-2); }
.pause-row .callout { flex: 1; }
@media (min-width: 768px) {
  .pause-row { flex-direction: row; align-items: center; }
}

/* ───────────── 켬/끔 스위치 폼(첫 화면 — 자동 수집 전체·이 쇼핑몰, 2026-09-28) ───────────── */
.switch-form { margin: 0; }
.switch-form-label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer; }
.switch-form-label-only { min-width: var(--tap); justify-content: center; }
.switch-form-text { font-size: 14px; font-weight: 600; color: var(--text); word-break: keep-all; }
.switch-form-state { font-weight: 700; color: var(--text-muted); }
.switch-form-state.is-on { color: var(--active-line); }

.sort-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 20px;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.sort-handle:active { cursor: grabbing; }
.sort-handle:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }
.mall-pref.is-dragging { opacity: 0.6; box-shadow: var(--shadow-hover); }

.run-button { min-height: 52px; font-size: 16px; }

/* ───────────── 자동 수집(2026-09-28, 3-2 에서 카드 안 카드 → 구분선 목록) — 켬/끔·쇼핑몰 순서·수집 항목을 한곳에서 ───────────── */
.auto-panel { gap: var(--space-2); }
.auto-master {
  flex-shrink: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
}

.auto-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.auto-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow 150ms ease;
}
.auto-row:last-child { border-bottom: none; padding-bottom: 0; }
.auto-row.is-dragging { opacity: 0.7; box-shadow: var(--shadow-hover); background: var(--bg-card); }
.auto-row-main { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); }
.auto-row-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--radius-pill); background: var(--bg-track);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.auto-row-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.auto-row-name { font-size: 16px; font-weight: 600; color: var(--text); }
.auto-row-state { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.auto-row-state.tone-on { color: var(--active-line); }
.auto-row-state.tone-warn { color: var(--text-danger); }
.auto-row-items { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
@media (min-width: 768px) {
  .auto-row-items { flex-direction: row; align-items: center; gap: var(--space-4); padding-left: calc(var(--tap) + var(--space-2) + 24px + var(--space-2)); }
  .auto-row-pause { margin-left: calc(var(--tap) + var(--space-2) + 24px + var(--space-2)); }
}
.auto-row-items-label { font-size: 13px; font-weight: 500; color: var(--text-muted); flex-shrink: 0; }
.auto-row-pause {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-badge); background: var(--tint-warn);   /* 여러 줄 상자 — 알약(999) 아님(3차) */
  font-size: 13px; color: var(--text);
}
@media (min-width: 768px) {
  .auto-row-pause { flex-direction: row; align-items: center; justify-content: space-between; }
}
.auto-waiting { margin: 0; font-size: 13px; color: var(--text-muted); }
.auto-log { font-size: 13px; color: var(--text-secondary); }
.auto-log summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--text-muted); }
.auto-log ul { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }

/* 수집 항목 알약 — 누르면 켜고 끄고, 끌면 순서가 바뀐다(가로로 끌 때 세로 스크롤은 살린다) */
.chip-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-secondary);
  font-size: 14px; font-weight: 600;
  cursor: pointer; user-select: none; touch-action: pan-y;
  transition: background 150ms ease, border-color 150ms ease;
}
.chip-toggle-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--bg-track); font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.chip-toggle-tag { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.chip-toggle.is-on { border-color: var(--active-border); background: var(--active-bg); color: var(--active-fg); }
.chip-toggle.is-on .chip-toggle-no { background: var(--bg-card); color: var(--text); }
.chip-toggle.is-off { background: var(--shade-weak); color: var(--text-secondary); cursor: grab; }   /* 꺼짐은 바탕색으로 — 글자는 대비 4.5 유지 */
.chip-toggle.is-dragging { opacity: 0.7; box-shadow: var(--shadow-hover); }
.chip-toggle:focus-within { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

/* 사용자 관리(관리자 1단계) — 모바일 세로 카드, PC 2열 입력 */
.user-form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .user-form-grid { grid-template-columns: 1fr 1fr; } }
.user-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.user-card-row { display: grid; gap: var(--space-2); align-items: end; }
@media (min-width: 768px) { .user-card-row { grid-template-columns: 1fr 1fr auto; } }
.user-card-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
@media (min-width: 768px) { .user-card-actions { flex-direction: row; flex-wrap: wrap; align-items: end; gap: var(--space-2); } }

/* 모바일에서는 user-card-actions 내의 form/button들이 100% 폭 */
.user-card-actions form, .user-card-actions > form > button { width: 100%; }
@media (min-width: 768px) { .user-card-actions form, .user-card-actions > form > button { width: auto; } }

/* 활동 기록(관리자 2단계) — PC 한 줄, 모바일 두 줄 카드 */
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; }
.activity-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); display: grid; gap: var(--space-1); grid-template-columns: auto 1fr; }
.activity-row:last-child { border-bottom: none; }
.activity-when, .activity-who { color: var(--text-secondary); font-size: 13px; }
.activity-what { font-weight: 600; grid-column: 1 / -1; }
.activity-text { color: var(--text-secondary); font-size: 14px; grid-column: 1 / -1; }
@media (min-width: 768px) {
  .activity-row { grid-template-columns: 96px 120px 160px 1fr; align-items: baseline; }
  .activity-what, .activity-text { grid-column: auto; }
}

/* 운영 상태판(/system, 관리자 3단계) — 모바일은 세로 카드, PC 는 2열 그리드 */
.status-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .status-grid-full { grid-column: 1 / -1; }
}

/* 사이드바 메뉴 옆 건수 배지(확인 필요 주문, 관리자 5단계 D) */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--danger-solid);   /* 채움은 --danger-solid(다크 --danger 는 밝은 빨강이라 흰 글자 대비 1.9) */
  color: var(--text-white);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  flex-shrink: 0;
}

/* ───────────── 사용 매뉴얼(/manual, 2026-10-02) ───────────── */
.manual .card { scroll-margin-top: 96px; }
.manual p, .manual li, .manual dd { line-height: 1.6; }
.manual-h3 { margin: var(--space-2) 0 0; font-size: 16px; font-weight: 600; }
.manual-steps, .manual-list { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
/* 목차(2026-10-21 3차) — 1280 미만은 위쪽 칩 줄(줄바꿈), 1280 이상은 왼쪽에 붙어 따라오는 목록(200) + 읽는 글 840 */
.manual-side { display: none; }
.manual-toc-chips { display: none; }
@media (min-width: 768px) { .manual-toc-phone { display: none; } .manual-toc-chips { display: flex; } }
.manual-body { min-width: 0; }
@media (min-width: 1280px) {
  .manual-toc-chips { display: none; }
  .manual-layout { display: grid; grid-template-columns: 200px minmax(0, 840px); gap: var(--space-8); align-items: start; }
  .manual-side { display: block; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 4px; margin: -4px; }
}
.manual-side-title { margin: 0 0 var(--space-2); padding: 0 12px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--text-secondary); }
.manual-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.manual-side-list a { position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-badge); color: var(--text-secondary); font-size: 14px; line-height: 20px; text-decoration: none; }
.manual-side-list a::before { content: ""; position: absolute; inset: -4px 0; }
.manual-side-list a:hover { background: var(--tint-weak); color: var(--text); }
.manual-side-list a:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }
.manual-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.manual-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-badge); background: var(--bg-card); }   /* 단추 모서리(999)를 쓰면 사진이 타원으로 잘렸다(3차) */
.manual-figure figcaption { color: var(--text-secondary); font-size: 13px; }
.manual-figure-narrow { max-width: 320px; }
.manual-pair { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.manual-pair > .manual-figure:not(.manual-figure-narrow) { flex: 1 1 320px; }
.manual-faq { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.manual-faq dt { font-weight: 600; margin-top: var(--space-2); }
.manual-faq dd { margin: 0; color: var(--text-secondary); }
/* 「맨 위로」 — 폰은 오른쪽 아래 고정(하단 탭 위), PC 는 본문 끝 */
.to-top { align-self: flex-end; }
@media (max-width: 767px) {
  .to-top { position: fixed; right: var(--space-4); bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 35; box-shadow: var(--shadow-hover); }
}

/* ───────────── 가공 규칙(/rules) ───────────── */
.rules-explain { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.6; }
.rules-summary { margin: 0; font-size: 16px; font-weight: 600; }
.rules-sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.rules-list { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.rules-changes { margin: var(--space-1) 0 0; padding-left: var(--space-4); color: var(--text-secondary); }
.rules-code { word-break: break-all; }
.rules-row-changed { background: var(--tint-weak); }

/* ───────────── 로그인 세션 카운트다운(2026-10-06 세션 지킴이) ─────────────
   한 줄 = 이름 · 배지(오른쪽 끝) / 남은 시간 · 미리 갱신 예정(아래 줄). 자동 로그인 줄과 같은 배치.
   숫자는 고정폭 숫자로(1초마다 바뀌어도 글자가 흔들리지 않게). 30분 미만 주황, 0 이면 빨강. */
.session-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name badge" "time time";
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  align-items: center;
  min-height: 44px;
}
.session-row .sr-name { grid-area: name; }
.session-row .sr-badge { grid-area: badge; justify-self: end; }
.session-row .sr-time { grid-area: time; word-break: keep-all; }
.session-row .countdown { font-variant-numeric: tabular-nums; }
.session-row .sr-next { white-space: nowrap; }
.session-row .countdown.is-soon { color: var(--text-warn); }
.session-row .countdown.is-cut { color: var(--text-danger); }

/* ───────────── 진단 화면(/diagnosis, 진단 2단계) ─────────────
   모바일(375px)이 기준: 주문 줄은 번호 → 흐름 칩(줄바꿈) → 판정 순서로 세로로 쌓고,
   1024px 부터 한 줄 표처럼 칸을 나눈다. 칩은 flex-wrap 이라 가로 스크롤이 생기지 않는다. */
.dx-fix { display: flex; flex-direction: column; gap: var(--space-4); }
.dx-pick { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.dx-pick legend { padding: 0; margin-bottom: var(--space-2); }
.dx-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-right: var(--space-2); word-break: keep-all; overflow-wrap: anywhere; }
.dx-check input { width: 20px; height: 20px; flex-shrink: 0; }
.dx-actions { order: 1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dx-actions .btn { white-space: nowrap; }
.dx-ack { order: 2; }
.dx-preview { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.dx-known { align-self: flex-start; white-space: normal; line-height: 1.5; }
.dx-note { line-height: 1.5; }
.dx-meta { margin-top: calc(var(--space-2) * -1); }
.dx-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex-shrink: 0; }
.dx-facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dx-fact {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-2);
  font-size: 14px;
  line-height: 1.5;
}
.dx-fact dt { color: var(--text-muted); font-weight: 600; }
.dx-fact dd { margin: 0; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.dx-order { display: flex; flex-direction: column; gap: var(--space-2); }
.dx-pon { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-chips { gap: 4px; }
/* 지금 위치(10-15): 줄마다 '이름 | 단계 › 단계 › 단계', 지금 있는 단계만 색 칸. 단계 사이 꺾쇠는 CSS 테두리로 그린다(글리프 없음). */
.dx-flow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dx-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }   /* 폰: 줄 이름을 단계 위에 */
.dx-stp-item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }   /* 꺾쇠가 다음 단계와 함께 줄바꿈 */
.dx-track-name { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dx-track-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; min-width: 0; }
.dx-stp { font-size: 13px; line-height: 1.6; color: var(--text-muted); padding: 0 var(--space-2); border-radius: var(--radius-badge); }
.dx-sep {
  flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin: 0 4px;
  border-top: 2px solid var(--text-muted); border-right: 2px solid var(--text-muted); transform: rotate(45deg) scale(0.6);
}
.dx-gap { display: inline-block; width: 8px; flex-shrink: 0; }
.dx-stp-on { font-weight: 600; }
.dx-stp-accent { background: var(--tint); color: var(--active-line); }
.dx-stp-danger { background: var(--tint-danger); color: var(--text-danger); }
.dx-stp-success { background: var(--tint-success); color: var(--text-success); }
.dx-stp-muted { background: var(--shade); color: var(--text-secondary); }
.dx-verdict {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.dx-steps { gap: 4px; color: var(--text-secondary); }
/* 판정은 문장이 길어 배지가 아니라 색 글줄로(D5) — 배지는 한 줄짜리 상태에만 */
.dx-label { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text); }
.dx-label-success { color: var(--text-success); }
.dx-label-danger { color: var(--text-danger); }
.dx-label-warn { color: var(--text-warn); }

/* 단추 모양 펼침(ui.fold) */
.fold-summary { list-style: none; width: fit-content; }
.fold-summary::-webkit-details-marker { display: none; }
.fold-body { margin-top: var(--space-2); }

.dx-form { display: flex; flex-direction: column; gap: var(--space-4); }
.dx-form-row { display: flex; flex-direction: column; gap: var(--space-2); }
.dx-form-row .btn { width: 100%; }

.dx-table { display: flex; flex-direction: column; gap: var(--space-2); }
.dx-trow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 0;
}
.dx-thead { display: none; }
.dx-empty { display: none; }   /* 할 일이 없는 줄(정상)은 모바일 카드에서 '-' 를 숨긴다 */

@media (min-width: 768px) {
  .dx-track { grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: var(--space-2); }
  .dx-form-row { flex-direction: row; align-items: flex-end; }
  .dx-form-row .field { flex: 0 1 240px; }
  .dx-form-row .btn { width: auto; }
}

@media (min-width: 1024px) {
  .dx-order {
    display: grid;
    grid-template-columns: 210px minmax(0, 1.4fr) minmax(0, 1fr);   /* 주문번호 전체(16자리)+이름 — 10-15 */
    align-items: center;
    gap: var(--space-4);
  }
  .dx-table { gap: 0; }
  .dx-trow {
    display: grid;
    grid-template-columns: 180px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 0.9fr);   /* 지금 위치 세 줄이 꺾이지 않게 — 10-15 */
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }
  .dx-empty { display: block; }
  .dx-thead {
    display: grid;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
  }
}

/* ───────────── 특이사항(/notes) ───────────── */
.nt-badges { flex: 0 0 auto; }
.nt-fields { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.nt-fields dt { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; }
.nt-fields dd { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.nt-examples { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.nt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.nt-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* 진단: 주문번호 전체 옆 이름·시군구(2026-10-14), 쇼핑몰별 조회 묶음 */
.dx-who { display: block; font-size: 13px; font-weight: 400; white-space: normal; color: var(--text-secondary); }
.dx-inspect + .dx-inspect { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.dx-inspect-title { margin: 0; font-size: 16px; font-weight: 600; }
.dx-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ───────────── 심플웍스 자료 받기 — 작업 목록(2026-10-21 UI 개편 3차) ───────────── */
/* 작업 하나 = 구분선 한 칸(카드 안 상자 없음). 제목 줄 오른쪽에 글자 단추, 칸은 격자: 폰 2열(날짜는 한 줄 가득 — 375 두 칸이면 달력 아이콘에 날짜가 가려진다),
   768 이상은 폭에 맞춰 176 이상 칸으로(820 4열 · 1440 5열). */
.sw-jobs { display: flex; flex-direction: column; }
.sw-job { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; }
.sw-job:first-child { padding-top: 0; }
.sw-job + .sw-job { border-top: 1px solid var(--border); }
.sw-job-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); min-height: var(--btn-h); }
.sw-job-title { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; }
.sw-job-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-right: -12px; }
.sw-job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
.sw-job-grid > .field:has(input[type="date"]) { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .sw-job-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
  .sw-job-grid > .field:has(input[type="date"]) { grid-column: auto; }
}
.sw-run-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.sw-run-bar > .btn-text { margin-left: -12px; }
.sw-enter-default { font-size: 16px; }   /* 자료 받기 폼의 보이지 않는 기본 단추(Enter) — 입력칸 16 규칙에 맞춰 둔다 */
.sw-batch + .sw-batch { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.sw-run { display: flex; flex-direction: column; gap: var(--space-1); }
.sw-key { overflow-wrap: anywhere; color: var(--text-secondary); }


/* =========================================================
   Material Design 3 공통 부품(2026-10-21, 가이드 §0) — 도움말 접기 · 탭 · 스낵바 · 옆 판 · 칸 너비 · 양식 줄 · 본문 폭
   ========================================================= */

/* 도움말 접기(ui.help) — 긴 설명은 여기로. 닫혀 있으면 「도움말」 글자 단추 하나 */
.help { font-size: 14px; }
.help > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--btn-h);
  padding: 0 12px;
  margin-left: -12px;
  border-radius: var(--radius-btn);
  color: var(--text-accent);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary::before { content: ""; position: absolute; inset: -4px; }
.help > summary::after { content: "▾"; font-size: 12px; }
.help[open] > summary::after { content: "▴"; }
.help > summary:hover { background: var(--tint-weak); }
.help > summary:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }
.help-body {
  margin-top: var(--space-2);
  padding: 12px var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg-hover);
  color: var(--text-secondary);
  line-height: 24px;
}
.help-body > :first-child { margin-top: 0; }
.help-body > :last-child { margin-bottom: 0; }
.help-body ul { margin: 0; padding-left: 20px; }

/* 탭(ui.tabs) — 묶음 안 메뉴 이동 · 보기 전환. 밑줄 강조(디자인 스타일 --active-line), 줄 높이 48 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  padding: 0 var(--space-4);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { background: var(--bg-hover); }
.tab:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: -2px; }
.tab-active { color: var(--active-line); border-bottom-color: var(--active-line); font-weight: 600; }
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--bg-track);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.tab-count-danger { background: var(--danger-solid); color: var(--text-white); }

/* 스낵바(ui.snackbar) — 지나가는 알림(저장했습니다 등). 아래 가운데, 4초 뒤 사라짐. 남아야 하는 경고는 callout */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--hit);
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px var(--space-4);
  border-radius: var(--radius-badge);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--shadow-hover);
  transform: translateX(-50%);
  animation: snackbar-out 300ms ease 4s forwards;
}
@keyframes snackbar-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 767px) {
  .snackbar { bottom: 88px; width: calc(100vw - 32px); }   /* 아래 탭 위 */
}

/* 옆 판(ui.side_sheet) — 추가·고치기 양식. PC 오른쪽 400, 폰은 화면 전체. 주소(?edit=…·?new=1)로 열고 닫아 스크립트 없이 */
.sheet-scrim { position: fixed; inset: 0; z-index: 70; background: var(--overlay); }
.side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100vw;
  padding: var(--space-4);
  padding-top: calc(var(--space-4) + var(--safe-top));
  background: var(--bg-card);
  overflow-y: auto;
}
.side-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.side-sheet-title { margin: 0; font-size: var(--font-section); font-weight: 600; line-height: 28px; letter-spacing: -0.02em; }
@media (min-width: 768px) {
  .side-sheet { width: 400px; padding: var(--space-6); border-left: 1px solid var(--border); box-shadow: var(--shadow-modal); }
}

/* 칸 너비(가이드 §0) — 768 이상에서만 내용 폭, 폰은 가로 가득 */
@media (min-width: 768px) {
  .field-w-num .input, .field-w-num .select { max-width: 96px; }
  .field-w-date .input { max-width: 160px; }
  .field-w-code .input, .field-w-code .select { max-width: 240px; }
  .field-w-name .input, .field-w-name .select { max-width: 320px; }
  .field-w-text .input, .field-w-text .textarea { max-width: 640px; }
}

/* 양식 줄 — 짧은 칸 2~4개를 PC 에서 한 줄에(폰은 세로) */
.form-row { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 768px) {
  .form-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .form-row > .field { flex: 0 1 auto; min-width: 160px; }
  .form-row > .field-w-code, .form-row > .field-w-name { flex-basis: 240px; }
  .form-row > .field-w-text { flex: 1 1 320px; }
}

/* 본문 폭 — 양식·설정 720 · 읽는 글 840 (목록·현황은 .content 1,280) */
.page-narrow { max-width: 720px; }
.page-read { max-width: 840px; }

/* 표 줄 전체를 누르는 링크(자세히·고치기) — 첫 칸 글자에 걸고 줄 전체로 넓힌다 */
.table tr.row-link { position: relative; cursor: pointer; }
.row-link-a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--text); font-weight: 600; text-decoration: none; }
.row-link-a::after { content: ""; position: absolute; inset: 0; }
.row-link-a:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }
.table tr.row-selected { background: var(--tint); }

/* 빨간 글자 단추 — 줄 안 위험 동작(삭제·중지). 채움 빨강은 확인 자리에서만 */
.btn-text-danger { color: var(--text-danger); }
.btn-text-danger:hover { background: var(--tint-danger); }


/* =========================================================
   메뉴 묶음(2026-10-21 — web/nav.py): 사이드바 묶음 머리 · 묶음 안 탭 · 사용자 메뉴
   ========================================================= */
.sidebar-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--space-4) 0 var(--space-1);
  padding: 0 12px;
  font-size: 14px;                /* MD3 Title Small */
  font-weight: 600;
  line-height: 20px;
  color: var(--sidebar-fg-strong);
}
.sidebar-list + .sidebar-group { margin-top: var(--space-6); }
.sidebar-group + .sidebar-list .sidebar-link { padding-left: 44px; }   /* 묶음 머리 이모지 자리만큼 들여 씀 */
.sidebar-link-home { font-weight: 600; }

/* 묶음 안 메뉴 탭 — 1024 미만만(PC 는 왼쪽 메뉴) */
.group-tabs { margin: calc(var(--space-4) * -1) 0 var(--space-4); }
@media (min-width: 1024px) { .group-tabs { display: none; } }

/* 사용자 메뉴(위 막대 오른쪽) — 이름 · 권한 → 내 계정 · 로그아웃 */
.user-menu { position: relative; }
.user-menu-btn { list-style: none; }
.user-menu-btn::-webkit-details-marker { display: none; }
.user-menu-role { display: none; }
@media (min-width: 768px) { .user-menu-role { display: inline; } }
.user-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-hover);
}
.user-menu-item {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-badge);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.user-menu-item:hover { background: var(--bg-hover); }

/* =========================================================
   🏠 홈 '오늘 접수 현황'(2026-10-21 UI 개편 §3-1) — 지금 상태 · 확인 필요 · 로그인 세션 세 칸(PC) → 오늘 건수 → 바로 실행 → 자동 접수 → 오늘 회차
   ========================================================= */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 768px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-grid > .card { height: 100%; }
.home-meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.stat-value-danger { color: var(--text-danger); }
.table-num td[data-label], .table-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .table-num td[data-label] { text-align: left; } }
@media (min-width: 768px) { .run-button.btn-full { width: auto; min-width: 240px; } }
.home-sessions .session-row { gap: var(--space-2); }
.home-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 1200px) { .home-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-split .option-row { grid-template-columns: 1fr; } }
.table tr.row-link td { padding-top: 0; padding-bottom: 0; }   /* 줄 링크(44)가 높이를 정한다 */
/* 768 이상 표: 위아래 4 를 더해 줄 높이 52 — 줄마다 있는 링크·⋮ 단추가 이웃 줄과 8 이상 떨어지게(3차 검토 — 여러 줄 사용자 표에서 1·5 로 붙었다) */
@media (min-width: 768px) { .table tr.row-link td { padding-top: var(--space-1); padding-bottom: var(--space-1); } }
/* 회차 목록 — 폰에서 한 줄(시각 · 쇼핑몰 · 결과 · 건수), 줄 전체가 진행 자세히 링크 */
@media (max-width: 767px) {
  .table-runs tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 4px 0; }
  .table-runs td.table-title { margin: 0; font-size: 14px; }
  .table-runs td[data-label] { margin: 0; }
  .table-runs td[data-label]::before { display: none; }
}

/* =========================================================
   📥 확인 필요 주문(2026-10-21 UI 개편 §3-4): 목록(PC 왼쪽 고정 · 폰 맨 위) + 카드. 주문 한 줄 = 번호·이름 | 세 곳 지금 위치
   ========================================================= */
.dx-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* 목록은 카드 위 격자(PC 3칸 · 태블릿 2칸) — 카드가 가로 전체를 써야 세 곳 흐름이 한 줄에 들어간다 */
.dx-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .dx-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dx-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dx-index > li { display: flex; }
.dx-index > li > .dx-index-item { flex: 1 1 auto; }
.dx-index-item {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-height: var(--tap); padding: 12px var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card);
  color: var(--text); text-decoration: none;
}
.dx-index-item:hover { background: var(--bg-hover); }
.dx-index-item:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }
.dx-index-title { font-size: 14px; font-weight: 600; line-height: 20px; }
.dx-index-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.dx-cards { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dx-cards > div { scroll-margin-top: 80px; }   /* 목록에서 누르면 위 막대에 가리지 않게 */
/* PC: 세 곳(쇼핑몰 · 심플웍스 · 기록)을 나란히 — 주문 한 줄이 두 줄 높이로 */
@media (min-width: 1024px) {
  .dx-order { grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: var(--space-1) var(--space-4); }
  .dx-order .dx-verdict { grid-column: 2; }
  .dx-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--space-1) var(--space-4); }
  .dx-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* 폰·태블릿: 세 곳마다 지금 칸만(꺾쇠·나머지 단계는 숨김) */
@media (max-width: 1023px) {
  .dx-track-steps .dx-stp-item:not(:has(.dx-stp-on)) { display: none; }
  .dx-track-steps .dx-sep, .dx-track-steps .dx-gap { display: none; }
  .dx-flow { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) 12px; }   /* 세 곳을 한 줄에(넘치면 줄바꿈) */
  .dx-track { display: inline-flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
  .dx-track-name { font-size: 12px; }
  .dx-order { gap: var(--space-1); }
}

/* =========================================================
   📐 가공 규칙(2026-10-21 UI 개편 §3-6): 탭 + 찾기 줄 · 표(줄을 누르면 옆 판) · 옆 판 안 삭제
   ========================================================= */
.rules-search { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 768px) { .rules-search { flex-direction: row; align-items: flex-end; flex-wrap: wrap; } .rules-search .field { flex: 0 1 320px; } }
.rules-count { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
@media (max-width: 767px) { .table-hide-sm { display: none !important; } }
.rules-delete { padding-top: var(--space-4); border-top: 1px solid var(--border); }
/* 폰: 두 줄 목록 — 1줄 상품번호(누르면 고치기) + 설명, 2줄 판매자코드 · 양면 심플코드 */
@media (max-width: 767px) {
  .rules-table tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 4px 0 8px; }
  .rules-table td.table-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 14px; }
  .rules-table td[data-label="상품 설명"] { grid-column: 2; grid-row: 1; display: block; margin: 0; overflow: hidden; color: var(--text); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
  .rules-table td[data-label="상품 설명"]::before { display: none; }
  .rules-table td[data-label="판매자코드"] { grid-column: 1; grid-row: 2; margin: 0; }
  .rules-table td[data-label="양면 심플코드"] { grid-column: 2; grid-row: 2; margin: 0; }
}
@media (max-width: 767px) { .rules-table td { overflow-wrap: normal; } }   /* '보/류' 처럼 낱말 중간에서 꺾이지 않게 */

/* =========================================================
   📐 쇼핑몰별 접수 설정(2026-10-21 UI 개편 2차 §3-8) — 쇼핑몰마다 칸 묶음 · ⚙️ 예약·알림 설정 탭 · 홈 자동 접수 요약
   ========================================================= */
.mall-set { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-light); }
.mall-set:last-of-type { border-bottom: 0; padding-bottom: 0; }
.mall-set-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.home-auto-list { display: flex; flex-direction: column; gap: var(--space-2); }
.home-auto-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); min-height: var(--tap); }
.home-auto-name { min-width: 96px; font-size: 14px; font-weight: 600; }
.home-auto-pause { flex: 1 1 100%; font-size: 14px; color: var(--text-warn); }

/* =========================================================
   진행 자세히 — 단계 막대(2026-10-21 UI 개편 2차 §3-2): 다섯 단계를 가로로(폰도 가로 — 글자 12), 지금 단계 강조
   ========================================================= */
.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; text-align: center; }
.stepper-item + .stepper-item::before {   /* 앞 단계와 잇는 줄 */
  content: ""; position: absolute; top: 16px; right: calc(50% + 20px); left: calc(-50% + 12px); height: 2px; background: var(--border);
}
.stepper-pass + .stepper-item::before, .stepper-skip + .stepper-item::before { background: var(--status-done); }
.stepper-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill);
  border: 2px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 14px; font-weight: 600;
}
.stepper-pass .stepper-dot { border-color: var(--status-done); background: var(--tint-success); color: var(--text-success); }
.stepper-skip .stepper-dot { border-color: var(--border); background: var(--bg-hover); color: var(--text-secondary); }
.stepper-running .stepper-dot { border-color: var(--bg-accent); background: var(--tint); color: var(--text-accent); }
.stepper-fail .stepper-dot { border-color: var(--danger); background: var(--tint-danger); color: var(--text-danger); }
.stepper-label { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text); word-break: keep-all; }
.stepper-status { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.stepper-running .stepper-status { color: var(--text-accent); font-weight: 600; }
.stepper-fail .stepper-status { color: var(--text-danger); font-weight: 600; }
@media (max-width: 767px) { .stepper-label { font-size: 12px; line-height: 16px; } }

/* 📐 N배송 상품(2026-10-21 2차 §3-7): 목록 위 한 줄 추가 · 찾기 */
.nb-add { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-light); }
.nb-search { margin-bottom: var(--space-2); }

/* 📥 특이사항(2026-10-21 2차 §3-5): 한 줄 목록 + 펼침 */
.nt-list { display: flex; flex-direction: column; }
.nt-list > li + li { border-top: 1px solid var(--border-light); }
.nt-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4);
  min-height: var(--hit); padding: var(--space-2) 0; cursor: pointer; list-style: none; }
.nt-summary::-webkit-details-marker { display: none; }
.nt-summary:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }
.nt-title { font-size: 14px; font-weight: 600; line-height: 20px; }
.nt-title::after { content: " ▾"; font-size: 12px; color: var(--text-secondary); }
.nt-item[open] .nt-title::after { content: " ▴"; }
.nt-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: 12px; color: var(--text-secondary); }
.nt-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 0 var(--space-4); }

/* ⚙️ 시스템(2026-10-21 2차 §3-11): 위 세 칸(1,200+) · 쇼핑몰 표 · 작업 카드 */
@media (min-width: 1200px) { .status-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-note { display: block; margin-top: var(--space-1); font-size: 12px; color: var(--text-secondary); }
.help-body .text-muted { color: var(--text-secondary); }   /* 도움말 바탕(--bg-hover) 위 흐린 글자도 대비 4.5 이상 */

/* 카드 머리 오른쪽 글자 단추(열기 · 접수 이력 전체 등) — 40 높이 단추의 글자가 제목 줄(24)과 같은 높이·카드 오른쪽 안 여백에 맞게(2026-10-21 3차) */
.card-actions > .btn-text:only-child,
.card-actions > form:only-child > .btn-text:only-child { margin: -8px -12px -8px 0; }
/* 폰에서도 글자 단추 하나는 제목 줄 오른쪽에 둔다(설명이 길면 설명이 줄바꿈 — 단추가 다음 줄로 떨어져 안쪽으로 들어가 보이지 않게) */
@media (max-width: 767px) {
  .card-head:has(> .card-actions > .btn-text:only-child),
  .card-head:has(> .card-actions > form:only-child > .btn-text:only-child) { flex-wrap: nowrap; }
}

/* 글 아래 따로 놓인 글자 단추 한 개 — 글자가 본문 왼쪽 줄에 맞게(안 여백 12 만큼 당김, 3차) */
.text-action-row { margin: calc(var(--space-2) * -1) 0 0 -12px; }

/* ⋮ 줄 메뉴(2026-10-21 3차 — 사용자 표): 누르면 아래로 작은 목록 */
.row-menu { position: relative; display: inline-block; }
.row-menu-btn { list-style: none; cursor: pointer; }
.row-menu-btn::-webkit-details-marker { display: none; }
.row-menu-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: var(--space-1);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-hover);
}
.row-menu-pop form { margin: 0; }
/* 폰은 ⋮ 가 카드 왼쪽에 와서 왼쪽 기준으로 연다. 스크립트가 있으면 열 때 화면 기준 자리(fixed)로 옮겨 표 상자(overflow)에 잘리지 않고
   화면 밖으로 나가지 않게 한다 — 아래 자리가 모자라면 위로(검토 H1, base.html) */
@media (max-width: 767px) { .row-menu-pop { left: 0; right: auto; } }
.row-menu-pop.is-placed { position: fixed; right: auto; bottom: auto; z-index: 75; max-height: calc(100vh - 16px); overflow-y: auto; }
.row-menu-item {
  display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--radius-badge);
  background: transparent; color: var(--text); font-family: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.row-menu-item:hover { background: var(--bg-hover); }
.row-menu-danger { color: var(--text-danger); }
.user-sheet-actions { justify-content: space-between; }

/* 활동 기록 · 내 계정(2026-10-21 3차) */
.page-form { max-width: 480px; }
.activity-table .activity-text { color: var(--text-secondary); }
@media (max-width: 767px) { .activity-table td[data-label="내용"]:not(:empty) { display: block; margin: var(--space-1) 0 0; } .activity-table td[data-label="내용"]::before { display: none; } }   /* 빈 내용 칸은 .table td:empty 대로 숨김(검토 L5) */
@media (min-width: 768px) {   /* 표 줄 끝 동작 칸은 표 칸 그대로(inline-flex 면 칸이 줄 높이로 안 늘어 밑줄이 끊긴다 — 2026-10-21 3차) */
  .table td.table-actions { display: table-cell; text-align: right; }
  .table td.table-actions > form, .table td.table-actions > details { display: inline-flex; vertical-align: middle; }
}