/* ── 뼈대 ─────────────────────────────────────────────────────────────────
 * 브라우저 기본값 정리 · 단추 · 입력칸 · 카드 · 알약 · 알림 · 격자 · 유틸리티(T-024 · ADR-008).
 * Medmap 어드민 `base.css`(부트스트랩을 대신하던 파일)에서 LabChure 가 쓰는 것만 옮겼다.
 * ⚠ 색 · 크기 · 반경 값은 `app.css` 의 `:root` 토큰에서만 정한다 — 여기서는 토큰을 읽기만 한다.
 * ⚠ 이 파일이 `app.css` 보다 먼저 온다(`App.razor`). 화면 규칙이 이것을 덮을 수 있어야 한다.
 * 🔴 여기 없는 클래스는 아무 일도 하지 않는다. razor 에 새 클래스를 쓰면 CSS 도 함께 쓴다 —
 *    `LabChure.Admin.Tests` 의 클래스 존재 검사가 빠진 것을 잡는다.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  /* 한국어는 낱말 안에서 줄을 바꾸지 않는다 — 기본값이면 「한국」이 「한 / 국」으로 갈렸다(플랜 부여 설명 줄). */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
  color: var(--text-h);
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 0;
}

b, strong {
  font-weight: 600;
}

.small, small {
  font-size: var(--fs-md);
}

/* 링크는 브랜드 렌즈 코어색(`--brand-deep`)이다 — Vi3w 링크와 같다. 녹색 글자는 대비가 모자라서 쓰지 않는다. */
a {
  color: var(--brand-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 문장 안의 링크는 밑줄이 있어야 색만으로 가르지 않는다(WCAG 1.4.1). 표 · 메뉴의 링크는 자리 자체가 누르는 곳이다. */
p a,
.alert a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

img, svg {
  vertical-align: middle;
}

code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: var(--fs-md);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--text-h);
}

table {
  border-collapse: collapse;
}

th {
  text-align: inherit;
}

tbody, td, tfoot, th, thead, tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, select {
  text-transform: none;
}

[type='button']:not(:disabled), [type='reset']:not(:disabled),
[type='submit']:not(:disabled), button:not(:disabled) {
  cursor: pointer;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* ── 포커스 테 ──────────────────────────────────────────────────────────
 * 키보드로 쓰는 사람에게 유일한 위치 표시다. Medmap 은 옅은 면 3px 이라 잘 안 보였다(조사 문서 결함 5) —
 * 2px 녹색 선으로 둔다(흰 바탕 4.23:1 · 비텍스트 기준 3:1 을 넘는다).
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

/* ── 단추 ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 36px;
  padding: 0 12px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn.disabled {
  pointer-events: none;
  opacity: 0.55;
}

.btn-sm {
  min-height: 32px;
  padding: 0 10px;
  font-size: var(--fs-md);
  border-radius: var(--radius-sm);
}

/* 🔴 녹색 면 위 글자는 진한 색이다(Vi3w `bg-brand text-zinc-950`). 흰 글자는 2.29:1 이라 읽히지 않는다.
   호버는 한 단 진한 녹색 면 + 같은 진한 글자 — 4.70:1. */
.btn-primary {
  color: var(--brand-ink);
  background-color: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:active {
  color: var(--brand-ink);
  background-color: var(--brand-strong);
  border-color: var(--brand-strong);
}

.btn-secondary {
  color: var(--text);
  background-color: var(--surface);
  border-color: var(--border-strong);
}

.btn-secondary:hover,
.btn-secondary:active {
  color: var(--text-h);
  background-color: var(--code-bg);
  border-color: var(--border-strong);
}

/* 끈 중립 단추는 배경을 비운다 — 흰 상자로 남으면 켜진 단추처럼 보인다. */
.btn-secondary:disabled,
.btn-secondary.disabled {
  color: var(--text-muted);
  background-color: transparent;
  border-color: var(--border);
}

.btn-danger {
  color: var(--on-dark);
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-danger:hover,
.btn-danger:active {
  color: var(--on-dark);
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn .icon,
a .icon {
  flex-shrink: 0;
}

/* ── 입력칸 ────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--surface);
  background-clip: padding-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--code-bg);
}

.form-control:focus,
.form-select:focus {
  outline: 0;
  border-color: var(--brand-strong);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* 날짜 칸의 달력 그림 — 누를 자리 24px(WCAG 2.2 AA 2.5.8). 그림 자체의 여백을 걷고 칸의 세로 여백을 1px 씩 줄여
   옆 칸과 같은 36px 에 맞춘다(24 + 5×2 + 테 2). 안 맞추면 날짜 칸만 42px 로 튀었다(2026-09-29 로컬 실측). */
.form-control[type='date'] {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* 그림은 16px 로 줄이고 흐리게 — 누를 자리만 24px 로 두면 그림까지 24px 로 커져 옆 칸의 화살표보다 무거웠다. */
.form-control::-webkit-calendar-picker-indicator {
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  cursor: pointer;
}

/* ⚠ 화살표 색은 data URL 안이라 `var()` 가 안 먹는다 — `--text`(#2b313b)를 손으로 적었다.
   `--text` 를 바꾸면 여기 `%232b313b` 도 바꾼다(Medmap 은 옛 색이 남아 있었다 — 조사 문서 결함 2). */
.form-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232b313b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
}

.form-control-sm,
.form-select-sm {
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--fs-md);
  border-radius: var(--radius-sm);
}

.form-label {
  margin-bottom: 6px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}

.form-text {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* 입력칸과 단추를 붙인다(찾기). */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .btn {
  position: relative;
  z-index: 2;
}

.input-group > .form-control:focus,
.input-group > .btn:focus-visible {
  z-index: 5;
}

.input-group > :not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ── 카드 ──────────────────────────────────────────────────────────────
 * 회색 바탕 위 흰 면 + 1px 연한 테 + 옅은 그림자. 테가 없으면 면이 바탕에 번져 보인다(Medmap T-018).
 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card-body {
  flex: 1 1 auto;
  padding: 20px;
}

/* ── 알약 ──────────────────────────────────────────────────────────────
 * 연한 면 + 진한 글자. 변종 없는 `.badge` 가 중립이다. 변종 넷은 `app.css` §상태.
 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  min-height: 22px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--code-bg);
  color: var(--text);
}

/* ── 알림 ──────────────────────────────────────────────────────────────
 * 실패 · 조건부 성공은 닫을 때까지 남는다(T-022 의 「닫을 때까지 띄운다」). 성공은 토스트다.
 */
.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-md);
}

.alert-danger {
  color: var(--danger);
  background-color: var(--danger-bg);
  border-color: var(--danger-border);
}

.alert-warning {
  color: var(--warn);
  background-color: var(--warn-bg);
  border-color: var(--warn-border);
}

.alert-info {
  color: var(--brand-deep);
  background-color: var(--deep-bg);
  border-color: var(--deep-border);
}

.alert-body {
  flex: 1 1 auto;
  min-width: 0;
}

.alert-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -2px -4px -2px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  opacity: 0.75;
}

.alert-close:hover {
  opacity: 1;
  background: rgb(16 24 40 / 6%);
}

/* ── 격자 ──────────────────────────────────────────────────────────────
 * 12칸. `--gx`(가로 틈) · `--gy`(세로 틈)를 `.g-*` 가 정한다. 좁은 화면에서는 칸이 한 줄에 하나씩 선다.
 */
.row {
  --gx: 1.5rem;
  --gy: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gy));
  margin-right: calc(-0.5 * var(--gx));
  margin-left: calc(-0.5 * var(--gx));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gx) * 0.5);
  padding-left: calc(var(--gx) * 0.5);
  margin-top: var(--gy);
}

.g-3 {
  --gx: 1rem;
  --gy: 1rem;
}

@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 1200px) {
  .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
}

/* ── 유틸리티 ──────────────────────────────────────────────────────────
 * `!important` — 표 칸 색(`table.data td`) 같은 화면 규칙을 이겨야 한다.
 */
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: var(--sp-2) !important; }
.w-100 { width: 100% !important; }
.text-muted { color: var(--text-muted) !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 숫자는 고정폭 — 줄마다 자릿수가 세로로 맞아야 비교가 된다. */
.text-end,
table.data td,
table.data th {
  font-variant-numeric: tabular-nums;
}

/* ── 표 껍데기의 회색 막대 ─────────────────────────────────────────────── */
.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  border-radius: 3px;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .placeholder-glow .placeholder {
    animation: none;
  }
}