/*
 * 공통 컴포넌트. 운영자 웹·중개사 웹·손님 웹이 함께 쓴다.
 * 규칙은 docs/design-system.md. 값은 tokens.css 변수만 쓴다.
 * 가운데 정렬은 flex로 한다 (line-height로 높이를 맞추지 않는다).
 */

/* ── 기본 ───────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1 { font-size: var(--fs-page); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-title-sm); line-height: var(--lh-tight); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--gray-soft);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
}

.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.strong { font-weight: 600; }
a.strong { color: var(--ink); }

/* ── 버튼 ───────────────────────────────────────────── */
/* font 단축 속성은 line-height까지 초기화하므로 반드시 먼저 쓴다. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 600;
  line-height: var(--lh-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--primary-strong); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn.outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.outline:hover { background: var(--gray-soft); }
.btn.danger-outline { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn.danger-outline:hover { background: var(--danger-soft); }
.btn.sm { min-height: var(--control-h-sm); padding: 0 var(--sp-4); font-size: var(--fs-small); }
.btn.block { display: flex; width: 100%; }

.link { color: var(--primary); font-weight: 600; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit; }
.link-btn:hover { color: var(--ink); }
.back { display: inline-block; margin-bottom: var(--sp-2); font-size: var(--fs-small); }

/* ── 입력 ───────────────────────────────────────────── */
.field { margin-bottom: var(--sp-4); }
.field > label, label.label { display: block; margin-bottom: var(--sp-1); color: var(--ink-2); font-size: var(--fs-caption); }

input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
textarea { padding: var(--sp-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
input:disabled { background: var(--gray-soft); color: var(--ink-2); }
input::placeholder { color: var(--muted); }

.inline { display: flex; align-items: center; gap: var(--sp-2); }
.inline > input { flex: 1; width: auto; }
.inline > select { width: auto; }
.suffix { color: var(--ink-2); white-space: nowrap; }
.check { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.hint { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-caption); }
.hint.ok { color: var(--ok-ink); }
.hint.bad { color: var(--danger); }

/* ── 면 ─────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.card.flush { padding: 0; overflow: hidden; }
.card h2 { margin-bottom: var(--sp-4); }

.alert, .notice { padding: var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.alert { background: var(--danger-soft); color: var(--danger); }
.notice { background: var(--primary-soft); color: var(--primary); }
.warning { padding: var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-4); background: var(--warn-soft); color: var(--warn-ink); }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: var(--sp-2); padding: 0 6px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: var(--fs-caption); font-weight: 600; }
.error-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); list-style: disc; }

/* ── 배지 ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: var(--gray-soft); color: var(--ink-2); }
.status.ok { color: var(--ok-ink); font-weight: 500; }

/* ── 표 ─────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; background: var(--gray-soft); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; }
th, td { padding: var(--sp-3); border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td.right, th.right { text-align: right; }
table.nowrap th, table.nowrap td { white-space: nowrap; }
.empty { padding: var(--sp-8) 0; color: var(--muted); text-align: center; }

/* 오류 화면(피그마 W-07·W-07b). 세 웹이 같이 쓰므로 여기 둔다 */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-6) var(--sp-4); background: var(--bg); }
.error-page main { display: grid; justify-items: center; gap: var(--sp-3); max-width: 320px; text-align: center; }
.error-page p { color: var(--ink-2); }
.error-page .btn { margin-top: var(--sp-3); }
.error-mark {
  display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--sp-2);
  border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-page); font-weight: 700;
}

/* ── 칩 · 스텝 · 월 이동 ─────────────────────────────── */
.chips { display: flex; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-4); }
.chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-size: var(--fs-small);
}
.chips a:hover { text-decoration: none; background: var(--gray-soft); }
.chips a.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.stepper { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-5); color: var(--ink-2); }
.stepper li { display: flex; align-items: center; gap: var(--sp-2); }
.stepper li span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gray-soft); color: var(--ink-2); font-size: var(--fs-small); font-weight: 600;
}
.stepper li:not(:last-child)::after { content: ""; width: 48px; height: 2px; margin-left: var(--sp-2); background: var(--line); }
.stepper li.done:not(:last-child)::after { background: var(--primary); }
.stepper li.active { color: var(--ink); font-weight: 600; }
.stepper li.active span, .stepper li.done span { background: var(--primary); color: #fff; }

.month-nav { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-title); }
.month-nav a { color: var(--ink-2); font-size: 22px; padding: 0 var(--sp-2); }

/* ── 정의 목록 · 막대 ────────────────────────────────── */
.kv { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-3) var(--sp-2); }
.kv dt { color: var(--ink-2); }
.kv.tight { grid-template-columns: 80px 1fr; margin: var(--sp-4) 0; }
/* 행마다 구분선이 이어지는 목록: 칸 사이 간격을 없애고 안쪽 여백으로 띄운다 */
.kv.rows { gap: 0; }
.kv.rows > dt, .kv.rows > dd { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.kv.rows > dt { padding-right: var(--sp-3); }

.bar-row { margin-bottom: var(--sp-4); }
.bar-row .meta { display: flex; justify-content: space-between; margin-bottom: var(--sp-1); }
.bar { height: 8px; border-radius: var(--r-sm); background: var(--gray-soft); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--primary); }

/* ── 모달 ───────────────────────────────────────────── */
dialog.modal {
  width: 500px; max-width: calc(100vw - var(--sp-8)); padding: var(--sp-6) var(--sp-6);
  border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-modal);
}
dialog.modal.wide { width: 520px; }
dialog.modal::backdrop { background: rgba(23, 33, 43, 0.45); }
dialog.modal h2 { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-title); }

/* ── 버튼 줄 ─────────────────────────────────────────── */
.actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.actions .right { display: flex; align-items: center; gap: var(--sp-3); }
.actions.center { justify-content: center; }

/* ── 선택 칩 (라디오) ────────────────────────────────── */
.chip-select { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-select label { position: relative; cursor: pointer; }
.chip-select input { position: absolute; opacity: 0; }
.chip-select span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-size: var(--fs-small);
}
.chip-select input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.chip-select input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.mt-4 { margin-top: var(--sp-4); }

/* ── 접기 (추가 폼) ──────────────────────────────────── */
details.add > summary { color: var(--primary); font-weight: 600; cursor: pointer; list-style: none; }
details.add > summary::-webkit-details-marker { display: none; }
details.add[open] > summary { margin-bottom: var(--sp-3); }

/* ── 탭 · 분할 버튼 · 쪽 이동 ─────────────────────────── */
.tabs { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.tabs a { padding: var(--sp-3) 0; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.segmented a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--sp-4); border-radius: var(--r-sm); color: var(--ink); font-size: var(--fs-small); }
.segmented a:hover { text-decoration: none; background: var(--gray-soft); }
.segmented a.on { background: var(--primary); color: #fff; font-weight: 600; }

.pager { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); color: var(--ink-2); }

/* 체크박스를 칩처럼 */
.toggle-chip { position: relative; cursor: pointer; }
.toggle-chip input { position: absolute; opacity: 0; }
.toggle-chip span {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 0 var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-small);
}
.toggle-chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.toggle-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

[hidden] { display: none !important; }
.req { margin-left: var(--sp-1); color: var(--danger); font-size: var(--fs-caption); font-weight: 600; }
.nowrap { white-space: nowrap; }
.wrap { white-space: normal; word-break: break-word; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.check.consent { align-items: flex-start; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--gray-soft); }
.check.consent input { margin-top: 3px; }