/* ==========================================================================
   고객정보관리시스템 스타일
   외부 리소스를 일절 쓰지 않는다 (CSP: default-src 'self').
   ========================================================================== */

/* Pretendard (SIL Open Font License 1.1). public/fonts/LICENSE.txt 참고.
   변수 폰트라 파일 하나로 모든 굵기를 낸다. 서브셋이 아니어서 드문 한자·한글 이름도 깨지지 않는다. */
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --surface-2:     #fafbfc;
  --surface-hover: #f0f2f5;
  --border:        #e2e5ea;
  --border-strong: #cfd4dc;

  --text:          #1a1d23;
  --text-2:        #5b6472;
  --text-3:        #8b95a3;

  --accent:        #3b5bdb;
  --accent-hover:  #364fc7;
  --accent-soft:   #edf0fd;
  --accent-text:   #ffffff;

  --danger:        #d93a45;
  --danger-soft:   #fdeced;
  --warn:          #b7791f;
  --warn-soft:     #fdf6e3;
  --ok:            #2f9e44;

  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, .16), 0 4px 12px rgba(16, 24, 40, .08);

  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Roboto, sans-serif;
  --mono: "Cascadia Mono", "D2Coding", Consolas, "Courier New", monospace;

  --topbar-h: 58px;
  --status-h: 30px;
  --list-w:   340px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #16181d;
    --surface:       #1e2126;
    --surface-2:     #24282e;
    --surface-hover: #2a2f36;
    --border:        #2f343c;
    --border-strong: #3d434d;

    --text:          #e6e9ee;
    --text-2:        #a3acba;
    --text-3:        #737d8c;

    --accent:        #5c7cfa;
    --accent-hover:  #748ffc;
    --accent-soft:   #232b45;

    --danger:        #ff6b6b;
    --danger-soft:   #3a2224;
    --warn:          #e8b339;
    --warn-soft:     #342c16;
    --ok:            #51cf66;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg:            #16181d;
  --surface:       #1e2126;
  --surface-2:     #24282e;
  --surface-hover: #2a2f36;
  --border:        #2f343c;
  --border-strong: #3d434d;

  --text:          #e6e9ee;
  --text-2:        #a3acba;
  --text-3:        #737d8c;

  --accent:        #5c7cfa;
  --accent-hover:  #748ffc;
  --accent-soft:   #232b45;

  --danger:        #ff6b6b;
  --danger-soft:   #3a2224;
  --warn:          #e8b339;
  --warn-soft:     #342c16;
  --ok:            #51cf66;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.hidden { display: none !important; }

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- 공통 폼 */

.field { display: block; margin-bottom: 14px; }

.field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.field__input,
.field__textarea,
.select {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.field__textarea { resize: vertical; min-height: 76px; line-height: 1.6; }

.field__input:focus,
.field__textarea:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__input::placeholder { color: var(--text-3); }
.field__hint { font-size: 12px; color: var(--text-3); margin: 5px 0 0; }

/* 검증 실패 어떤 칸이 왜 걸렸는지 그 자리에서 알려준다 */
.field--error .field__input,
.field--error .field__textarea {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.field--error .field__hint { display: none; }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--danger);
}
.field__error::before {
  content: "!";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--surface);
  background: var(--danger);
  border-radius: 50%;
}

.form-errors {
  padding: 10px 13px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
}
.form-errors strong { display: block; margin-bottom: 4px; }
.form-errors ul { margin: 0; padding-left: 18px; }
.form-errors li { margin-top: 2px; }

/* 내보내기 대화상자의 항목별 가림 선택 */
.mask-list {
  display: grid;
  gap: 2px;
  padding: 6px;
  margin: 10px 0 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.mask-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mask-row:hover { background: var(--surface-hover); }
/* 표의 머리글 줄. 누르는 줄이 아니므로 반응하지 않는다. */
.mask-row--head { cursor: default; padding-bottom: 4px; }
.mask-row--head:hover { background: none; }
.mask-row--head .mask-row__label,
.mask-row--head .mask-row__preview {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
}
.mask-row__label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
/* 설정 화면의 체크박스와 같은 크기·색으로. 기본값(13px)은 작고 화면마다 달라 보인다. */
.mask-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.mask-row__preview {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.mask-row__preview--exposed { color: var(--danger); }

.select {
  cursor: pointer;
  padding-right: 26px;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}

.btn:hover { background: var(--surface-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn__icon { width: 15px; height: 15px; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn--block { width: 100%; padding: 10px; font-size: 14.5px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ---------------------------------------------------------------- 알림 */

.notice {
  padding: 11px 13px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.notice strong { display: block; margin-bottom: 3px; }
.notice--warn   { background: var(--warn-soft);   border-color: var(--warn);   color: var(--text); }
.notice--info   { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

/* ================================================================ 잠금 화면 */

.lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  gap: 20px;
}

.lock__card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.lock__brand { text-align: center; margin-bottom: 26px; }

.lock__mark {
  display: inline-flex;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  color: var(--accent);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

/* 로고: 전역 svg 규칙(선 아이콘용)을 덮어써야 한다. 배경은 테마 강조색을 따라간다. */
.brand-mark { width: 100%; height: 100%; fill: none; stroke: none; }
.brand-mark .mark-bg { fill: currentColor; stroke: none; }
.brand-mark .mark-solid { fill: #fff; stroke: none; }
.brand-mark .mark-line {
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.lock__version { margin: 4px 0 0; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 아직 안 채워 손봐야 하는 단추. 위험한 것이 아니라 비어 있는 것이다. */
.btn--warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }

/* 켰을 때만 펼쳐지는 여러 칸 묶음. 항목 하나가 칸 여럿을 거느릴 때 쓴다. */
.field-group { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }

/* 코드를 어디로 보냈는지. 메일함을 잘못 뒤지지 않게 한 줄 적어 둔다. */
.lock__sent { margin: 0 0 14px; font-size: 13px; color: var(--text-2); text-align: center; }

/* 여섯 자리는 한 글자씩 또렷하게. 눈으로 옮겨 적는 값이다. */
.field__input--code {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .4em;
  text-align: center;
  text-indent: .4em;
  font-variant-numeric: tabular-nums;
}
.lock__title { margin: 0 0 5px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

/*
 * 잠금 화면의 오류.
 *
 * 예전에는 한 줄짜리 빨간 띠였다. 그런데 비밀번호가 안 맞거나 키 파일이 깨진 상황을
 * 처음 만나는 자리가 바로 여기라, 한 줄로는 다음에 뭘 해야 할지 알 수 없었다.
 * 지금은 원인·단계·버튼이 통째로 들어오므로 왼쪽 정렬에 넉넉한 상자로 둔다.
 */
.lock__error {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  border-radius: var(--radius-sm);
  text-align: left;
}
.lock__error .guide__title {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--danger);
}
.lock__error .guide__cause,
.lock__error .guide__detail { font-size: 12.5px; }

/*
 * 잘못된 것이 아니라 알려 줄 것이 있을 때. 같은 자리를 쓰되 붉은색은 뺀다.
 * "관리자가 다시 정해 드립니다" 같은 말을 빨갛게 띄우면 뭔가 잘못된 줄 안다.
 */
.lock__error--ok {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.lock__error--ok .guide__title { color: var(--accent); }

/*
 * 잘 끝났을 때. 오류 상자에 색만 바꿔 쓰던 것을 따로 뗀다.
 *
 * 안쪽 문단이 오류 본문용이라 왼쪽에 세로줄이 그어지고 글씨도 작았다. 잘 된 일을
 * 알리는데 잘못된 것처럼 보였다. 한 일과 다음에 할 일을 두 줄로 나눠 세운다.
 */
.lock__done { display: flex; gap: 10px; align-items: flex-start; }
.lock__done-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--accent);
}
.lock__done-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.lock__done-detail { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
/* 안쪽 문단도 같이 바꾼다. 상자만 파랗고 글줄 옆이 빨가면 그게 더 눈에 띈다. */
.lock__error--ok .guide__detail {
  background: transparent;
  border-left-color: var(--accent);
}



/* ------------------------------------------------------------- 오류 안내 */

/*
 * 오류 하나를 설명하는 덩어리. 잠금 화면 안에도, 모달 안에도 같은 모양으로 들어간다.
 * 읽는 순서가 곧 위에서 아래다. 왜 이렇게 됐는지, 그래서 뭘 하면 되는지, 그걸 하는 버튼.
 */
/* 창 제목이 따로 없는 자리(잠금 화면·가져오기 안)에서 제목 노릇을 한다. */
.guide__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
}

.guide__lead {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.guide__icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  fill: none;
  stroke: var(--danger);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 잘못된 것이 아니라 한 번 더 확인하는 상황은 빨갛게 굴 이유가 없다. */
.guide__lead--calm .guide__icon { stroke: var(--accent); }

.guide__cause {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}

/* 이번 상황에만 해당하는 한 줄. 일반 설명보다 눈에 먼저 들어와야 한다. */
.guide__detail {
  margin: 0 0 12px;
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.guide__how {
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.guide__how-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-2);
}
.guide__steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.guide__steps li { margin-bottom: 5px; }
.guide__steps li:last-child { margin-bottom: 0; }
.guide__steps li::marker { color: var(--text-3); font-weight: 700; }

.guide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* 코드는 필요할 때만 찾아보면 되는 것이라 작고 조용하게 둔다. */
.guide__code {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* 서버가 응답하지 않아 화면을 아예 그리지 못한 경우. */
.boot-fail {
  max-width: 460px;
  margin: 12vh auto;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.boot-fail__title { margin: 0 0 12px; font-size: 17px; font-weight: 700; }

/* ------------------------------------------------------ 오류 안내 전문 */

.manual__item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.manual__item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  cursor: pointer;
  list-style: none;
}
.manual__item summary::-webkit-details-marker { display: none; }
.manual__item summary::before {
  content: '›';
  font-size: 15px;
  color: var(--text-3);
  transition: transform .15s ease;
}
.manual__item[open] summary::before { transform: rotate(90deg); }
.manual__title { flex: 1; font-size: 13.5px; font-weight: 600; }
.manual__code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
}
.manual__item .guide { padding: 2px 2px 14px 24px; }

.linkish {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 4px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-3);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--text); }

.mono { font-family: var(--mono); letter-spacing: .02em; }
/* 곁들이 설명. 본문보다 한 단계 흐리게. */
.muted { color: var(--text-2); font-size: 12.5px; }

.confirm-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.confirm-line input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

@media print {
  body > *:not(#modal) { display: none !important; }
  .modal { position: static; box-shadow: none; border: 0; max-height: none; }
  .modal__head .icon-btn, .form-actions, .confirm-line { display: none !important; }
}

/* ================================================================ 메인 */

.app {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--status-h);
  height: 100%;
}

/* ------------------------------------------------------------- 상단 바 */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.topbar__mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--accent);
}

.topbar__title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }

.topbar__search { position: relative; flex: 1; max-width: 620px; }

.topbar__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  margin-top: -9px;
  color: var(--text-3);
  pointer-events: none;
}

.topbar__search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.topbar__search-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.topbar__search-input::-webkit-search-cancel-button { cursor: pointer; }

.topbar__who {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  padding: 0 4px;
  white-space: nowrap;
}

.topbar__sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border);
}

.topbar__actions { position: relative; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.menu {
  position: absolute;
  top: 42px;
  right: 0;
  min-width: 190px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 40;
}

.menu__item {
  display: block;
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu__item:hover { background: var(--surface-hover); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); }
.menu__sep { height: 1px; margin: 5px 0; background: var(--border); }

/* ------------------------------------------------------- 종료 화면 */

.bye {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
}
.bye__card { max-width: 380px; text-align: center; }
.bye__mark { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--accent); opacity: .45; }
.bye__title { margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.bye__text { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.bye__hint { margin: 0; font-size: 12.5px; color: var(--text-3); }

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

.layout {
  display: grid;
  grid-template-columns: var(--list-w) 1fr;
  min-height: 0;
}

/* ------------------------------------------------------------- 목록 */

.list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}

.list__count { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.list__tools { display: flex; align-items: center; gap: 6px; }
.list__tools .select { width: auto; font-size: 12.5px; padding: 5px 8px; }

.list__items {
  flex: 1;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

.item {
  padding: 10px 11px;
  margin-bottom: 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.item:hover { background: var(--surface-hover); }
.item--active { background: var(--accent-soft); border-color: var(--accent); }

.item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.item__name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.item__meta { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
.item__line { display: flex; gap: 8px; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.item__rrn { font-family: var(--mono); font-size: 12px; letter-spacing: -.02em; }

/* ------------------------------------------------- 아바타 (이니셜 원) */

/* 색은 이름에서 계산한다. 같은 사람은 늘 같은 색이라 위치를 눈이 기억하게 된다.
   무작위나 순번이면 목록이 바뀔 때마다 색이 달라져 오히려 방해가 된다. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  user-select: none;
}
.avatar--lg { width: 46px; height: 46px; font-size: 18px; }

/* ------------------------------------------------------- 목록 아이템 */

.item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.item__main { min-width: 0; flex: 1; }
.item__top { display: flex; align-items: baseline; gap: 6px; }
.item__name { flex-shrink: 0; }
.item__meta--right { margin-left: auto; }
.item__badge {
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 20px;
}

/*
 * 누구 고객인지. 관리자가 여러 계정을 겹쳐 볼 때만 붙는다.
 *
 * 태그·메모 딱지와 색을 달리한다. 그것들은 고객에 대한 정보이고 이건 소속이다.
 * 같은 모양이면 "관리자" 라는 태그가 붙은 것처럼 읽힌다.
 */
.item__owner {
  flex-shrink: 0;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.item__line {
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------- 필터 칩 */

.filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 9px 12px 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-chip:hover { background: var(--surface-hover); color: var(--text); }
.filter-chip--on {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}
.filter-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
.filter-chip--on .filter-chip__count { opacity: .85; }

.list__empty { padding: 40px 20px; text-align: center; }
.list__empty-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.list__empty-sub { margin: 0; font-size: 12.5px; color: var(--text-3); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px;
  border-top: 1px solid var(--border);
}
.pager__label { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- 상세 */

.detail { overflow-y: auto; min-height: 0; }

.detail__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  color: var(--text-3);
  text-align: center;
}
.detail__placeholder-icon { width: 44px; height: 44px; stroke-width: 1.3; }
.detail__placeholder p { margin: 0; font-size: 13.5px; line-height: 1.7; }

.detail__body { padding: 22px 26px 40px; max-width: 860px; }

.detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.detail__name { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.detail__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.tag {
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.tag--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.tag--ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: var(--ok);
}
.tag--warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: var(--warn);
}

/* 고를 수 없는 줄. 보이되 손이 가지 않게 한 단계 물린다. */
.is-muted { opacity: .55; }

/* ------------------------------------------------------- 신분증 사진 */

/*
 * 사진을 바로 펼치지 않고 이름표만 늘어놓는다. 상세 화면을 여는 것만으로
 * 신분증이 화면에 뜨면, 옆에 사람이 있을 때 막을 방법이 없다. 눌러야 열린다.
 */
/* ------------------------------------------------------------ 병력 정리 */

/*
 * 신분증 사진 자리와 같은 모양으로 둔다. 상세 화면에서 성격이 비슷한 것끼리
 * 같은 생김새여야 어디를 봐야 하는지 매번 다시 배우지 않는다.
 */
.history { margin-top: 14px; }
.history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.history__list { display: grid; gap: 6px; }
.history__item { display: flex; align-items: center; gap: 6px; }
.history__open {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.history__open:hover { background: var(--surface-hover); }
.history__when { font-weight: 600; }
.history__sum { font-size: 12px; color: var(--text-2); }

/*
 * 판정 딱지.
 *
 * 통과·불통과·확인필요를 글자만으로 늘어놓으면 표에서 눈으로 못 짚는다.
 * 색은 셋뿐이고, 그 셋이 곧 사람이 해야 할 일을 가른다.
 */
.verdict {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
}
.verdict--ok    { color: var(--ok);     background: color-mix(in srgb, var(--ok) 12%, transparent); }
.verdict--no    { color: var(--danger); background: var(--danger-soft); }
.verdict--maybe { color: var(--warn);   background: var(--warn-soft); }

.flagged { display: grid; gap: 8px; }
.flagged__item {
  padding: 10px 12px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--radius-sm);
}
.flagged__item p { margin: 3px 0 0; font-size: 12.5px; }

.plain-list { margin: 0; padding-left: 18px; font-size: 13px; }
.plain-list li { margin-top: 3px; }

.idcard { margin-top: 14px; }
.idcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.idcard__list { display: flex; flex-direction: column; gap: 6px; }
.idcard__item { display: flex; align-items: center; gap: 6px; }
.idcard__open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.idcard__open:hover { border-color: var(--accent); }
.idcard__size { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.idcard__full {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 8px;
}

/* --------------------------------------------------------------- 탭 */

/* 설정 창에서 보안·비밀번호·계정을 갈아 끼운다. */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.tabs__tab {
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--text-2); }
.tabs__tab--on { color: var(--accent); border-bottom-color: var(--accent); }

/* 입력칸 + 단추를 한 줄에. 경로를 고르는 자리에 쓴다. */
/* 지금 무엇으로 보내고 있는지. 칸이 아니라 읽는 값이라 단추와 높이를 맞춰 준다. */
.sender {
  flex: 1;
  min-width: 0;
  margin: 0;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field__row { display: flex; gap: 6px; align-items: stretch; }
.field__row .field__input { flex: 1; min-width: 0; }
.field__row .btn { flex-shrink: 0; white-space: nowrap; }

/* 가져오는 중인 파일 이름. 안내문을 접은 자리를 대신한다. */
.import__file {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-3);
}

.accounts__actions { display: flex; gap: 6px; justify-content: flex-end; }

/* 되돌릴 시점 고르기 언제 것인지가 한눈에 들어와야 고를 수 있다. */
.restore__when  { font-size: 13px; font-weight: 600; }
.restore__exact { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }

.detail__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ------------------------------------------- 상세 요약 · 빠른 복사 */

.summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.summary__name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }

/* 자주 쓰는 항목은 큼직한 타일로. 누르면 바로 복사되거나 열람된다. */
.quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.quick__tile {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.quick__tile:hover { background: var(--surface-hover); border-color: var(--accent); }
/* 누를 수 없는 타일은 눌리는 것처럼 보이지 않게 한다. */
.quick__tile--flat { cursor: default; }
.quick__tile--flat:hover { background: var(--surface); border-color: var(--border-strong); }
.quick__tile:disabled { cursor: default; opacity: .6; }
.quick__tile:disabled:hover { background: var(--surface); border-color: var(--border-strong); }
.quick__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--text-3); }
.quick__body { min-width: 0; flex: 1; }
.quick__label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.quick__value {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick__value--text { font-family: var(--font); font-weight: 500; }
.quick__value--empty { color: var(--text-3); font-weight: 400; }
.quick--wide { grid-column: 1 / -1; }

.memo-box {
  padding: 11px 13px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.memo-box__text { margin: 3px 0 0; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }

/* 가끔 보는 항목은 접어 둔다 */
.more { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.more > summary {
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "▸ "; }
.more[open] > summary::before { content: "▾ "; }
.more > summary:hover { background: var(--surface-hover); color: var(--text); }
.more__body { padding: 4px 0; }
.more .row { grid-template-columns: 120px 1fr; }

.rows { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  padding: 11px 14px;
  background: var(--surface);
}
.row__label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.row__value { font-size: 14px; word-break: break-word; white-space: pre-wrap; }
.row__value--empty { color: var(--text-3); }
.row__value--mono { font-family: var(--mono); letter-spacing: -.01em; }

.detail__foot { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail__stamp { font-size: 11.5px; color: var(--text-3); }

/* ------------------------------------------------------------- 편집 폼 */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.form-grid .field--full { grid-column: 1 / -1; }

.form-section { margin-bottom: 8px; }
.form-section__title {
  margin: 18px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.form-section:first-child .form-section__title { margin-top: 0; }

/* 한 화면 안에서 성격이 다른 덩이를 가른다. */
.rule {
  margin: 22px 0 4px;
  border: 0;
  border-top: 1px solid var(--border);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------- 상태바 */

/*
 * 아래 띠에는 판 번호만 조용히 둔다. 인원수는 목록 머리에 있다.
 * 평소에는 비어 있으므로, 남은 시간이 뜰 때 화면이 밀리지 않도록 높이를 잡아 둔다.
 */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 0 14px;
  font-size: 11.5px;
  color: var(--text-3);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
/* 판 번호. 늘 같은 자리에 조용히 있으면 된다. */
.statusbar__left { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- 모달 */

.modal {
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal::backdrop { background: rgba(10, 12, 16, .45); backdrop-filter: blur(2px); }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.modal__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.modal__body { padding: 18px; overflow-y: auto; max-height: calc(100vh - 190px); }

/* -------------------------------------------------- 커맨드 팔레트 */

.palette {
  width: min(620px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  padding: 0;
  margin-top: 12vh;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.palette::backdrop { background: rgba(10, 12, 16, .4); backdrop-filter: blur(2px); }

.palette__input {
  width: 100%;
  padding: 15px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  outline: none;
}
.palette__input::placeholder { color: var(--text-3); }

.palette__list { max-height: calc(min(70vh, 560px) - 56px); overflow-y: auto; padding: 6px; }

.palette__section {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-3);
  text-transform: uppercase;
}

.palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.palette__item--on { background: var(--accent-soft); }
.palette__item-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-3); }
.palette__item-main { min-width: 0; flex: 1; }
.palette__item-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item-sub { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__key {
  flex-shrink: 0;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.palette__empty { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--text-3); }
.palette__foot {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ------------------------------------------------------------- 표 */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
.table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }
.table tr:last-child td { border-bottom: 0; }

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

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  min-width: 230px;
  max-width: 380px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: toast-in .18s ease-out;
}
.toast__text { flex: 1; }
.toast__action {
  flex-shrink: 0;
  padding: 4px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.toast__action:hover { background: var(--accent); color: var(--accent-text); }

.toast--ok    { border-left-color: var(--ok); }
.toast--error { border-left-color: var(--danger); }
.toast--warn  { border-left-color: var(--warn); }
.toast--out   { animation: toast-out .18s ease-in forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------- 가져오기 열 짝짓기 */

.map-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 10px 0 4px;
}
.map-row {
  padding: 10px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.map-row__head { display: flex; flex-direction: column; margin-bottom: 7px; min-width: 0; }
.map-row__name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-row__sample {
  font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dup-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }

/* ------------------------------------------------------- 검색어 강조 */

mark.hit {
  padding: 0 1px;
  color: inherit;
  background: var(--hit, #ffe066);
  border-radius: 2px;
}
:root[data-theme="dark"] mark.hit,
:root:not([data-theme="light"]) mark.hit { --hit: #6b5900; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) mark.hit { --hit: #ffe066; }
}

/* --------------------------------------------------------- 목록 밀도 */


.list__items[data-busy="1"] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------- 스크롤바 */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--surface);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ============================================================== 반응형 */

/*
 * 이 프로그램은 PC 한 대에서 쓰지만, 그 한 대의 창 크기는 늘 제각각이다.
 * 문서를 옆에 띄우려고 창을 반으로 줄이고, 노트북 화면은 13인치이고,
 * 태블릿으로 열어 보기도 한다. 그래서 폭에 따라 네 단계로 나눈다.
 *
 *   > 1080px  목록 + 상세 나란히 (기본)
 *   ~ 860px   목록을 좁히고 제목을 접는다
 *   ~ 720px   나란히 둘 자리가 없다 → 한 번에 하나씩 (목록 ↔ 상세)
 *   ~ 430px   한 손 폭. 여백을 줄이고 단추를 가로로 꽉 채운다
 *
 * 720px 아래에서 위아래로 쌓아 보기도 했다. 목록도 상세도 둘 다 짓눌려
 * 어느 쪽도 제대로 못 쓰는 결과가 됐다. 지금은 하나씩 전환한다.
 */

/* 넓은 화면에서는 "목록으로" 단추가 필요 없다. 목록이 늘 보이기 때문이다. */
.detail__back { display: none; }

@media (max-width: 1080px) {
  :root { --list-w: 268px; }
  .quick { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .topbar__title { display: none; }
  .topbar__search { max-width: none; }
}

/* ---------------------------------------------- 한 번에 하나씩 (좁은 화면) */

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

  /* data-pane 은 화면(app.js showPane)이 정한다. 기본값은 목록. */
  .layout[data-pane='detail'] .list,
  .layout:not([data-pane='detail']) .detail { display: none; }

  .list { border-right: 0; }
  .detail__back { display: inline-flex; margin-bottom: 14px; }

  .detail__body { padding: 14px 14px 32px; }
  .detail__head { flex-direction: column; align-items: stretch; gap: 12px; }
  .detail__actions { justify-content: flex-end; }

  /* 항목 이름과 값을 좌우로 두면 값이 들어갈 자리가 없다. 위아래로 놓는다. */
  .row,
  .more .row { grid-template-columns: 1fr; gap: 3px; padding: 10px 12px; }

  .topbar { gap: 8px; padding: 0 10px; }
  .list__head { flex-wrap: wrap; gap: 8px; }

  .modal { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  .modal__body { padding: 14px; }
  .map-list { grid-template-columns: 1fr; }
  .toast-stack { left: 12px; right: 12px; }
  .toast { max-width: none; }

  .lock { padding: 18px 0; }
  .lock__card { padding: 24px 20px; }

  /* 표는 줄이는 대신 그 칸 안에서만 옆으로 밀리게 한다. 본문이 밀리면 안 된다. */
  .modal__body .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* -------------------------------------------------------- 한 손 폭 */

@media (max-width: 430px) {
  .detail__body { padding: 12px 10px 28px; }
  .quick { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .guide__actions .btn { width: 100%; justify-content: center; }
  .detail__actions { flex-direction: column; align-items: stretch; }
  .detail__actions .btn { justify-content: center; }
  .guide__how { padding: 11px 12px; }
  .guide__steps { padding-left: 18px; }
}

/* --------------------------------------------------- 낮은 창 · 손가락 입력 */

/* 노트북을 세로로 반 접어 쓰거나 가로로 눕힌 태블릿. 위아래 여백부터 줄인다. */
@media (max-height: 560px) {
  :root { --topbar-h: 46px; }
  .lock { padding: 10px 0; }
  .lock__card { padding: 18px 20px; }
  .modal { max-height: calc(100dvh - 16px); }
}

/*
 * 마우스가 없는 기기. 손가락은 커서보다 훨씬 뭉툭해서, 화면에서 보기 좋은 크기가
 * 곧 누르기 좋은 크기는 아니다. 실제로 눌리는 부분만 키운다.
 */
@media (pointer: coarse) {
  .btn, .icon-btn, .select, .field__input { min-height: 40px; }
  .btn--sm { min-height: 36px; }
  .item { padding-top: 11px; padding-bottom: 11px; }
  .menu__item { padding-top: 11px; padding-bottom: 11px; }
  .linkish { padding: 8px 4px; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 전환 효과를 걷어낸다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 단축키를 새로 정할 때, 지금 키를 기다리는 칸 */
.key-cell { min-width: 96px; font-family: var(--mono, monospace); }
.key-cell--waiting { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------- 폴더 나무 · 태그 */

/*
 * 왼쪽 목록 위에 붙는 분류 자리.
 * 고객 목록보다 눈에 덜 띄어야 한다. 여기는 찾아가는 길이고, 읽는 것은 오른쪽이다.
 */
.organize { border-bottom: 1px solid var(--border); }

.organize__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 4px;
}
.organize__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}
.organize__add {
  width: 20px;
  height: 20px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.organize__add:hover { color: var(--accent); background: var(--surface-hover); }

.tree { padding: 0 6px 8px; }
.tree__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 6px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tree__row:hover { background: var(--surface-hover); }
.tree__row--on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/*
 * 계정 줄. 폴더보다 한 단계 위라 눈으로도 층이 갈려야 한다.
 *
 * 색을 따로 주지 않고 글자만 굵히고 위에 선을 긋는다. 색을 하나 더 쓰면 고른 줄
 * (파랑)과 다투게 되고, 트리가 알록달록해지면 정작 어디를 보고 있는지가 흐려진다.
 */
.tree__row--owner {
  margin-top: 4px;
  padding-top: 7px;
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.tree__row--owner:first-child { margin-top: 0; border-top: 0; }
.tree__owner-icon { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }

.tree__twist {
  flex: none;
  width: 14px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.tree__twist--none { cursor: default; }

.tree__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__name--dim { color: var(--text-3); }
.tree__count { flex: none; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.tagbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.tag-chip:hover { border-color: var(--accent); }
.tag-chip--on { color: #fff; background: var(--accent); border-color: var(--accent); }
.tag-chip__count { font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }

/* 목록 줄에 붙는 태그 */
.item__tag {
  padding: 1px 6px;
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* 등록 화면의 태그 입력 */
.tagpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tagpick__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tagpick__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 9px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.tagpick__x {
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.tagpick__x:hover { color: var(--danger); }
.tagpick .field__input { flex: 1; min-width: 120px; }

/* 끌어다 놓을 때 받는 자리 표시 */
.tree__row--drop {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.item[draggable="true"] { cursor: grab; }
.item[draggable="true"]:active { cursor: grabbing; }