@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..24,400,0..1,0&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 디자인 토큰 (DESIGN-minimax.md 기준). 로고만 법틀 워드마크를 쓴다. */
:root {
  --primary: #0a0a0a; --on-primary: #ffffff; --charcoal: #222222;
  --brand-coral: #ff5530; --brand-magenta: #ea5ec1; --brand-blue: #1456f0; --brand-purple: #a855f7;
  --brand-blue-deep: #1d4ed8; --brand-blue-200: #bfdbfe;
  --canvas: #ffffff; --surface: #f7f8fa; --surface-soft: #f2f3f5; --hairline: #e5e7eb; --hairline-soft: #eaecf0;
  --ink: #0a0a0a; --slate: #45515e; --steel: #5f5f5f; --stone: #8e8e93; --muted: #a8aab2;
  --success-bg: #e8ffea; --success-text: #1ba673; --error: #d45656; --error-bg: #fdeeee;
  --font: "DM Sans", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-xxxl: 24px; --r-hero: 32px; --r-full: 9999px;
  --shadow-card: rgba(0,0,0,0.08) 0px 4px 6px 0px; --shadow-modal: rgba(36,36,36,0.08) 0px 12px 16px -4px;

  /* 화면 코드가 쓰는 이름을 새 토큰에 연결 */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px;
  --contents-primary: var(--ink); --contents-secondary: var(--slate); --contents-tertiary: var(--steel);
  --border-divider: var(--hairline-soft); --gray-200: var(--hairline); --gray-100: var(--surface-soft); --gray-50: var(--surface);
  --brand-primary: var(--ink); --state-error: var(--error); --surface-secondary: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--charcoal); background: var(--canvas); word-break: keep-all; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--brand-blue-deep); outline-offset: 2px; }
.bt-ms { font-family: "Material Symbols Outlined"; font-weight: 400; font-style: normal; font-size: 22px; line-height: 1; display: inline-block; white-space: nowrap; vertical-align: middle; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.bt-ms.sm { font-size: 18px; }
.bt-ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* 상단 내비게이션 */
.bt-topnav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-24); height: 64px; padding: 0 var(--space-32); background: var(--canvas); border-bottom: 1px solid var(--hairline-soft); }
.bt-topnav .logo img { height: 24px; display: block; }
.bt-topnav nav { display: flex; gap: var(--space-8); }
.bt-topnav nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-16); border-radius: var(--r-full); font-size: 14px; font-weight: 500; color: var(--steel); text-decoration: none; border: 1px solid transparent; }
.bt-topnav nav a:hover { color: var(--ink); }
.bt-topnav nav a.on { background: var(--primary); color: var(--on-primary); }
.bt-topnav .right { display: flex; align-items: center; gap: var(--space-16); }
.bt-topnav .bell { color: var(--slate); }
.bt-topnav .user { display: flex; align-items: center; gap: var(--space-8); font-size: 14px; font-weight: 500; color: var(--ink); }

/* 버튼: 전부 pill */
.bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 40px; padding: 0 var(--space-24); border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bt-btn .bt-ms { font-size: 18px; }
.bt-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.bt-btn-primary:active { background: var(--charcoal); }
.bt-btn-outline { background: var(--canvas); border-color: var(--hairline); }
.bt-btn-outline-brand { background: transparent; border-color: var(--ink); }
.bt-btn-gray { background: var(--surface-soft); border-color: var(--surface-soft); }
.bt-btn-text { background: transparent; border-color: transparent; padding: 0 var(--space-8); color: var(--steel); }
.bt-btn-sm { height: 32px; padding: 0 var(--space-16); font-size: 13px; }
.bt-btn-lg { height: 52px; font-size: 16px; }
.bt-btn-block { width: 100%; }
.bt-btn:disabled { background: var(--hairline); border-color: var(--hairline); color: var(--muted); cursor: not-allowed; }
.bt-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas); color: var(--ink); cursor: pointer; flex: none; }
.bt-iconbtn:disabled { color: var(--muted); cursor: not-allowed; }

/* 카드 */
.bt-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--space-24); }
.bt-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-16); }
.bt-card-head h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ink); }

/* 배지·태그·아바타 */
.bt-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; line-height: 1.5; background: var(--surface-soft); color: var(--slate); white-space: nowrap; }
.bt-status.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bt-status.valid { background: var(--success-bg); color: var(--success-text); }
.bt-status.soon { background: var(--brand-blue-200); color: var(--brand-blue-deep); }
.bt-status.urgent { background: var(--error-bg); color: var(--error); }
.bt-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; background: var(--surface-soft); color: var(--ink); }
.bt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 600; flex: none; }
.bt-avatar.lg { width: 44px; height: 44px; font-size: 17px; }

/* 입력 */
.bt-field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.bt-field > label, .bt-label { font-size: 13px; font-weight: 600; color: var(--slate); }
.bt-input { display: flex; align-items: center; gap: var(--space-8); height: 40px; padding: 0 var(--space-16); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--canvas); color: var(--ink); }
.bt-input input, .bt-input select, .bt-input textarea { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; color: inherit; }
.bt-input input::placeholder, .bt-input textarea::placeholder { color: var(--muted); }
.bt-input:focus-within { border-color: var(--brand-blue-deep); box-shadow: 0 0 0 1px var(--brand-blue-deep); }
.bt-input.disabled { background: var(--surface); color: var(--steel); }
.bt-input.error { border-color: var(--error); }
.bt-input.lg { height: 48px; font-size: 18px; }
.bt-input.textarea { height: auto; align-items: flex-start; padding: var(--space-12) var(--space-16); }
.bt-input.textarea textarea { resize: vertical; line-height: 1.5; }
.bt-help { font-size: 13px; color: var(--steel); }
.bt-help.error { color: var(--error); }

/* 선택 pill 그룹 */
.bt-segment { display: inline-flex; gap: var(--space-8); }
.bt-segment button { height: 36px; padding: 0 var(--space-16); border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas); color: var(--steel); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.bt-segment button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* 토스트·빈 상태 */
.bt-toast { display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16) var(--space-12) var(--space-20); border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-modal); }
.bt-toast .bt-ms { font-size: 18px; opacity: .7; }
.bt-toast.error { background: var(--error); }
.bt-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-32) var(--space-16); text-align: center; }
.bt-empty > .bt-ms { font-size: 40px; color: var(--muted); }
.bt-empty h3 { margin: var(--space-8) 0 0; font-size: 20px; font-weight: 600; color: var(--ink); }
.bt-empty p { margin: 0 0 var(--space-16); font-size: 14px; color: var(--steel); }