/* betitled 디자인 시스템 — 흑백(모노크롬). 색 대신 굵기·선·채움·크기로 위계를 만든다.
   토큰 이름은 예전 것을 그대로 두고 값만 흑백으로 바꿨다(화면 코드가 그대로 쓴다). */
:root {
  /* 바탕·글자 */
  --bg: #ffffff;
  --fg: #0a0a0a;
  --ink: #000000;
  --muted: #5c5c5c;
  --faint: #8a8a8a;
  --side: #f5f5f5;
  --hover: rgba(0, 0, 0, 0.04);
  --active: rgba(0, 0, 0, 0.08);
  --border: rgba(0, 0, 0, 0.12);
  --line: #0a0a0a; /* 강한 선 */
  /* 강조 = 검정 */
  --accent: #0a0a0a;
  --accent-fg: #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.06);
  --accent-text: #0a0a0a;
  --code-bg: #f5f5f5;
  --inline-code: #0a0a0a;
  --callout: #f5f5f5;
  --danger: #0a0a0a;
  --danger-soft: rgba(0, 0, 0, 0.06);
  --warn-soft: rgba(0, 0, 0, 0.06);
  --mark: #e8e8e8;
  --online: #0a0a0a;
  --sel: rgba(0, 0, 0, 0.14);
  --overlay: rgba(255, 255, 255, 0.72);
  --toast-bg: #0a0a0a;
  --toast-fg: #ffffff;
  --shadow: 0 0 0 1px var(--line);
  --lift: 6px 6px 0 0 var(--line); /* 집어 든 것: 그림자 대신 어긋난 면 */
  /* 등급 램프(--rk-0 언랭 → --rk-9 최고). 높을수록 진하다 */
  --rk-0: #b5b5b5; --rk-1: #9a9a9a; --rk-2: #858585; --rk-3: #707070; --rk-4: #5e5e5e;
  --rk-5: #4b4b4b; --rk-6: #383838; --rk-7: #262626; --rk-8: #141414; --rk-9: #000000;
  /* 모서리: 각지게 */
  --r-sm: 0px;
  --r: 0px;
  --r-lg: 0px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: var(--font); /* 숫자도 Pretendard(고정폭 숫자는 tabular-nums로) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 예전 글자·배경 색 이름도 흑백으로 */
  --tc-gray: #5c5c5c; --tc-brown: #0a0a0a; --tc-orange: #0a0a0a; --tc-yellow: #0a0a0a; --tc-green: #0a0a0a;
  --tc-blue: #0a0a0a; --tc-purple: #0a0a0a; --tc-pink: #0a0a0a; --tc-red: #0a0a0a;
  --bc-gray: #f5f5f5; --bc-brown: #f5f5f5; --bc-orange: #f5f5f5; --bc-yellow: #f5f5f5; --bc-green: #f5f5f5;
  --bc-blue: #f5f5f5; --bc-purple: #f5f5f5; --bc-pink: #f5f5f5; --bc-red: #f5f5f5;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --fg: #f5f5f5;
    --ink: #ffffff;
    --muted: #a3a3a3;
    --faint: #6b6b6b;
    --side: #0f0f0f;
    --hover: rgba(255, 255, 255, 0.06);
    --active: rgba(255, 255, 255, 0.11);
    --border: rgba(255, 255, 255, 0.16);
    --line: #f5f5f5;
    --accent: #f5f5f5;
    --accent-fg: #000000;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --accent-text: #f5f5f5;
    --code-bg: #0f0f0f;
    --inline-code: #f5f5f5;
    --callout: #0f0f0f;
    --danger: #f5f5f5;
    --danger-soft: rgba(255, 255, 255, 0.08);
    --warn-soft: rgba(255, 255, 255, 0.08);
    --mark: #262626;
    --online: #f5f5f5;
    --sel: rgba(255, 255, 255, 0.22);
    --overlay: rgba(0, 0, 0, 0.75);
    --toast-bg: #f5f5f5;
    --toast-fg: #000000;
    --rk-0: #4d4d4d; --rk-1: #666666; --rk-2: #7a7a7a; --rk-3: #8f8f8f; --rk-4: #a3a3a3;
    --rk-5: #b8b8b8; --rk-6: #cccccc; --rk-7: #e0e0e0; --rk-8: #f0f0f0; --rk-9: #ffffff;
    --tc-gray: #a3a3a3; --tc-brown: #f5f5f5; --tc-orange: #f5f5f5; --tc-yellow: #f5f5f5; --tc-green: #f5f5f5;
    --tc-blue: #f5f5f5; --tc-purple: #f5f5f5; --tc-pink: #f5f5f5; --tc-red: #f5f5f5;
    --bc-gray: #0f0f0f; --bc-brown: #0f0f0f; --bc-orange: #0f0f0f; --bc-yellow: #0f0f0f; --bc-green: #0f0f0f;
    --bc-blue: #0f0f0f; --bc-purple: #0f0f0f; --bc-pink: #0f0f0f; --bc-red: #0f0f0f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* 가로 스와이프가 브라우저의 뒤로 가기로 넘어가지 않게 */
html, body { overscroll-behavior-x: none; }
body { font-variant-numeric: tabular-nums; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--font); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--fg); color: var(--bg); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
kbd { font: 11px var(--mono); color: var(--faint); margin-left: auto; }
.ic { display: block; flex: none; }
/* 숫자는 고정폭 */
.num, .tt-stats b, .tt-amount b { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* 작은 대문자 라벨 */
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- 공통 컨트롤 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease);
}
.btn:hover { border-color: var(--line); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.primary:hover { background: var(--bg); color: var(--fg); border-color: var(--line); }
.btn:focus-visible, .icon-btn:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { border-color: transparent; background: var(--hover); }
.btn.block { width: 100%; height: 46px; font-size: 14.5px; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.primary:disabled:hover { background: var(--fg); color: var(--bg); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.danger { border-color: var(--line); text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); color: var(--muted); }
.icon-btn:hover { background: var(--hover); color: var(--fg); }
.icon-btn .ic { width: 18px; height: 18px; }
.icon-btn.on { color: var(--fg); background: var(--active); }

/* 빈 화면 */
.empty-state { text-align: center; padding: 12vh 0; }
.empty-emoji { font-size: 40px; filter: grayscale(1); }
.empty-state h2 { margin: 14px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.empty-state p { color: var(--muted); margin: 0 0 20px; }
.empty-state.small { padding: 8vh 16px; border: 1px dashed var(--border); }
/* 메뉴·팝오버 */
.menu, .popover {
  position: fixed; z-index: 50; min-width: 220px; max-width: 320px; max-height: 340px; overflow-y: auto;
  padding: 4px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--lift); font-size: 14px;
  animation: bt-in 0.16s var(--ease);
}
.menu-section { padding: 10px 10px 6px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* 창 */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--overlay); backdrop-filter: blur(6px) grayscale(1); -webkit-backdrop-filter: blur(6px) grayscale(1); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: bt-fade 0.18s ease; }
.modal { width: 100%; max-width: 520px; background: var(--bg); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--lift); padding: 22px 24px; animation: bt-in 0.22s var(--ease); }
/* 창이 길면 창 안에서 스크롤(끝까지 가도 뒤 화면으로 넘어가지 않게) */
.modal { max-height: calc(100dvh - 12vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.modal-backdrop { overscroll-behavior: contain; touch-action: pan-y; }
.modal h3 { margin: 0 0 2px; font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
@keyframes bt-fade { from { opacity: 0; } }
@keyframes bt-in { from { opacity: 0; transform: translateY(6px); } }
/* 토스트 */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--toast-bg); color: var(--toast-fg); padding: 11px 18px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; transition: opacity 0.3s, transform 0.3s; animation: bt-in 0.2s var(--ease); }
.toast.out { opacity: 0; transform: translateY(6px); }
/* 입력 줄·작은 버튼·보기 전환 */
.ev-row { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ev-row input[type="date"], .ev-row input[type="time"] { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--fg); min-width: 0; }
.ev-row input[type="date"] { flex: 1; }
.cal-views { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-views button { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.cal-views button + button { border-left: 1px solid var(--line); }
.cal-views button:not(.on):hover { background: var(--hover); color: var(--fg); }
.cal-views button.on { background: var(--fg); color: var(--bg); font-weight: 600; }
/* 폼 버튼 줄 */
.fin-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.fin-form-actions .danger { margin-right: auto; }
/* 입력칸 공통 */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input:not([type]), select {
  border-radius: var(--r);
}
input:focus-visible, select:focus-visible { outline: none; border-color: var(--line) !important; box-shadow: inset 0 0 0 1px var(--line); }
input[type="checkbox"] { accent-color: var(--fg); width: 16px; height: 16px; }
/* 진행 막대: 가는 선 위에 검은 채움 */
.tl-bar { flex: 1; max-width: 280px; height: 4px; border-radius: 0; background: var(--active); overflow: hidden; }
.tl-bar i { display: block; height: 100%; border-radius: 0; background: var(--fg); transition: width 0.6s var(--ease); }
/* 제목·간격 */
.tk-title { margin: 0; font-size: clamp(40px, 7vw, 64px); line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; }
.ai-spacer { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .menu, .modal, .modal-backdrop, .toast { animation: none; }
}