/* =====================================================================
   데스크톱 화면.

   이 파일은 데스크톱 전용이다. 모바일은 별도 파일·별도 컴포넌트로 만든다.
   같은 컴포넌트에 if(모바일) 을 넣는 건 반응형보다 나쁘다.
   데스크톱은 앉아서 대량으로 보고 고치는 곳이고, 모바일은 서서 한 가지를
   빨리 끝내는 곳이다. 화면 크기가 다른 게 아니라 하는 일이 다르다.
   ===================================================================== */

/* ---------- 레이아웃 ---------- */

.app {
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr;
  grid-template-rows: var(--h-header) 1fr;
  grid-template-areas: 'brand header' 'nav main';
  height: 100vh;
  overflow: hidden;
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 var(--sp-4);
  background: var(--ux-ink-950);
  color: #fff;
  border-right: 1px solid var(--ux-ink-800);
}
.brand__mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--ux-blue);
  border-radius: var(--r-sm);
  font-weight: 900; font-size: 13px; letter-spacing: -.04em;
  flex: 0 0 auto;
}
.brand__name { font-weight: 850; font-size: 15px; letter-spacing: -.04em; }
.brand__env {
  margin-left: auto;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--ux-ink-400);
  border: 1px solid var(--ux-ink-700);
  border-radius: 99px; padding: 1px 6px;
}

.topbar {
  grid-area: header;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--ux-surface);
  border-bottom: 1px solid var(--ux-line);
}
.topbar__title { font-size: 15px; font-weight: 850; letter-spacing: -.03em; }
.topbar__crumb { color: var(--ux-ink-400); font-size: 12px; font-weight: 600; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.nav {
  grid-area: nav;
  background: var(--ux-ink-950);
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-2) var(--sp-5);
}
.nav__group {
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  color: var(--ux-ink-600);
}
.nav__item {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ux-ink-400);
  font-size: 12.5px; font-weight: 650;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  user-select: none;
}
.nav__item:hover { background: rgba(255,255,255,.06); color: #fff; }
/* 지금 어디에 있는지 = 파랑. 이 테마에서 파랑은 세 가지 뜻만 갖는다:
   지금 위치 / 1차 동작 / 새 소식. 그 외에는 쓰지 않는다. */
.nav__item.is-active { background: var(--ux-blue); color: #fff; font-weight: 750; }
.nav__item .ico { flex: 0 0 auto; opacity: .9; }
.nav__badge {
  margin-left: auto;
  font-size: 10px; font-weight: 800;
  background: rgba(255,255,255,.14); color: #fff;
  border-radius: 99px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.nav__item.is-active .nav__badge { background: rgba(0,0,0,.25); }

.main {
  grid-area: main;
  overflow: auto;
  padding: var(--sp-5);
}
.main--flush { padding: 0; }

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-control); padding: 0 13px;
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-sm);
  background: var(--ux-surface);
  color: var(--ux-ink-800);
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--ux-surface-soft); border-color: var(--ux-ink-400); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* 버튼은 줄어들지 않는다.
   세로 플렉스(작업 화면 왼쪽 칸) 안에서는 자리가 모자라면 자식이 눌린다 —
   13인치 화면에서 '엑셀에서 붙여넣기' 가 36px → 17px 로 찌그러진다.
   높이가 줄어든 버튼은 누르기도 어렵고 글자도 잘린다. */
.btn { flex-shrink: 0; }

/* 화면당 1차 동작은 하나다. 파랑이 두 개면 어느 쪽이 진짜인지 알 수 없다. */
.btn--primary {
  background: var(--ux-blue); border-color: var(--ux-blue); color: #fff;
}
.btn--primary:hover { background: var(--ux-blue-strong); border-color: var(--ux-blue-strong); }

.btn--danger { color: var(--ux-danger); border-color: #F0C4C0; }
.btn--danger:hover { background: var(--ux-danger-soft); border-color: var(--ux-danger); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ux-ink-600); }
.btn--quiet:hover { background: var(--ux-canvas); border-color: transparent; }
.btn--sm { height: var(--h-control-sm); padding: 0 9px; font-size: 11.5px; }
.btn--icon { width: var(--h-control); padding: 0; }
.btn--icon.btn--sm { width: var(--h-control-sm); }

/* ---------- 입력 ---------- */

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-size: 11px; font-weight: 750; color: var(--ux-ink-600); letter-spacing: -.01em;
}
.input, .select, .textarea {
  height: var(--h-control);
  padding: 0 10px;
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-sm);
  background: var(--ux-surface);
  color: var(--ux-ink-900);
  font-family: inherit; font-size: 13px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ux-blue);
  box-shadow: 0 0 0 3px var(--ux-blue-soft);
}
.input::placeholder { color: var(--ux-ink-400); }

.search {
  position: relative; display: flex; align-items: center;
}
.search .ico {
  position: absolute; left: 10px; color: var(--ux-ink-400); pointer-events: none;
}
.search .input { padding-left: 32px; }

/* ---------- 카드 / 패널 ---------- */

.card {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
}
.card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ux-line);
}
.card__title { font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.card__body { padding: var(--sp-4); }
.card__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ---------- 지표 타일 ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--sp-3); }
.stat {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.stat__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ux-ink-500);
}
.stat__value {
  margin-top: 6px;
  font-size: 26px; font-weight: 850; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.stat__sub { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--ux-ink-400); }
.stat--alert .stat__value { color: var(--ux-danger); }
.stat--alert .stat__label { color: var(--ux-danger); }

/* ---------- 표 ---------- */
/* ERP 의 본체. 한 화면에 최대한 많이, 그러면서 눈이 안 아프게. */

.tablewrap {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  overflow: auto;
}
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }

.tbl thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--ux-surface-soft);
  border-bottom: 1px solid var(--ux-line-strong);
  padding: 9px 10px;
  font-size: 11px; font-weight: 800; color: var(--ux-ink-600);
  letter-spacing: -.01em; text-align: left; white-space: nowrap;
}
.tbl tbody td {
  height: var(--h-row);
  padding: 0 10px;
  border-bottom: 1px solid var(--ux-line);
  font-size: 12.5px;
  white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--ux-blue-soft); }
.tbl tbody tr.is-selected td { background: var(--ux-blue-soft); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 열 정렬 ───────────────────────────────────────────────
   누를 수 있는 열은 눌러보기 전에 눌러진다는 걸 알아야 한다.
   평소엔 화살표를 숨기고 마우스를 올리면 흐리게 보여준다 —
   모든 열에 화살표를 박아두면 머리글이 소음이 된다. */
.tbl th.th--s { padding: 0; }
.thsort {
  display: inline-flex; align-items: center; gap: 3px;
  width: 100%; height: 100%; padding: 9px 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  white-space: nowrap;
}
.tbl th.num .thsort { justify-content: flex-end; }
.thsort:hover { color: var(--ux-ink-800); background: var(--ux-line); }
.thsort__a {
  display: inline-flex; opacity: 0;
  transition: opacity .12s, transform .16s;
}
.thsort:hover .thsort__a { opacity: .4; }
.thsort.is-on { color: var(--ux-blue); }
.thsort.is-on .thsort__a { opacity: 1; }
.thsort.is-on.is-asc .thsort__a { transform: rotate(180deg); }
.tbl th.is-sorted { background: var(--ux-blue-soft); }
.tbl td.wrap { white-space: normal; }
.tbl .muted { color: var(--ux-ink-400); }

.tbl__empty {
  padding: var(--sp-6); text-align: center;
  color: var(--ux-ink-400); font-size: 13px; font-weight: 600;
}

/* 품목 셀 — 이미지 + 이름 + 코드를 한 칸에 */
.cell-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cell-item__img {
  width: 30px; height: 30px; flex: 0 0 auto;
  padding: 3px;
  border-radius: var(--r-xs);
  border: 1px solid var(--ux-line);
  /* cover 는 제품 사진의 가운데만 남겨 빈 상자처럼 보이게 한다. 큰 칸과 같이 contain */
  background: var(--ux-canvas) center/contain no-repeat;
  display: grid; place-items: center; color: var(--ux-ink-400);
}
.cell-item__name { font-weight: 700; letter-spacing: -.01em; }
.cell-item__code { font-size: 10.5px; color: var(--ux-ink-400); font-weight: 650; }

/* ---------- 뱃지 ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 11px; font-weight: 750; letter-spacing: -.01em;
  background: var(--ux-canvas); color: var(--ux-ink-600);
  border: 1px solid var(--ux-line);
}
.badge--in      { background: var(--ux-success-soft); color: var(--ux-success); border-color: #BFE7D6; }
.badge--out     { background: var(--ux-blue-soft);    color: var(--ux-blue);    border-color: var(--ux-blue-line); }
.badge--adjust  { background: var(--ux-warn-soft);    color: var(--ux-warn);    border-color: #F5DDB4; }
.badge--danger  { background: var(--ux-danger-soft);  color: var(--ux-danger);  border-color: #F5C9C5; }

/* 안전재고 미달 등 주의가 필요한 행은 왼쪽에 선으로 표시한다.
   행 전체를 물들이면 표가 읽히지 않는다. */
.tbl tbody tr.is-low td:first-child { box-shadow: inset 3px 0 0 var(--ux-danger); }

/* ---------- 도구 막대 ---------- */

.toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.toolbar__grow { flex: 1; min-width: 0; }
.toolbar__count {
  font-size: 12px; font-weight: 700; color: var(--ux-ink-500);
  font-variant-numeric: tabular-nums;
}

/* ---------- 로그인 ---------- */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.login__art {
  background: var(--ux-ink-950);
  color: #fff;
  padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* 파란 광원 하나. 그라데이션을 여러 개 겹치면 지저분해진다. */
.login__art::after {
  content: '';
  position: absolute; right: -180px; bottom: -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,69,255,.55), transparent 68%);
  filter: blur(18px);
}
.login__headline {
  position: relative; z-index: 1;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 900; line-height: 1.02; letter-spacing: -.055em;
}
.login__headline em { font-style: normal; color: var(--ux-blue); }
.login__meta {
  position: relative; z-index: 1;
  color: var(--ux-ink-500); font-size: 12px; font-weight: 650;
}

.login__panel {
  background: var(--ux-surface);
  display: grid; place-items: center;
  padding: 40px 32px;
}
.login__box { width: 100%; max-width: 336px; }

.login__t { font-size: 25px; font-weight: 900; letter-spacing: -.045em; }
.login__sub {
  margin-top: 5px;
  font-size: 12.5px; font-weight: 650; color: var(--ux-ink-400);
}

/* 오류가 떠도 폼이 아래로 밀리지 않게 자리를 미리 비워둔다.
   로그인은 틀리는 게 정상이라 그때마다 화면이 튀면 안 된다. */
.login__slot { min-height: 34px; margin-top: 14px; }
.login__error {
  display: flex; align-items: center; gap: 7px;
  background: var(--ux-danger-soft); color: var(--ux-danger);
  border: 1px solid #F5C9C5; border-radius: var(--r-sm);
  padding: 8px 11px; font-size: 12px; font-weight: 700;
  animation: login-err .16s cubic-bezier(.2,.9,.3,1.02);
}
@keyframes login-err { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1 } }

.login__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login__form .btn { height: 44px; font-size: 13.5px; margin-top: 2px; }

.field__row { display: flex; align-items: baseline; justify-content: space-between; }
.login__peek {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 11px; font-weight: 750;
  color: var(--ux-blue); padding: 0;
}
.login__peek:hover { text-decoration: underline; }

/* Caps Lock — 비밀번호 오타의 가장 흔한 원인인데 보통 단서가 없다 */
.login__caps {
  display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 11px; font-weight: 700; color: var(--ux-warn);
}

.login__remember {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--ux-ink-500);
  user-select: none;
}
.login__remember input { width: 15px; height: 15px; accent-color: var(--ux-blue); cursor: pointer; }

.login__or {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 16px;
  color: var(--ux-ink-400); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
}
.login__or::before, .login__or::after {
  content: ''; flex: 1; height: 1px; background: var(--ux-line);
}

/* 창고 직원은 PC 가 아니라 폰으로 쓴다.
   PC 앞에서 폰 카메라로 찍으면 바로 스캔 앱이 열린다. */
.login__mobile {
  display: flex; gap: 13px; align-items: center;
  background: var(--ux-canvas);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: 13px;
}
.login__qr {
  flex: 0 0 auto; width: 66px; height: 66px;
  background: #fff; border-radius: 6px; padding: 4px;
  border: 1px solid var(--ux-line);
}
.login__mobile b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ux-ink-950); }
.login__mobile span {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 650; line-height: 1.45; color: var(--ux-ink-400);
}

/* 좁은 화면 — 아트 패널을 위쪽 띠로 접는다.
   2단을 그대로 두면 헤드라인과 폼이 서로를 짓누른다.

   헤드라인은 여기서 감춘다. br 을 없애 한 줄로 만들면
   줄바꿈이 하던 띄어쓰기까지 사라져 "바코드로세고," 로 붙어버린다.
   카피는 데스크톱에서 보여주면 되고, 좁은 화면의 로그인은 빨리 지나가는 화면이다. */
@media (max-width: 900px) {
  .login {
    grid-template-columns: 1fr;
    /* auto 를 주지 않으면 두 행이 화면을 반씩 나눠 가져
       띠 하나가 세로 40% 를 먹는다. */
    grid-template-rows: auto 1fr;
  }
  .login__art {
    padding: 18px 24px;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 20px;
  }
  .login__art::after { right: -260px; bottom: -300px; }
  .login__headline { display: none; }
  .login__meta { font-size: 11.5px; }
  .login__panel { padding: 36px 24px 48px; align-items: start; }
}

/* ---------- 토스트 ---------- */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  background: var(--ux-ink-950); color: #fff;
  padding: 11px 15px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-pop);
  animation: toast-in var(--t-base);
}
.toast--error { background: var(--ux-danger); }
/* 되돌리기가 붙은 토스트 — 버튼이 글자에 붙어 보이면 못 누른다.
   구분선을 하나 긋고 여백을 준다. */
.toast--undo { padding-right: 6px; gap: 12px; }
.toast__u {
  border: 0; border-left: 1px solid rgba(255,255,255,.2);
  background: none; color: #93B0FF;
  font-family: var(--font); font-size: 12.5px; font-weight: 800;
  padding: 4px 12px; cursor: pointer;
}
.toast__u:active { color: #fff; }
.toast--ok .ico { color: #6EE7B7; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 기타 ---------- */

.spinner {
  width: 15px; height: 15px;
  border: 2px solid var(--ux-line-strong);
  border-top-color: var(--ux-blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-pad { padding: 60px; text-align: center; color: var(--ux-ink-400); font-weight: 650; }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
/* 안내 화면의 제목. center-pad 는 전체가 흐린 색이라 제목까지 묻힌다 */
.center-pad__t { color: var(--ux-ink-800); font-size: 15px; font-weight: 850; letter-spacing: -.02em; }
.mb-3 { margin-bottom: var(--sp-3); }


/* =====================================================================
   라벨 출력.
   화면 미리보기와 실제 인쇄가 같은 마크업·같은 치수를 쓴다.
   미리보기 전용 스타일을 따로 만들면 둘이 갈라지고,
   그 사실은 라벨 200장을 뽑은 뒤에 알게 된다.
   ===================================================================== */

.lbl {
  background: #fff;
  color: #000;
  border: 1px solid var(--ux-line-strong);
  padding: 2mm;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font);
  box-sizing: border-box;
}
.lbl__title {
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lbl__mid { display: flex; align-items: flex-end; gap: 2mm; flex: 1; min-height: 0; margin-top: 1mm; }
.lbl__qr { flex: 0 0 auto; }
.lbl__qr svg { display: block; }
.lbl__info { flex: 1; min-width: 0; overflow: hidden; }
.lbl__sub  { font-weight: 700; line-height: 1.3; }
.lbl__foot { font-weight: 650; color: #333; line-height: 1.3; margin-top: .5mm; }
.lbl__code { font-weight: 600; color: #555; letter-spacing: .02em; margin-top: .5mm; }

#printArea { display: none; }

@media print {
  /* 화면 껍데기는 100vh 안에 갇혀 있다(.app{height:100vh;overflow:hidden}).
     html/body 의 height:100% 도 마찬가지다.
     그대로 두면 첫 장 높이에서 잘려 여러 장짜리가 한 장만 나온다.
     종이는 내용만큼 늘어나야 하므로 인쇄에서만 풀어준다. */
  html, body { height: auto !important; overflow: visible !important; }
  .app { height: auto !important; overflow: visible !important; }

  /* 전표 상세 인쇄 — 종이에는 내용만 남긴다 */
  body.printing-doc .side,
  body.printing-doc .topbar,
  body.printing-doc .toolbar,
  body.printing-doc #toasts { display: none !important; }
  body.printing-doc .app { display: block !important; }
  body.printing-doc .main { padding: 0 !important; overflow: visible !important; }
  body.printing-doc .card { box-shadow: none !important; border-color: #999 !important;
                            break-inside: avoid; }
}

@media print {
  /* 인쇄할 때는 앱 화면을 통째로 감추고 라벨만 남긴다.
     사이드바나 툴바가 한 장이라도 섞여 나오면 라벨 용지가 낭비된다. */
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing .app { display: none !important; }
  #printArea { display: block !important; }
  .lbl {
    border: none;
    page-break-after: always;
    break-after: page;
  }
  .lbl:last-child { page-break-after: auto; break-after: auto; }
}


/* 작업 화면은 스스로 전체 높이를 계산한다. 바깥 여백을 줄여야 표가 잘리지 않는다. */
.main--work { padding: var(--sp-3); }


/* =====================================================================
   모달 · 폼

   목록 위에 띄우는 이유: 등록 화면으로 이동했다 돌아오면 스크롤·검색어·선택이
   전부 날아간다. 품목 20개를 연속 등록할 때 그게 제일 짜증난다.
   ===================================================================== */

.modal-back {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(15, 15, 14, .45);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: 24px;
  animation: fade .12s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: var(--ux-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column;
  animation: modal-in .16s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes modal-in { from { transform: translateY(10px) scale(.99); opacity: 0 } to { transform: none; opacity: 1 } }

.modal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--ux-line);
}
.modal__title { font-size: 15px; font-weight: 850; letter-spacing: -.03em; flex: 1; }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--ux-line);
  background: var(--ux-surface-soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.formgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.formsec {
  margin: 20px 0 10px;
  font-size: 11px; font-weight: 850; letter-spacing: .04em;
  color: var(--ux-ink-500);
  padding-bottom: 6px; border-bottom: 1px solid var(--ux-line);
  display: flex; align-items: baseline; gap: 8px;
}
.formsec__hint { font-size: 10.5px; font-weight: 650; letter-spacing: 0; color: var(--ux-ink-400); }
.formsec:first-child { margin-top: 0; }

.formerr {
  margin-top: 14px;
  display: flex; align-items: center; gap: 7px;
  background: var(--ux-danger-soft); color: var(--ux-danger);
  border: 1px solid #F3C7C3; border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 12px; font-weight: 750;
}
.formhint {
  margin-top: 14px;
  display: flex; align-items: center; gap: 7px;
  background: var(--ux-blue-soft); color: var(--ux-blue-strong);
  border: 1px solid var(--ux-blue-line); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 11.5px; font-weight: 700;
}

.chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  margin-right: 14px;
}
.input.num { text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- 전표 상세 ---------- */

.docmeta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 22px;
}
.docmeta__k { font-size: 10.5px; font-weight: 750; color: var(--ux-ink-500); }
.docmeta__v { font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.docmemo {
  margin-top: 16px; padding: 11px 13px;
  background: var(--ux-canvas); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 650; color: var(--ux-ink-700);
  white-space: pre-wrap;
}


/* ---------- 파일 끌어놓기 ---------- */

.dropzone {
  border: 2px dashed var(--ux-line-strong);
  border-radius: var(--r-md);
  padding: 40px 20px;
  text-align: center;
  color: var(--ux-ink-400);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--ux-blue);
  background: var(--ux-blue-soft);
  color: var(--ux-blue);
}
.dropzone.is-busy { opacity: .55; pointer-events: none; }
.dropzone__t { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--ux-ink-800); }
.dropzone__s { margin-top: 5px; font-size: 11.5px; font-weight: 650; }

/* 열 짝짓기 칩 — 파일의 열 하나에 하나씩 */
.mapchip {
  border: 1px solid var(--ux-line);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  min-width: 150px;
  background: var(--ux-surface-soft);
}
.mapchip__h {
  font-size: 10.5px; font-weight: 800; color: var(--ux-ink-600);
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* =====================================================================
   최저가 감시
   ===================================================================== */

/* 이름이 겹치는 줄에서는 검색어가 유일하게 구별되는 정보다.
   그걸 코드처럼 흐리게 두면 다섯 줄이 전부 똑같아 보인다. */
.pw__kw {
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px;
  font-size: 11.5px; font-weight: 750; color: var(--ux-ink-700);
}
.pw__kw svg { color: var(--ux-ink-400); flex: 0 0 auto; }

/* 오래된 값 — 판정보다 먼저 알아야 할 사실이다 */
.pw__stale {
  color: var(--ux-warn) !important;
  font-weight: 750;
}
.pw__stale svg { vertical-align: -1px; }

.pw__exadd { color: var(--ux-danger); border-color: var(--ux-line-strong); }

.pw__thr { display: flex; align-items: center; gap: 8px; }
.pw__thr .input { width: 90px; }
.pw__thr span { font-size: 11.5px; font-weight: 700; color: var(--ux-ink-400); }

/* 임계치를 걸어두면 왜 무너짐이 안 뜨는지 알 수 있어야 한다 */
.pw__thrtag {
  margin-top: 2px;
  font-size: 10px; font-weight: 750; color: var(--ux-ink-400);
  white-space: nowrap;
}


/* =====================================================================
   대시보드 — 지금 손대야 할 것
   ===================================================================== */

.todo { margin-bottom: var(--sp-3); }
.todo__h {
  font-size: 10.5px; font-weight: 850; letter-spacing: .05em;
  color: var(--ux-ink-400); margin-bottom: 8px;
}
.todo__row {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.todo__c {
  position: relative;
  display: block; text-decoration: none;
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-left: 3px solid var(--ux-line-strong);
  border-radius: var(--r-md);
  padding: 13px 34px 13px 15px;
  transition: border-color .12s, transform .12s;
}
.todo__c:hover { transform: translateY(-1px); border-color: var(--ux-line-strong); }
.todo__c--danger { border-left-color: var(--ux-danger); }
.todo__c--warn   { border-left-color: var(--ux-warn); }

.todo__k {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 750; color: var(--ux-ink-500);
}
.todo__v {
  margin-top: 3px;
  font-size: 27px; font-weight: 900; letter-spacing: -.045em;
  color: var(--ux-ink-950); font-variant-numeric: tabular-nums;
}
.todo__v span { font-size: 13px; font-weight: 800; margin-left: 2px; color: var(--ux-ink-400); }
.todo__c--danger .todo__v { color: var(--ux-danger); }
.todo__s { margin-top: 2px; font-size: 11px; font-weight: 650; color: var(--ux-ink-400); }
.todo__go {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ux-ink-400);
}
.todo__c:hover .todo__go { color: var(--ux-blue); }

/* 손댈 게 없을 때는 그 사실만 한 줄로 */
.todo--clear {
  display: flex; align-items: center; gap: 10px;
  background: var(--ux-success-soft, #E8F6F0);
  border: 1px solid var(--ux-line); border-radius: var(--r-md);
  padding: 12px 15px; color: var(--ux-success);
}
.todo--clear b { font-size: 13px; font-weight: 800; }
.todo--clear span {
  display: block; margin-top: 1px;
  font-size: 11.5px; font-weight: 650; color: var(--ux-ink-500);
}

/* ---------- 재고 자산 ---------- */

/* .dash 는 2열(2.2fr/1fr) 격자다. 그냥 두면 히어로가 좁은 오른쪽 칸에 들어가
   12자리 금액이 카드를 넘쳐 잘린다. 이 둘은 한 줄을 다 쓴다. */
.todo, .hero--asset { grid-column: 1 / -1; }

.hero--asset { display: block; padding: 24px 28px; }
.hero__top {
  position: relative; z-index: 1;
  display: grid; gap: 30px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}
@media (max-width: 900px) { .hero__top { grid-template-columns: 1fr; gap: 20px; } }

.hero--asset .hero__value {
  font-size: clamp(40px, 4.6vw, 60px);
  margin: 8px 0 0;
}
/* 정확한 값도 버리지 않는다 — 크기는 위에서, 검증은 여기서 */
.hero__exact {
  margin-top: 5px;
  font-size: 11.5px; font-weight: 650; color: var(--ux-ink-500);
  font-variant-numeric: tabular-nums;
}
.hero__basis {
  font-size: 10px; font-weight: 750; letter-spacing: 0;
  color: var(--ux-ink-500); background: rgba(255,255,255,.08);
  border-radius: 4px; padding: 2px 6px; margin-left: 4px;
}

/* 총액보다 이쪽이 중요하다. 재고는 많은 게 좋은 게 아니라 도는 게 좋다. */
.tied {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.tied__k { font-size: 11px; font-weight: 750; color: var(--ux-ink-400); }
.tied__v {
  display: flex; align-items: baseline; gap: 4px;
  margin: 3px 0 10px;
  font-size: 30px; font-weight: 900; letter-spacing: -.045em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.tied__v span { font-size: 14px; font-weight: 800; color: var(--ux-ink-400); }
.tied__v em {
  margin-left: auto; font-style: normal;
  font-size: 15px; font-weight: 850; color: #F59E0B; letter-spacing: -.02em;
}
.tied__bar {
  height: 7px; border-radius: 99px;
  background: rgba(255,255,255,.14); overflow: hidden;
}
.tied__bar span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #F59E0B, #EF4444);
}
.tied__t {
  margin-top: 8px;
  font-size: 11.5px; font-weight: 650; color: var(--ux-ink-400);
  line-height: 1.5;
}

.hero__cell__v.is-dim { color: var(--ux-ink-500); font-weight: 700; }


/* 대화상자 본문 — 기본 confirm 대신 쓰는 우리 상자 */
.dlg__msg { font-size: 13.5px; font-weight: 650; line-height: 1.6; color: var(--ux-ink-700); }
.dlg__msg b { font-weight: 850; color: var(--ux-ink-950); }
.dlg__ex {
  margin-top: 9px; padding: 9px 11px;
  background: var(--ux-canvas); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; color: var(--ux-ink-500);
  font-variant-numeric: tabular-nums; line-height: 1.6;
}
.dlg__ta {
  width: 100%; margin-top: 12px; resize: vertical;
  font-family: var(--font); font-size: 13px; font-weight: 650; line-height: 1.6;
  padding: 11px 13px; min-height: 150px;
}


/* =====================================================================
   레이아웃 기반 라벨

   좌표가 mm 이므로 CSS 도 mm 를 그대로 쓴다.
   화면에서 자로 재면 실제 인쇄물과 같은 크기가 나와야 한다 —
   그래야 편집기에서 옮긴 1mm 가 프린터에서도 1mm 다.
   ===================================================================== */
.lbl--layout {
  position: relative;
  background: #fff;
  border: 1px solid var(--ux-line);
  overflow: hidden;
  color: #000;
}
.lel { position: absolute; }
.lel--t { white-space: pre-wrap; word-break: break-all; }
.lel--bc { background: repeating-linear-gradient(90deg, #000 0 .4mm, #fff .4mm 1mm); }
.lbl__blank {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3mm; color: #999; font-family: var(--font);
}


/* =====================================================================
   라벨 템플릿 편집기
   ===================================================================== */

.lab__tplbtns { display: flex; gap: 6px; margin-top: 8px; }
.lab__tplbtns .btn { flex: 1; }

.tpe { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--sp-4); }

.tpe__bar {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ux-line); margin-bottom: 12px;
}
.tpe__zoom {
  font-size: 11.5px; font-weight: 750; color: var(--ux-ink-500);
  min-width: 42px; text-align: center; font-variant-numeric: tabular-nums;
}

/* 작업대 — 라벨이 실제 크기의 배수로 놓인다 */
.tpe__stage {
  background: var(--ux-canvas);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  min-height: 300px; max-height: 46vh; overflow: auto;
  display: grid; place-items: center;
  padding: 22px;
}
.tpe__label {
  position: relative; background: #fff; color: #000;
  box-shadow: 0 2px 14px rgba(0,0,0,.14);
  outline: 1px solid var(--ux-line-strong);
  flex: 0 0 auto;
}
.tpe__ruler {
  grid-column: 1; margin-top: 10px;
  font-size: 11px; font-weight: 750; color: var(--ux-ink-400);
  font-variant-numeric: tabular-nums;
}
.tpe__blank {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; color: #aaa; font-family: var(--font);
}

/* 요소 — 끌어서 옮긴다 */
.tpe__el {
  position: absolute; cursor: grab;
  outline: 1px dashed rgba(33,69,255,.35);
  touch-action: none;
}
.tpe__el:active { cursor: grabbing; }
.tpe__el.is-sel { outline: 2px solid var(--ux-blue); z-index: 2; }
.tpe__el--t {
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  white-space: pre-wrap; word-break: break-all;
}
.tpe__el--bc { background: repeating-linear-gradient(90deg, #000 0 1.5px, #fff 1.5px 3.5px); }
.tpe__qr { pointer-events: none; }

.tpe__tip {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11.5px; font-weight: 650; color: var(--ux-ink-400);
}
.tpe__tip b { color: var(--ux-ink-700); font-weight: 800; }

/* 오른쪽 — 설정과 요소 목록 */
.tpe__right { display: flex; flex-direction: column; min-width: 0; }
.tpe__def {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--ux-ink-600);
}
.tpe__def input { width: 15px; height: 15px; accent-color: var(--ux-blue); }
.tpe__sect {
  margin: 16px 0 8px;
  font-size: 10.5px; font-weight: 850; letter-spacing: .05em; color: var(--ux-ink-400);
}
.tpe__list {
  border: 1px solid var(--ux-line); border-radius: var(--r-sm);
  max-height: 150px; overflow-y: auto;
}
.tpe__row {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: none; border: 0;
  border-bottom: 1px solid var(--ux-line); text-align: left; cursor: pointer;
}
.tpe__row:last-child { border-bottom: 0; }
.tpe__row:hover { background: var(--ux-canvas); }
.tpe__row.is-sel { background: var(--ux-blue-soft); }
.tpe__type {
  flex: 0 0 auto; font-size: 10px; font-weight: 800;
  background: var(--ux-canvas); border-radius: 4px; padding: 2px 6px; color: var(--ux-ink-600);
}
.tpe__row.is-sel .tpe__type { background: #fff; }
.tpe__f {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ux-ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpe__xy {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ux-ink-400);
  font-variant-numeric: tabular-nums;
}
.tpe__none {
  padding: 16px 12px; text-align: center;
  font-size: 12px; font-weight: 650; color: var(--ux-ink-400);
}
.tpe__props { margin-top: 12px; }
.tpe__props .formgrid { grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 900px) {
  .tpe { grid-template-columns: 1fr; }
}


/* =====================================================================
   로트 · 유통기한
   ===================================================================== */

.lot {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 5px 9px;
  background: none; border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font); font-size: 12px; text-align: left;
}
.lot:hover { border-color: var(--ux-blue); }
.lot--empty {
  color: var(--ux-ink-400); font-weight: 700;
  border-style: dashed;
}
.lot--set b { font-weight: 800; color: var(--ux-ink-900); font-variant-numeric: tabular-nums; }
.lot__exp {
  margin-left: auto; font-size: 11px; font-weight: 750; color: var(--ux-ink-400);
  font-variant-numeric: tabular-nums;
}
/* 지난 것과 임박한 것만 칠한다. 나머지는 날짜일 뿐이다. */
.lot__exp.is-near { color: var(--ux-warn); }
.lot__exp.is-over { color: var(--ux-danger); font-weight: 850; }

/* 로트 고르기 */
.lotnew {
  background: var(--ux-canvas); border: 1px solid var(--ux-line);
  border-radius: var(--r-md); padding: 13px;
}
.lotnew__h {
  font-size: 10.5px; font-weight: 850; letter-spacing: .05em;
  color: var(--ux-ink-400); margin-bottom: 9px;
}
.lotdiv {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 8px;
  font-size: 10.5px; font-weight: 850; letter-spacing: .05em; color: var(--ux-ink-400);
}
.lotdiv::before, .lotdiv::after { content: ''; flex: 1; height: 1px; background: var(--ux-line); }

.lotlist { max-height: 300px; overflow-y: auto; border: 1px solid var(--ux-line); border-radius: var(--r-sm); }
.lotrow {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; background: none; border: 0;
  border-bottom: 1px solid var(--ux-line); cursor: pointer;
}
.lotrow:last-child { border-bottom: 0; }
.lotrow:hover { background: var(--ux-canvas); }
.lotrow__n { font-size: 13.5px; font-weight: 800; color: var(--ux-ink-950); font-variant-numeric: tabular-nums; }
.lotrow__m { margin-top: 2px; font-size: 11.5px; font-weight: 650; color: var(--ux-ink-500); }
.lotrow__m b { font-weight: 800; color: var(--ux-ink-700); }
.lotrow__m b.is-near { color: var(--ux-warn); }
.lotrow__m b.is-over { color: var(--ux-danger); }
.lotrow__q { font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; }
.lotrow__q.is-zero { color: var(--ux-ink-400); font-weight: 700; }
.lotempty {
  padding: 26px 16px; text-align: center; color: var(--ux-ink-400);
  font-size: 12.5px; font-weight: 650;
}

.pdeal { display: flex; align-items: baseline; gap: 7px; }
.pdeal b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pdeal span { font-size: 11.5px; font-weight: 650; color: var(--ux-ink-500); }
.pdeal span.dim { color: var(--ux-ink-400); }

/* 이름이 같은 품목을 가르는 옵션. 코드보다 진하게 — 사람이 읽는 건 이쪽이다. */
.icell__o {
  margin-top: 1px;
  font-size: 11.5px; font-weight: 750; color: var(--ux-ink-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 방향 선택 — 조정에서 늘리기/줄이기 */
.seg { display: inline-flex; border: 1px solid var(--ux-line); border-radius: 8px; overflow: hidden; }
.seg__b {
  border: 0; background: var(--ux-surface); color: var(--ux-ink-600);
  font: inherit; font-weight: 700; font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.seg__b + .seg__b { border-left: 1px solid var(--ux-line); }
/* ⚠ 여기가 var(--ux-accent) 였다. **그런 토큰은 없다** (--ux-blue 다).
   CSS 변수는 없어도 오류가 안 난다 — background 선언만 통째로 무효가 되고
   color:#fff 는 그대로 살아서 **흰 바탕에 흰 글자**가 됐다.
   재고 조정의 늘리기/줄이기, 업무의 내 업무/보낸 것, 자료함의 목록/격자가
   전부 '고른 것이 안 보이는' 상태였다. */
.seg__b.is-on { background: var(--ux-ink-950); color: #fff; }
.work__warn { color: var(--ux-warn, #b45309); font-size: 12px; font-weight: 700; display: inline-flex;
              align-items: center; gap: 4px; }

/* 음수 칸 표시 — 위치 트리에서 유일하게 붉은 것이라야 눈에 걸린다 */
.locneg { text-decoration: none; margin-left: 6px; display: inline-flex; align-items: center; gap: 3px; }
.locneg:hover { filter: brightness(1.08); }

/* 음수 재고 칸 — 숫자만 봐서는 부호를 놓친다 */
.stock--neg { color: var(--ux-danger); }
tr.is-neg td { background: var(--ux-danger-soft); }

/* 거래 건수 — 눌러서 그 거래처의 전표로 간다 */
.pdeal--link { text-decoration: none; color: inherit; display: inline-flex; gap: 6px; align-items: baseline; }
.pdeal--link:hover b { text-decoration: underline; }

/* 금액을 볼 수 없는 사람의 대시보드 요약.
   자산 카드 자리를 그대로 비우면 화면이 휑하고,
   0원 으로 채우면 거짓말이 된다 — 자기 일에 필요한 숫자만 남긴다. */
.statrow { display: flex; gap: 34px; flex-wrap: wrap; }
.stat__k { font-size: 11.5px; font-weight: 700; color: var(--ux-ink-500); }
.stat__v { font-size: 26px; font-weight: 850; letter-spacing: -.04em;
           font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat__v span { font-size: 13px; font-weight: 750; color: var(--ux-ink-400); margin-left: 3px; }

/* 위치 고르기 — 60칸을 눈으로 훑는 대신 쳐서 좁힌다 */
.loc-wrap { min-width: 190px; }
.loc-wrap .locpick { width: 100%; height: var(--h-control); }
.loc-wrap .ac { max-height: 320px; overflow-y: auto; }
.ac__q { font-size: 11.5px; font-weight: 800; color: var(--ux-ink-500);
         font-variant-numeric: tabular-nums; }

/* 감사 로그 조건 줄 — 좁은 화면에서는 접혀 내려간다 */
.auditbar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.input--sm { height: var(--h-control-sm); font-size: 12px; padding: 0 8px; }

/* 기간 고르기 — 목록 위 한 줄. 자주 쓰는 범위는 버튼으로 */
.dlrange { display: flex; align-items: center; gap: 5px; }
.dlrange__d { color: var(--ux-ink-400); font-size: 12px; font-weight: 700; }
.dlrange input[type=date] { width: auto; }


/* 목록이 잘렸다는 사실은 개수 옆에 붙어야 읽힌다. 따로 띄우면 안 본다. */
.lab__cut {
  font-size: 11px; font-weight: 700; color: var(--ux-warn, #b45309);
  margin-left: 6px;
}

/* 툴바 옆 한 마디. 설명 한 줄 때문에 블록을 하나 더 쌓지 않는다. */
.toolbar__note {
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
  margin-left: 8px;
}

/* =====================================================================
   거래처 상세

   상자 다섯 개(뒤로가기 줄 · 이름 카드 · 통계 4개)가 따로 떠 있어 어수선했다.
   하나의 판으로 묶고 안에서 줄을 나눈다.
   ===================================================================== */
.pdet { display: flex; flex-direction: column; gap: var(--sp-3); }

.pdet__card {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.pdet__top {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 20px;
}
.pdet__back {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  color: var(--ux-ink-400);
}
.pdet__back:hover { background: var(--ux-canvas); color: var(--ux-ink-700); }
.pdet__ico {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--ux-blue-soft); color: var(--ux-blue);
  display: grid; place-items: center;
}
.pdet__n {
  font-size: 18px; font-weight: 850; letter-spacing: -.02em;
  color: var(--ux-ink-950);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.pdet__t {
  margin-top: 3px;
  font-size: 12px; font-weight: 650; color: var(--ux-ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 통계는 같은 판 안에서 선으로만 나눈다 */
.pdet__sum {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ux-line);
  background: var(--ux-surface-soft);
}
.pstat { padding: 14px 20px; border-left: 1px solid var(--ux-line); }
.pstat:first-child { border-left: none; }
.pstat__k {
  font-size: 10.5px; font-weight: 850; letter-spacing: .04em;
  color: var(--ux-ink-400);
}
.pstat__v {
  margin-top: 6px;
  font-size: 24px; font-weight: 850; letter-spacing: -.03em;
  color: var(--ux-ink-950); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* 날짜는 크게 읽을 값이 아니다 — 수량과 같은 크기면 화면에서 제일 커진다 */
.pdet__sum .pstat__v--sm { font-size: 16px; letter-spacing: -.02em; padding-top: 5px; }
.pstat__v span {
  font-size: 12px; font-weight: 750; color: var(--ux-ink-400); margin-left: 3px;
}
.pstat__s {
  margin-top: 4px; font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
}

.pdet__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-3); align-items: start;
}

/* 많이 오간 품목 */
.ptop { padding: 6px 0; }
.ptop__r {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ux-line);
}
.ptop__r:last-child { border-bottom: none; }
.ptop__r:hover { background: var(--ux-blue-soft); }
.ptop__img {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--ux-canvas); color: var(--ux-ink-400);
  display: grid; place-items: center;
}
.ptop__img img { width: 100%; height: 100%; object-fit: cover; }
.ptop__n {
  font-size: 12.5px; font-weight: 800; color: var(--ux-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptop__s {
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptop__bar {
  margin-top: 5px; height: 3px; border-radius: 2px;
  background: var(--ux-line);
}
.ptop__bar span {
  display: block; height: 100%; border-radius: 2px;
  background: var(--ux-blue);
}
.ptop__q { text-align: right; flex: 0 0 auto; }
.ptop__q b {
  display: block; font-size: 14px; font-weight: 850;
  color: var(--ux-ink-950); font-variant-numeric: tabular-nums;
}
.ptop__q span { font-size: 10.5px; font-weight: 700; color: var(--ux-ink-400); }

@media (max-width: 1200px) {
  .pdet__sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstat:nth-child(3) { border-left: none; }
  .pdet__grid { grid-template-columns: minmax(0, 1fr); }
}

.tbl tbody tr.is-click { cursor: pointer; }

@media (max-width: 1200px) {
  .pdet__sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdet__grid { grid-template-columns: minmax(0, 1fr); }
}

.pdet__more {
  padding: 9px 16px; border-top: 1px solid var(--ux-line);
  font-size: 11.5px; font-weight: 650; color: var(--ux-ink-400);
}
.pdet__more a { color: var(--ux-blue); font-weight: 750; }

/* 전표의 거래처 칸 — 이름은 누르면 그 거래처로, 없으면 지금 붙인다 */
.docmeta__lk { color: var(--ux-blue); font-weight: 800; }
.docmeta__lk:hover { text-decoration: underline; }
.docmeta__b {
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-size: 11px; font-weight: 700; color: var(--ux-ink-400);
}
.docmeta__b:hover { color: var(--ux-ink-700); }
.docmeta__b--on {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--ux-blue-soft); color: var(--ux-blue); font-weight: 800;
}
.ac__i.is-empty { color: var(--ux-ink-400); font-weight: 650; cursor: default; }

/* 명세서 미리보기에서 단가를 그 자리에 채운다 (인쇄본에는 글자로 나간다) */
.stmt__in {
  width: 88px; text-align: right;
  padding: 3px 6px;
  border: 1px solid var(--ux-line-strong); border-radius: 4px;
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--ux-surface);
}
.stmt__in:focus { outline: 2px solid var(--ux-blue); outline-offset: -1px; }
.stmt__in::-webkit-outer-spin-button,
.stmt__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 이름 자리를 눌러 비밀번호를 바꾼다 */
.whoami {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 3px 6px;
  border-radius: var(--r-sm); color: inherit; font: inherit;
}
.whoami:hover { background: var(--ux-line); }

/* =====================================================================
   마감 손질 1 — 상태를 눈으로 알 수 있게

   여기까지는 "동작하는가" 를 맞춰 왔다. 이제 "제대로 만든 것처럼 보이는가" 다.
   화면을 다시 보니 세 가지가 싸구려로 읽혔다.
   ===================================================================== */

/* ── 비활성 버튼 ───────────────────────────────────────────────
   opacity 만 낮추면 **파란 버튼이 바랜 파랑**이 된다.
   눌리지 않는 게 아니라 고장 난 것처럼 보인다.
   못 누르는 것은 색을 빼서 확실히 물러나게 한다. */
.btn:disabled {
  opacity: 1;
  background: var(--ux-canvas);
  border-color: var(--ux-line);
  color: var(--ux-ink-400);
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover { background: var(--ux-canvas); border-color: var(--ux-line); }
.btn--primary:disabled svg { opacity: .6; }

/* ── 주 버튼에 무게를 준다 ──────────────────────────────────────
   가장 중요한 버튼과 그냥 버튼이 테두리 하나 차이였다. */
.btn--primary {
  box-shadow: 0 1px 2px rgba(33, 69, 255, .18), 0 4px 12px rgba(33, 69, 255, .16);
}
.btn--primary:hover {
  box-shadow: 0 2px 4px rgba(33, 69, 255, .22), 0 8px 20px rgba(33, 69, 255, .22);
}
.btn--primary:active { box-shadow: 0 1px 2px rgba(33, 69, 255, .18); }

/* ── 포커스 ───────────────────────────────────────────────────
   키보드로 다니는 사람에게 지금 어디인지 보여야 한다.
   마우스로 눌렀을 때는 안 나오게 focus-visible 을 쓴다. */
.btn:focus-visible,
.chip:focus-visible,
.thsort:focus-visible,
.m-tab:focus-visible {
  outline: 2px solid var(--ux-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.input:focus-visible, .select:focus-visible { outline: none; }

/* ── 빈 상태 ───────────────────────────────────────────────────
   아이콘 하나에 회색 글씨 한 줄이 넓은 흰 판에 떠 있었다.
   아이콘을 자리에 앉히고(원형 바탕), 글자에 위계를 준다. */
.emptyq {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 46px 20px; text-align: center;
}
.emptyq__i {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ux-canvas); color: var(--ux-ink-400);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.emptyq__t {
  font-size: 14px; font-weight: 800; color: var(--ux-ink-700);
  letter-spacing: -.01em;
}
.emptyq__s {
  margin-top: 5px; font-size: 12px; font-weight: 650; color: var(--ux-ink-400);
  line-height: 1.6;
}

/* ── 줄이 나타날 때 ────────────────────────────────────────────
   찍은 것이 툭 튀어나오면 몇 개가 들어갔는지 눈이 못 따라간다.
   아주 짧게 올라오면 "방금 이게 들어갔다" 가 읽힌다. */
@keyframes rowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.work__table tbody tr { animation: rowIn .16s ease-out; }

/* 움직임을 원치 않는 사람에게는 끈다 */
@media (prefers-reduced-motion: reduce) {
  .work__table tbody tr { animation: none; }
  .netbar.is-gone { transition: none; }
}

/* =====================================================================
   자료함

   표를 걷어냈다. 파일은 '열이 여섯 개인 표' 가 아니라 **하나하나가 물건**이다 —
   이름이 크고 나머지는 그 아래 한 줄이면 된다.
   열로 나누면 열한 줄 × 네 칸이 다 비슷한 회색이라 무엇도 안 읽힌다.
   ===================================================================== */
.fz {
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  gap: var(--sp-3); height: 100%; min-height: 0;
}

/* ── 폴더 ── */
.fz__side {
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  padding: 8px; overflow: auto;
  box-shadow: var(--shadow-xs);
}
.fz__sh {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 8px;
  font-size: 10.5px; font-weight: 850; letter-spacing: .04em; color: var(--ux-ink-400);
}
.fz__f {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); text-align: left;
  font-size: 12.5px; font-weight: 700; color: var(--ux-ink-700);
  transition: background var(--t-fast), color var(--t-fast);
}
.fz__f svg { flex: 0 0 auto; opacity: .6; }
.fz__f:hover { background: var(--ux-canvas); }
.fz__f.is-on { background: var(--ux-blue-soft); color: var(--ux-blue); font-weight: 800; }
.fz__f.is-on svg { opacity: 1; }
.fz__fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz__fc {
  font-size: 11px; font-weight: 750; color: var(--ux-ink-400);
  font-variant-numeric: tabular-nums;
}
.fz__f.is-on .fz__fc { color: var(--ux-blue); }
.fz__total {
  margin-top: 8px; padding: 10px 9px 4px; border-top: 1px solid var(--ux-line);
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
}

/* ── 본문 ── */
.fz__main { display: flex; flex-direction: column; min-height: 0; }
.fz__drop { position: relative; flex: 1; min-height: 0; display: flex; }
.fz__scroll {
  flex: 1; overflow: auto; min-height: 0;
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.fz__wait { padding: 40px; text-align: center; color: var(--ux-ink-400);
  font-size: 13px; font-weight: 650; }

/* 목록 한 줄 */
.fz__row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ux-line);
}
.fz__row:last-child { border-bottom: none; }
.fz__row:hover { background: var(--ux-blue-soft); }
.fz__thumb {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-sm); overflow: hidden;
  display: grid; place-items: center;
}
.fz__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fz__meta { min-width: 0; flex: 1; }
.fz__n {
  font-size: 13px; font-weight: 800; color: var(--ux-ink-900);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fz__sub {
  margin-top: 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
}
.fz__sub > span { white-space: nowrap; }
.fz__tag {
  padding: 1px 7px; border-radius: 999px;
  background: var(--ux-canvas); color: var(--ux-ink-500); font-weight: 750;
}
.fz__memo {
  margin-top: 3px; font-size: 11.5px; font-weight: 650; color: var(--ux-ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 줄마다 버튼 세 개를 늘 띄우면 목록이 버튼밭이 된다.
   자주 쓰는 내려받기만 남기고 나머지는 그 줄에 올렸을 때 나온다.
   ⚠ opacity 만 0 으로 두면 **자리는 그대로 차지한다** —
      카드 위에 버튼 하나만 보이는데 상자는 셋 폭이라 흰 띠가 떠 있었다.
      안 보일 때는 자리도 없어야 한다. */
.fz__act { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.fz__hover { display: none; }
.fz__row:hover .fz__hover, .fz__card:hover .fz__hover { display: inline-flex; }
.fz__hover:focus-visible { display: inline-flex; }

/* 확장자는 글자로. PDF 와 HWP 를 같은 문서 아이콘으로 그리면 구분이 안 된다. */
.fz__ext {
  font-size: 10px; font-weight: 850; letter-spacing: -.02em;
}
.fz__ic--img { color: var(--ux-blue); background: var(--ux-blue-soft); }
.fz__ic--sheet { color: #0F7B4F; background: #E7F5EE; }
.fz__ic--doc { color: #B4530A; background: #FDF0E4; }
.fz__ic--zip { color: #6B4EA8; background: #F0EBFA; }
.fz__ic--etc { color: var(--ux-ink-400); background: var(--ux-canvas); }

/* ── 격자 — 사진은 봐야 고른다 ── */
.fz__scroll.is-grid #fBody {
  display: grid; gap: 12px; padding: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.fz__card {
  position: relative;
  border: 1px solid var(--ux-line); border-radius: var(--r-md);
  overflow: hidden; background: var(--ux-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.fz__card:hover { border-color: var(--ux-line-strong); box-shadow: var(--shadow-sm); }
.fz__cimg {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--ux-canvas); overflow: hidden;
}
.fz__cimg img { width: 100%; height: 100%; object-fit: cover; }
.fz__cimg .fz__ext { font-size: 17px; }
.fz__cbody { padding: 9px 11px 11px; }
.fz__card .fz__sub { gap: 7px; }
.fz__card .fz__act { position: absolute; top: 7px; right: 7px; }
.fz__card .fz__act .btn {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(4px);
}
.fz__card .fz__act .btn:hover { background: #fff; }

/* 끌어다 놓는 중 */
.fz__over {
  position: absolute; inset: 0; display: none;
  place-items: center; text-align: center;
  background: var(--ux-blue-soft);
  border: 2px dashed var(--ux-blue); border-radius: var(--r-md);
  color: var(--ux-blue); font-size: 13px; font-weight: 800;
  pointer-events: none; z-index: 5;
}
.fz__drop.is-over .fz__over { display: grid; }

@media (max-width: 1000px) {
  .fz { grid-template-columns: minmax(0, 1fr); }
  .fz__side { display: flex; gap: 6px; overflow-x: auto; }
  .fz__sh, .fz__total { display: none; }
  .fz__f { width: auto; white-space: nowrap; }
}

/* ── 첨부 ─────────────────────────────────────────────────────
   품목·전표·거래처에 붙은 파일. 자료함과 같은 표를 쓴다.
   상세 화면의 곁다리이므로 목록보다 조용해야 한다 — 카드 하나에 얇은 줄들. */
#atCard { position: relative; }
.at { padding: 2px 0; }
.at__i {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ux-line);
}
.at__i:last-child { border-bottom: none; }
.at__i:hover { background: var(--ux-blue-soft); }
.at__t {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--r-sm); overflow: hidden;
  display: grid; place-items: center;
  background: var(--ux-canvas); color: var(--ux-ink-400);
}
.at__t img { width: 100%; height: 100%; object-fit: cover; }
.at__n {
  font-size: 12.5px; font-weight: 800; color: var(--ux-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.at__m { font-size: 11px; font-weight: 650; color: var(--ux-ink-400); margin-top: 2px; }
.at__empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 22px 16px; color: var(--ux-ink-400);
  font-size: 12px; font-weight: 650;
}
.at__over {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center;
  background: var(--ux-blue-soft);
  border: 2px dashed var(--ux-blue); border-radius: var(--r-md);
  color: var(--ux-blue); font-size: 12.5px; font-weight: 800;
  pointer-events: none; z-index: 5;
}
#atCard.is-over .at__over { display: grid; }

/* 자료함에서 '어디에 쓰이는 파일인지' 를 보여준다 */
.fz__link {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--ux-blue-soft); color: var(--ux-blue); font-weight: 750;
}
.fz__link:hover { filter: brightness(.96); }
.fz__sep { height: 1px; background: var(--ux-line); margin: 8px 6px; }

/* 보관 한도 — 막히기 전에 보여야 한다 */
.fz__quota { padding: 4px 9px 8px; }
.fz__qbar {
  height: 4px; border-radius: 2px; background: var(--ux-line); overflow: hidden;
}
.fz__qbar span { display: block; height: 100%; background: var(--ux-blue); border-radius: 2px; }
.fz__quota.is-warn .fz__qbar span { background: var(--ux-warn, #B45309); }
.fz__qt { margin-top: 5px; font-size: 10.5px; font-weight: 700; color: var(--ux-ink-400); }
.fz__quota.is-warn .fz__qt { color: var(--ux-warn, #B45309); }

/* 사용자별 권한 조정 — 역할과 다른 것만 눈에 띄어야 한다 */
.perms {
  max-height: 52vh; overflow: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: var(--sp-3);
}
.permg__h {
  font-size: 10.5px; font-weight: 850; letter-spacing: .04em;
  color: var(--ux-ink-400); padding: 0 2px 6px;
}
.permr {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.permr:hover { background: var(--ux-canvas); }
.permr__l { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ux-ink-800); }
.permr__b { font-size: 10px; font-weight: 700; color: var(--ux-ink-400); }
.permr__d {
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: var(--ux-blue-soft); color: var(--ux-blue);
}
/* 역할과 다른 줄만 표시가 남는다 — 나머지는 조용히 */
.permr.is-diff { background: var(--ux-blue-soft); }
.permr.is-diff .permr__l { color: var(--ux-ink-950); font-weight: 800; }
@media (max-width: 700px) { .perms { grid-template-columns: minmax(0, 1fr); } }

/* 창고 범위 — 제한을 걸면 그 사실이 분명히 보여야 한다 */
.permwh {
  margin-top: var(--sp-3); padding: 12px 14px;
  background: var(--ux-surface-soft);
  border: 1px solid var(--ux-line); border-radius: var(--r-md);
}
.permwh__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.permwh__n { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--ux-ink-400); }
.permwh__n.is-limited { color: var(--ux-warn, #B45309); }

/* ── 메모 ─────────────────────────────────────────────────────
   물건 옆에 붙는 말. 첨부와 같은 무게로, 상세 화면의 곁다리답게 조용히. */
.note__new {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--ux-line);
}
.note__new textarea {
  flex: 1; resize: none; overflow: hidden;
  border: 1px solid var(--ux-line-strong); border-radius: var(--r-sm);
  padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.5;
  background: var(--ux-surface); color: var(--ux-ink-900);
  font-family: var(--font);
}
.note__new textarea:focus { outline: 2px solid var(--ux-blue); outline-offset: -1px; }
.note__i { padding: 11px 16px; border-bottom: 1px solid var(--ux-line); }
.note__i:last-child { border-bottom: none; }
/* 중요 표시한 것만 눈에 띈다 — 전부 강조하면 아무것도 안 보인다 */
.note__i.is-pin { background: var(--ux-blue-soft); }
.note__b {
  font-size: 12.5px; font-weight: 650; line-height: 1.6; color: var(--ux-ink-900);
  white-space: pre-wrap; word-break: break-word;
}
.note__m {
  margin-top: 6px; display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 650; color: var(--ux-ink-400);
}
.note__pin {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ux-blue); font-weight: 800;
}
.note__a {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-size: 10.5px; font-weight: 750; color: var(--ux-ink-400);
}
.note__a:hover { color: var(--ux-ink-800); text-decoration: underline; }
.note__a.is-del:hover { color: var(--ux-danger); }
.note__empty {
  padding: 20px 16px; text-align: center;
  font-size: 12px; font-weight: 650; color: var(--ux-ink-400);
}

/* 원장이 전표와 같으면 한 줄로 접는다 —
   스물여덟 줄을 두 번 보게 하지 않는다 */
.ledsame {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  font-size: 12px; font-weight: 700; color: var(--ux-ink-500);
}
.ledsame svg { color: var(--ux-success); }
#ledBody .mvr:last-child { border-bottom: none; }

/* ── 업무 ─────────────────────────────────────────────────────
   할 일 목록은 체크박스가 주인공이다. 끝낸 것은 물러난다. */
.tk { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; min-height: 0; }
#tkList { overflow: auto; background: var(--ux-surface);
  border: 1px solid var(--ux-line); border-radius: var(--r-md); box-shadow: var(--shadow-xs); }

.tkr {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--ux-line);
}
.tkr:last-child { border-bottom: none; }
.tkr:hover { background: var(--ux-surface-soft); }

.tkr__chk {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--ux-line-strong);
  background: var(--ux-surface); cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.tkr__chk:hover { border-color: var(--ux-blue); }
.tkr.is-done .tkr__chk { background: var(--ux-success); border-color: var(--ux-success); }

.tkr__mid { flex: 1; min-width: 0; }
.tkr__t {
  font-size: 13.5px; font-weight: 800; color: var(--ux-ink-900);
  letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
/* 끝낸 것은 조용해진다 — 지우지 않는 이유는 '했다' 는 기록이 필요해서다 */
.tkr.is-done .tkr__t { color: var(--ux-ink-400); text-decoration: line-through; }
.tkr.is-done { opacity: .72; }

.tkr__pri {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--ux-danger-soft); color: var(--ux-danger);
  font-size: 10px; font-weight: 850;
}
.tkr__sub {
  margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
}
.tkr__who {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--ux-blue-soft); color: var(--ux-blue); font-weight: 800;
}
.tkr__who.is-none { background: var(--ux-canvas); color: var(--ux-ink-400); font-weight: 700; }
.tkr__link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ux-ink-500); font-weight: 750;
}
.tkr__link:hover { color: var(--ux-blue); }
/* 기한이 지난 것은 눈에 띄어야 한다 — 안 그러면 기한을 적을 이유가 없다 */
.tkr.is-late .tkr__due { color: var(--ux-danger); font-weight: 850; }
.tkr__done { color: var(--ux-success); font-weight: 750; }
.tkr__body {
  margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--ux-ink-600);
  line-height: 1.6; white-space: pre-wrap;
}
.tkr__del { opacity: 0; transition: opacity var(--t-fast); flex: 0 0 auto; }
.tkr:hover .tkr__del { opacity: 1; }