/*
 * 파트너 콘솔 공통 스타일 — 로그인·가입·비밀번호 화면과 업체 관리 화면이 함께 쓴다.
 *
 * 색 · 글자 · 모서리 값은 디자인 파일(Aiapp_Paas › Foundation · Component, 2026-10-21)의 변수를 그대로
 * 옮겼다 — 이름도 같게 두어(`--surface-primary` …) 디자인이 바뀌면 같은 이름의 값만 고치면 된다.
 * 큰 틀은 「밝은 바탕 · 흰 카드 · 파란 알약 버튼 · 둥근 입력칸 · 테두리 아이콘 버튼 + 툴팁」이다.
 *
 * 여기서 가져갈 것은 모양이 아니라 화면의 순서와 주고받는 값이다 — 파트너는 자기 스택으로 다시 쓴다.
 */
:root {
  color-scheme: light;
  /* ── Foundation › Semantic ── */
  --surface-background: #f8fafc;
  --surface-primary: #ffffff;
  --surface-secondary: #f1f5f9;
  --surface-tertiary: #e2e8f0;
  --surface-inverse: #020617;
  --content-primary: #0f172a;
  --content-secondary: #475569;
  --content-tertiary: #64748b;
  --content-placeholder: #64748b;
  --content-disabled: #94a3b8;
  --content-brand: #2f66eb;
  --content-on-inverse: #f1f5f9;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #94a3b8;
  --border-focus: #4881ff;
  --action-primary: #4881ff;
  --action-primary-hover: #2f66eb;
  --action-primary-pressed: #2350c4;
  --action-primary-on: #ffffff;
  --action-primary-disabled: #cbd5e1;
  --action-on-disabled: #94a3b8;
  --feedback-info-surface: #dde8ff;
  --feedback-info-border: #9ebbfb;
  --feedback-info-content: #2350c4;
  --feedback-success-surface: #e0f6dd;
  --feedback-success-border: #9ee298;
  --feedback-success-content: #057206;
  --feedback-error-surface: #fff0f3;
  --feedback-error-border: #f8a5b7;
  --feedback-error-content: #ab163b;
  --feedback-error-solid: #f2325c;
  /* 「초안」 칩 — 디자인 파일에 변수 없이 들어간 값(#fff4d6 / #8a5a00) */
  --feedback-warn-surface: #fff4d6;
  --feedback-warn-border: #f3d58a;
  --feedback-warn-content: #8a5a00;
  /* ── 모서리 · 간격 ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;
  /* ── 글자 — 디자인의 대표 서체는 Pretendard(시안은 Gothic A1). 내려받지 않고 설치돼 있으면 쓴다 ── */
  --font-primary: Pretendard, 'Pretendard Variable', 'Gothic A1', ui-sans-serif, system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* 옛 이름 — 화면 스크립트가 style 속성으로 쓰는 곳이 남아 있다 */
  --ink: var(--content-primary);
  --muted: var(--content-tertiary);
  --faint: var(--content-disabled);
  --line: var(--border);
  --danger: var(--feedback-error-content);
}
* { box-sizing: border-box; }
/* `hidden` 이 display 를 정한 규칙(.toolbar · .btn …)에 지지 않게 — 숨긴 것이 보이면 빈 목록에 검색칸이 뜬다 */
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 400 15px/1.6 var(--font-primary);
  color: var(--content-primary);
  background: var(--surface-background);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--content-brand); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── 단독 화면(로그인·가입·비밀번호) ── */
body.solo { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.panel {
  width: 100%; max-width: 420px; background: var(--surface-primary); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 32px 28px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.panel h1 { font-size: 24px; line-height: 1.5; margin: 0 0 4px; font-weight: 700; }
.panel .brand {
  display: inline-block; font-size: 12px; font-weight: 500; color: var(--content-secondary); margin: 0 0 14px;
  padding: 3px 12px; background: var(--surface-secondary); border-radius: var(--radius-full);
}
.panel p.sub { color: var(--content-secondary); font-size: 14px; margin: 0 0 22px; }

/* ── 입력 — Base/Text Field: 라벨 12 · 칸 높이 40 · 모서리 12 · 테두리 Border/strong ── */
.field { margin-bottom: 16px; min-width: 0; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--content-primary); margin: 0 0 6px 8px; }
.field .opt { font-weight: 400; color: var(--content-tertiary); }
.field .req { color: var(--feedback-error-solid); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 40px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-primary); color: var(--content-primary); font-size: 14px;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--content-placeholder); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--border-focus); outline-offset: -1px; border-color: var(--border-focus); }
/* 보기 전용 칸 — 회색 바탕 · 흐린 글자(디자인의 disabled 모양). 라벨도 흐리게 해 고칠 수 없는 칸임을 보인다 */
.field input[readonly] { background: var(--surface-secondary); border-color: var(--surface-tertiary); color: var(--content-disabled); }
.field:has(input[readonly]) label { color: var(--content-tertiary); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border: 2px solid var(--feedback-error-solid); padding: 7px 15px; }
.field input[aria-invalid='true']:focus, .field textarea[aria-invalid='true']:focus { outline-color: var(--feedback-error-solid); border-color: var(--feedback-error-solid); }
.field:has([aria-invalid='true']) label { color: var(--feedback-error-content); }
.field .hint { font-size: 12px; color: var(--content-tertiary); margin: 6px 0 0; }
.field:has(input[readonly]) .hint { color: var(--content-disabled); }
.field .error { font-size: 12px; color: var(--feedback-error-content); margin: 6px 0 0; }
.field .error:empty { display: none; }
.pw { position: relative; }
.pw input { padding-right: 64px; }
.pw input[aria-invalid='true'] { padding-right: 63px; }
.pw .toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--content-tertiary); font-size: 12px; padding: 4px 8px; cursor: pointer; border-radius: var(--radius-full);
}
.pw .toggle:hover { background: var(--surface-secondary); }

/* ── 버튼 — Base/Button: 알약 · md 40 / sm 32 · primary 는 화면당 하나 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 20px; border-radius: var(--radius-full); border: 1px solid var(--action-primary);
  background: var(--action-primary); color: var(--action-primary-on); cursor: pointer; text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.btn:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.btn:active { background: var(--action-primary-pressed); border-color: var(--action-primary-pressed); }
.btn.block { display: flex; width: 100%; min-height: 48px; }
/* outline — 흰 바탕 + Border/strong. 「취소」 · 「비밀번호 변경」 · 「검색 지우기」 */
.btn.ghost, .btn.outline { background: var(--surface-primary); color: var(--content-primary); border-color: var(--border-strong); font-weight: 500; }
.btn.ghost:hover, .btn.outline:hover { background: var(--surface-secondary); border-color: var(--border-strong); }
.btn.danger { background: var(--feedback-error-solid); border-color: var(--feedback-error-solid); }
.btn.danger:hover { background: var(--feedback-error-content); border-color: var(--feedback-error-content); }
.btn.danger.ghost { background: var(--surface-primary); color: var(--feedback-error-content); border-color: var(--feedback-error-border); }
.btn.danger.ghost:hover { background: var(--feedback-error-surface); }
.btn.small { min-height: 32px; padding: 4px 14px; font-size: 13px; }
.btn.text { background: none; border-color: transparent; color: var(--content-primary); font-weight: 500; font-size: 12px; min-height: 32px; padding: 4px 12px; }
.btn.text:hover { background: var(--surface-secondary); }
.btn:disabled, .btn:disabled:hover {
  background: var(--action-primary-disabled); border-color: var(--action-primary-disabled); color: var(--action-on-disabled); cursor: default;
}
.btn.ghost:disabled, .btn.outline:disabled { background: var(--surface-primary); border-color: var(--surface-tertiary); }
.btn svg { width: 20px; height: 20px; flex: none; }
.linkish { border: 0; background: none; padding: 0; color: var(--content-brand); cursor: pointer; text-decoration: underline; font-size: 13px; }

/*
 * 아이콘 버튼 — Base/Icon Button(outline). 32 원형 · 테두리 Border/strong · 아이콘 16.
 * 글자가 없으므로 `aria-label` 이 이름이고, 같은 말을 `data-tip` 으로 **툴팁**에도 띄운다(디자인 ⑬:
 * 「수정」 · 「삭제」). 툴팁은 마우스를 올렸을 때와 키보드로 초점이 왔을 때 둘 다 보인다.
 */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: var(--surface-primary); color: var(--content-primary); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-secondary); }
.icon-btn:disabled { color: var(--content-disabled); border-color: var(--surface-tertiary); cursor: default; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.ghost { border-color: transparent; background: none; }
.icon-btn.ghost:hover { background: var(--surface-secondary); }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-inverse); color: var(--content-on-inverse);
  font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s ease .15s; z-index: 5;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }

/* ── 알림 ── */
.notice { font-size: 13px; padding: 10px 14px; border-radius: var(--radius-lg); margin: 0 0 16px; border: 1px solid; }
.notice.ok { color: var(--feedback-success-content); background: var(--feedback-success-surface); border-color: var(--feedback-success-border); }
.notice.err { color: var(--feedback-error-content); background: var(--feedback-error-surface); border-color: var(--feedback-error-border); }
.notice.warn { color: var(--feedback-warn-content); background: var(--feedback-warn-surface); border-color: var(--feedback-warn-border); }
.notice.info { color: var(--content-secondary); background: var(--surface-secondary); border-color: var(--border); }
.notice[hidden] { display: none; }
.form-error { color: var(--feedback-error-content); font-size: 13px; margin: 12px 0 0; }
.form-error:empty { display: none; }
.below { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--content-tertiary); }
.below p { margin: 0 0 6px; }

/*
 * 토스트 — 저장 · 삭제 · 비밀번호 변경이 끝났을 때 잠깐 뜨는 한 줄(디자인 ⑫ · ⑱ · ⑲).
 * 화면 위쪽 가운데, Surface/inverse 바탕. 실패는 토스트로 띄우지 않는다 — 읽기 전에 사라지면 안 된다.
 */
.toast {
  position: fixed; left: 50%; top: 96px; transform: translate(-50%, -8px); z-index: 50;
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--radius-md);
  background: var(--surface-inverse); color: var(--content-on-inverse); font-size: 14px; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .18); opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 관리 화면의 틀 — 머리띠(흰 띠, 모서리 24) + 본문 ── */
body.app { padding: 16px; max-width: 1472px; margin-inline: auto; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  min-height: 64px; padding: 12px 16px 12px 24px; margin-bottom: 12px;
  background: var(--surface-primary); border-radius: var(--radius-2xl);
}
.topbar .left, .topbar .right { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.topbar .left { gap: 12px; }
.topbar .logo { font-weight: 700; font-size: 15px; color: var(--content-primary); text-decoration: none; white-space: nowrap; }
.badge {
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--radius-full); max-width: 100%;
  background: var(--surface-secondary); border: 1px solid var(--border-subtle); color: var(--content-secondary);
  font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge.org { background: var(--surface-primary); border-color: var(--border); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--surface-tertiary); color: var(--content-secondary); font-size: 12px; font-weight: 500;
}
.topbar .user-name { font-size: 14px; font-weight: 500; color: var(--content-secondary); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.topbar .btn.text[aria-current='page'] { background: var(--surface-secondary); }

/* 본문 — 디자인의 「본문」(흰 바탕 · 모서리 16 · 안쪽 32) */
.sheet { background: var(--surface-primary); border-radius: var(--radius-xl); padding: 32px; min-height: calc(100vh - 124px); }
.page-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.page-title h1 { font-size: 24px; line-height: 1.5; font-weight: 700; margin: 0; }
.page-title .count { font-size: 14px; color: var(--content-secondary); }

/* 옛 머리(업체 상세의 뒤로 가기 줄) */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.top h1 { font-size: 22px; margin: 0; }
.lead { color: var(--content-secondary); font-size: 14px; margin: 0 0 20px; }
.card { background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 24px; margin-bottom: 16px; }
.sheet .card { border-color: var(--border); }
.card h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: var(--content-primary); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card .desc { font-size: 14px; color: var(--content-secondary); margin: 0 0 16px; }
.muted { color: var(--content-tertiary); font-size: 12px; }
.persona { font-size: .5em; font-weight: 500; vertical-align: .35em; padding: 3px 8px; border: 1px solid currentColor; border-radius: var(--radius-full); opacity: .7; }

/* ── 표 — Base/Table: 머리 Surface/tertiary · 칸 높이 40 · 좌우 12 · 오른쪽·아래 1px 선 ── */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--content-primary); font-size: 14px; padding: 8px 12px; background: var(--surface-tertiary); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; height: 40px; }
tr:last-child td { border-bottom: 0; }
tr.dim td { color: var(--content-disabled); }
.table-wrap { overflow-x: auto; }
/* 칸 사이 선이 있는 표(프로젝트 목록) — 바깥 틀은 모서리 8 */
.grid-table { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.grid-table th, .grid-table td { border-right: 1px solid var(--border); }
.grid-table th:last-child, .grid-table td:last-child { border-right: 0; }
.grid-table tbody tr:hover td { background: var(--surface-secondary); }
.grid-table td.num, .grid-table th.num { width: 64px; }
.grid-table td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid-table th.manage, .grid-table td.manage { text-align: right; }
.grid-table td.name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-table td.empty-cell { padding: 0; height: auto; }
.grid-table td.manage { padding-block: 4px; }
/* 프로젝트 표의 칸 너비 — 디자인 ⑧(64 · 220 · 120 · 170 · 240 · 180 · 180 · 나머지) */
.grid-table.projects th:nth-child(2) { width: 220px; }
.grid-table.projects th:nth-child(3) { width: 120px; }
.grid-table.projects th:nth-child(4) { width: 170px; }
.grid-table.projects th:nth-child(5) { width: 240px; }
.grid-table.projects th:nth-child(6), .grid-table.projects th:nth-child(7) { width: 180px; }
/* 업체 상세의 프로젝트 표 — 디자인 ①(64 · 220 · 170 · 240 · 180 · 180 · 120 · 나머지) */
.grid-table.staff-projects th:nth-child(2) { width: 220px; }
.grid-table.staff-projects th:nth-child(3) { width: 170px; }
.grid-table.staff-projects th:nth-child(4) { width: 240px; }
.grid-table.staff-projects th:nth-child(5), .grid-table.staff-projects th:nth-child(6) { width: 180px; }
.grid-table.staff-projects th:nth-child(7) { width: 120px; }
/* 업체 표 — 디자인 ①(64 · 200 · 260 · 120 · 180 · 180 · 180 · 나머지) */
.grid-table.orgs th:nth-child(2) { width: 200px; }
.grid-table.orgs th:nth-child(3) { width: 260px; }
.grid-table.orgs th:nth-child(4) { width: 120px; }
.grid-table.orgs td:nth-child(3) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-table.orgs th:nth-child(5), .grid-table.orgs th:nth-child(6), .grid-table.orgs th:nth-child(7) { width: 180px; }
.grid-table tbody tr.empty-row:hover td { background: none; }

/* ── 상태 칩 — 알약 · 글자 12 · 좌우 10 ── */
.tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; line-height: 1.6; padding: 1px 10px;
  border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap;
}
.chips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* 업체 사용 상태(직원 화면) */
.tag.s-pending { background: var(--feedback-warn-surface); color: var(--feedback-warn-content); border-color: var(--feedback-warn-border); }
.tag.s-active { background: var(--feedback-success-surface); color: var(--feedback-success-content); border-color: var(--feedback-success-border); }
.tag.s-deleting { background: var(--surface-tertiary); color: var(--content-secondary); border-color: var(--border); }
/*
 * 페이지(프로젝트) 상태 — 이름은 런타임의 `statusLabel` 을 그대로 쓰고 색만 여기서 정한다(디자인 ⑧).
 * 「초안」에는 화면이 「비공개」 태그(테두리만)를 붙인다 — 아직 방문자에게 보이지 않는다는 말이다.
 */
.tag.p-draft { background: var(--feedback-warn-surface); color: var(--feedback-warn-content); border-color: var(--feedback-warn-border); }
.tag.p-live { background: var(--feedback-success-surface); color: var(--feedback-success-content); border-color: var(--feedback-success-border); }
.tag.p-building { background: var(--feedback-info-surface); color: var(--feedback-info-content); border-color: var(--feedback-info-border); }
.tag.p-private, .tag.t-private { background: var(--surface-primary); color: var(--feedback-info-content); border-color: #a1bfff; }
.tag.p-partner-unpublished { background: var(--surface-tertiary); color: var(--content-secondary); border-color: var(--border); }
.tag.p-deleting { background: var(--surface-tertiary); color: var(--content-secondary); border-color: var(--border); }
.cell-note { display: block; font-size: 12px; margin-top: 4px; color: var(--content-tertiary); }
.cell-note.pending { color: var(--feedback-warn-content); }
.addr-none { color: var(--content-primary); }
/* 공개 주소 — 표 안에서는 글자처럼 두고 마우스를 올렸을 때만 밑줄(디자인은 링크 표시 없이 글자) */
.grid-table td a { color: var(--content-primary); text-decoration: none; }
.grid-table td a:hover { color: var(--content-brand); text-decoration: underline; }
/* 내려간 페이지의 주소 — 지금은 열리지 않으므로 흐리게(디자인: 45%) */
.addr-off { opacity: .45; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn:focus-visible, .icon-btn:focus-visible, .linkish:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ── 목록의 도구 줄 — 상태 고르기 · 이름 찾기 · 오른쪽 주요 버튼 ── */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.toolbar .filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.select { position: relative; flex: 0 0 140px; }
.select select {
  appearance: none; width: 100%; height: 40px; padding: 0 36px 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-primary); font-size: 14px; color: var(--content-primary); cursor: pointer;
}
.select svg { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; }
/* Base/Search — 높이 48 · Surface/tertiary · 모서리 12 */
.search { position: relative; flex: 0 1 320px; min-width: 0; }
.search input {
  width: 100%; height: 48px; padding: 0 16px 0 44px; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--radius-lg);
  background: var(--surface-tertiary); font-size: 14px; color: var(--content-primary);
}
.search input::placeholder { color: var(--content-placeholder); }
.search svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; }
.select select:focus, .search input:focus { outline: 2px solid var(--border-focus); outline-offset: -1px; }
.row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }

/* 빈 목록 · 찾기 결과 없음 */
.empty { text-align: center; padding: 48px 16px 40px; }
.empty h3 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.empty.search-empty h3 { font-size: 16px; margin-bottom: 8px; }
.empty p { color: var(--content-secondary); font-size: 14px; margin: 0 auto 20px; max-width: 520px; }
.guide { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 0 auto 16px; text-align: left; }
.guide > div { flex: 0 1 340px; background: var(--surface-secondary); border-radius: var(--radius-lg); padding: 16px 20px; }
.guide h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.guide ol, .guide ul { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--content-secondary); }
.guide ol { counter-reset: step; }
.guide ol li { counter-increment: step; }
.guide ol li::before { content: counter(step) '. '; }
.guide ul li::before { content: '· '; }

/* 쪽 넘기기 */
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 20px; flex-wrap: wrap; }
.pager .page-btn {
  min-width: 32px; height: 32px; padding: 0 12px; border-radius: var(--radius-full); border: 0; background: none;
  font-size: 12px; font-weight: 500; cursor: pointer; color: var(--content-primary);
}
.pager .page-btn:hover { background: var(--surface-secondary); }
.pager .page-btn[aria-current='page'] { background: var(--action-primary); color: var(--action-primary-on); }

code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: var(--content-secondary); }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--content-tertiary); font-size: 12px; padding-top: 2px; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── 프로필의 칸 배치 — 넓으면 셋(또는 둘)씩, 좁으면 하나씩 ── */
.fields { display: grid; gap: 0 16px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.fields.two { --cols: 2; }
.fields .span-all { grid-column: 1 / -1; }
details.more { background: var(--surface-secondary); border-radius: var(--radius-lg); margin-top: 4px; }
details.more > summary {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary .muted { font-weight: 400; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.more > summary svg { width: 20px; height: 20px; flex: none; transition: transform .15s; }
details.more[open] > summary svg { transform: rotate(180deg); }
details.more .fields { padding: 4px 16px 4px; }

/* ── 대화상자 — 흰 바탕 · 모서리 16(디자인 다이얼로그 440) ── */
dialog {
  border: 0; border-radius: var(--radius-xl); padding: 0; width: min(440px, calc(100vw - 32px));
  color: var(--content-primary); background: var(--surface-primary); box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
}
dialog::backdrop { background: rgba(71, 85, 105, .55); }
dialog form { padding: 28px; }
dialog h2 { font-size: 20px; line-height: 1.5; font-weight: 700; margin: 0 0 12px; overflow-wrap: anywhere; }
dialog p.sub { color: var(--content-secondary); font-size: 14px; margin: 0 0 18px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* 확인 대화상자의 문단은 붙여 두고 마지막 문단 아래만 띄운다 */
dialog p.sub.confirm-line { margin: 0 0 6px; }
dialog p.sub.confirm-line:last-of-type { margin-bottom: 12px; }

@media (max-width: 900px) {
  .fields { --cols: 1; }
  .fields.two { --cols: 1; }
}

@media (max-width: 640px) {
  body.app { padding: 8px; }
  .topbar { padding: 10px 12px; border-radius: var(--radius-xl); gap: 8px; }
  .topbar .user-name { max-width: 120px; }
  /* 좁은 화면에서는 글자 로고를 접는다 — 배지가 이미 어느 콘솔인지 말한다 */
  .topbar .logo { display: none; }
  .sheet { padding: 20px 16px; border-radius: var(--radius-xl); min-height: 0; }
  .card { padding: 18px 16px; }
  .hide-sm { display: none; }
  .toolbar .filters { flex: 1 1 100%; }
  .select { flex: 0 0 120px; }
  .search { flex: 1 1 160px; }
  .toolbar > .btn { width: 100%; }
  /*
   * 목록 표는 좁은 화면에서 **카드**로 바뀐다 — 칸이 여덟이라 가로로 밀면 동작 버튼이 화면 밖에
   * 숨는다. 칸 이름은 `data-label` 로 각 값 앞에 붙인다(머리줄은 화면 읽기 프로그램용으로만 남긴다).
   */
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  .grid-table.cards { border: 0; border-radius: 0; overflow: visible; }
  table.cards tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 10px; background: var(--surface-primary); }
  table.cards td { border: 0 !important; padding: 3px 0; height: auto; display: flex; gap: 10px; align-items: center; max-width: none; white-space: normal; }
  table.cards td[data-label]::before { content: attr(data-label); flex: 0 0 72px; color: var(--content-tertiary); font-size: 12px; }
  table.cards td.title-cell { font-size: 15px; font-weight: 600; padding-bottom: 6px; }
  table.cards td.title-cell::before { display: none; }
  /* 카드에서는 이름이 맨 위 — 표에서는 순번이 먼저지만 카드는 이름으로 알아본다 */
  table.cards td.title-cell { order: -1; }
  table.cards td > .stack { min-width: 0; overflow-wrap: anywhere; }
  table.cards td.manage { justify-content: flex-start; padding-top: 8px; }
  table.cards tr.empty-row { border: 0; padding: 0; }
  .grid-table tbody tr:hover td { background: none; }
  .empty { padding: 32px 8px 24px; }
}

/* ── 안내 상자 — 대화상자 · 로그인 카드 안의 덧붙임(보관 기간 · 작업 중 경고 · 로그인 막힘 · 다른 곳 로그인) ── */
.callout { background: var(--surface-secondary); border-radius: var(--radius-lg); padding: 12px 16px; font-size: 14px; color: var(--content-primary); margin: 0 0 16px; }
.callout strong { font-weight: 600; }
.callout p { margin: 4px 0 0; }
.callout.err { background: #ffe5ea; border: 1px solid var(--feedback-error-border); color: var(--feedback-error-content); }
.callout.warn { background: var(--feedback-warn-surface); border: 1px solid var(--feedback-warn-border); color: var(--feedback-warn-content); }
.callout.info { background: var(--feedback-info-surface); border: 1px solid var(--feedback-info-border); color: var(--feedback-info-content); }

/* ── 상태 현황 카드 — 숫자만(디자인 업체 목록 ①) ── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; }
.stat { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.stat .label { font-size: 14px; color: var(--content-secondary); }
.stat .value { font-size: 32px; font-weight: 700; line-height: 1.2; text-align: right; margin-top: auto; font-variant-numeric: tabular-nums; }

/* 방금 등록한 행 — 디자인 ⑤ · ⑩ 의 옅은 파란 줄 */
.grid-table tbody tr.fresh td { background: var(--feedback-info-surface); }

/* 화면 위쪽 경고 띠 — 「업체는 등록됐지만 가입 링크 메일을 보내지 못했습니다 [다시 보내기]」(디자인 ⑩) */
.banner {
  position: fixed; left: 50%; top: 96px; transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 20px; border-radius: var(--radius-md);
  background: var(--feedback-warn-surface); border: 1px solid var(--feedback-warn-border); color: var(--feedback-warn-content); font-size: 14px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .08);
}
.banner .btn { min-height: 30px; padding: 2px 12px; font-size: 12px; }

/* 상세의 뒤로 가기 */
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--content-primary); text-decoration: none; margin: 0 0 20px 12px; }
.back svg { width: 16px; height: 16px; }
.back:hover { text-decoration: underline; }
.detail-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.detail-title h1 { font-size: 24px; line-height: 1.5; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.section-title { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 20px; }
.section-title h2 { font-size: 20px; font-weight: 700; margin: 0; }
.section-title .count { font-size: 14px; color: var(--content-secondary); }
.card-head .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fields.four { --cols: 4; }

/* ── 로그인 · 가입 카드 — 디자인의 「카드」(440 · 안쪽 40, 가입은 560 · 48) ── */
.panel.wide { max-width: 560px; padding: 40px 48px; }
.panel .links { text-align: center; margin-top: 16px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.panel .links a, .panel .links button { font-size: 12px; font-weight: 500; color: var(--content-primary); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-full); }
.panel .links a:hover, .panel .links button:hover { background: var(--surface-secondary); }
.panel .back { margin: 0 0 16px; }
.panel .btn.block + .links { margin-top: 12px; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fields.four { --cols: 2; }
}
@media (max-width: 640px) {
  .fields.four { --cols: 1; }
  .stat { min-height: 88px; padding: 14px 16px; }
  .stat .value { font-size: 24px; }
  .banner { top: 72px; flex-wrap: wrap; }
  .panel, .panel.wide { padding: 28px 20px; }
}

/* 오류가 뜨면 같은 칸의 안내는 접는다 — 디자인은 안내 자리에 오류를 놓는다 */
.field:has(.error:not(:empty)) .hint { display: none; }
/* 로그인 · 가입 카드의 입력칸은 48(디자인 Text Field lg) */
.panel .field input { min-height: 48px; }
@media (max-width: 640px) {
  .grid-table.orgs.cards td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; max-width: none; }
}