@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ── 토큰 ─────────────────────────────────────────────────────
   잉크(문서) · 종이 · 인주(긴급) · 도장(완료)
   요양원의 실제 세계는 서류와 결재란이다.
   ──────────────────────────────────────────────────────────── */
:root {
  --ink:        #16273F;
  --ink-soft:   #4A5C75;
  --muted:      #8A909B;
  --paper:      #FCFCFA;
  --surface:    #FFFFFF;
  --line:       #E4E2DB;
  --line-soft:  #F0EEE9;
  --seal:       #C0392B;
  --seal-bg:    #FBEEEC;
  --stamp:      #2D6A4F;
  --stamp-bg:   #EAF3EF;
  --kakao:      #FEE500;
  --kakao-ink:  #191600;

  --line-strong: #9AA0AA;

  /* ── 디자인 정책 세 줄. 화면은 이 값만 쓴다. ────────────────
     1) 구분되게 — 테두리 2.5px + 아래 그림자. 연회색 1px 금지.
        덜 급한 것은 색만 회색으로, 크기는 그대로.
     2) 글자는 크게 — 14px 아래는 없는 글자로 본다.
     3) 핵심은 강조 — 화면마다 가장 중요한 것 하나를 딱지로 떼어 세운다.
        색은 뜻에 맞춰. 고른 것만 색이 들어온다.
     화면 안에서 px 을 직접 적지 말 것. 그렇게 해서 화면마다 값이 갈렸다. */
  --fs-body:   17px;   /* 본문 */
  --fs-sub:    19px;   /* 소제목 */
  --fs-card:   21px;   /* 카드 제목 */
  --fs-title:  30px;   /* 화면 제목 */
  --fs-btn:    18px;   /* 단추 */
  --fs-chip:   15px;   /* 딱지·날짜. 하한이다. */
  --fs-kpi:    40px;   /* 큰 숫자 */

  --border-w:  2.5px;
  --border-in: 2px;    /* 입력칸 */
  --sh:        0 3px 0 rgba(22,39,63,.10);
  --sh-on:     0 3px 0 rgba(22,39,63,.22);
  --gap-card:  11px;

  --r:      10px;
  --tap:    56px;
  --pad:    20px;

  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 이 파일의 크기값은 전부 px 이라 html 의 font-size 를 올려도 아무 것도 커지지 않는다.
   (rem 로 바꾸지 않는 한 무효) 그래서 각 항목의 px 을 직접 올려 두었다.
   최소 기준 — 본문 17px · 소제목 19px · 화면제목 30px · 딱지·날짜 14px 하한 */

/* ── 레이아웃 폭 등급 ────────────────────────────────────────
   기본(폼·상세) 720 · 목록/홈(wide) 1000 · 로그인(narrow) 440
   모바일에서는 모두 100% 로 접힌다.
   ──────────────────────────────────────────────────────────── */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--pad);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap.wrap-wide   { max-width: 1000px; }
.wrap.wrap-narrow { max-width: 440px; }

/* 데스크톱: 넓은 화면에서 여백·배경 정리 (가운데 좁은 기둥 느낌 제거) */
@media (min-width: 768px) {
  html, body { background: var(--paper); }
  .wrap { padding: 32px 28px 48px; }
}

/* ── 타이포 ──────────────────────────────────────────────── */
h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.sub { color: var(--ink-soft); font-size: 17px; margin: 0 0 24px; }
.hint { color: var(--muted); font-size: 16px; line-height: 1.55; }

/* ── 결재란 진행 표시 — 이 제품의 시그니처 ────────────────
   등록 4단계를 결재란 4칸으로 표현한다.
   ──────────────────────────────────────────────────────── */
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--surface);
}
.ladder-cell { border-right: 1px solid var(--line); text-align: center; }
.ladder-cell:last-child { border-right: 0; }
.ladder-head {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  background: var(--line-soft);
  white-space: nowrap;
}
.ladder-body {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--muted);
}
.ladder-cell.done .ladder-body { color: var(--stamp); font-weight: 700; font-size: 24px; }
.ladder-cell.done .ladder-head { background: var(--stamp-bg); color: var(--stamp); }
.ladder-cell.now  .ladder-head { background: var(--ink); color: #fff; }
.ladder-cell.now  .ladder-body { color: var(--ink); font-weight: 600; }

/* ── 폼 ──────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--ink);
}
input[type=text], input[type=tel], input[type=date], select {
  width: 100%;
  height: var(--tap);
  padding: 0 14px;
  font-size: 17px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,39,63,.08); }
input::placeholder { color: #B9BDC4; }
input[readonly] { background: var(--line-soft); color: var(--ink-soft); }

/* ── 버튼 ────────────────────────────────────────────────── */
.btn {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .12s, transform .06s;
}
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-ghost   { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-kakao   { background: var(--kakao); color: var(--kakao-ink); }
.btn-text    { background: none; border: 0; color: var(--ink-soft); font-size: 16px; font-weight: 500; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.btn + .btn { margin-top: 10px; }

.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }

/* ── 알림 ────────────────────────────────────────────────── */
.msg {
  padding: 13px 15px;
  border-radius: var(--r);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 16px;
  display: none;
}
.msg.show { display: block; }
.msg-err  { background: var(--seal-bg);  color: var(--seal);  border: 1px solid #F0C9C4; }
.msg-ok   { background: var(--stamp-bg); color: var(--stamp); border: 1px solid #C5DED4; }
.msg-info { background: var(--line-soft); color: var(--ink-soft); border: 1px solid var(--line); }

/* ── 서명 캔버스 ──────────────────────────────────────────── */
.sig-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 12px;
}
.sig-box canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.sig-line {
  position: absolute;
  left: 24px; right: 24px; bottom: 44px;
  border-bottom: 1px dashed var(--line);
  pointer-events: none;
}
.sig-ph {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: 15px;
  color: #C3C7CD;
  pointer-events: none;
  transition: opacity .2s;
}
.sig-box.drawn .sig-ph { opacity: 0; }

/* ── 공통 카드 · 목록 · 힌트 (전 화면 통일 디자인) ──────────────
   교수 확정: 편안하고 가독성 높고, 빈칸이 아니라 예시가 보이는.
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 3px 0 rgba(22,39,63,.10);
}
/* 덜 급한 카드 — 작게 만들지 않고 테두리 색만 회색으로 */
.card.card-quiet { border-color: var(--line-strong); }
.card-title { font-size: 19px; font-weight: 800; margin: 0 0 14px; color: var(--ink); }

/* 입력 힌트 — 빈칸이 아니라 예시가 보이게 */
.field-hint {
  font-size: 15px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.field-example {
  font-size: 15px;
  color: #8a9a7e;
  background: #f7faf4;
  border-left: 2px solid #cfe0c2;
  border-radius: 4px;
  padding: 6px 9px;
  margin: 6px 0;
  line-height: 1.55;
}

/* 목록 카드 (게시판형) */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-card {
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--r);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.list-card { box-shadow: 0 3px 0 rgba(22,39,63,.10); }
.list-card.list-quiet { border-color: var(--line-strong); }
.list-card:hover { box-shadow: 0 3px 0 rgba(22,39,63,.22); }
.list-card:active { background: var(--line-soft); }
.list-title { font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.list-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 15px; color: var(--muted); margin-top: 6px; }

/* 카드 그리드 (홈·목록 데스크톱) */
.grid { display: grid; gap: 12px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* 상단 바 (뒤로 + 액션 버튼) */
.topbar { display: flex; align-items: center; margin-bottom: 16px; gap: 10px; }
.topbar .back { background: none; border: 0; font-family: inherit; font-size: 17px;
  color: var(--ink-soft); padding: 0; cursor: pointer; }
.topbar .spacer { flex: 1; }
.btn-sm { width: auto; min-height: 44px; padding: 0 14px; font-size: 16px; }

/* 인라인 편집 액션 (수정·삭제) */
.edit-actions { display: flex; gap: 8px; }
.link-btn { background: none; border: 0; font-family: inherit; font-size: 16px;
  color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.link-btn:hover { background: var(--line-soft); }
.link-btn.danger { color: var(--seal); }

/* 폼 섹션 소제목 — 색상 강조로 눈에 확 띄게 (전 화면 공통) */
.step {
  font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
  margin: 26px 0 12px; padding: 10px 14px;
  background: linear-gradient(135deg, #eef2ff, #f5f0ff);
  border-left: 4px solid #6a5cff; border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
}
.step-sub { /* 섹션 아래 설명 */
  font-size: 15px; color: var(--muted); margin: -6px 0 12px; line-height: 1.5;
}

/* ── 페이지 헤더 밴드 (홈 사이드바와 통일된 그라데이션) ──────────
   화려하되 절제. 남보라 한 방향 그라데이션 + 흰 글씨.
   전 화면 상단 공통. .wrap 안에서 좌우로 꽉 차게 뺀다.
   ──────────────────────────────────────────────────────────── */
.page-head {
  background: linear-gradient(120deg, #1e2a52 0%, #3a2668 55%, #6a5cff 130%);
  color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(30,42,82,.18); position: relative; overflow: hidden;
}
.page-head::after { /* 은은한 광택 */
  content: ""; position: absolute; top: -40%; right: -10%; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  pointer-events: none;
}
.page-head .ph-back {
  background: rgba(255,255,255,.16); border: 0; color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 600; padding: 6px 13px; border-radius: 20px;
  cursor: pointer; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s;
}
.page-head .ph-back:hover { background: rgba(255,255,255,.28); }
.page-head h1 { font-size: 30px; font-weight: 900; letter-spacing: -.03em; margin: 0; color: #fff; }
.page-head .ph-sub { font-size: 16px; color: rgba(255,255,255,.82); margin-top: 6px; line-height: 1.5; }
.page-head .ph-actions { position: absolute; top: 22px; right: 24px; display: flex; gap: 8px; }
.page-head .ph-btn {
  background: rgba(255,255,255,.18); border: 0; color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 700; padding: 8px 15px; border-radius: 10px; cursor: pointer;
  transition: background .12s;
}
.page-head .ph-btn:hover { background: rgba(255,255,255,.3); }
.page-head .ph-btn.danger { background: rgba(255,90,90,.35); }
@media (max-width: 560px) {
  .page-head { padding: 18px; border-radius: 14px; }
  .page-head h1 { font-size: 26px; }
  .page-head .ph-actions { position: static; margin-top: 12px; }
}

/* ── 기타 ────────────────────────────────────────────────── */
.spacer { flex: 1; min-height: 24px; }
.center { text-align: center; }
/* .card 중복 정의 삭제 — 위쪽 한 곳(.card)에서만 관리한다 */
.kv { display: flex; justify-content: space-between; padding: 9px 0; font-size: 17px; border-bottom: 1px solid var(--line-soft); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--ink-soft); }
.kv span:last-child  { font-weight: 600; }

.brand { margin-bottom: 34px; }
.brand-mark {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 9px;
  margin-bottom: 14px;
}

.load { display: none; text-align: center; padding: 40px 0; color: var(--muted); font-size: 17px; }
.load.show { display: block; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 문장 카드 엔진 (2단계) ────────────────────────────────
   3·4·5·7·10단계가 공유한다. 여기서 바꾸면 다섯 곳이 같이 바뀐다.
   ──────────────────────────────────────────────────────── */
.qcard {
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 3px 0 rgba(22,39,63,.10);
}
.qcard-sub, .qcard:has(.qcard-sub) { border-left: 3px solid var(--seal); }

.qhead {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.qhint {
  font-size: 16px;
  color: var(--seal);
  background: var(--seal-bg);
  border-radius: 6px;
  padding: 7px 10px;
  margin: 8px 0 10px;
  line-height: 1.5;
}
.qreq {
  font-size: 14px; font-weight: 700; color: var(--seal);
  background: var(--seal-bg); border-radius: 3px; padding: 2px 5px;
  vertical-align: 2px; margin-left: 5px;
}
.qlock {
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 5px; vertical-align: 2px; margin-left: 4px;
}

.qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
@media (max-width: 380px) { .qopts { grid-template-columns: 1fr; } }

.qopt {
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 12px;
  border: 2px solid var(--line-strong); border-radius: 8px;
  background: var(--paper);
  font-size: 17px; font-weight: 500; margin: 0;
  cursor: pointer; user-select: none;
  transition: border-color .12s, background .12s;
}
.qopt:active { transform: scale(.99); }
.qopt input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; flex: none; }
.qopt:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 700;
}

.qmore {
  margin-top: 10px; padding: 0; min-height: 40px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}

.qtext {
  width: 100%; margin-top: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 17px; line-height: 1.6; color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: var(--r);
  outline: none; resize: vertical;
}
.qtext:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,39,63,.08); }
.qtext::placeholder { color: #B9BDC4; }
.qcard:has(.qlock) .qtext { border-color: #E8C9C4; }

/* 조립 결과 — 결재 문서처럼 보이게 한다 */
.asm {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 20px;
}
.asm-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--ink-soft); letter-spacing: .06em;
}
.asm-body {
  width: 100%; min-height: 120px; padding: 14px;
  border: 0; outline: none; resize: vertical;
  font-family: inherit; font-size: 17px; line-height: 1.7; color: var(--ink);
  background: var(--surface);
}
.asm-edited { color: var(--seal); font-weight: 700; }
.asm-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--line); background: var(--paper);
}
.asm-note { font-size: 14px; color: var(--muted); }
.asm-reset {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}

/* ── 결재란 (4단계) ────────────────────────────────────────
   8·10단계가 재사용한다. 실물 결재란처럼 보여야 한다.
   요양원의 세계는 서류와 도장이다.
   ──────────────────────────────────────────────────────── */
.ap-ladder {
  display: grid;
  border: 1px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 10px;
}
.ap-cell { border-right: 1px solid var(--line); text-align: center; }
.ap-cell:nth-child(n) { min-width: 0; }

.ap-head {
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
  padding: 6px 2px; border-bottom: 1px solid var(--line);
  background: var(--line-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ap-body {
  min-height: 74px; padding: 6px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-bottom: 1px solid var(--line);
}
.ap-name { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.ap-sig { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; }
.ap-sig svg { max-width: 100%; max-height: 38px; }
.ap-none { font-size: 14px; color: var(--muted); }
.ap-wait { font-size: 15px; font-weight: 700; color: var(--ink); }
.ap-mark {
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  color: var(--stamp); border: 1px solid var(--stamp);
  border-radius: 2px; padding: 0 4px;
}
.ap-mark.ap-reject { color: var(--seal); border-color: var(--seal); }
.ap-time { font-size: 14px; color: var(--muted); padding: 5px 2px; line-height: 1.35; }

.ap-cell:last-child,
.ap-ladder > .ap-cell:nth-last-child(-n+1) { border-right: 0; }
.ap-cell.ap-current .ap-head { background: var(--ink); color: #fff; }
.ap-cell.ap-approved .ap-head { background: var(--stamp-bg); color: var(--stamp); }
.ap-cell.ap-rejected .ap-head { background: var(--seal-bg); color: var(--seal); }
.ap-cell.ap-skipped  .ap-head { color: var(--muted); }
.ap-cell.ap-skipped  .ap-body { background: repeating-linear-gradient(
  45deg, transparent, transparent 5px, var(--line-soft) 5px, var(--line-soft) 10px); }

.ap-reason {
  background: var(--seal-bg); border: 1px solid #F0C9C4;
  border-radius: var(--r); padding: 11px 13px;
  font-size: 16px; line-height: 1.6; color: var(--seal);
}

/* ── PIN 입력 ──────────────────────────────────────────── */
/* hidden 속성은 브라우저가 display:none 으로 처리하는데,
   여기 display:flex 가 있으면 그쪽이 이겨서 창이 안 닫힌다.
   취소를 눌러도 그대로 있던 원인이 이것이었다. 아래 한 줄이 반드시 있어야 한다. */
.pin-mask[hidden] { display: none !important; }
.pin-mask { position: fixed; inset: 0; background: rgba(22,39,63,.5);
            display: flex; align-items: center; justify-content: center;
            padding: 20px; z-index: 50; }
.pin-box { background: var(--surface); border-radius: 14px; padding: 22px;
           width: 100%; max-width: 340px; }
.pin-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.pin-sub { font-size: 16px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.5; }
.pin-in {
  width: 100%; height: 60px; text-align: center;
  font-size: 30px; font-weight: 700; letter-spacing: .5em; text-indent: .5em;
  font-family: inherit; color: var(--ink);
  border: 2px solid var(--line-strong); border-radius: var(--r);
  outline: none; background: var(--paper);
}
.pin-in:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,39,63,.08); }
.pin-err { font-size: 16px; color: var(--seal); margin-top: 10px; min-height: 20px; }

/* ── 문서 ──────────────────────────────────────────────── */
.doc-no { font-size: 15px; font-weight: 700; color: var(--ink-soft);
          letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.dfield { display: flex; gap: 10px; padding: 10px 0;
          border-bottom: 1px solid var(--line-soft); font-size: 17px; }
.dfield:last-child { border-bottom: 0; }
.dfield-k { flex: none; width: 92px; color: var(--ink-soft); font-weight: 600; }
.dfield-v { flex: 1; white-space: pre-wrap; }
.ap-orig { font-size: 14px; color: var(--seal); font-weight: 600; line-height: 1.2; }
.deleg-row { display:flex; align-items:center; gap:8px; padding:11px 0;
             border-bottom:1px solid var(--line-soft); font-size:16px; }
.deleg-row:last-child { border-bottom:0; }
.deleg-when { font-size:14px; color:var(--muted); }
.deleg-now { font-size:14px; font-weight:700; color:var(--seal);
             background:var(--seal-bg); border-radius:3px; padding:1px 5px; }
.tag-danger { background: var(--seal); color: #fff; }


/* ══════════════════════════════════════════════════════════════
   공용 부품. 화면에서 새로 만들지 말고 이것을 부를 것.
   여기서 고치면 부르는 화면이 모두 함께 바뀐다.

   이름은 반드시 u- 로 시작한다.
   처음에 .chip / .box / .one 으로 두었더니 sms.html 의 알약 단추,
   doc-issue.html 의 사람 카드와 이름이 부딪쳤다.
   화면이 이미 쓰는 흔한 이름을 공용에 쓰면 조용히 섞인다.
   ══════════════════════════════════════════════════════════════ */

/* ── 딱지 (정책 3 — 핵심을 떼어 세운다) ────────────────────────
   붙어 온 것은 쪼개서 하나씩 세운다.
   「전동침대·의료용 침대」 → 딱지 둘. 한 줄로 두면 눈에 걸리지 않는다. */
.u-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.u-chip {
  font-size: var(--fs-chip);
  font-weight: 800;
  letter-spacing: -.02em;
  border-radius: 9px;
  padding: 5px 12px;
  border: 2px solid var(--stamp);
  background: var(--stamp-bg);
  color: var(--stamp);
  box-shadow: 0 2px 0 var(--stamp);
}
.u-chip-warn  { border-color: var(--seal);  background: var(--seal-bg);  color: var(--seal);  box-shadow: 0 2px 0 var(--seal); }
.u-chip-ink   { border-color: var(--ink);   background: var(--line-soft); color: var(--ink);  box-shadow: 0 2px 0 var(--ink); }
/* 모르는 것·잠긴 것 — 색만 빼고 크기는 그대로 둔다 */
.u-chip-off   { border-color: var(--line-strong); background: #F2F3F6; color: #7C8496; box-shadow: 0 2px 0 var(--line-strong); }
/* 그 화면의 핵심을 나르는 딱지는 한 단 크게. 후원 물품처럼 「이것을 사 주십사」 하는 것. */
.u-chip-lg { font-size: var(--fs-body); padding: 6px 13px; }

/* ── 안내 상자 ───────────────────────────────────────────────── */
.u-box {
  border: var(--border-w) solid var(--line-strong);
  border-radius: 12px;
  background: var(--line-soft);
  padding: 15px 17px;
  margin-bottom: var(--gap-card);
}
.u-box > b { display: block; font-size: var(--fs-sub); font-weight: 800; margin-bottom: 6px; }
.u-box > span, .u-box > p { display: block; font-size: var(--fs-body); line-height: 1.75; word-break: keep-all; margin: 0; }
.u-box-warn { border-color: #C9821A; background: #FFF8EC; }
.u-box-warn > b, .u-box-warn > span, .u-box-warn > p { color: #7A5A2A; }
.u-box-danger { border-color: var(--seal); background: var(--seal-bg); }
.u-box-danger > b, .u-box-danger > span, .u-box-danger > p { color: var(--seal); }
.u-box-ok { border-color: var(--stamp); background: var(--stamp-bg); }
.u-box-ok > b, .u-box-ok > span, .u-box-ok > p { color: var(--stamp); }

/* ── 사람 카드 (한 사람씩 보낼 때) ───────────────────────────────
   doc-issue·rest-survey 가 같은 모양이어야 한다. 같은 일을 하는 화면이다. */
.u-one {
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: 13px;
  box-shadow: var(--sh);
  padding: 15px 17px;
  margin-bottom: var(--gap-card);
}
.u-one-head { font-size: var(--fs-sub); font-weight: 800; margin: 15px 0 11px; }
.u-one .oh { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 9px; }
.u-one .on { font-size: var(--fs-sub); font-weight: 800; letter-spacing: -.03em; }
.u-one .oj { font-size: var(--fs-chip); font-weight: 600; color: var(--ink-soft); }
.u-one .ou {
  font-size: var(--fs-body); color: var(--ink-soft); word-break: break-all;
  line-height: 1.6; background: var(--line-soft); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 11px;
}
.u-one .ob { display: flex; gap: 8px; flex-wrap: wrap; }
.u-one .ob a, .u-one .ob button, .u-one .ob span {
  flex: 1; min-width: 118px; text-align: center; text-decoration: none;
  border-radius: 10px; padding: 13px 10px;
  font-size: var(--fs-body); font-weight: 800; font-family: inherit; cursor: pointer;
}

/* ── KPI 숫자 (정책 2 — 숫자는 크게) ─────────────────────────── */
.u-kpi { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.u-kpi-label { font-size: var(--fs-chip); font-weight: 700; color: var(--ink-soft); }


/* 같은 함정 — display 를 정한 요소에 hidden 을 걸면 안 닫힌다.
   화면마다 새로 겪지 않도록 여기서 한 번에 막는다. */
[hidden] { display: none !important; }