/* 루마닉 공통 기초 규칙. DV 기초 CSS(foundation, 1-193줄)를 dv-port-recipe.md §3.2대로 이식했다.
   세대 스코프(body 속성 선택자) 제거, 리터럴 3곳 토큰화(112·132·162), 버튼 44px 통일, 모션은 DESIGN.md 3종만.
   값은 전부 lm-tokens.css 변수다. 이 파일에 hex 리터럴을 두지 않는다. 관리자·장병 두 표면이 함께 읽는다. */

/* ── 기초 (DV 1-27) ── */

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

body {
  margin: 0;
  background: var(--lm-bg-page);
  color: var(--lm-text);
  font-family: var(--lm-font-ui);
  font-size: 15px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

:where(button, input, textarea, select) {
  font: inherit;
}

:where(h1, h2, h3, h4, p) {
  margin-top: 0;
}

:where(h1, h2, h3, h4, strong) {
  color: var(--lm-text-strong);
}

:where(h1, h2, h3, h4) {
  text-wrap: balance;
}

:where(p) {
  text-wrap: pretty;
}

/* 링크 기본은 DV gen1 공개 CSS 53-56줄과 같이 상속. 탭·레일·행·밴드 같은 부품 링크가 대부분이라서다.
   본문 안 글자 링크만 .lm-link로 코발트 밑줄을 준다 */
:where(a) {
  color: inherit;
  text-decoration: none;
}

.lm-link {
  color: var(--lm-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

.lm-link:hover {
  color: var(--lm-primary-hover);
}

/* ── 포커스 링 (DV 29-32). 밝은 표면은 원색, 다크 표면(.lm-dark)은 72% 혼합 ── */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--lm-focus-ring);
  outline-offset: 3px;
}

.lm-dark :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--lm-focus-ring-dark);
}

/* ── 버튼 (DV 34-93). 높이 44px 단일, 14px/700 한 줄, 색 전환 160ms. transform은 전환하지 않는다 ── */

:where(.btn, button.btn, .app-login-gate-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    border-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

:where(.btn, button.btn, .app-login-gate-button):hover {
  border-color: var(--lm-text);
  background: var(--lm-bg-subtle);
  text-decoration: none;
}

:where(.btn, button.btn, .app-login-gate-button):active {
  transform: translateY(1px);
}

:where(.btn.primary, button.btn.primary) {
  border-color: var(--lm-primary);
  background: var(--lm-primary);
  color: var(--lm-on-primary);
}

:where(.btn.primary, button.btn.primary):hover {
  border-color: var(--lm-primary-hover);
  background: var(--lm-primary-hover);
  color: var(--lm-on-primary);
}

:where(.btn.primary, button.btn.primary):active {
  border-color: var(--lm-primary-pressed);
  background: var(--lm-primary-pressed);
}

:where(.btn.subtle, .btn.quiet) {
  border-color: transparent;
  background: transparent;
  color: var(--lm-primary);
  padding: 0 12px;
}

:where(.btn.subtle, .btn.quiet):hover {
  border-color: transparent;
  background: var(--lm-bg-selected);
  color: var(--lm-primary-hover);
}

/* 텍스트 버튼의 글자는 본문 왼쪽 선에서 시작한다. 좌우 12px 패딩은 누를 수 있는 영역일 뿐이라 음수 여백으로 선 밖에 둔다.
   버튼 줄(.lm-actions) 안에서 앞에 다른 요소가 있으면 박스 간격 8px을 지키려고 되돌린다. 오른쪽 끝 정렬 자리는 표면 CSS가 margin-right로 맞춘다 */
:where(.btn.subtle, .btn.quiet) {
  margin-left: -12px;
}

:where(.lm-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

:where(.lm-actions) > :where(.btn.subtle, .btn.quiet):not(:first-child) {
  margin-left: 0;
}

:where(.btn.danger, button.btn.danger) {
  border-color: var(--lm-danger);
  background: var(--lm-danger);
  color: var(--lm-on-primary);
}

:where(.btn.danger, button.btn.danger):hover {
  border-color: color-mix(in srgb, var(--lm-danger) 86%, black);
  background: color-mix(in srgb, var(--lm-danger) 86%, black);
  color: var(--lm-on-primary);
}

:where(.btn:disabled, button:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

/* ── 입력 (DV 95-114). 44px, border-strong 1px, 포커스는 코발트 경계 + 공통 링 ── */

:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  padding: 10px 12px;
  box-shadow: none;
  transition: border-color var(--lm-duration-fast) var(--lm-ease-out);
}

:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
  border-color: var(--lm-primary);
}

:where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--lm-danger);
}

:where(input, textarea, select):disabled {
  background: var(--lm-bg-subtle);
  color: var(--lm-text-muted);
  cursor: not-allowed;
}

:where(textarea) {
  min-height: 112px;
  resize: vertical;
}

:where(input, textarea)::placeholder {
  color: var(--lm-text-muted);
  opacity: 1;
}

/* ── 상태 chip (DV 116-122). 톤 4종의 색은 표면 CSS(lm-admin.css·app.css)가 정한다 ── */

:where(.tag, .chip, .status-chip) {
  border-radius: var(--lm-radius-pill);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

/* ── 패널·카드 (DV 124-129). 그림자 없음. border-width는 표면 CSS가 준다 ── */

:where(.panel, .card, .form-panel, .queue-panel) {
  border-color: var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  box-shadow: none;
}

/* ── 주의 안내 (DV 131-137, 132줄 경계 리터럴 → warning-accent) ── */

:where(.notice-box, [role="alert"]) {
  border: 1px solid var(--lm-warning-accent);
  border-radius: var(--lm-radius);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  box-shadow: none;
}

/* ── 다이얼로그 (DV 139-147, 146의 rgba 스크림 → --lm-scrim) ── */

:where(dialog) {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  box-shadow: var(--lm-shadow-overlay);
}

:where(dialog)::backdrop {
  background: var(--lm-scrim);
}

/* ── 아이콘 (DV 149-158, .dv-icon → .lm-icon). 기본 18px, 크기 변형 14(chip 안에서만)/16/24 ── */

.lm-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lm-icon.is-14 {
  width: 14px;
  height: 14px;
}

.lm-icon.is-16 {
  width: 16px;
  height: 16px;
}

.lm-icon.is-24 {
  width: 24px;
  height: 24px;
}

/* 크기는 맥락이 정한다. 한 줄·한 맥락 안에서는 한 크기만 쓰고 is-* 변형을 섞지 않는다.
   버튼·레일·입력 옆 18 · chip 안 14 · 보조 문구(상태 줄·고지·목록 메모) 16 · 빈 상태·403·탭바 24 */
:where(.btn) > .lm-icon {
  width: 18px;
  height: 18px;
}

:where(.tag, .chip, .status-chip) > .lm-icon {
  width: 14px;
  height: 14px;
}

/* 인라인 심볼 정의 블록(lm-icons.symbols.html). display:none 대신 0×0으로 숨겨 <use>가 항상 참조하도록 */
.lm-icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 브랜드 마크 36px. 게이트·로그인은 rail 면, 레일 안에서는 lm-shell.css가 rail-selected 면으로 덮는다 */
.lm-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--lm-radius);
  background: var(--lm-rail-bg);
  color: var(--lm-rail-accent);
}

.lm-mark svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
  stroke: none;
}

/* ── 스켈레톤 (DV 160-168, 162줄 옛 그린 리터럴 → --lm-skeleton). 반짝임은 모션 3종 중 ③, 1.2s ── */

.skeleton {
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-skeleton);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--lm-skeleton-sheen), transparent);
  animation: lm-skeleton var(--lm-duration-skeleton) infinite;
}

@keyframes lm-skeleton {
  100% {
    transform: translateX(100%);
  }
}

/* 스켈레톤 치수는 클래스로만 준다(인라인 style 금지). 높이: 텍스트 12·제목 20·표 행 40·레일 항목 44·밴드 72 */
.skeleton.sk-h-20 { height: 20px; }
.skeleton.sk-h-40 { height: 40px; }
.skeleton.sk-h-44 { height: 44px; }
.skeleton.sk-h-72 { height: 72px; }
.skeleton.sk-w-40 { width: 40%; }
.skeleton.sk-w-60 { width: 60%; }
.skeleton.sk-w-70 { width: 70%; }
.skeleton.sk-w-90 { width: 90%; }

/* ── 공용 유틸 ── */

/* 숫자·ID·시각·건수는 어디서나 tabular */
.lm-num {
  font-variant-numeric: tabular-nums;
}

/* 화면에 보이지 않는 보조 문구("불러오는 중" 등) */
.lm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 장병 PWA 제목 위계(굵기 500 하나). 굵기 대신 크기·ink-strong·자간·위아래 여백으로 세운다(DESIGN.md PWA Hierarchy) ── */

.lm-app :where(h1, h2) {
  color: var(--lm-text-strong);
  font-weight: 500;
}

.lm-app :where(h1) {
  margin: 24px 0 12px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.lm-app :where(h2) {
  margin: 32px 0 12px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.lm-app :where(h1, h2):first-child {
  margin-top: 0;
}

/* ── 장병 하단 고정 버튼 바. 주 행동은 좌우 16px 안에서 전체 폭으로, 엄지가 닿는 화면 아래에 둔다 ── */

.lm-action-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--lm-z-bar);
  display: grid;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--lm-safe-bottom));
  border-top: 1px solid var(--lm-border);
  background: var(--lm-bg-page);
}

.lm-action-bar > :where(.btn) {
  width: 100%;
}

.lm-action-bar > :where(.btn.subtle, .btn.quiet) {
  justify-self: start;
  width: auto;
}

/* ── 모바일 본문 16px (DV 170-178). 버튼 44px은 위에서 통일했으므로 여기서 다시 올리지 않는다 ── */

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
}

/* ── 모션 정지 (DV 180-193). 색 전환·이동·스켈레톤 반짝임 셋 다 멈춘다 ── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skeleton::after {
    animation: none;
  }
}