/* 루마닉 관리자 셸. DV gen1 골격 + gen2 레일 규칙을 dv-port-recipe.md §3.3 순서(골격 → 구조 → 레일 색 → 반응형)로 합성했다.
   값은 전부 lm-tokens.css 변수다. hex 리터럴·인라인 style·transition: all 없음. @font-face는 fonts.css에 있다.
   높이·간격은 DESIGN.md Precision Rules 집합({4,8,12,16,20,24,32,48}, DV 계승 예외 9·11·14)만 쓴다.
   레일·드로어·계정 카드 마크업은 lm-shell.js가 만든다. 화면 부품(케이스 보드·상세·집계 표)은 lm-admin.css에 있다. */

/* ── 0. 본문 밀기·건너뛰기 링크 (v2 1-18) ── */

.lm-admin {
  min-height: 100dvh;
}

.lm-admin > main {
  box-sizing: border-box;
  width: calc(100% - var(--lm-sidebar-width));
  min-width: 0;
  min-height: 100dvh;
  margin-left: var(--lm-sidebar-width);
  padding: 24px 32px 48px;
}

.lm-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--lm-z-overlay);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-primary);
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-200%);
}

.lm-skip:focus-visible {
  transform: none;
}

/* ── A. 레일 골격 (gen1 214-237, 243-245, 340-347, 437-455) ── */

.app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--lm-z-sidebar);
  display: flex;
  flex-direction: column;
  width: var(--lm-sidebar-width);
  padding: 16px 14px 12px;
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink);
  overflow: hidden;
}

.app-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--lm-rail-ink-strong) 26%, transparent) transparent;
}

.app-nav-scroll::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

.app-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.app-nav-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--lm-radius-pill);
  background: color-mix(in srgb, var(--lm-rail-ink-strong) 26%, transparent);
}

.app-nav-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--lm-rail-ink-strong) 40%, transparent);
}

.app-nav-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* 브랜드 52px: 36px 마크 + 워드마크 14/750 + 부제 11/550 (v2 38-69, 1862-1868) */
.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 0 0 12px;
  padding: 8px;
  border-radius: var(--lm-radius);
  color: var(--lm-rail-ink-strong);
  text-decoration: none;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

.app-brand:hover {
  background: var(--lm-rail-hover);
}

.app-brand .lm-mark {
  background: var(--lm-rail-selected);
}

.app-brand .word {
  display: grid;
  gap: 0;
  min-width: 0;
}

.app-brand .word strong {
  color: var(--lm-rail-ink-strong);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.app-brand .word small {
  color: var(--lm-rail-muted);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.4;
}

/* 복원 환경 배너: 브랜드 아래, rail-danger 12px */
.lm-restored {
  margin: 0 8px 8px;
  color: var(--lm-rail-danger);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

/* 그룹: 라벨 11/650, 그룹 사이 rail-line 1px (v2 74-98, 1896-1905) */
.app-navgroup {
  display: grid;
  gap: 4px;
  padding: 8px 0 4px;
}

/* 역할에 따라 앞 그룹이 hidden일 수 있어, 앞에 "보이는" 그룹이 있을 때만 위선을 긋는다 */
.app-navgroup:not([hidden]) ~ .app-navgroup:not([hidden]) {
  margin-top: 4px;
  border-top: 1px solid var(--lm-rail-line);
}

.app-navgroup > .grp-label {
  padding: 8px 10px 4px;
  color: var(--lm-rail-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* 항목 44px, 13.5/600, 8px 라운드, 아이콘 18px (gen1 340-347 + v2 111-156 + 1907-1934) */
.app-navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 44px;
  min-height: 44px;
  padding: 0 11px;
  border-radius: var(--lm-radius);
  color: var(--lm-rail-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

.app-navitem .lm-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.app-navitem .lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-navitem:hover {
  background: var(--lm-rail-hover);
  color: var(--lm-rail-ink-strong);
}

.app-navitem.active {
  background: var(--lm-rail-selected);
  color: var(--lm-rail-ink-strong);
}

/* 골드 위치 마커: content:""가 있어야 그려진다(gen1 347). 위아래 11px 안쪽 */
.app-navitem.active::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 2px;
  border-radius: var(--lm-radius-pill);
  background: var(--lm-rail-accent);
}

.app-navitem[hidden],
.app-navgroup[hidden] {
  display: none;
}

/* 다크 레일 포커스 링은 72% 혼합값. 스크롤 영역 안 항목은 링이 잘리지 않게 안쪽으로 그린다 */
.app-sidebar :where(a, button):focus-visible {
  outline: var(--lm-focus-ring-dark);
  outline-offset: 3px;
}

.app-nav-scroll .app-navitem:focus-visible {
  outline-offset: -3px;
}

/* 레일이 역할을 모를 때: 44px 스켈레톤 5개 */
.app-nav-skeleton {
  display: grid;
  gap: 8px;
  padding: 8px 0;
}

.app-sidebar .skeleton {
  background: color-mix(in srgb, var(--lm-rail-ink-strong) 8%, transparent);
}

.app-sidebar .skeleton::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lm-rail-ink-strong) 10%, transparent), transparent);
}

/* 하단 계정 카드 (gen1 437-455 + v2 197-219, 1936-1957, 2077-2092 + 레시피 §6.4) */
.app-bottom {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--lm-rail-line);
}

.app-account {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--lm-rail-line);
  border-radius: var(--lm-radius);
  background: color-mix(in srgb, var(--lm-rail-ink-strong) 6%, transparent);
}

.app-account.is-verified {
  border-color: color-mix(in srgb, var(--lm-rail-accent) 40%, var(--lm-rail-line));
}

.app-account .av {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-rail-selected);
  color: var(--lm-rail-ink-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.app-account .meta {
  display: grid;
  gap: 0;
  min-width: 0;
}

.app-account .meta > .skeleton + .skeleton {
  margin-top: 8px;
}

.app-account .who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: 1.4;
}

.app-account .who strong {
  flex: 0 0 auto;
  color: var(--lm-rail-ink-strong);
  font-size: 13.5px;
  font-weight: 700;
}

.app-account .who .lm-num {
  min-width: 0;
  overflow: hidden;
  color: var(--lm-rail-ink);
  font-size: 13.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account .meta small {
  display: block;
  color: var(--lm-rail-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.app-account .app-auth-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lm-rail-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.app-account .app-auth-state .lm-icon {
  width: 16px;
  height: 16px;
}

.app-account.is-verified .app-auth-state {
  color: var(--lm-rail-success);
}

.app-account.is-auth-error .app-auth-state {
  color: var(--lm-rail-danger);
}

/* 로그아웃·비밀번호 변경: 반씩 나눈 44px 행. 레일 위에서 역할·서비스ID 같은 메타 문구와 구별되도록 평소에도 옅은 면을 깔고
   hover에서 한 단 밝힌다. 경계 없이 면만 써서 카드 속 카드가 되지 않는다. 모서리는 레일 항목과 같은 6px */
.app-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
  margin-top: 8px;
}

.app-account-actions .btn.quiet {
  min-width: 0;
  margin-left: 0;
  padding: 0 8px;
  border-radius: var(--lm-radius-inner);
  background: var(--lm-rail-selected);
  color: var(--lm-rail-ink-strong);
  font-size: 13.5px;
}

.app-account-actions .btn.quiet:hover {
  background: color-mix(in srgb, var(--lm-rail-ink-strong) 20%, transparent);
  color: var(--lm-rail-ink-strong);
}

/* ── B. 토글·스크림·모바일 타이틀 (gen1 504-532, v2 221-235) ── */

.app-toggle {
  position: fixed;
  top: 6px;
  left: 12px;
  z-index: var(--lm-z-drawer);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  cursor: pointer;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

.app-toggle:hover {
  background: var(--lm-bg-subtle);
}

.app-toggle .lm-icon {
  width: 18px;
  height: 18px;
}

.app-toggle .is-close {
  display: none;
}

.app-mobile-open .app-toggle .is-open {
  display: none;
}

.app-mobile-open .app-toggle .is-close {
  display: block;
}

.app-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--lm-z-scrim);
  background: var(--lm-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lm-duration) var(--lm-ease-out);
}

.app-mobile-title {
  display: none;
}

/* 데스크톱(1025px 이상)은 항상 264px, 토글이 보이지 않는다(레시피 §6.2 결정) */
@media (min-width: 1025px) {
  .app-toggle,
  .app-scrim {
    display: none;
  }
}

/* ── C. 페이지 골격: 머리·상태 줄·탭·필드 (v2 250-276 + DESIGN.md Layout) ── */

.lm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.lm-page-header-copy {
  min-width: 0;
}

.lm-page-header h1 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.lm-page-header p {
  max-width: 68ch;
  margin: 4px 0 0;
  color: var(--lm-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.lm-page-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px 12px;
  margin: 0;
}

.lm-page-actions select,
.lm-filter-row select {
  width: auto;
  min-width: 140px;
}

/* 버튼 줄 안에서 앞에 요소가 있는 quiet 버튼은 박스 간격을 지킨다(foundation 음수 여백 되돌림) */
.lm-page-actions > .btn.quiet:not(:first-child),
.lm-dialog-actions > .btn.quiet:not(:first-child),
.lm-empty .btn.quiet,
.lm-forbidden .btn.quiet {
  margin-left: 0;
}

/* 필드: 라벨 위 12px/650, 필드 44px, 도움말·오류 아래 13.5px */
.lm-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lm-field > label,
.lm-field > .lm-field-label {
  color: var(--lm-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.lm-field-help {
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-field-error {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--lm-danger);
  font-size: 13.5px;
  line-height: 1.5;
}

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

.lm-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
}

.lm-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--lm-primary);
}

/* 필터 행(A-06): 필드 3~4개 + [조회] */
.lm-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 24px 0 0;
}

.lm-filter-row .lm-field {
  flex: 0 1 200px;
}

.lm-filter-row .lm-field.is-wide {
  flex-basis: 280px;
}

.lm-filter-row select {
  width: 100%;
}

/* aria-live 한 줄. 비어 있으면 자리를 차지하지 않는다 */
.queue-action-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

.queue-action-status:empty {
  display: none;
}

.queue-action-status .lm-icon {
  width: 16px;
  height: 16px;
}

.queue-action-status[data-kind="success"] {
  color: var(--lm-success-text);
}

.queue-action-status[data-kind="loading"] {
  color: var(--lm-warning-text);
}

.queue-action-status[data-kind="error"] {
  color: var(--lm-danger);
}

/* 탭 스트립 44px (DV 원본 CSS 83-118 + 레시피 §4 표). 고르지 않은 탭은 보조 잉크로 물러나 지금 보는 탭이 혼자 진하다 */
.admin-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}

.admin-view-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--lm-radius);
  background: transparent;
  color: var(--lm-text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  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);
}

.admin-view-tabs [role="tab"]:hover {
  border-color: var(--lm-border);
  background: var(--lm-bg-subtle);
  color: var(--lm-text-strong);
}

.admin-view-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--lm-border);
  background: var(--lm-bg-selected);
  color: var(--lm-primary);
}

.admin-view-tabs [role="tab"][aria-selected="true"] .lm-count {
  background: var(--lm-bg-surface);
  color: var(--lm-primary);
}

.admin-view-panel[hidden] {
  display: none;
}

/* ── D. 부품: 패널·밴드·표·chip·배지·정의 목록·스켈레톤·빈 상태·오류·403·다이얼로그 ── */

.panel {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  padding: 20px;
}

.panel.is-flush {
  padding: 0;
  overflow: hidden;
}

/* 패널 머리: 제목 18/700 + 설명 13.5 muted + 우측 건수 배지. 소제목 없음 */
.queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.is-flush > .queue-head {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lm-hairline);
}

.queue-head h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.queue-head p {
  margin: 4px 0 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* 밴드: 상자를 걷고 바탕 위에 숫자만 세운 줄. 칸 사이 hairline 하나뿐, 면·경계·그림자 없음.
   이름(12 muted) → 값(26 tabular) → 보조 문구(12 muted) 세 줄이 다 들어가는 높이가 88px다 */
.lm-band,
.lm-skel-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 24px;
}

/* 스켈레톤 칸이 밴드 칸과 같은 규칙을 읽어야 자료가 와도 밴드 높이가 흔들리지 않는다 */
.lm-band-cell,
.lm-skel-band > div {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 88px;
  margin: 0;
  padding: 8px 20px;
  border: 0;
  border-left: 1px solid var(--lm-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--lm-text-strong);
  font: inherit;
  text-align: left;
  cursor: default;
  transition: background-color var(--lm-duration-fast) var(--lm-ease-out);
}

.lm-skel-band > div {
  gap: 8px;
}

.lm-band-cell:first-child,
.lm-skel-band > div:first-child {
  border-left: 0;
}

/* 바탕 위 밴드(A-02·A-07)만 첫 칸을 제목 글자선에 맞춘다. 패널·묶음 안 밴드는 칸 여백을 그대로 지킨다 */
.lm-admin > main > .lm-band > .lm-band-cell:first-child,
.lm-admin > main > .lm-skel-band > div:first-child {
  padding-left: 0;
}

.lm-band-cell .lm-band-label {
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.lm-band-cell .lm-band-value {
  color: var(--lm-text-strong);
  font-size: 26px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

.lm-band-cell .lm-band-value small {
  margin-left: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.lm-band-cell.is-zero .lm-band-value,
.lm-band-cell .lm-band-value.is-muted {
  color: var(--lm-text-muted);
}

button.lm-band-cell {
  cursor: pointer;
}

button.lm-band-cell:hover {
  background: var(--lm-bg-subtle);
}

button.lm-band-cell:hover .lm-band-value {
  color: var(--lm-primary);
}

button.lm-band-cell:focus-visible {
  outline-offset: -3px;
}

/* 표: 머리는 회색 면이 아니라 잉크로 세운다(흰 표면 + 본문 잉크 700 + border 1px 아래선). 행은 48px 리듬과
   hover·선택 면으로 갈라 줄마다 선을 긋지 않는다. 숫자 격자(A-06 문항 표)만 lm-admin.css에서 행 선을 되살린다 */
.lm-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--lm-border) transparent;
}

.lm-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.lm-table caption {
  padding: 0 12px 8px;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  text-align: left;
}

.lm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--lm-border);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.lm-table tbody td,
.lm-table tbody th {
  height: 48px;
  padding: 0 12px;
  color: var(--lm-text);
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-table tbody th {
  color: var(--lm-text-strong);
  font-weight: 650;
}

.lm-table .is-num {
  text-align: right;
}

.lm-table tbody tr:hover > td,
.lm-table tbody tr:hover > th {
  background: var(--lm-bg-subtle);
}

.lm-table tbody tr.is-selected > td,
.lm-table tbody tr.is-selected > th {
  background: var(--lm-bg-selected);
  color: var(--lm-text-strong);
}

/* 지금 열려 있는 행: 선택 면만으로는 hover와 헷갈려 코발트 2px 표시를 행 앞에 세운다(inset 그림자는 선이지 elevation이 아니다) */
.lm-table tbody tr.is-selected > :first-child {
  box-shadow: inset 2px 0 0 var(--lm-primary);
}

.lm-table tfoot td,
.lm-table tfoot th {
  height: 48px;
  padding: 0 12px;
  border-top: 1px solid var(--lm-border);
  color: var(--lm-text-strong);
  font-weight: 650;
  text-align: left;
}

.lm-table .is-muted {
  color: var(--lm-text-muted);
  font-weight: 500;
}

/* 마스킹 셀: warning 면 + 글자 + 왼쪽 4px 선(DESIGN.md 선 규칙의 4px 허용 자리). inset 그림자는 선이지 elevation이 아니다 */
.lm-table .lm-warn,
.lm-table tbody tr:hover > .lm-warn {
  box-shadow: inset 4px 0 0 var(--lm-warning-accent);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  white-space: nowrap;
}

/* 표 아래 고지: 아이콘 16 + 문구. 아이콘 상자를 한 줄 높이(20px)로 두어 첫 줄 가운데에 맞춘다 */
.lm-table-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--lm-hairline);
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-table-note .lm-icon {
  width: 16px;
  height: 20px;
  color: var(--lm-warning-text);
}

.lm-table-note strong {
  color: var(--lm-text-strong);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 상태 chip 4종 (DESIGN.md Chips). 경계는 글자색 24% 톤 엣지 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--lm-text) 24%, var(--lm-bg-subtle));
  border-radius: var(--lm-radius-pill);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

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

.tag.warn {
  border-color: color-mix(in srgb, var(--lm-warning-text) 24%, var(--lm-warning-surface));
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
}

.tag.danger {
  border-color: color-mix(in srgb, var(--lm-danger) 24%, var(--lm-danger-surface));
  background: var(--lm-danger-surface);
  color: var(--lm-danger);
}

.tag.success {
  border-color: color-mix(in srgb, var(--lm-success-text) 24%, var(--lm-success-surface));
  background: var(--lm-success-surface);
  color: var(--lm-success-text);
}

/* 미확인 배지: 점선 경계 + 흰 면 + 보조 잉크(screen-spec §2.3 배지 3종). A-02 공유 기록 보기와 A-04 공유 리포트가 쓴다 */
.tag.is-dashed {
  border: 1px dashed var(--lm-border);
  background: var(--lm-bg-surface);
  color: var(--lm-text-muted);
}

/* 건수 배지: 중립 chip 문법의 숫자 전용 */
.lm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--lm-radius-pill);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lm-count.is-zero {
  color: var(--lm-text-muted);
}

/* 정의 목록(aside 메타): 이름표는 12/650 muted로 물러나고 값이 14 strong으로 앞에 선다. 줄 사이 12px */
.lm-dl {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  row-gap: 12px;
  column-gap: 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.lm-dl dt {
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 21px;
}

.lm-dl dd {
  margin: 0;
  color: var(--lm-text-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.lm-mono {
  font-family: var(--lm-font-mono);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
}

/* 스켈레톤 배치: 실제 레이아웃과 같은 개수·높이(텍스트 12, 제목 20, 행 48, 밴드 88). 밴드 스켈레톤은 위 밴드 절이 함께 잡는다 */

.lm-skel-rows {
  display: grid;
}

.lm-skel-row {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
}

.lm-skel-row.is-head {
  height: 40px;
  border-bottom: 1px solid var(--lm-border);
}

.lm-skel-row > .skeleton {
  flex: 0 0 auto;
}

/* 빈 상태: 가운데, 아이콘 24 muted, 제목 15, 설명 13.5 muted, 보조 버튼 하나 */
.lm-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--lm-text-muted);
  text-align: center;
}

.lm-empty .lm-icon {
  width: 24px;
  height: 24px;
  color: var(--lm-text-muted);
}

.lm-empty strong {
  color: var(--lm-text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
}

.lm-empty p {
  max-width: 44ch;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-empty .btn {
  margin-top: 8px;
}

/* 오류: surface 카드, 붉은 면 없음, 아이콘 18 danger + 제목 + 설명 + [다시 시도] */
.lm-error[role="alert"] {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
}

.lm-error[role="alert"] > .lm-icon {
  grid-row: 1 / span 3;
  height: 24px;
  color: var(--lm-danger);
}

.lm-error strong {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
}

.lm-error p {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-error .lm-error-actions {
  margin-top: 8px;
}

/* 403: 본문 전체를 대체하는 가운데 블록 */
.lm-forbidden {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 48px;
  padding: 48px 24px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  text-align: center;
}

.lm-forbidden .lm-icon {
  width: 24px;
  height: 24px;
  color: var(--lm-text-muted);
}

.lm-forbidden h2 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.lm-forbidden p {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-forbidden .btn {
  margin-top: 8px;
}

/* 다이얼로그: 480px, 24px, Overlay 그림자, 등장 scale .98→1 200ms(모션 ②) */
.lm-dialog {
  width: min(480px, calc(100% - 32px));
  max-width: 480px;
  margin: auto;
  padding: 24px;
  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);
}

.lm-dialog.is-wide {
  width: min(640px, calc(100% - 32px));
  max-width: 640px;
}

.lm-dialog[open] {
  animation: lm-dialog-in var(--lm-duration) var(--lm-ease-out);
}

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

@keyframes lm-dialog-in {
  from {
    transform: scale(0.98);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lm-dialog h2 {
  margin: 0 0 16px;
  color: var(--lm-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.lm-dialog p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.lm-dialog .lm-field + .lm-field {
  margin-top: 16px;
}

.lm-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* ── D-2. 2026-09-11 심사 반영: select 화살표·로딩 자리·밴드 보조 문구·다이얼로그 오류 ── */

/* select: 브라우저 기본 화살표 글리프를 끄고 스프라이트 chevron-down 16px(Tabler stroke 2)을 겹친다. 래퍼가 필드 폭을 그대로 따른다 */
.lm-select {
  position: relative;
  display: grid;
  min-width: 0;
}

.lm-select > select {
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.lm-select > .lm-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--lm-text-muted);
  pointer-events: none;
}

.lm-select > select:disabled + .lm-icon {
  opacity: 0.52;
}

/* 로딩 중 상태 줄 자리: 상태 줄과 같은 상자(24px + 위 16px)를 스켈레톤 한 줄로 채워, 데이터가 와도 밴드·탭·보드가 밀리지 않는다 */
.queue-status-skel {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 16px 0 0;
}

.queue-status-skel .skeleton {
  width: 192px;
}

/* 건수 배지 자리 스켈레톤: 탭·열 머리 폭과 높이가 로딩과 idle 사이에 흔들리지 않게 배지와 같은 24px pill */
.skeleton.lm-count-skel {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--lm-radius-pill);
  vertical-align: middle;
}

/* 탭 전체 건수는 두 자리가 보통이라 두 자리 배지 폭(실측 31px)에 맞춘다 */
.admin-view-tabs [data-tab-count] + .lm-count-skel {
  width: 32px;
}

/* 밴드 값 아래 보조 문구(분모 설명). 값과 같은 줄에 붙이면 1180에서 줄이 바뀌어 밴드 높이가 뛰므로 늘 제 줄에 둔다 */
.lm-band-cell .lm-band-value .lm-band-note {
  display: block;
  margin-left: 0;
  color: var(--lm-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}

/* 보드를 좁히는 밴드 칸(토글)이 켜져 있으면 선택 표면 + 코발트 값 */
button.lm-band-cell[aria-pressed="true"] {
  background: var(--lm-bg-selected);
}

button.lm-band-cell[aria-pressed="true"] .lm-band-value {
  color: var(--lm-primary);
}

.lm-dialog .lm-dialog-error {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* 필드·dialog 오류 한 줄은 글자와 아이콘만 쓴다. lm-foundation.css의 :where([role="alert"]) 주의 상자(경계·면)를 여기서 걷어 낸다 */
.lm-field-error[role="alert"],
.lm-dialog .lm-dialog-error {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 비활성 버튼의 이유 한 줄(DESIGN.md Buttons · Disabled). 버튼 바로 위나 앞에 두고 aria-describedby로 잇는다 */
.lm-action-note {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.lm-page-actions > .lm-action-note {
  align-self: center;
}

.lm-dialog .lm-action-note {
  margin-top: 16px;
  text-align: right;
}

.lm-dialog .lm-action-note + .lm-dialog-actions {
  margin-top: 8px;
}

/* 요청 ID 링크(관리자): 오류 블록·403의 뒤 8자를 감사기록 조회로 잇는다 */
.lm-rid-link {
  color: var(--lm-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

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

.lm-field-error[hidden] {
  display: none;
}

/* 상태 게이트: data-show가 있는 요소는 루트 data-state와 맞을 때만 보인다 */
[data-state="loading"] [data-show]:not([data-show~="loading"]),
[data-state="idle"] [data-show]:not([data-show~="idle"]),
[data-state="empty"] [data-show]:not([data-show~="empty"]),
[data-state="error"] [data-show]:not([data-show~="error"]),
[data-state="forbidden"] [data-show]:not([data-show~="forbidden"]) {
  display: none !important;
}

/* 자료가 있어야 의미 있는 행동(CSV 등)은 로딩·빈 상태에서 누를 수 없다 */
[data-state="loading"] [data-needs-data],
[data-state="empty"] [data-needs-data] {
  pointer-events: none;
  opacity: 0.52;
}

/* ── E. 반응형 ── */

@media (max-width: 1180px) {
  .lm-admin > main {
    padding: 24px 24px 48px;
  }
}

@media (max-width: 1024px) {
  .lm-admin > main {
    width: 100%;
    margin-left: 0;
    padding: 56px 16px 40px;
  }

  .lm-admin > main > .lm-page-header {
    padding-top: 16px;
  }

  /* 상단 고정 바 56px: 토글 뒤에 웜 페이퍼 면을 깔아 본문이 그 아래로 지나간다 */
  .lm-admin::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--lm-z-bar);
    height: 56px;
    border-bottom: 1px solid var(--lm-border);
    background: var(--lm-bg-page);
  }

  .app-mobile-title {
    position: fixed;
    top: 0;
    right: 16px;
    left: 68px;
    z-index: var(--lm-z-bar);
    display: block;
    height: 56px;
    color: var(--lm-text-strong);
    font-size: 15px;
    font-weight: 700;
    line-height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }

  .app-sidebar {
    transform: translateX(-100%);
    transition: transform var(--lm-duration) var(--lm-ease-out);
  }

  .app-mobile-open .app-sidebar {
    transform: translateX(0);
    box-shadow: var(--lm-shadow-drawer);
  }

  .app-mobile-open::before,
  .app-mobile-open .app-mobile-title {
    display: none;
  }

  .app-mobile-open .app-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .app-mobile-open .app-toggle {
    left: calc(var(--lm-sidebar-width) + 12px);
  }

  .lm-band {
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .lm-band-cell {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-scrim,
  .lm-dialog[open] {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}

/* ── F. 2026-09-11 WP-12 셸 동작 보강: 알림 줄 주의 톤·버튼 대기 폭·계정 카드 오류·dialog 본문 뒤 필드 ── */

/* 자동 로그아웃 5분 전 안내. 확인이 필요한 상태라 주의 글자색(시계 아이콘) */
.queue-action-status[data-kind="warning"] {
  color: var(--lm-warning-text);
}

/* 대기 중 라벨("바꾸는 중")로 바뀌어도 버튼이 누르기 전 폭보다 좁아지지 않는다. 폭 값은 lm-admin.js withBusy가 CSSOM으로 넣는다 */
.btn[aria-busy="true"] {
  min-width: var(--lm-busy-width, 0);
}

.app-account .av .lm-icon {
  width: 18px;
  height: 18px;
}

.app-account.is-auth-error .av {
  color: var(--lm-rail-danger);
}

.lm-dialog p + .lm-field {
  margin-top: 16px;
}

/* ── G. 로그인 게이트(A-00). DV v2 게이트 2열(642-797)과 gen1 copy grid(603-607)를 DESIGN.md 규칙으로 옮겼다.
   왼쪽 248px 네이비 면은 레일과 같은 어휘다: 위 브랜드 블록, 가운데 단계 목록(현재 단계 = 레일 선택 면 + 골드 2px "지금 여기"), 아래 안내.
   오른쪽 행동면은 한 단계씩 바뀐다. 이 페이지는 lm-shell.js를 싣지 않고 body.lm-login이라 셸 본문 밀기 규칙(.lm-admin > main)을 받지 않는다 ── */

.lm-login {
  min-height: 100dvh;
}

/* 게이트는 세로 가운데보다 조금 위에 둔다. 카드 위아래로 남는 높이를 4:5로 나눠 위 여백이 아래보다 조금 작다.
   카드가 화면보다 길면(인증 앱 등록 등) 두 칸이 0이 되어 위 여백 48px에서 시작하고 아래로 스크롤된다 */
.app-login-page {
  display: grid;
  grid-template-rows: minmax(0, 4fr) auto minmax(0, 5fr);
  min-height: 100dvh;
  padding: 48px 16px;
}

/* 높이 700px 이하에서는 가운데로 옮기지 않고 위 여백 48px에 붙인다. 단계마다 카드 높이가 달라도 윗선이 움직이지 않는다 */
@media (max-height: 700px) {
  .app-login-page {
    grid-template-rows: 0 auto minmax(0, 1fr);
  }
}

.app-login-gate {
  grid-row: 2;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  width: min(720px, 100%);
  margin: 0 auto;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-surface);
  overflow: hidden;
}

.app-login-gate-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px 16px;
  background: var(--lm-rail-bg);
  color: var(--lm-rail-ink);
}

/* 브랜드 블록은 레일 .app-brand와 같은 52px: 36px 마크(레일 선택 면) + 워드마크 14/750 + 부제 11/550 */
.app-login-gate-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px;
}

.app-login-gate-mark .lm-mark {
  background: var(--lm-rail-selected);
}

.app-login-gate-mark .word {
  display: grid;
  min-width: 0;
}

.app-login-gate-mark strong {
  color: var(--lm-rail-ink-strong);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.app-login-gate-mark small {
  color: var(--lm-rail-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
}

.app-login-gate-progress {
  display: grid;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--lm-rail-line);
}

.app-login-gate-label {
  margin: 0;
  padding: 0 8px 4px;
  color: var(--lm-rail-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.app-login-gate-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 단계 한 줄: 번호(끝난 단계는 체크) 20px 칸 + 이름. 처음 로그인 때만 거치는 단계는 둘째 줄에 12px 보조 문구. 누르는 대상이 아니라 hover가 없다 */
.app-login-gate-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  min-height: 40px;
  padding: 8px;
  border-radius: var(--lm-radius-inner);
  color: var(--lm-rail-muted);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.app-login-gate-steps .no {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}

.app-login-gate-steps .no .lm-icon {
  width: 16px;
  height: 16px;
}

.app-login-gate-steps small {
  grid-column: 2;
  color: var(--lm-rail-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.app-login-gate-steps li.is-done {
  color: var(--lm-rail-ink);
}

.app-login-gate-steps li.is-done .no {
  color: var(--lm-rail-success);
}

.app-login-gate-steps li[aria-current="step"] {
  background: var(--lm-rail-selected);
  color: var(--lm-rail-ink-strong);
}

.app-login-gate-steps li[aria-current="step"]::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 2px;
  border-radius: var(--lm-radius-pill);
  background: var(--lm-rail-accent);
}

.app-login-gate-note {
  margin: auto 0 0;
  padding: 16px 8px 0;
  border-top: 1px solid var(--lm-rail-line);
  color: var(--lm-rail-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.app-login-gate-body {
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
  padding: 32px;
}

.app-login-gate-step {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.app-login-gate-copy {
  display: grid;
  gap: 8px;
}

.app-login-gate-copy h1 {
  margin: 0;
  color: var(--lm-text-strong);
  font-size: 24px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.app-login-gate-copy > p {
  max-width: 44ch;
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.app-login-gate-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.app-login-gate-actions {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 8px;
}

.app-login-gate-actions > .btn.primary {
  justify-self: stretch;
}

/* 게이트 안 알림(자동 로그아웃 뒤 복귀·로그인 잠금·설정 키 불러오기 실패): 경계 없는 보조 표면 블록이라 카드 속 카드가 되지 않는다.
   foundation의 [role="alert"] 주의 면·경계를 이 클래스가 덮는다 */
.app-login-gate-notice,
.app-login-gate-alert {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--lm-radius);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.app-login-gate-notice > .lm-icon,
.app-login-gate-alert > .lm-icon {
  grid-row: 1 / span 3;
  width: 18px;
  height: 20px;
  color: var(--lm-text-muted);
}

.app-login-gate-alert > .lm-icon {
  color: var(--lm-danger);
}

.app-login-gate-notice strong,
.app-login-gate-alert strong {
  display: block;
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.app-login-gate-alert > p,
.app-login-gate-alert > .lm-actions {
  grid-column: 2;
  margin: 0;
}

.app-login-gate-alert > .lm-actions {
  margin-top: 4px;
}

/* 설정 키·설정 주소: 옮겨 적는 읽기 전용 값 + 44px 복사 버튼. 입력칸과 같은 윤곽에 보조 표면을 깔아 "입력하는 칸이 아니라 값"임을 보인다.
   설정 키는 폰에 한 글자씩 옮겨 적는 값이라 mono 12.5px 대신 15px로 키우고 4자 단위로 띄운다(DR-02) */
.app-login-gate-key {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  min-height: 44px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  background: var(--lm-bg-subtle);
  overflow: hidden;
}

.app-login-gate-key > code,
.app-login-gate-key > .skeleton {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.app-login-gate-key > code {
  display: block;
  padding: 10px 12px;
  color: var(--lm-text-strong);
  font-family: var(--lm-font-mono);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.app-login-gate-key > .app-login-gate-secret {
  font-size: 15px;
  word-break: normal;
}

.app-login-gate-key > .skeleton {
  margin: 0 12px;
}

.app-login-gate-keycopy {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--lm-hairline);
  background: transparent;
  color: var(--lm-primary);
  cursor: pointer;
  transition:
    background-color var(--lm-duration-fast) var(--lm-ease-out),
    color var(--lm-duration-fast) var(--lm-ease-out);
}

.app-login-gate-keycopy:hover {
  background: var(--lm-bg-selected);
  color: var(--lm-primary-hover);
}

.app-login-gate-keycopy:focus-visible {
  outline-offset: -3px;
}

.app-login-gate-keycopy:disabled {
  color: var(--lm-text-muted);
}

/* 앱별 입력 메뉴(DR-02 ②): 앱 이름 176px + 메뉴 이름 */
.app-login-gate-apps {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.app-login-gate-apps > div {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  column-gap: 12px;
}

.app-login-gate-apps dt {
  color: var(--lm-text-strong);
  font-weight: 500;
}

.app-login-gate-apps dd {
  margin: 0;
  color: var(--lm-text);
}

/* 이용 안내 문안: 줄마다 hairline, 아래 안내 버전. 로딩 중에는 같은 자리의 스켈레톤 네 줄 */
.app-login-gate-doc {
  display: grid;
  gap: 12px;
}

.app-login-gate-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lm-hairline);
  list-style: none;
}

.app-login-gate-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--lm-hairline);
  color: var(--lm-text);
  font-size: 15px;
  line-height: 1.6;
}

.app-login-gate-meta {
  margin: 0;
  color: var(--lm-text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.app-login-gate-skel {
  display: grid;
  gap: 16px;
  padding: 16px 0;
}

.app-login-gate-agree {
  display: grid;
  gap: 4px;
}

.app-login-gate-agree .lm-check {
  color: var(--lm-text-strong);
  font-size: 15px;
}

@media (max-width: 720px) {
  /* 좁은 화면은 한 열 카드가 길고 키보드가 올라오므로 가운데로 옮기지 않고 위에 붙인다 */
  .app-login-page {
    grid-template-rows: 0 auto minmax(0, 1fr);
    padding: 24px 16px 40px;
  }

  .app-login-gate {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-login-gate-brand {
    padding: 8px 16px;
  }

  .app-login-gate-progress,
  .app-login-gate-note {
    display: none;
  }

  .app-login-gate-body {
    padding: 24px 20px;
  }

  .app-login-gate-apps > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── H. 2026-09-11 WP-12 심사 반영: 요청 과다 잠금·비밀번호 보기 토글·인증 코드 칸·설정 주소 한 줄·앱 추가 방법 ── */

/* 잠금 안내는 제목 아래 설명 문단 자리에 들어간다. 잠긴 동안 설명을 치워 카드 높이가 크게 뛰지 않는다 */
.app-login-gate-step[data-locked] .app-login-gate-copy > p {
  display: none;
}

.app-login-gate-copy > .app-login-gate-alert {
  margin-top: 8px;
}

/* 초읽기 숫자는 문장보다 한 단 진하게. 폭은 .lm-num(고정폭 숫자)이 잡는다 */
.app-login-gate-alert [data-lock-left],
.lm-lock [data-lock-left] {
  color: var(--lm-text-strong);
  font-weight: 650;
}

/* 포커스를 옮겨 읽히게 하는 제목·잠금 안내는 누르는 대상이 아니라 링을 그리지 않는다 */
.app-login-gate-copy h1:focus-visible,
.app-login-gate-alert[tabindex="-1"]:focus-visible,
.lm-lock[tabindex="-1"]:focus-visible,
.lm-forbidden h2:focus-visible {
  outline: none;
}

/* 이용 안내 단계에서는 오른쪽 목록이 감사기록을 말하므로 왼쪽 안내는 첫 문장만 둔다 */
.app-login-page[data-step="notice"] .app-login-gate-note-extra {
  display: none;
}

/* 비밀번호 칸 + 오른쪽 44px 보기 토글(DR-01 ①). 토글은 입력칸 윤곽 안에 겹쳐 두고 글자는 토글 앞에서 끝난다.
   hover는 면 대신 글자색만 바꿔 입력칸 경계를 가리지 않는다 */
.lm-password {
  position: relative;
  min-width: 0;
}

.lm-password > input {
  padding-right: 48px;
}

.lm-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--lm-radius);
  background: transparent;
  color: var(--lm-text-muted);
  cursor: pointer;
  transition: color var(--lm-duration-fast) var(--lm-ease-out);
}

.lm-password-toggle:hover {
  color: var(--lm-text-strong);
}

.lm-password-toggle[aria-pressed="true"] {
  color: var(--lm-primary);
}

.lm-password-toggle:focus-visible {
  outline-offset: -3px;
}

.lm-password-toggle .lm-icon {
  width: 18px;
  height: 18px;
}

/* 인증 코드 칸(#mfaCode·#enrollCode·#rcCode): 앱에 뜬 "123 456"과 눈으로 맞춰 보도록 고정폭 숫자·18px·넓은 자간, 12자 폭.
   높이 44px·경계·포커스 링은 입력칸 규칙 그대로다 */
.lm-code-input {
  max-width: calc(12ch + 26px);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

/* 설정 주소는 사람이 읽을 값이 아니다. 한 줄로 줄이고 issuer를 풀어 보인다. 복사는 인코딩 원문으로 한다(login.js) */
.app-login-gate-key > .app-login-gate-uri {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

/* 복사할 수 없는 환경에서 원문을 펼쳐 직접 선택하게 할 때 */
.app-login-gate-key > .app-login-gate-uri.is-expanded {
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-all;
}

/* 앱에 추가하는 방법: 설명 문단 바로 아래 한 덩어리. 이름표는 필드 라벨 규격(12px), 앱 이름은 500이라 아래 필드 라벨보다 가볍다 */
.app-login-gate-howto {
  gap: 8px;
  margin-top: 8px;
}

/* 추가 인증 재확인 dialog의 잠금 안내: 게이트 잠금 안내와 같은 보조 표면 블록 */
.lm-lock {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--lm-radius);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-lock > .lm-icon {
  grid-row: 1 / span 2;
  width: 18px;
  height: 20px;
  color: var(--lm-danger);
}

.lm-lock > strong {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.lm-dialog .lm-lock > p {
  grid-column: 2;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.lm-dialog p + .lm-lock + .lm-field {
  margin-top: 16px;
}

/* 필드 도움말·오류가 두 줄로 넘어갈 때 마지막 한 어절만 떨어지지 않게 한다 */
.lm-field-help,
.lm-field-error {
  text-wrap: pretty;
}

/* 403 상태에서는 가운데 블록이 같은 말을 하므로 알림 줄은 화면에서만 감춘다. 스크린리더에는 그대로 읽힌다(lmAdmin.showForbidden) */
[data-state="forbidden"] .queue-action-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}