/* 코사장 견적 계산기 — 작업 화면 스타일 '기본 업무 도구'와 인쇄 공통 규칙. 견적서 문서(.doc)의 서식은 doc.css.
   필드빌더가 매일 쓰는 작업 화면: 연회색 바탕 · 흰 카드 · 옅은 1px 선 · 6~8px 모서리.
   색은 차분한 파랑(--accent) 하나로 선택·초점·주 버튼만 표시하고, 나머지는 회색 단계로 나눈다.
   어두운 기기에서는 같은 구조를 어두운 판으로 바꾼다(아래 미디어 쿼리).
   견적서(.doc)는 원장님께 드리는 문서라 화면이 어두워도 항상 흰 종이 + 표 서식으로 찍힌다.
   길이는 rem(브라우저 글자 크기 설정을 따름, 기본 16px = 1rem), 화면 폭 기준은 em으로 쓴다 —
   글자를 키우면 배치도 같은 비율로 커지고, 자리가 모자라면 좁은 화면 배치로 넘어간다.
   px는 테두리·모서리·그림자 같은 장식과 손가락 영역 44px·입력칸 글자 16px 바닥값에만 쓴다 (tests/fontsize.test.mjs가 확인). */

/* ── 색 토큰 ─────────────────────────────────── */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --line: #e2e5e9;
  --line-strong: #c9ced6;
  --text: #16181d;
  --text-2: #50565f;
  --text-3: #5f656f; /* 보조 글자: --surface-2 위에서도 5.5:1 */
  --accent: #2f5fd0;
  --accent-soft: #eef3fd;
  --on-accent: #ffffff;
  --good: #1e6b45;
  --warn: #8a5300;
  --bad: #b42318;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

/* 어두운 기기: 같은 구조를 어두운 판으로. 위 :root에 토큰을 더하면 여기도 더한다 (tests/theme.test.mjs가 확인) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a1f;
    --surface-2: #1e2228;
    --line: #2a2f36;
    --line-strong: #444b55;
    --text: #e8eaed;
    --text-2: #b0b6bf;
    --text-3: #9aa1ab;
    --accent: #86a8f5;
    --accent-soft: #1c2740;
    --on-accent: #0f1115;
    --good: #7fd0a2;
    --warn: #e8b061;
    --bad: #f0857a;
    --radius: 6px;
    --radius-lg: 8px;
    --shadow: none;
  }
}

:root {
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* ── 기본 ───────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 4.75rem; /* 키보드로 옮겨 간 칸이 따라오는 머리줄에 가리지 않게 */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 0.9375rem/1.55 var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
/* 제목은 낱말 단위로 줄을 바꾼다 (글자를 키운 좁은 화면에서 '현장 정 / 보'처럼 끊기지 않게) */
h1,
h2,
h3 {
  word-break: keep-all;
  overflow-wrap: break-word;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 날짜 칸: Shift+Tab으로 들어오면 초점이 안쪽 연·월·일 조각에 있어 칸 자체는 :focus·:focus-visible이 아님(테두리가 사라짐) →
   안에 초점이 있으면(:focus-within) 언제나 같은 테두리. 날짜 칸은 글자 칸처럼 마우스로 눌러도 :focus-visible이 걸리므로 모양은 같음 */
input[type="date"]:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 0.5rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
}
.muted {
  color: var(--text-3);
}
.help {
  margin: 0 0 0.75rem;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.alert {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
  color: var(--bad);
  font-weight: 600;
  font-size: 0.84375rem;
}
.r {
  text-align: right;
  white-space: nowrap;
}
.c {
  text-align: center;
}

/* ── 버튼 ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 550;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--text-3);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn.primary:hover {
  filter: brightness(1.08);
}
.btn.ghost {
  background: transparent;
}
.btn.sm {
  min-height: 2rem;
  padding: 0 0.625rem;
  font-size: 0.8125rem;
}
.btn.wide {
  width: 100%;
}
.btn.danger {
  color: var(--bad);
}
.icon-btn {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.icon-btn:hover {
  color: var(--bad);
  border-color: var(--line);
}

/* ── 머리줄 ─────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 77.5rem;
  margin: 0 auto;
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.625rem 1.125rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--text);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.brand b {
  color: var(--text-2);
  font-weight: 600;
}
/* 메뉴가 한 줄에 다 안 들어가면(좁은 화면, 큰 글자) 옆으로 숨기지 않고 다음 줄로 내린다 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.tab {
  border: 0;
  background: transparent;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.tab:hover {
  color: var(--text);
}
.tab[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* 앱 전환(견적 계산기와 매칭 앱 사이): 브랜드 옆, 매칭 앱의 '견적 계산기' 단추와 같은 모양 */
.btn.app-switch {
  min-height: 2.375rem;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
}
.btn.app-switch::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.375rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.btn.app-switch:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.top-act {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}
.save-status {
  font-size: 0.75rem;
  color: var(--text-3);
}
.save-status[data-state='failed'] {
  color: var(--bad);
  font-weight: 700;
}

/* ── 본문 배치 ──────────────────────────────── */
main {
  max-width: 77.5rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}
.edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.25rem;
  gap: 1.25rem;
  align-items: start;
}
.summary-wrap {
  position: sticky;
  top: 4.75rem;
}
.sum-bar {
  display: none;
}
main {
  padding-bottom: 7.5rem;
}
/* 업무와 프로그램 단계: 넓은 화면에서도 작업 칸을 넓게 (머리줄·본문을 같이 늘리고, 요약은 아래 막대로 접는다) */
body.is-wide-step .top-in,
body.is-wide-step main {
  max-width: 100rem;
}
body.is-wide-step .edit-grid {
  grid-template-columns: minmax(0, 1fr);
}
body.is-wide-step .summary-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 30;
}
body.is-wide-step .sum-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  box-shadow: 0 -6px 20px rgb(0 0 0 / 10%);
  cursor: pointer;
}
body.is-wide-step .sum-bar > span {
  white-space: nowrap;
}
body.is-wide-step .sum-bar b {
  font-size: 0.90625rem;
}
body.is-wide-step .sum-bar .chev {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78125rem;
}
body.is-wide-step .summary {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 0;
  border-bottom: 0;
}
body.is-wide-step.sheet-open .summary {
  display: block;
}
body.is-wide-step .toast {
  bottom: 4.75rem;
}
@media (min-width: 57.5625em) {
  body.is-wide-step .sum-bar {
    justify-content: flex-end;
    column-gap: 1.75rem;
    padding-inline: 1.5rem;
  }
  body.is-wide-step .summary {
    left: auto;
    right: 1rem;
    width: min(24rem, calc(100vw - 2rem));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ── 카드 ───────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1rem;
  scroll-margin-top: 0.5rem;
}
.card h2 {
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
}
.card h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.card h3:first-child {
  margin-top: 0;
}
.empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* ── 입력칸 ─────────────────────────────────── */
/* 한 줄로 쌓는 격자(.grid · .checks · .tasks · .staff · .extras · .sim)는 칸 하나를 minmax(0, 1fr)로 정한다:
   안의 긴 줄이 칸을 상자보다 넓게 밀어내지 않고 줄을 바꾸게 (안 정하면 320px·큰 글자에서 업무 카드가 화면 밖으로 나감) */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
/* 칸 최소 폭은 min(…, 100%)로 감싼다: 글자를 크게 키운 좁은 화면에서도 칸 하나가 화면 밖으로 넘치지 않게 */
.g3 {
  grid-template-columns: repeat(auto-fill, minmax(min(11.25rem, 100%), 1fr));
}
.g4 {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
}
.f {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  min-width: 0;
}
.f.wide {
  margin-bottom: 0.75rem;
}
.f-l {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--text-2);
}
.f small,
.check small {
  color: var(--text-3);
  font-size: 0.75rem;
}
.f-i {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.f-i em {
  font-style: normal;
  font-size: 0.78125rem;
  color: var(--text-3);
  white-space: nowrap;
}
.f-i > input,
.f-i > select,
.f-i > textarea {
  flex: 1;
}
input[type='text'],
input[type='number'],
input[type='date'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='tel'],
select,
textarea {
  width: 100%;
  min-width: 0;
  height: 2.375rem;
  padding: 0 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
textarea {
  height: auto;
  padding: 0.5rem 0.625rem;
  line-height: 1.5;
  resize: vertical;
}
input[type='number'] {
  text-align: right;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}
input:disabled,
select:disabled {
  opacity: 0.55;
}
.check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  cursor: pointer;
}
.check input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--accent);
}
.check small {
  flex-basis: 100%;
  padding-left: 1.625rem;
}
.check.is-disabled {
  opacity: 0.55;
  cursor: default;
}
.checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 0.625rem;
}

/* 검색해서 고르기 (지금 쓰는 도구 · 연결 프로그램 · 개발 환경) */
.ico {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  font-family: var(--font-body);
}
.ico-bg {
  stroke: var(--line);
  stroke-width: 1;
}
.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.pick-on,
.popts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.25rem 0.25rem 0.375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pchip.locked {
  padding-right: 0.625rem;
}
.pchip i {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-3);
}
.pchip-x {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-3);
  font-size: 0.75rem;
  cursor: pointer;
}
.pchip-x:hover {
  background: var(--surface);
  color: var(--bad);
}
.pick-q {
  max-width: 26rem;
}
.popt {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.125rem;
  padding: 0.25rem 0.75rem 0.25rem 0.3125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  cursor: pointer;
}
.popt:hover {
  border-color: var(--accent);
  color: var(--text);
}
.popt.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.popt:disabled {
  cursor: default;
}
.popt b {
  font-size: 0.75rem;
}
.pgroup {
  margin-bottom: 0.625rem;
}
.pgroup h4 {
  margin: 0 0 0.375rem;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 700;
}
.pick-none {
  margin: 0;
  font-size: 0.8125rem;
}

/* 운영비 시뮬레이터: 줄마다 이름 · 요금제 · 사용량 · 월 금액 */
.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0.75rem;
  border-top: 1px solid var(--line);
}
.sim-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(6.5rem, 0.8fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.sim-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.84375rem;
}
.sim-name b {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sim-plan1 {
  color: var(--text-2);
  font-size: 0.8125rem;
}
.sim-use {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
}
.sim-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 0.875rem;
}
.sim-cost small {
  color: var(--text-3);
  font-size: 0.71875rem;
}
.manager {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
}

/* 한 개 고르기 (강도·자동화 수준) */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.seg-i {
  position: relative;
}
.seg-i input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.seg-i span {
  display: block;
  min-width: 2.25rem;
  padding: 0.375rem 0.75rem;
  border-right: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.8125rem;
  text-align: center;
  cursor: pointer;
}
.seg-i:last-child span {
  border-right: 0;
}
.seg-i input:checked + span {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.seg-i input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* ── 업무 카드 ──────────────────────────────── */
.add-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.add-chip {
  padding: 0.375rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.add-chip:hover {
  background: var(--accent-soft);
}
.add-chip.is-used {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.task {
  scroll-margin-top: 1.25rem;
}
.rank {
  min-width: 2.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
input.task-name {
  font-weight: 700;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.switch input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--accent);
}
.switch.is-disabled {
  opacity: 0.5;
  cursor: default;
}
.inline {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.inline select {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.f-i.sm input {
  flex: 0 0 auto;
  width: 4.5rem;
}
.x {
  color: var(--text-3);
}
.hint {
  color: var(--text-3);
  font-size: 0.78125rem;
}
.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.metrics b {
  color: var(--text);
}
.after {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.8125rem;
}
.after p {
  margin: 0.125rem 0;
}
.lvl-d {
  font-weight: 600;
}
.gain {
  color: var(--good);
  font-weight: 600;
}
.adv {
  margin-top: 0.875rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.adv > summary {
  padding: 0.25rem 0;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.adv[open] > summary {
  margin-bottom: 0.625rem;
}

/* 기타 구독 */
.extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.tw {
  overflow-x: auto;
}
.extra-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 2.125rem;
  gap: 0.5rem;
  align-items: center;
}

/* 작은 표 */

/* ── 요약 ───────────────────────────────────── */
.summary {
  /* 창보다 길면 요약 안에서 스크롤 ('견적서 보기'가 잘리지 않게) */
  max-height: calc(100vh - 5.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.rates-diff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  color: var(--text-3);
  font-size: 0.78125rem;
}

/* ── 로그인 · 가입 ──────────────────────────── */
.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}
.auth-card {
  width: min(26rem, 100%);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--surface);
}
.auth-brand {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.auth-brand b {
  color: var(--text-2);
  font-weight: 600;
}
.auth-lead {
  margin: -0.5rem 0 1rem;
  color: var(--text-2);
  font-size: 0.875rem;
}
.auth-foot {
  margin: 1rem 0 0;
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.auth-foot a {
  color: var(--accent);
  font-weight: 600;
}
#auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
#auth-form .grid {
  margin: 0;
}
.auth-err {
  min-height: 1.25rem;
  margin: 0;
  color: var(--bad);
  font-size: 0.8125rem;
  font-weight: 600;
}
.who {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  gap: 0.375rem;
  max-width: 13rem;
  min-width: 0;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.who:hover {
  text-decoration: underline;
}
.me-email {
  overflow-wrap: anywhere;
}
/* 설정 '내 계정': 이메일·권한·상태·가입일·승인일을 한 줄씩(넓으면 다섯 칸) */
.acct {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
  padding: 0 0 0.875rem;
  border-bottom: 1px solid var(--line);
}
.acct div {
  min-width: 0;
}
.acct dt {
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.acct dd {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
/* 이메일은 좁으면 한 줄을 다 쓰고(중간에서 끊기지 않게), 넓으면 두 칸 */
.acct div:first-child {
  grid-column: 1 / -1;
}
.acct div:first-child dd {
  overflow-wrap: anywhere;
}
@media (min-width: 40em) {
  .acct div:first-child {
    grid-column: span 2;
  }
}
.sub-h {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}
/* 단가표: 관리자 저장 줄 · 필드빌더 보기 전용 값 */
.rates-bar {
  align-items: center;
}
.rates-state {
  color: var(--text-2);
  font-size: 0.8125rem;
}
.rates-meta {
  margin: 0 0 0.5rem;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.rate-v {
  font-variant-numeric: tabular-nums;
}
.rates-ro .card {
  margin-top: 0.75rem;
  box-shadow: none;
}

/* ── 보관함 · 단가 ──────────────────────────── */
.page-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}
.page-h h2 {
  margin: 0;
  font-size: 1.375rem;
}
.row-act {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.row-act.end {
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.rate-row {
  display: grid;
  grid-template-columns: minmax(8.75rem, 13.75rem) minmax(7.5rem, 12.5rem) minmax(0, 1fr);
  gap: 0.375rem 0.875rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.rate-row:last-child {
  border-bottom: 0;
}
.rate-row.two {
  grid-template-columns: minmax(8.75rem, 13.75rem) minmax(7.5rem, 12.5rem) minmax(7.5rem, 12.5rem);
}
.rate-l {
  font-size: 0.84375rem;
  font-weight: 600;
}
.rate-row small {
  color: var(--text-3);
  font-size: 0.75rem;
}
.ver {
  margin-top: 1rem;
}

/* ── 알림 · 대화상자 ────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 50;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100% - 2rem);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--surface);
  font-size: 0.84375rem;
  box-shadow: var(--shadow);
}
.toast .btn {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.dlg {
  width: min(35rem, calc(100% - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
}
.dlg::backdrop {
  background: rgb(0 0 0 / 40%);
}
.dlg h3 {
  margin: 0 0 0.625rem;
}
.noscript {
  padding: 1.25rem;
  text-align: center;
}

/* ── 입력 묶음: 칸 이름을 위에, 넓은 화면에서는 2열 ── */
.ftable {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.875rem 1rem;
}
.ftable .f {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3125rem;
  align-content: start;
}
/* 여러 칸이 한 줄에 붙은 것(주기 × 시간 등)·고르기 줄·검색칸·긴 글은 줄 전체를 쓴다 */
.ftable .f.wide,
.ftable .f:has(.inline, .seg, .picker, textarea, .metrics) {
  grid-column: 1 / -1;
  margin: 0;
}
.ftable .f-l {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
}
.ftable .f-i {
  flex-wrap: wrap;
}
.ftable .f > textarea {
  width: 100%;
}
.ftable .check {
  padding: 0.25rem 0;
}
.ftable + .ftable,
.ftable + .checks,
.checks + .ftable {
  margin-top: 1.125rem;
}
.adv .ftable {
  margin-bottom: 0.5rem;
}

/* ── 작성 중인 견적 머리 (이름 · 번호 · 작성일 · 상태) ── */
.q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  margin-bottom: 0.875rem;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.q-head p {
  margin: 0;
}
.q-to {
  order: -1;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 650;
}
.q-st {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.75rem;
}

/* ── 단계 표시줄: 묶음마다 얇은 막대 + 이름 ── */
.stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.125rem 0.375rem;
  margin: 0 0 0.875rem;
  padding: 0;
  list-style: none;
}
.stp {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.stp::before {
  content: '';
  display: block;
  height: 0.1875rem;
  margin-bottom: 0.375rem;
  border-radius: 2px;
  background: var(--line);
}
.stp i {
  display: none;
}
.stp.past {
  color: var(--text-2);
}
.stp.past::before {
  background: var(--accent);
  opacity: 0.45;
}
.stp.on {
  color: var(--text);
  font-weight: 600;
}
.stp.on::before {
  background: var(--accent);
}
.stp:hover:not(.on) {
  color: var(--text);
}
.stp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 단계 화면 ── */
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.step-h {
  padding: 1.125rem 1.375rem 0.875rem;
}
.step-n {
  color: var(--text-3);
  font-size: 0.78125rem;
  font-weight: 500;
}
.step-h h2 {
  margin: 0.125rem 0 0;
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.step-h h2:focus {
  outline: none;
}
.step-b {
  padding: 0 1.375rem 1.375rem;
}
.step-b h3 {
  margin: 1.375rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.step-f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.375rem;
  border-top: 1px solid var(--line);
}
.step-f .btn {
  white-space: normal;
  text-align: left;
}

.lvl {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.75rem;
  white-space: nowrap;
}
.task-opts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.missing {
  margin: 0;
  padding-left: 1.125rem;
}
.missing li {
  margin: 0.25rem 0;
}
.manager {
  color: var(--text-2);
  font-size: 0.875rem;
}

/* ── 견적 요약서 ── */
.sum-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1rem 1.125rem 0;
}
.sum-h h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.sum-h span {
  color: var(--text-3);
  font-size: 0.75rem;
}
.sum-b {
  padding: 0.5rem 1.125rem 1.125rem;
}
.sum-big {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.5rem 0 0.25rem;
}
.sum-big div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.sum-big small {
  color: var(--text-2);
  font-size: 0.75rem;
}
.sum-big strong {
  font-size: 1.625rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.rows h3 {
  margin: 1rem 0 0.125rem;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 600;
}
.rows p {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.3125rem 0;
  font-size: 0.84375rem;
}
.rows p span {
  color: var(--text-2);
}
.rows p b {
  font-weight: 550;
  text-align: right;
}
.rows p.tot b {
  font-weight: 650;
}
.rows p.tot {
  margin-top: 0.125rem;
  padding-top: 0.4375rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.rows p.tot span {
  color: var(--text);
}
.rows p.muted {
  display: block;
  color: var(--text-3);
}
.rows s {
  color: var(--text-3);
  font-weight: 400;
}
.sum-b > .btn.primary {
  margin-top: 1rem;
}

/* 머리줄 오른쪽: 이름 + 설정 */
.who em {
  font-style: normal;
  color: var(--text-3);
  font-size: 0.75rem;
}
.who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── 보관함: 견적 대장 표 ── */
.sheet {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84375rem;
}
.ledger th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.78125rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.ledger td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ledger tr.current {
  background: var(--surface-2);
}
.ledger .l-no,
.ledger .l-date {
  color: var(--text-2);
  white-space: nowrap;
}
.ledger select {
  width: auto;
  height: 2rem;
  font-size: 0.8125rem;
}
.l-act {
  white-space: nowrap;
  text-align: right;
}
.link {
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.page-h.sub {
  margin-top: 1.5rem;
}

/* ── v0.7 입력 단계: 사업장 찾기 · 사람마다 한 줄 · 직원별 업무 ──────────
   좁은 화면 배치가 기본이고, 단계 상자(.step-b)가 넓으면 @container로 넓은 배치를 쓴다
   (컨테이너 쿼리를 모르는 오래된 브라우저는 좁은 배치 그대로 — 모두 쓸 수 있음). */
.step-b {
  container: step / inline-size;
}
/* 화면 읽기 프로그램만 읽는 글 (단추 이름 뒤의 ' · 강사 1' 등) */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.f-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}
p.hint {
  margin: 0.375rem 0 0;
}
.hint.warn,
.warn {
  color: var(--warn);
  font-weight: 600;
}
a.link {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.hint .link {
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.btn:disabled,
.add-chip:disabled,
.topt:disabled {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text-3);
  cursor: default;
}
.seg-i i {
  margin-right: 0.25rem;
  font-style: normal;
}

/* 1. 기본 정보: 지역 → 시·군·구 → 사업장 찾기 → 고른 곳에서 채움 */
.biz-region {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 38.75rem;
}
.place-f {
  max-width: 38.75rem;
  margin-top: 1.25rem;
}
.place-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}
.place-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  max-width: 38.75rem;
  margin-top: 0.75rem;
}
.place-out:empty {
  display: none;
}
.place-res-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}
.step-b .place-res-h h3 {
  margin: 0;
}
.place-src,
.place-st,
.place-more {
  margin: 0;
  color: var(--text-2);
  font-size: 0.78125rem;
}
.place-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.25rem;
}
.place-res {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
}
.place-opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.place-opt:hover {
  border-color: var(--line-strong);
}
.place-opt.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.place-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  cursor: pointer;
}
.place-pick input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--accent);
}
.place-b {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.0625rem;
  min-width: 0;
}
.place-n {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.5rem;
}
.place-n b {
  font-weight: 650;
  overflow-wrap: anywhere;
}
.place-a {
  color: var(--text-2);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.place-map {
  justify-self: start;
  margin-left: 1.75rem;
}
.ptag {
  padding: 0 0.4375rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.picked {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}
.place-fill {
  margin-top: 1.25rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
}
.step-b .place-fill h3 {
  margin: 0 0 0.75rem;
}
.place-addr .f-i {
  max-width: 38.75rem;
}
.place-addr-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}
/* 채운 칸의 출처: '이름 · 카카오' (고치면 '고침') */
.src {
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 500;
}
.src:not(:empty)::before {
  content: '· ';
  content: '· ' / '';
}
.reg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  max-width: 38.75rem;
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.step-b .reg h3 {
  margin: 0;
}
.reg h3 small {
  font-weight: 500;
}
.reg p {
  margin: 0;
}
.reg-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.reg-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.reg-row .btn {
  justify-self: start;
}
.reg-t {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.0625rem;
  min-width: 0;
}
.reg-n {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.5rem;
}
.reg-x,
.reg-a {
  color: var(--text-2);
  font-size: 0.78125rem;
  overflow-wrap: anywhere;
}

/* 1-3. 인력과 시급: 좁으면 한 사람 = 카드 하나, 넓으면 표 한 줄 */
.srows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.5rem 0.625rem;
  align-items: end;
  padding: 0.625rem 0.75rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.srow-head {
  display: none;
}
.srow-c {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  align-content: start;
  min-width: 0;
}
.srow-l {
  color: var(--text-2);
  font-size: 0.78125rem;
  font-weight: 500;
}
.srow-role {
  grid-column: 1;
  grid-row: 1;
}
.srow-name {
  grid-column: 2;
  grid-row: 1;
}
.srow-del {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.srow-wage {
  grid-column: 1;
  grid-row: 2;
}
.srow-hours {
  grid-column: 2;
  grid-row: 2;
}
.srow-count {
  grid-column: 1;
  grid-row: 3;
}
.srow-hint {
  color: var(--text-3);
  font-size: 0.75rem;
}
.srow-hint:empty {
  display: none;
}
.staff-sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.875rem 0 0;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.staff-sum b {
  color: var(--text);
  font-weight: 650;
}
.staff-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}
.quick-l {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 0.78125rem;
}

/* 2. 업무 추가 검색칸 */
.task-q {
  max-width: 38.75rem;
}
.tq-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  margin-top: 0.25rem;
}
.tq-h {
  margin: 0;
  color: var(--text-3);
  font-size: 0.78125rem;
}
.tq-res {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-width: 0;
}
.tq-out .hint {
  flex-basis: 100%;
  margin: 0;
}
.topt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.375rem;
  min-height: 2.125rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.topt:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.topt small {
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 500;
}
.topt.is-new {
  border-style: dashed;
}
.topt.is-have {
  border-color: var(--line);
  background: var(--surface-2);
}
/* 2. 업무와 프로그램: 왼쪽 프로그램 목록 · 가운데 업무 세트(현재 → 변경 후) · 아래 구성도.
   좁으면 프로그램 목록이 위에 한 줄로 눕고, 단계 상자가 52rem 이상이면 왼쪽 칸으로 선다 */
.ws {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.ws-main {
  container: wsmain / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  min-width: 0;
}
.ws-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.ws-side-h {
  flex-basis: 100%;
  margin: 0 0 0.125rem;
  color: var(--text-2);
  font-size: 0.78125rem;
  font-weight: 650;
}
.ws-side-h b {
  color: var(--text);
}
.ws-apps {
  display: contents;
  list-style: none;
}
.ws-app {
  min-width: 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.ws-app.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ws-app-b,
.ws-all {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.0625rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.3125rem 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ws-app-n {
  font-size: 0.875rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.ws-app-k {
  color: var(--text-2);
  font-size: 0.71875rem;
}
.ws-tasks {
  display: none;
}
.ws-all {
  width: auto;
  border: 1px solid var(--line-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}
.ws-all.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ws-add {
  min-height: 2.25rem;
}
@container step (min-width: 52rem) {
  .ws {
    grid-template-columns: 14.5rem minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  .ws-side {
    position: sticky;
    top: 4.75rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 0 1.25rem 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .ws-apps {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ws-app {
    border-color: var(--line);
  }
  .ws-app.on {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .ws-app-b,
  .ws-all {
    padding: 0.5rem 0.75rem;
  }
  .ws-app-b:hover,
  .ws-all:hover {
    background: var(--surface-2);
  }
  .ws-tasks {
    display: block;
    margin: 0;
    padding: 0 0.375rem 0.375rem;
    list-style: none;
  }
  .ws-task {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    width: 100%;
    min-height: 1.875rem;
    padding: 0.25rem 0.375rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
  }
  .ws-task:hover {
    background: var(--accent-soft);
    color: var(--text);
  }
  .ws-task.is-later {
    color: var(--text-3);
  }
  .ws-task-no {
    flex: none;
    color: var(--text-3);
  }
  .ws-all {
    width: 100%;
  }
  .ws-add {
    width: 100%;
    justify-content: center;
  }
}

/* 프로그램 머리: 이름 · 종류 · 호스팅 */
.ws-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.ws-name,
.ws-f {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3125rem;
  min-width: 0;
}
.ws-name {
  flex: 1 1 15rem;
}
/* 줄어들지 않고 다음 줄로 (AI 도우미 패널을 연 넓은 화면 · 1024px 창에서 'Cloudflare Workers·Pages'가 잘리던 것) */
.ws-f {
  flex: 1 0 13.5rem;
  max-width: 15rem;
}
/* 휴대폰: 종류·호스팅은 한 줄씩 전체 폭 (호스팅 이름 'Cloudflare Workers·Pages'가 잘리지 않게) */
@media (max-width: 40em) {
  .ws-f {
    flex-basis: 100%;
    max-width: none;
  }
}
.ws-name-l,
.ws-f > span {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
}
.ws-name input {
  font-size: 1rem;
  font-weight: 650;
}
.ws-del {
  margin-left: auto;
}
.step-b .ws-all-h {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}
.ws-sec {
  min-width: 0;
}
.ws-sec-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.625rem;
}
.step-b .ws-sec-h h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
}
.ws-sec-h span {
  color: var(--text-2);
  font-size: 0.8125rem;
}
.ws-struct {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.ws-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.ws-tbl th,
.ws-tbl td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.ws-tbl thead th {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 700;
}
.ws-tbl tbody th {
  font-weight: 600;
}
.tq-f {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

/* 업무 세트: 머리(번호·이름·담당·범위) + 현재 → 변경 후 + 펼친 상세 */
.sets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.set {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  scroll-margin-top: 5rem;
}
/* 다음 단계 업무: 점선 상자 (머리의 '다음 단계' 글과 같이 — 선 모양만으로 구분하지 않음) */
.set.is-later {
  border-style: dashed;
  border-color: var(--line-strong);
}
.set.is-open {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.set-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
.set-no {
  flex: none;
  color: var(--text-2);
  font-weight: 650;
}
.step-b .set-t {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
}
.set-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.set-name > span:first-child {
  overflow-wrap: anywhere;
}
.set-name:hover > span:first-child {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.set-more {
  flex: none;
  padding: 0 0.375rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
}
.set-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.set-who {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.set-who > span {
  color: var(--text-2);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.set-who select {
  width: 7.5rem;
  min-width: 0;
}
.set-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem 0;
}
.set-ask-l {
  margin-right: 0.25rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 650;
}
.set-b {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  padding: 0.625rem 0.75rem 0.75rem;
}
.set-now,
.set-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.375rem;
  min-width: 0;
}
.set-now {
  padding-bottom: 0.625rem;
  border-bottom: 1px dashed var(--line);
}
.set-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 700;
}
.set-lab select {
  width: auto;
  min-width: 7.5rem;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.set-how {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
}
.set-how b {
  font-weight: 650;
}
.set-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  margin: 0;
}
.set-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-2);
  font-size: 0.78125rem;
}
.set-tool .ico {
  width: 1rem;
  height: 1rem;
}
.set-note {
  margin: 0;
  color: var(--text-2);
  font-size: 0.78125rem;
  line-height: 1.55;
}
.set-arrow {
  display: none;
  color: var(--text-3);
  font-size: 1.125rem;
}
.set-flow {
  min-width: 0;
  font-size: 0.8125rem;
}
.set-gain {
  margin: 0.375rem 0 0;
  color: var(--text-2);
  font-size: 0.78125rem;
}
.set-gain b {
  color: var(--good);
}
.set-x {
  margin: 0;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.set-fe {
  justify-self: start;
}
.set-d {
  padding: 0.875rem 0.75rem 0.75rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-2);
}
.chips-t {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.chip-t {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  cursor: pointer;
}
.chip-t:hover {
  border-color: var(--accent);
}
.chip-t.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.chip-t i {
  color: var(--accent);
  font-style: normal;
}
/* 작업 칸이 넓으면 현재 → 변경 후를 옆으로 */
@container wsmain (min-width: 38rem) {
  .set-b {
    grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.1fr);
    gap: 0.875rem;
  }
  .set-now {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .set-arrow {
    display: block;
    align-self: center;
  }
}
.flow {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow li {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.flow li + li::before {
  content: '→';
  content: '→' / '';
  margin-right: 0.375rem;
  color: var(--text-3);
}
.flow .ico {
  width: 1rem;
  height: 1rem;
}
.flow + .flow-x {
  flex-basis: 100%;
}

/* 운영비 줄: 건수를 직접 적어야 하는 줄 · 단가표의 회사별 묶음 */
.sim-hint {
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 600;
}
.sim-hint:empty {
  display: none;
}
.rate-g {
  margin: 1rem 0 0.25rem;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 700;
}
.card h3 + .rate-g {
  margin-top: 0;
}

/* 단계 상자가 넓을 때 */
@container step (min-width: 30rem) {
  .reg-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .reg-row .btn {
    justify-self: end;
  }
}
@container step (min-width: 34rem) {
  .staff-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }
  .quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
@container step (min-width: 40rem) {
  .srows {
    gap: 0;
    border-top: 1px solid var(--line-strong);
  }
  .srow,
  .srow-head {
    grid-template-columns: 8rem minmax(0, 1fr) 9rem 7.5rem auto;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .srow-head {
    display: grid;
    padding-block: 0.375rem;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 700;
  }
  .srow-c .srow-l {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .srow-role,
  .srow-name,
  .srow-wage,
  .srow-hours,
  .srow-del {
    grid-row: 1;
  }
  .srow-role {
    grid-column: 1;
  }
  .srow-name {
    grid-column: 2;
  }
  .srow-wage {
    grid-column: 3;
  }
  .srow-hours {
    grid-column: 4;
  }
  .srow-del {
    grid-column: 5;
  }
  .srow-count {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    gap: 0.5rem;
  }
  .srow-count .srow-l {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* ── 모바일 ─────────────────────────────────── */
@media (max-width: 57.5em) {
  .edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .summary-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 30;
  }
  /* 항목('구축 88만 원' 등)은 낱말 중간에서 끊지 않고, 한 줄에 안 들어가면 항목째 다음 줄로 */
  .sum-bar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.8125rem;
    box-shadow: 0 -6px 20px rgb(0 0 0 / 10%);
    cursor: pointer;
  }
  .sum-bar > span {
    white-space: nowrap;
  }
  .sum-bar b {
    font-size: 0.90625rem;
  }
  .sum-bar .chev {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.78125rem;
  }
  .summary {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0;
    border-bottom: 0;
  }
  body.sheet-open .summary {
    display: block;
  }
  .toast {
    bottom: 4.75rem;
  }
  html {
    scroll-padding-bottom: 4.5rem; /* 아래 요약 바에 가리지 않게 */
  }
}
@media (max-width: 45em) {
  html {
    scroll-padding-top: 7.5rem; /* 메뉴가 두 줄인 머리줄 */
  }
  .top-in {
    padding-block: 0.375rem;
    row-gap: 0.125rem;
  }
  /* 좁은 화면: 메뉴는 둘째 줄, '매칭 앱'은 그 줄 오른쪽 끝 — 머리줄이 세 줄로 늘지 않게 */
  .tabs {
    order: 3;
    flex: 1 1 calc(100% - 8rem);
  }
  .btn.app-switch {
    order: 4;
  }
  .card {
    padding: 1rem;
  }
  .sheet {
    border-inline: 0;
  }
  .ledger thead {
    display: none;
  }
  .ledger tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--line);
  }
  .ledger td {
    flex: 1 1 100%;
    padding: 0;
    border: 0;
  }
  .ledger .l-st,
  .ledger .l-act {
    flex: 0 0 auto;
  }
  .ledger td.r {
    text-align: left;
  }
  .ledger td[data-label]::before {
    content: attr(data-label) ' ';
    color: var(--text-3);
  }
  .ledger .l-act {
    text-align: left;
  }
  .rate-row,
  .rate-row.two {
    grid-template-columns: 1fr 1fr;
  }
  .rate-row small {
    grid-column: 1 / -1;
  }
}
@media (max-width: 35em) {
  .sim-row {
    grid-template-columns: minmax(0, 1fr) minmax(6rem, auto);
  }
  .sim-plan,
  .sim-use {
    grid-column: 1 / -1;
  }
  .sim-cost {
    grid-row: 1;
    grid-column: 2;
  }
  .who span {
    display: none;
  }
  .who em {
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .step-h,
  .step-b,
  .step-f {
    padding-inline: 0.875rem;
  }
  .save-status {
    display: none;
  }
}
/* 아주 좁은 화면(320px 휴대폰, 글자를 키운 휴대폰): 메뉴 탭 여백을 줄여 한 줄에 넣고, 지역 고르기는 한 줄에 하나 */
@media (max-width: 21.25em) {
  .tab {
    padding-inline: 0.4375rem;
  }
  .biz-region {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 휴대폰 단계 상자: 시·도와 시·군·구를 한 줄씩 — '전남광주통합특별시' 같은 긴 이름이 잘리지 않게 (v0.7) */
@container step (max-width: 22rem) {
  .biz-region {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 단계 상자가 아주 좁으면(320px 휴대폰): 직원 카드는 2열, 빼기는 아래 오른쪽 — 시급·역할 글자가 잘리지 않게 */
@container step (max-width: 19rem) {
  .srow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .srow-c {
    grid-row: auto;
    grid-column: auto;
  }
  .srow-del {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  /* 글자를 키운 휴대폰에서 시급 '15000'이 칸에 다 보이게 안쪽 여백을 줄인다 (v0.7) */
  .srow input {
    padding-inline: 0.375rem;
  }
}
/* 글자를 크게 키운 휴대폰(단계 상자가 글자 14개 폭 안팎): 직원 카드 칸을 한 줄씩 쌓는다 — 시급·시간 숫자가 눌려 안 보이지 않게 (v0.7) */
@container step (max-width: 14rem) {
  .srow {
    grid-template-columns: minmax(0, 1fr);
  }
  .srow-c,
  .srow-del {
    grid-row: auto;
    grid-column: 1;
  }
}
/* 단가표 줄: 아주 좁거나 글자를 키운 화면에서는 이름 아래에 입력칸 (em이라 글자 크기를 따라감) */
@media (max-width: 22em) {
  .rate-row,
  .rate-row.two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 손가락으로 누르는 화면: 누르는 영역 44px, 입력칸 글자 16px (아이폰이 입력칸을 누를 때 화면을 확대하지 않게).
   글자 설정을 키우면 같이 커지고, 작게 줄여도 max()의 px 바닥값 아래로는 내려가지 않는다 */
@media (pointer: coarse) {
  .btn,
  .btn.sm,
  .btn.app-switch,
  .tab,
  .brand,
  .add-chip,
  .switch,
  .popt,
  .stp,
  .link,
  .set-name,
  .ws-app-b,
  .ws-all,
  .ws-task,
  .chip-t,
  .topt,
  .who {
    min-height: max(2.75rem, 44px);
  }
  /* 좁은 화면의 '설정'은 글자 두 개라 폭도 누르기 좋게 (메뉴 칸도 같게) */
  .tab {
    min-width: max(2.75rem, 44px);
  }
  .who {
    justify-content: center;
    min-width: max(2.75rem, 44px);
  }
  .place-pick input {
    width: 1.25rem;
    height: 1.25rem;
  }
  .icon-btn {
    width: max(2.75rem, 44px);
    height: max(2.75rem, 44px);
  }
  .pchip-x {
    width: max(2.25rem, 36px);
    height: max(2.25rem, 36px);
  }
  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  select,
  .ledger select {
    height: max(2.75rem, 44px);
  }
  input,
  select,
  textarea,
  input.task-name {
    font-size: max(1rem, 16px);
  }
  .seg-i span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: max(2.75rem, 44px);
    min-height: max(2.75rem, 44px);
  }
  .check,
  .ftable .check {
    min-height: max(2.75rem, 44px);
    padding: 0.25rem 0;
  }
  .adv > summary,
  .adders > summary {
    padding: 0.75rem 0;
  }
}

/* 낮은 화면(가로로 든 휴대폰, 200% 확대): 머리줄이 따라오지 않게 해서 입력할 자리를 넓힌다 */
@media (max-height: 35em) {
  .top {
    position: static;
  }
  html {
    scroll-padding-top: 0.5rem;
  }
}
@media (max-height: 35em) and (min-width: 57.5625em) {
  .summary-wrap {
    top: 1rem;
  }
  .summary {
    max-height: calc(100vh - 2rem);
  }
}

/* 시스템 설정: 투명도 줄이기 · 대비 높이기 */
@media (prefers-contrast: more) {
  :root {
    --text-3: var(--text-2);
    --line: var(--line-strong);
  }
}

/* ── 인쇄 ───────────────────────────────────── */
@page {
  size: A4;
  margin: 14mm 12mm 16mm;
}
/* ── AI 도우미 (v0.9.0): 크롬 옆 대화창처럼 오른쪽 패널 ───────────
   넓은 화면(80em 이상)은 본문을 패널 폭만큼 왼쪽으로 밀어 겹치지 않게, 그보다 좁으면 본문 위에 뜨고, 휴대폰은 화면 전체. */
:root {
  --as-w: 24rem;
}
.as-toggle[aria-expanded='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.assist {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(var(--as-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgb(16 24 40 / 10%);
}
.assist[hidden] {
  display: none;
}
.as-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.as-head h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
}
.as-left {
  margin-left: auto;
  color: var(--text-3);
  font-size: 0.75rem;
  white-space: nowrap;
}
.as-x {
  color: var(--text-2);
}
.as-x:hover {
  color: var(--text);
}
.as-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.as-log:focus-visible {
  outline-offset: -2px;
}
.as-msg {
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.55;
}
.as-msg p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.as-msg.me {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg) var(--radius-lg) 2px var(--radius-lg);
  background: var(--accent-soft);
}
.as-msg.me.failed {
  background: var(--surface-2);
  color: var(--text-2);
}
.as-msg.me small,
.as-msg.intro small {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-3);
  font-size: 0.75rem;
}
.as-msg.ai.err p {
  color: var(--bad);
}
.as-msg.busy p {
  color: var(--text-3);
}
.as-msg.busy p::after {
  content: '…';
}
@media (prefers-reduced-motion: no-preference) {
  .as-msg.busy p {
    animation: as-pulse 1.2s ease-in-out infinite;
  }
}
@keyframes as-pulse {
  50% {
    opacity: 0.45;
  }
}
.as-qs {
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
  color: var(--text-2);
}
.as-card {
  margin-top: 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.as-items {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.as-item + .as-item {
  border-top: 1px solid var(--line);
}
.as-item label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.as-item label:hover {
  background: var(--surface-2);
}
.as-item input {
  margin: 0.125rem 0 0;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--accent);
}
.as-txt {
  min-width: 0;
}
.as-item.is-have label {
  cursor: default;
  color: var(--text-3);
}
.as-item.is-have label:hover {
  background: none;
}
.as-it {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
}
.as-it b {
  font-weight: 600;
}
.as-it em {
  font-style: normal;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.as-it em.chg {
  color: var(--accent);
  font-weight: 600;
}
.as-item small {
  display: block;
  color: var(--text-3);
  font-size: 0.78125rem;
  line-height: 1.45;
}
.as-diff {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8125rem;
}
.as-diff b {
  color: var(--text);
}
.as-act {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--line);
}
.as-done {
  margin: 0.5rem 0 0;
  color: var(--text-3);
  font-size: 0.8125rem;
}
.as-done:focus-visible {
  outline-offset: 2px;
}
.as-note {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8125rem;
}
.as-form {
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.as-form textarea {
  display: block;
  max-height: 12rem;
  resize: none;
  field-sizing: content;
  min-height: 4.75rem;
}
.as-form textarea:disabled {
  background: var(--surface-2);
  color: var(--text-3);
}
.as-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.as-foot small {
  color: var(--text-3);
  font-size: 0.75rem;
}
@media (min-width: 80em) {
  body.assist-open {
    padding-right: var(--as-w);
  }
  body.assist-open .assist {
    box-shadow: none;
  }
  body.assist-open.is-wide-step .summary-wrap {
    right: var(--as-w);
  }
  body.assist-open .toast {
    left: calc((100% - var(--as-w)) / 2);
  }
}

@media print {
  /* 종이에는 브라우저 글자 크기 설정과 상관없이 같은 크기로 찍는다 (1rem = 16px 고정) */
  html {
    font-size: 16px;
  }
  html,
  body {
    background: #ffffff !important;
  }
  .top,
  .doc-tools,
  .summary-wrap,
  .assist,
  .toast,
  .skip,
  .dlg,
  #view-edit,
  #view-list,
  #view-rates {
    display: none !important;
  }
  #view-doc,
  #view-doc[hidden] {
    display: block !important;
  }
  main {
    max-width: none;
    padding: 0;
  }
}

/* ── 로그인: 가입 신청 안내 · 관리자 가입 신청 목록 ── */
.auth-ok {
  margin: 0;
  color: var(--text-2);
  font-size: 0.8125rem;
}
.auth-ok:empty {
  display: none;
}
.admin-sum {
  margin: 0 0 0.5rem;
  color: var(--text-2);
  font-size: 0.875rem;
}
.admin-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.admin-tbl th,
.admin-tbl td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.admin-tbl th {
  color: var(--text-2);
  font-weight: 600;
}
.admin-tbl .u-mail {
  overflow-wrap: anywhere;
}
.admin-tbl .u-act {
  white-space: nowrap;
  text-align: right;
}
.admin-tbl .u-act .btn + .btn {
  margin-left: 0.375rem;
}
.admin-tbl tr.is-wait td {
  font-weight: 600;
}
.admin-wrap {
  overflow-x: auto;
}
/* 좁은 화면: 가입 신청은 사람마다 한 덩어리로 쌓고 값 앞에 칸 이름(data-l) — 표가 옆으로 밀려 버튼이 가려지지 않게 */
@media (max-width: 40em) {
  .admin-tbl,
  .admin-tbl tbody,
  .admin-tbl tr,
  .admin-tbl td {
    display: block;
    width: auto;
  }
  .admin-tbl thead {
    display: none;
  }
  .admin-tbl tr {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-tbl td {
    padding: 0.0625rem 0;
    border: 0;
  }
  .admin-tbl td:first-child {
    font-weight: 650;
  }
  .admin-tbl td[data-l]::before {
    content: attr(data-l);
    display: inline-block;
    min-width: 4.5rem;
    margin-right: 0.5rem;
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .admin-tbl .u-act {
    padding-top: 0.5rem;
    white-space: normal;
    text-align: left;
  }
}