/* 탄스 화면 공통: 셸·로그인·설정·안내 화면
 *
 * 색·크기는 tokens.css 의 값만 쓴다.
 * 사무 화면은 PC 우선, 현장·설치기사 화면은 폰·태블릿 우선이다. 760px 이하에서 메뉴는 화면 아래 탭 막대가 된다
 * (메뉴가 5칸 이하라 서랍 없이 엄지가 닿는 자리에 모두 둔다).
 * 2026-10-03 개정: 따뜻한 밝은 바탕 위에 흰 면, 강조색 주요 버튼, 살짝 둥근 모서리. 표는 머리줄 옅은 바탕과 분명한 줄 구분선.
 *   상태·상품구분의 색 표시(배지·고르기)는 work.css 에 있다.
 * 2026-10-06 개정(브랜드 가이드): 색은 tokens.css 만 바꿨다. 여기서는 자간을 0 으로(가이드: 좁은 자간 지양),
 *   로고를 여백 자른 파일 + 높이 토큰으로, 표 줄 사이 선을 장식 선(--t-line)으로 고쳤다.
 * 2026-10-06 배치 개편(고객: "레이아웃을 많이 바꿔 달라"): PC 는 왼쪽 짙은 메뉴(사이드바), 본문은 카드 위에.
 *   단추는 알약 모양, 탭은 짙은 채움 알약, 표는 그림자 카드, 로그인·안내 화면은 짙은 면 + 흰 카드. 자세한 규칙은 docs/design/ui.md 6절.
 *   폰 아래 탭 막대는 6칸까지(390px 폭에서 한 칸 65px). 회원(/app/members)이 더해져 관리자가 7칸이 되면 앞 5칸 + 더보기(맨 아래 절).
 * 2026-10-11 개정(고객 요청): 761px 이상(PC·태블릿)의 왼쪽 메뉴를 상시 고정에서 여닫는 유리 메뉴(서랍)로 바꿨다.
 *   처음에는 닫혀 있고 본문이 화면 전체 폭을 쓴다. 왼쪽 위 줄 세 개 단추로 열면 반투명 + 흐림 패널이 본문 위로 미끄러져 나온다.
 *   태블릿의 짙은 가로 위 막대는 없앴다(같은 서랍으로 통일). 폰은 그대로다. 로고는 조금 줄였다(유리 메뉴 20px, 폰 18px).
 * 2026-10-11 개정(고객 요청, 같은 날 두 번째): 글자·간격·칸을 약 0.7배로 줄였다. 크기 토큰(tokens.css)과 이 파일에 직접 적힌
 *   px 를 같은 비율로 줄였고, 테두리 1px·초점선 2px·굵은 선 3px·그림자 두께는 그대로다. 손가락 기기의 누르는 크기와
 *   폰 아래 탭 막대·폰 위 막대는 줄이지 않았다(tokens.css 맨 아래 @media). 로고 높이는 앞 개정 값을 지킨다.
 * 2026-10-11 개정(같은 날 세 번째, T-31EBB914): 761px 이상에 본문 위 막대(header.appbar)를 새로 두었다.
 *   떠 있던 줄 세 개 단추가 본문 제목과 겹쳐서, 단추를 막대 안으로 옮기고 띠·본문 위 여백 꼼수를 걷어 냈다.
 *   화면 안의 작은 탭(설정·작업지시서·문의)은 본문 대신 막대 가운데에 둔다. 본문을 내려도 탭이 보이고 화면마다 탭 자리가 같다.
 *   내 이름·역할은 서랍 맨 아래에서 막대 오른쪽으로 옮겼다. 서랍을 열어야만 로그아웃할 수 있던 것을 늘 보이게 한다.
 *   서랍이 열리면 줄 세 개 단추를 숨긴다(가림막·Esc·메뉴 항목으로 닫는다). 단추가 패널 위에 겹쳐 로고 왼쪽 자리를 먹던 것을 없앴다.
 *   서랍 로고는 20px 에서 15px 로 줄였다(메뉴 글자 12px 옆에서 로고만 튀었다). 폰 배치는 그대로이고 작은 탭만 위 막대 아래 한 줄로 보인다.
 * ⚠️ 줌을 막지 않는다(viewport 에 maximum-scale·user-scalable 을 적지 않는다).
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--t-bg);
  color: var(--t-text);
  font-family: var(--t-font);
  font-size: var(--t-fs);
  font-weight: var(--t-w-regular);
  line-height: 1.55;
  letter-spacing: 0;
  /* 한국어는 낱말(어절) 단위로 줄을 바꾼다. 폰에서 "없습/니다" 처럼 끊겼다(점검 C7). 아주 긴 영문·번호만 아무 데서나 끊는다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: var(--t-w-medium);
}

strong {
  font-weight: var(--t-w-strong);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--t-focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 숫자·번호·시각: 본문 글꼴 그대로 자릿수만 맞춘다(고정폭 글꼴은 무겁고 서체가 섞여 보인다). */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.muted {
  color: var(--t-text-2);
}

/* 로고: 투명 여백을 잘라 낸 파일이라 높이가 곧 글자 높이다. 가로는 비율대로(1208:345) 따라오게 auto.
   ⚠️ 늘이기·기울이기·그림자·외곽선·다른 색 금지(브랜드 가이드). 어두운 테마는 <picture> 가 흰색판으로 바꾼다.
   ⚠️ 보호 여백은 사방으로 높이의 1/2 이상. 폰 위 막대(56px)에 18px 로 두면 위아래 19px 가 남는다(9px 이상이면 된다).
      서랍 맨 위(16px)의 여백은 761px 이상 절의 .topbar-brand 에 계산해 두었다.
   <picture> 는 상자를 만들지 않게 두어 그림이 바로 부모의 flex·grid 칸이 되게 한다(정렬 규칙이 그림에 그대로 걸린다). */
.brand-mark {
  display: contents;
}

.brand-logo {
  display: block;
  width: auto;
  height: var(--t-logo-h);
  filter: var(--t-logo-filter);
}

/* ── 버튼: 기본(흰 면 + 선) · 주요(강조색 채움) · 위험(주홍 선) 셋만. 모양은 알약(2026-10-06) ────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--t-space-2);
  min-height: var(--t-control);
  padding: 0 14px;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-r-pill);
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-size: var(--t-fs-ui);
  font-weight: var(--t-w-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-dur), border-color var(--t-dur), color var(--t-dur);
}

.btn:hover {
  border-color: var(--t-text-3);
  background: var(--t-hover);
}

.btn:active {
  background: var(--t-sunk);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.btn:disabled:hover {
  border-color: var(--t-line-strong);
  background: var(--t-surface);
}

.btn-primary {
  border-color: var(--t-accent);
  background: var(--t-accent);
  color: var(--t-accent-text);
}

.btn-primary:hover,
.btn-primary:active {
  border-color: var(--t-accent-hover);
  background: var(--t-accent-hover);
}

.btn-primary:disabled:hover {
  border-color: var(--t-accent);
  background: var(--t-accent);
}

.btn-danger {
  border-color: var(--t-danger);
  color: var(--t-danger);
}

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

.btn-sm {
  min-height: var(--t-control-sm);
  padding: 0 8px;
  font-size: var(--t-fs-sm);
}

.btn-block {
  width: 100%;
}

/* 세로로 쌓는 칸(stack·screen) 안의 버튼이 칸 폭만큼 늘어나지 않게. 가득 채울 때만 btn-block */
.stack > .btn:not(.btn-block),
.screen > .btn:not(.btn-block),
.stage > .btn:not(.btn-block) {
  justify-self: start;
  align-self: flex-start;
}

@media (pointer: coarse) {
  .btn {
    min-height: var(--t-touch);
  }

  .btn-sm {
    min-height: 40px;
  }
}

/* ── 입력 ─────────────────────────────────────────────────────────────── */
.field {
  display: grid;
  align-content: start;
  gap: 4px;
}

.field-label {
  color: var(--t-text-2);
  font-size: var(--t-fs-sm);
  font-weight: var(--t-w-medium);
}

.input,
.select {
  width: 100%;
  height: var(--t-input-h);
  padding: 0 10px;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-r-lg);
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-size: var(--t-fs-input);
  letter-spacing: 0;
  transition: border-color var(--t-dur), box-shadow var(--t-dur);
}

/* 여러 줄 칸은 높이를 고정하지 않는다(rows 를 따른다) */
textarea.input {
  height: auto;
  min-height: 62px;
  padding: 7px 8px;
  line-height: 1.5;
  resize: vertical;
}

.input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder {
  color: var(--t-text-3);
}

.input:hover,
.select:hover {
  border-color: var(--t-text-3);
}

.input:focus,
.select:focus {
  border-color: var(--t-focus);
  box-shadow: 0 0 0 3px var(--t-accent-soft);
  outline: none;
}

.input:disabled,
.select:disabled {
  background: var(--t-sunk);
  color: var(--t-text-2);
  cursor: not-allowed;
}

.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  background-image: var(--t-select-arrow);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 6px;
}

/* 파일 고르기: 브라우저 기본 단추를 우리 버튼 모양으로 */
.input[type="file"] {
  height: auto;
  min-height: var(--t-input-h);
  padding: 4px;
  font-size: var(--t-fs-sm);
}

.input[type="file"]::file-selector-button {
  height: calc(var(--t-input-h) - 10px);
  margin-right: 8px;
  padding: 0 10px;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-r);
  background: var(--t-surface);
  color: var(--t-text);
  font: inherit;
  font-weight: var(--t-w-medium);
  cursor: pointer;
}

.input[type="file"]::file-selector-button:hover {
  border-color: var(--t-text-3);
  background: var(--t-hover);
}

/* [파일 고르기] 단추 + 고른 파일 이름(dom.js fileField). 숨긴 input 에 초점이 가면 단추에 초점선을 그린다 */
.file-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-space-3);
  min-width: 0;
}

.file-pick label:focus-within {
  outline: 2px solid var(--t-focus);
  outline-offset: 2px;
}

.file-pick-name {
  min-width: 0;
  color: var(--t-text-2);
  font-size: var(--t-fs-sm);
}

/* 접어 둔 자세한 내용(설정 > 수합의 설정 이름 등). 평소에는 필요 없는 값이라 접힌 채로 둔다 */
.more-detail {
  display: grid;
  gap: var(--t-space-3);
}

.more-detail > summary {
  justify-self: start;
  color: var(--t-text-2);
  font-size: var(--t-fs-sm);
  cursor: pointer;
}

.input-short {
  width: 72px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--t-accent);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--t-control);
  font-size: var(--t-fs-sm);
}

.check input {
  width: 13px;
  height: 13px;
}

/* 손가락 기기: 작은 네모는 누르기 어려워 예전 크기로 */
@media (pointer: coarse) {
  .check input {
    width: 18px;
    height: 18px;
  }
}

.hint {
  color: var(--t-text-3);
  font-size: var(--t-fs-xs);
}

/* 칸이 옆 칸보다 짧아도 줄 사이가 벌어지지 않게 위로 붙인다(격자의 기본값은 늘이기다) */
.stack {
  display: grid;
  align-content: start;
  gap: 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-space-2);
}

.row-between {
  justify-content: space-between;
}

/* 안내 문구: 비어 있으면 자리를 차지하지 않는다. */
.form-message {
  font-size: var(--t-fs-sm);
}

.form-message:empty {
  display: none;
}

.form-message[data-state="error"] {
  color: var(--t-danger);
}

.form-message[data-state="ok"] {
  color: var(--t-ok);
}

/* ── 알림 띠·표식 ─────────────────────────────────────────────────────── */
/* 기본 알림은 경고(황토)다. 뜻 없는 안내는 notice-info(넓은 띠 색 + 강조색 선). 왼쪽 굵은 선으로 종류를 먼저 알린다. */
.notice {
  padding: 8px 11px;
  border-left: 3px solid var(--t-warn);
  border-radius: var(--t-r);
  background: var(--t-warn-bg);
  color: var(--t-text);
  font-size: var(--t-fs-sm);
}

.notice-info {
  border-left-color: var(--t-accent);
  background: var(--t-calm);
}

.notice-danger {
  border-left-color: var(--t-danger);
  background: var(--t-danger-bg);
}

.notice-ok {
  border-left-color: var(--t-ok);
  background: var(--t-ok-bg);
}

/* 작은 표식: 알약 모양에 옅은 채움. 주문 상태·상품구분 색(.badge.status-*, .badge.kind-*)은 work.css */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--t-r-pill);
  background: var(--t-sunk);
  color: var(--t-text);
  font-size: var(--t-fs-xs);
  font-weight: var(--t-w-medium);
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-warn {
  background: var(--t-warn-bg);
  color: var(--t-warn);
}

.badge-danger {
  background: var(--t-danger-bg);
  color: var(--t-danger);
}

.badge-ok {
  background: var(--t-ok-bg);
  color: var(--t-ok);
}

.badge-strong {
  background: var(--t-accent);
  color: var(--t-accent-text);
}

/* ── 표: 흰 면에 테두리, 머리줄은 옅은 바탕, 줄마다 분명한 구분선 ───────────── */
/* 줄무늬는 넣지 않는다. 상태 색 표시와 겹쳐 눈이 어지럽고, 마우스 올림 표시와도 헷갈린다.
   줄 구분선은 장식 선(--t-line, 2026-10 부터 예전 진한 선만큼 보인다), 머리줄 아래만 부품 선(--t-line-strong).
   ⚠️ --t-line-strong(#8C8381)을 줄마다 그으면 표가 격자처럼 무거워진다. 입력칸 테두리용 값이다.
   2026-10-06 배치 개편: 표는 테두리 대신 그림자 있는 카드(--t-r-card) 위에 둔다. 머리줄은 흰 면 위 작은 보조 글자,
   그 아래만 선을 긋고 줄은 높게(손으로 짚어 가며 읽는 표라 줄 사이 숨 쉴 자리를 둔다). */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-card);
  background: var(--t-surface);
  box-shadow: var(--t-shadow-card);
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-fs-sm);
}

/* 칸은 줄바꿈하지 않고 표가 넓으면 옆으로 민다(좁은 화면에서 글자가 한 자씩 세로로 쌓이지 않게).
   긴 글(접속기록의 대상, 엑셀 오류 이유)만 cell-wrap 으로 줄을 바꾼다. */
.table th,
.table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--t-line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* 첫 칸·끝 칸은 카드 모서리에서 조금 더 떨어뜨린다 */
.table th:first-child,
.table td:first-child {
  padding-left: 15px;
}

.table th:last-child,
.table td:last-child {
  padding-right: 15px;
}

.table th {
  padding-top: 10px;
  padding-bottom: 8px;
  border-bottom-color: var(--t-line-strong);
  background: var(--t-surface);
  color: var(--t-text-2);
  font-size: var(--t-fs-xs);
  font-weight: var(--t-w-strong);
  white-space: nowrap;
}

.table tbody td {
  font-size: var(--t-fs-ui);
}

/* 테두리 상자 안이라 마지막 줄의 밑선은 겹친다 */
.table tbody tr:last-child > td {
  border-bottom: 0;
}

.table .cell-actions {
  white-space: nowrap;
}

.table .cell-wrap {
  min-width: 112px;
  white-space: normal;
  word-break: break-all;
}

.table-empty {
  padding: 28px 8px;
  color: var(--t-text-3);
  text-align: center;
}

/* 폰에서 줄마다 카드(2026-10-11 점검 C2). 표가 옆으로만 밀려 상태·날짜가 첫 화면에 안 보였고, 밀 수 있는지도 몰랐다.
   표에 table-cards 를 더하고 칸마다 data-label(머리줄 이름)을 적으면 760px 이하에서 "이름 값" 두 줄 격자 카드가 된다.
   · cell-main: 카드 맨 위 한 줄 전체(번호·이름 같은 제목 칸). 라벨을 적지 않는다.
   · cell-full: 한 줄 전체를 쓰는 긴 칸(대상·메모·단추 묶음).
   · cell-hide-m: 폰 카드에서 뺄 칸(같은 값이 다른 칸에 있거나 상세에서 보는 값).
   PC 표는 그대로다. 머리줄은 화면 읽기 도구를 위해 남기되 보이지 않게 둔다.
   ⚠️ 줄 누르기(상세 열기)·고르기 칸은 칸의 내용이 그대로라 화면 쪽 코드는 바꾸지 않아도 된다. */
@media (max-width: 760px) {
  .table-wrap:has(> .table-cards) {
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
  }

  .table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table-cards tbody {
    display: grid;
    gap: var(--t-space-3);
  }

  .table-cards tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 11px;
    padding: 11px 13px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-r-card);
    background: var(--t-surface);
    box-shadow: var(--t-shadow-card);
  }

  .table-cards tbody td,
  .table-cards tbody td:first-child,
  .table-cards tbody td:last-child {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: var(--t-fs-ui);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* 라벨은 칸 안 맨 위 한 줄. 칸은 block 이라 안의 번호·배지 같은 여러 글이 한 줄로 이어진다(grid 면 하나씩 세로로 쌓였다) */
  .table-cards tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--t-text-2);
    font-size: var(--t-fs-xs);
    font-weight: var(--t-w-medium);
  }

  .table-cards tbody td.cell-main {
    grid-column: 1 / -1;
    font-size: var(--t-fs);
    font-weight: var(--t-w-medium);
  }

  .table-cards tbody td.cell-full,
  .table-cards tbody td.table-empty {
    grid-column: 1 / -1;
  }

  .table-cards tbody td.cell-hide-m {
    display: none;
  }

  /* cell-pick: 고르기 네모 칸. 카드 오른쪽 위 모서리에 띄워 제목 줄과 한 줄에 둔다(혼자 한 칸을 차지하면 카드가 길어진다) */
  .table-cards tbody tr:has(> td.cell-pick) {
    position: relative;
    padding-right: 44px;
  }

  .table-cards tbody td.cell-pick {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
  }

  .table-cards tbody td.cell-pick:empty {
    display: none;
  }

  /* 빈 결과 줄은 카드 하나로 */
  .table-cards tbody td.table-empty {
    padding: 22px 8px;
    text-align: center;
  }
}

/* ── 로그인: 왼쪽 짙은 면(로고·이름·한 줄 설명) + 오른쪽 카드(폰은 위 짧은 띠 + 아래 카드) ──────── */
/* 2026-10-06 배치 개편: 왼쪽 칸을 넓은 띠 색에서 짙은 면(--t-ink)으로 바꾸고 화면의 3/5 를 준다. 로고는 흰색판.
   ⚠️ 로그인 폼의 data-*·name·autocomplete 는 login.js 와 브라우저 비밀번호 저장이 쓴다. 모양만 바꾼다. */
.page-login {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  background: var(--t-bg);
}

.login-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--t-space-7);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px clamp(22px, 6vw, 68px);
  overflow: hidden;
  background: var(--t-ink);
  color: var(--t-on-ink);
}

/* 장식 고리: 테이블 윗면을 위에서 본 모양(둥근 모서리 네모 두 겹). 뜻이 없는 선이라 글자 대비 규칙 밖이다.
   ⚠️ 글자 뒤로 지나가지 않게 오른쪽 아래 모서리에만 둔다. */
.login-hero::after {
  content: "";
  position: absolute;
  right: -84px;
  bottom: -98px;
  width: 364px;
  height: 252px;
  border: 1px solid var(--t-ink-line);
  border-radius: 34px;
  box-shadow: 0 0 0 28px var(--t-ink), 0 0 0 29px var(--t-ink-line);
  pointer-events: none;
}

/* ⚠️ 세로 flex 는 기본으로 가로를 늘인다. 로고(그림)가 칸 폭만큼 늘어나 찌그러지지 않게 왼쪽에 붙인다. */
.login-hero .brand-logo {
  align-self: flex-start;
  height: var(--t-logo-h-lg);
}

.login-hero > div {
  position: relative;
  z-index: 1;
}

.login-hero-title {
  font-size: var(--t-fs-display);
  font-weight: var(--t-w-medium);
  letter-spacing: 0;
  line-height: 1.2;
}

.login-hero-text {
  margin-top: var(--t-space-3);
  color: var(--t-on-ink-2);
  font-size: var(--t-fs-lg);
}

.login-hero-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-space-2);
  margin: var(--t-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.login-hero-steps li {
  padding: 4px 10px;
  border: 1px solid var(--t-ink-line);
  border-radius: var(--t-r-pill);
  color: var(--t-on-ink);
  font-size: var(--t-fs-sm);
}

/* ⚠️ 짙은 칸(.login-hero)이 position: relative 라 위에 그려진다. 폰에서 카드를 띠 위로 올리면 카드 머리가 가려져서
   카드도 위치를 주고 한 겹 위로 올린다. */
.login-card {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: calc(100% - 48px);
  max-width: 320px;
  padding: 28px 25px;
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-card);
  background: var(--t-surface);
  box-shadow: var(--t-shadow-card);
}

.login-title {
  margin-bottom: var(--t-space-2);
  font-size: var(--t-fs-xl);
}

.login-lead {
  margin-bottom: var(--t-space-5);
  color: var(--t-text-2);
  font-size: var(--t-fs-sm);
}

/* 로그인 단추는 다른 단추보다 한 단계 크게. PC 36px, 손가락 기기는 40 + 6 + 2 = 48px(--t-touch)이 된다 */
.login-card .btn-block {
  min-height: calc(var(--t-control) + var(--t-space-2) + 2px);
  margin-top: var(--t-space-2);
}

.login-help {
  margin-top: var(--t-space-1);
  padding-top: var(--t-space-4);
  border-top: 1px solid var(--t-line);
  color: var(--t-text-2);
  font-size: var(--t-fs-xs);
}

@media (max-width: 760px) {
  .page-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  /* 폰: 짧은 짙은 띠(로고 · 이름 · 한 줄 설명). 단계 알약과 장식 고리는 뺀다 */
  /* 위 여백은 로고(28px)의 보호 여백 14px 에 한 단계를 더한 28px + 노치 자리. 17px 일 때 로고가 화면 위 끝에 붙어 보였다(점검 S24) */
  .login-hero {
    gap: var(--t-space-5);
    min-height: 0;
    padding: calc(28px + env(safe-area-inset-top)) 14px 40px;
  }

  .login-hero::after,
  .login-hero-steps {
    display: none;
  }

  .login-hero-title {
    font-size: var(--t-fs-xl);
  }

  .login-hero-text {
    margin-top: var(--t-space-1);
    font-size: var(--t-fs);
  }

  /* 카드를 띠 위로 조금 올려 한 덩어리로 보이게 */
  .login-card {
    align-self: start;
    width: calc(100% - 22px);
    margin-top: -22px;
    padding: var(--t-space-6) 14px;
  }
}

/* ── 앱 셸 ────────────────────────────────────────────────────────────── */
/* 2026-10-06 배치 개편으로 왼쪽 세로 메뉴가 됐고, 2026-10-11 고객 요청으로 여닫는 유리 메뉴(서랍)로 바꿨다.
 *  · 761px 이상(PC·태블릿): 본문 위에 막대(header.appbar)가 늘 붙어 있다(sticky).
 *    왼쪽 줄 세 개 단추(.menu-toggle) + 지금 메뉴 이름, 가운데 화면 안의 작은 탭(dom.js setSubTabs), 오른쪽 시연 표식 + 내 이름.
 *    메뉴(header.topbar)는 처음에 닫혀 있고, 단추로 열면 화면 가장자리에서 조금 띄운 둥근 유리 패널(--t-side 폭)이
 *    본문 위로 미끄러져 나오고 옅은 가림막이 깔린다. 메뉴 항목·가림막(본문)·Esc 로 닫는다(app.js setupSide).
 *  · 760px 이하(폰): 짙은 위 막대(로고 · 내 이름) + 화면 아래 흰 탭 막대(그림 + 이름). 단추와 가림막은 숨고,
 *    header.appbar 는 작은 탭이 있을 때만 위 막대 바로 아래 한 줄(옆으로 민다)로 보인다.
 * HTML 은 header.topbar > a.topbar-brand · nav.menu[data-menu], 그 뒤 header.appbar 다. details.me 는 하나이고
 *   넓은 화면은 막대 오른쪽(.appbar-end), 폰은 header.topbar 끝에 app.js 가 옮겨 둔다.
 *   메뉴 칸은 app.js 가 서버 /api/me 로 a.menu-item[href="/app/<키>"][aria-current="page"] 꼴로 그린다.
 *   열림은 body.side-open 하나로 나타낸다. 상태는 저장하지 않아 페이지를 옮기면 늘 닫힌 채로 시작한다.
 * ⚠️ 닫힌 패널은 transform 으로 화면 밖에 둘 뿐 아니라 visibility: hidden 으로 숨긴다. 그러지 않으면 Tab 초점이 보이지 않는 메뉴로 들어간다.
 *    열린 동안의 줄 세 개 단추도 같은 까닭으로 display 가 아니라 visibility 로 숨긴다(자리는 남아 막대가 흔들리지 않는다).
 * ⚠️ 수합 알림 띠(.collect-alert, orders.css 에서 sticky top: 0)는 app.js 가 막대 아래(본문 바로 앞)에 넣는다.
 *    막대도 위에 붙으므로 띠가 붙는 높이를 막대 아래로 내린다(아래 .appbar ~ .collect-alert). 안 그러면 막대에 가려진다.
 * ⚠️ 짙은 면 위에서는 강조색 초점선이 안 보인다(1.03). 막대 안의 초점선은 밝은 색으로 바꾸고, 흰 면(내 메뉴 펼침·폰 아래 탭)에서는 되돌린다. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--t-space-5);
  height: var(--t-bar);
  padding: 0 var(--t-gutter);
  background: var(--t-ink);
  color: var(--t-on-ink);
}

.topbar :focus-visible,
.appbar :focus-visible {
  outline-color: var(--t-on-ink);
}

.topbar-brand {
  display: flex;
  flex: none;
  align-items: center;
  border-radius: var(--t-r);
}

.menu {
  display: flex;
  flex: 1;
  gap: var(--t-space-1);
  min-width: 0;
  height: 100%;
}

.menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  color: var(--t-on-ink-2);
  font-size: var(--t-fs);
  font-weight: var(--t-w-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-dur), background-color var(--t-dur);
}

/* 메뉴 그림: 주소 끝으로 고른다(메뉴 키 = 주소 /app/<키>). 그림이 없는 새 메뉴도 이름만으로 선다.
   ⚠️ 그림은 mask 로 글자색을 입힌다. filter 로 색을 바꾸지 않는다. */
.menu-item::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--menu-icon, none) no-repeat center / contain;
  mask: var(--menu-icon, none) no-repeat center / contain;
}

.menu-item:not([href$="/app/today"], [href$="/app/products"], [href$="/app/orders"], [href$="/app/workorders"], [href$="/app/field"], [href$="/app/shipping"], [href$="/app/inquiries"], [href$="/app/members"], [href$="/app/settings"], .menu-more)::before {
  display: none;
}

.menu-item[href$="/app/today"] { --menu-icon: var(--t-icon-today); }
.menu-item[href$="/app/products"] { --menu-icon: var(--t-icon-products); }
.menu-item[href$="/app/inquiries"] { --menu-icon: var(--t-icon-inquiries); }
.menu-more { --menu-icon: var(--t-icon-more); }
.menu-item[href$="/app/orders"] { --menu-icon: var(--t-icon-orders); }
.menu-item[href$="/app/workorders"] { --menu-icon: var(--t-icon-workorders); }
.menu-item[href$="/app/field"] { --menu-icon: var(--t-icon-field); }
.menu-item[href$="/app/shipping"] { --menu-icon: var(--t-icon-shipping); }
.menu-item[href$="/app/members"] { --menu-icon: var(--t-icon-members); }
.menu-item[href$="/app/settings"] { --menu-icon: var(--t-icon-settings); }

.menu-item:hover {
  background: var(--t-ink-hover);
  color: var(--t-on-ink);
}

/* 고른 메뉴: 밝은 막대(모양) + 옅은 밝은 바탕 + 밝은 글자. 강조색은 짙은 면에서 안 보여 쓰지 않는다 */
.menu-item[aria-current="page"] {
  background: var(--t-ink-current);
  color: var(--t-on-ink);
  box-shadow: inset 0 -3px 0 var(--t-on-ink);
}

.me {
  position: relative;
  flex: none;
  margin-left: auto;
}

.me > summary {
  display: flex;
  align-items: center;
  gap: var(--t-space-2);
  min-height: var(--t-control);
  padding: 0 var(--t-space-2);
  border-radius: var(--t-r);
  color: var(--t-on-ink);
  font-size: var(--t-fs-sm);
  font-weight: var(--t-w-medium);
  list-style: none;
  cursor: pointer;
}

.me > summary:hover {
  background: var(--t-ink-hover);
}

.me > summary::-webkit-details-marker {
  display: none;
}

/* 사람 그림 */
.me > summary::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--t-on-ink-2);
  -webkit-mask: var(--t-icon-person) no-repeat center / contain;
  mask: var(--t-icon-person) no-repeat center / contain;
}

.me > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 5px;
  background: var(--t-select-arrow-on-ink) no-repeat center / 7px 5px;
  transition: transform var(--t-dur);
}

.me[open] > summary::after {
  transform: rotate(180deg);
}

.me-role {
  color: var(--t-on-ink-2);
  font-weight: var(--t-w-regular);
}

.me-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 140px;
  padding: var(--t-space-2);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-lg);
  background: var(--t-surface);
  color: var(--t-text);
  box-shadow: var(--t-shadow);
}

.topbar .me-panel :focus-visible,
.appbar .me-panel :focus-visible {
  outline-color: var(--t-focus);
}

.me-panel .btn {
  justify-content: flex-start;
  border-color: transparent;
}

.me-panel .btn:hover {
  border-color: transparent;
  background: var(--t-hover);
}

/* ── 본문 위 막대(2026-10-11, T-31EBB914) ──────────────────────────────── */
/* 짙은 면: 서랍·폰 위 막대와 같은 면이라 내 이름 칸(.me)의 밝은 글자·그림을 그대로 쓴다.
   높이는 고정이다. 수합 알림 띠가 이 높이 바로 아래에 붙어야 해서다(아래 .appbar ~ .collect-alert).
   위층 순서: 수합 알림 띠(5) < 막대(15) < 가림막(20) < 서랍(25). 서랍을 열면 가림막이 막대까지 덮는다.
   어두운 테마는 짙은 면이 바탕보다 어두워(1.09) 아래에 옅은 선을 긋는다. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--t-space-4);
  height: var(--t-bar);
  padding: 0 var(--t-gutter);
  border-bottom: 1px solid var(--t-ink-line);
  background: var(--t-ink);
  color: var(--t-on-ink);
}

.appbar-title {
  flex: none;
  font-size: var(--t-fs-md);
  font-weight: var(--t-w-medium);
  white-space: nowrap;
}

/* 탭 자리: 남는 폭을 다 쓰고 탭 묶음은 그 가운데. 넘치면 묶음 안에서 옆으로 민다.
   ⚠️ 가운데 맞춤을 justify-content: center 로 하면 넘칠 때 왼쪽 탭이 잘려 밀어도 안 보인다. 바깥 여백 auto 는 넘치면 0 이 된다. */
.appbar-tabs {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 100%;
}

/* 폰에서만 쓰는 탭 고르기 칸(아래 760px 이하 절) */
.subtab-select {
  display: none;
}

.appbar-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--t-space-3);
  margin-left: auto;
}

.appbar-demo {
  flex: none;
}

/* 막대 안의 작은 탭: 흰 칸 알약 묶음을 걷고 납작하게. 고른 탭은 옅은 밝은 바탕 + 아래 밝은 막대 3px(모양) + 밝은 글자.
   ⚠️ 강조색은 짙은 면에서 1.03 이라 쓰지 않는다. 보조 글자(--t-on-ink-2)는 고른 바탕 위 3.99 라 고른·올린 탭 글자는 --t-on-ink.
   ⚠️ 묶음이 옆으로 밀리는 칸(overflow)이라 바깥 초점선은 잘린다. 초점선은 탭 안쪽에 그린다. */
.appbar .tabs {
  align-self: center;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.appbar .tab {
  border-radius: var(--t-r);
  color: var(--t-on-ink-2);
}

.appbar .tab:hover {
  background: var(--t-ink-hover);
  color: var(--t-on-ink);
}

.appbar .tab[aria-selected="true"],
.appbar .tab[aria-selected="true"]:hover {
  background: var(--t-ink-current);
  color: var(--t-on-ink);
  box-shadow: inset 0 -3px 0 var(--t-on-ink);
}

.appbar .tab:focus-visible {
  outline-offset: -2px;
}

.appbar .me > summary [data-me-name] {
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 수합 알림 띠는 막대 바로 아래에 붙는다(띠는 orders.css 에서 sticky top: 0) */
.appbar ~ .collect-alert {
  top: var(--t-bar);
}

/* 본문: 화면의 큰 덩어리 사이는 같은 간격(stage 에 바로 붙는 화면과, 한 그릇 안에 그리는 화면 모두) */
.stage,
.screen {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-5);
}

.stage {
  width: 100%;
  max-width: var(--t-maxw);
  margin: 0 auto;
  padding: var(--t-space-6) var(--t-gutter) 44px;
}

.screen-title {
  font-size: var(--t-fs-xl);
  font-weight: var(--t-w-medium);
  line-height: 1.3;
}

/* 화면 머리 줄(제목 + 오른쪽 단추): 아래에 선을 긋고 여백을 둬 본문 카드들과 가른다.
   JS 가 그리는 첫 줄(.row-between 이나 제목 h1)만 고른다. 순서·문구는 그대로다. */
.stage > .screen-title:first-child,
.screen > .screen-title:first-child,
.stage > .row-between:first-child,
.screen > .row-between:first-child,
.field-list > .row-between:first-child {
  padding-bottom: var(--t-space-5);
  border-bottom: 1px solid var(--t-line);
}

.section-title {
  font-size: var(--t-fs-lg);
  font-weight: var(--t-w-medium);
}

.empty {
  display: grid;
  gap: var(--t-space-3);
  padding: 50px 0;
}

.empty-text {
  color: var(--t-text-2);
  font-size: var(--t-fs-md);
}

/* 761px 이상: 여닫는 유리 메뉴. 단추·가림막은 폰에서 숨는다 */
.menu-toggle,
.side-scrim {
  display: none;
}

@media (min-width: 761px) {
  /* 단추: 위 막대 맨 왼쪽의 그림 단추. 예전에는 본문 위에 떠 있어(position: fixed) 화면 제목과 겹쳤다.
     서랍이 열리면 숨는다(아래 .side-open). 닫기는 가림막·Esc·메뉴 항목이 맡는다 */
  .menu-toggle {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--t-menu-btn);
    height: var(--t-menu-btn);
    margin-left: calc(var(--t-space-2) * -1);
    padding: 0;
    border: 0;
    border-radius: var(--t-r-lg);
    background: none;
    color: var(--t-on-ink);
    cursor: pointer;
    transition: background-color var(--t-dur);
  }

  /* 그림은 단추의 1/2 (PC 16px, 손가락 기기 22px) */
  .menu-toggle::before {
    content: "";
    width: calc(var(--t-menu-btn) / 2);
    height: calc(var(--t-menu-btn) / 2);
    background-color: currentColor;
    -webkit-mask: var(--t-icon-menu) no-repeat center / contain;
    mask: var(--t-icon-menu) no-repeat center / contain;
  }

  .menu-toggle:hover {
    background: var(--t-ink-hover);
  }

  /* ⚠️ 열린 동안은 단추를 숨긴다. display: none 이 아니라 visibility 로: Tab 초점이 못 들어가고 자리는 남아 막대 글자가 움직이지 않는다.
     초점은 app.js 가 열 때 메뉴 안으로, 닫을 때 단추로 옮긴다 */
  .side-open .menu-toggle {
    visibility: hidden;
  }

  /* 가림막: 누르면 닫힌다(app.js 의 바깥 클릭). 수합 알림 띠(5)·위 막대(15)보다 위, 패널보다 아래 */
  .side-scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: block;
    background: var(--t-scrim-soft);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-dur), visibility 0s linear var(--t-dur);
  }

  .side-open .side-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-dur);
  }

  /* 유리 패널. 닫을 때는 미끄러져 나간 뒤에 visibility 를 끈다(전환 시간만큼 늦춘다) */
  .topbar {
    position: fixed;
    top: var(--t-side-inset);
    bottom: var(--t-side-inset);
    left: var(--t-side-inset);
    z-index: 25;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: var(--t-side);
    height: auto;
    padding: 0;
    border: 1px solid var(--t-glass-line);
    border-radius: var(--t-r-card);
    background: var(--t-ink-glass);
    box-shadow: var(--t-glass-shadow);
    -webkit-backdrop-filter: var(--t-glass-blur);
    backdrop-filter: var(--t-glass-blur);
    overflow-y: auto;
    transform: translateX(calc(-100% - var(--t-side-inset) - 48px));
    visibility: hidden;
    transition: transform var(--t-dur) cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear var(--t-dur);
  }

  .side-open .topbar {
    transform: none;
    visibility: visible;
    transition: transform var(--t-dur) cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* 흐림을 못 그리는 브라우저: 반투명만 남으면 뒤 글자가 비쳐 읽기 어렵다. 불투명 짙은 면으로 떨어뜨린다 */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .topbar {
      background: var(--t-ink);
    }
  }

  /* 로고 줄: 2026-10-11(T-31EBB914)부터 단추가 패널 위에 겹치지 않아 왼쪽 단추 자리를 비우지 않는다.
     왼쪽은 메뉴 그림과 같은 줄(메뉴 안쪽 8px + 항목 안쪽 11px = 19px)에 맞춘다.
     로고 높이 16px 의 1/2(8px) 보호 여백: 위 14px(+ 패널 테두리 1px), 아래 메뉴 구분선까지 13px, 왼쪽 19px, 오른쪽 14px */
  .topbar-brand {
    align-self: flex-start;
    margin: 14px 14px 13px 19px;
  }

  .topbar-brand .brand-logo {
    height: var(--t-logo-h-side);
  }

  .menu {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    height: auto;
    padding: var(--t-space-4) 8px;
    border-top: 1px solid var(--t-ink-line);
  }

  .menu-item {
    gap: 8px;
    min-height: calc(var(--t-control) + 3px);
    padding: 0 11px;
    border-radius: var(--t-r-lg);
    font-size: var(--t-fs);
  }

  .menu-item[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--t-on-ink);
  }

  /* 시연 띠 대신 위 막대 오른쪽의 '시연' 표식이 같은 일을 한다(폰은 띠 그대로) */
  .page-app > .demo-banner {
    display: none;
  }
}

/* PC: 본문을 조금 더 넓고 크게 */
@media (min-width: 1020px) {
  .stage {
    gap: 20px;
    padding-right: clamp(17px, 2.2vw, 39px);
    padding-bottom: 56px;
    padding-left: clamp(17px, 2.2vw, 39px);
  }

  .screen {
    gap: 20px;
  }

  .screen-title {
    font-size: var(--t-fs-2xl);
    line-height: 1.25;
  }
}

/* 폰: 위는 짙은 막대(로고 · 내 이름), 메뉴는 화면 아래 흰 탭 막대(그림 위 + 이름 아래)
   ⚠️ 2026-10-11 축소에서 위 막대 56px·아래 탭 막대(높이 --t-tab, 그림 22px, 이름 --t-fs-tab)는 줄이지 않았다.
      엄지로 누르는 칸이고, 위 막대는 로고 18px 의 보호 여백을 이 높이로 맞춰 두었다. */
@media (max-width: 760px) {
  .topbar {
    gap: var(--t-space-3);
    height: 56px;
    padding: 0 16px;
  }

  .menu {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 0;
    height: calc(var(--t-tab) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--t-line);
    background: var(--t-surface);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  }

  .menu :focus-visible {
    outline-color: var(--t-focus);
    outline-offset: -3px;
  }

  .menu-item {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 2px;
    color: var(--t-text-2);
    font-size: var(--t-fs-tab);
  }

  .menu-item::before {
    width: 22px;
    height: 22px;
  }

  .menu-item:hover {
    background: var(--t-hover);
    color: var(--t-text);
  }

  /* 흰 탭 막대 위에서는 강조색이 보인다. 위쪽 굵은 막대 + 옅은 강조 바탕 + 진한 글자로 고른 칸을 보인다 */
  .menu-item[aria-current="page"] {
    background: var(--t-accent-soft);
    color: var(--t-text);
    box-shadow: inset 0 3px 0 var(--t-accent);
  }

  .stage {
    gap: var(--t-space-4);
    padding: var(--t-space-5) 11px calc(var(--t-tab) + 32px + env(safe-area-inset-bottom));
  }

  .screen {
    gap: var(--t-space-4);
  }

  .screen-title {
    font-size: var(--t-fs-xl);
  }

  .stage > .screen-title:first-child,
  .screen > .screen-title:first-child,
  .stage > .row-between:first-child,
  .screen > .row-between:first-child,
  .field-list > .row-between:first-child {
    padding-bottom: var(--t-space-4);
  }

  .me > summary::before,
  .me-role {
    display: none;
  }

  /* 위 막대(header.appbar)는 작은 탭이 있는 화면에서만, 짙은 위 막대(56px) 바로 아래 한 줄로 붙는다.
     메뉴 이름·내 이름·시연 표식은 숨긴다(내 이름은 짙은 위 막대에 있고, 시연은 맨 위 띠가 알린다).
     높이 48px 고정: 손가락 기기의 탭(40px)이 들어가고, 수합 알림 띠가 그 아래에 붙는 자리를 계산할 수 있게 */
  .appbar {
    display: none;
    top: 56px;
    z-index: 9; /* 짙은 위 막대(10)보다 아래: 내 메뉴 펼침이 이 줄 위로 내려온다 */
    height: 48px;
    padding: 0 11px;
    border-top: 1px solid var(--t-ink-line);
  }

  .appbar.has-subtabs {
    display: flex;
  }

  .appbar-title,
  .appbar-end {
    display: none;
  }

  /* 폰은 가운데가 아니라 왼쪽부터 늘어놓고 옆으로 민다 */
  .appbar .tabs {
    margin: 0;
  }

  /* 탭이 많은 화면(설정)은 폰에서 탭 대신 고르기 칸 하나(dom.js setSubTabs asSelectOnPhone, 점검 S13).
     막대 높이 48px 안에 들어가게 칸 높이만 줄이고, 글자는 아이폰 확대를 막는 16px 그대로다 */
  .subtabs-as-select .tabs {
    display: none;
  }

  .subtabs-as-select .subtab-select {
    display: block;
    height: 36px;
  }

  .appbar ~ .collect-alert {
    top: 56px;
  }

  .appbar.has-subtabs ~ .collect-alert {
    top: calc(56px + 48px);
  }
}

/* ── 설정: 탭과 칸 ────────────────────────────────────────────────────── */
/* 탭: 옅은 채움 칸 안의 알약 단추 묶음. 고른 탭은 짙은 면(--t-ink) 채움 + 밝은 글자(11.12).
   ⚠️ 강조색과 글자색은 밝기가 비슷해 색만으로는 고른 탭이 안 보인다. 채움(모양)으로 가른다. 2026-10-06 배치 개편 전에는 밑줄이었다. */
.tabs {
  display: flex;
  align-self: flex-start;
  gap: 3px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-pill);
  background: var(--t-surface);
  box-shadow: var(--t-shadow-sm);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  min-height: calc(var(--t-control-sm) + 2px);
  padding: 0 13px;
  border: 0;
  border-radius: var(--t-r-pill);
  background: none;
  color: var(--t-text-2);
  font: inherit;
  font-size: var(--t-fs-ui);
  font-weight: var(--t-w-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-dur), background-color var(--t-dur);
}

.tab:hover {
  background: var(--t-hover);
  color: var(--t-text);
}

.tab[aria-selected="true"],
.tab[aria-selected="true"]:hover {
  background: var(--t-ink);
  color: var(--t-on-ink);
}

@media (pointer: coarse) {
  .tab {
    min-height: 40px;
  }
}

/* ⚠️ 칸 폭을 minmax(0, 1fr) 로 둔다. 기본(auto)이면 안의 넓은 표가 칸을 늘려, 폰(390px)에서 설정 탭 내용이
   화면 밖(561px)까지 밀렸다. 표는 제 카드(.table-wrap) 안에서 옆으로 민다. */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--t-space-5);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--t-space-2);
}

.toolbar .field {
  min-width: 100px;
}

.blocks {
  display: grid;
  gap: var(--t-space-2);
}

.block-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--t-space-2);
}

/* 기록 목록: 표와 같은 결(위에 진한 선, 줄은 구분선) */
.activity-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--t-line-strong);
}

.activity-item {
  display: grid;
  grid-template-columns: 77px 105px 84px 1fr;
  gap: var(--t-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--t-line);
  font-size: var(--t-fs-sm);
}

/* 주문 이력(시각 · 내용 · 누가) */
.activity-list-order .activity-item {
  grid-template-columns: 105px 1fr auto;
}

@media (max-width: 760px) {
  .activity-item,
  .activity-list-order .activity-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ── 대화 상자 ────────────────────────────────────────────────────────── */
.modal {
  width: min(92vw, 340px);
  padding: 20px;
  border: 0;
  border-radius: var(--t-r-lg);
  background: var(--t-surface);
  color: var(--t-text);
  box-shadow: var(--t-shadow);
}

.modal::backdrop {
  background: var(--t-scrim);
}

.modal-title {
  margin-bottom: var(--t-space-4);
  font-size: var(--t-fs-lg);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--t-space-2);
  margin-top: var(--t-space-2);
}

/* 임시 비밀번호: 헷갈리는 글자를 가르려고 여기만 고정폭 */
.secret {
  padding: 11px;
  border-radius: var(--t-r);
  background: var(--t-calm);
  font-family: var(--t-mono);
  font-size: var(--t-fs-xl);
  font-weight: var(--t-w-strong);
  letter-spacing: 0.06em;
  text-align: center;
  user-select: all;
}

/* ── 권한 없음·찾을 수 없음 ───────────────────────────────────────────── */
/* 로그인과 같은 결: 위쪽은 짙은 면(흰 로고), 그 아래로 흰 카드가 걸친다. */
.page-message {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--t-space-6);
  padding: 34px 11px;
  background: linear-gradient(var(--t-ink) 0 45%, var(--t-bg) 45% 100%);
}

.message-brand .brand-logo {
  height: var(--t-logo-h-lg);
}

.message-card {
  display: grid;
  gap: var(--t-space-4);
  width: 100%;
  max-width: 340px;
  padding: 28px 25px;
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-card);
  background: var(--t-surface);
  box-shadow: var(--t-shadow-card);
}

.message-title {
  font-size: var(--t-fs-xl);
  line-height: 1.3;
}

.message-text {
  color: var(--t-text-2);
}

/* ── 폰 탭 막대의 더보기(T-B95C2A71 s3) ──────────────────────────────────── */
/* 메뉴가 6칸을 넘으면 app.js 가 앞 5칸 + "더보기" 단추를 그린다. 폰(760px 이하)에서만 넘친 칸을 숨기고 더보기를 보인다.
   ⚠️ 숨기는 것은 배치일 뿐이다. 열 수 있는지는 서버의 경로×역할 표가 정한다. */
.menu-more {
  display: none;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: inherit; /* 단추 기본 줄 높이면 이름이 옆 칸(링크)보다 아래로 내려앉는다 */
  cursor: pointer;
}

.menu-more-list {
  display: grid;
  gap: var(--t-space-2);
  margin-top: var(--t-space-3);
}

@media (max-width: 760px) {
  .menu-item-overflow {
    display: none;
  }

  .menu-more {
    display: flex;
  }
}

/* ── 첫 로그인 비밀번호 바꾸기(app.js renderTempPassword) ─────────────────── */
/* 로그인 카드와 같은 모양으로 가운데 둔다. 이 상태에서는 다른 화면이 모두 막혀 메뉴 단추·탭 막대를 숨긴다(점검 S20). */
.temp-password .menu-toggle,
.temp-password .menu {
  display: none;
}

.stage > .temp-password-card {
  align-self: center;
  margin-top: var(--t-space-6);
}

@media (max-width: 760px) {
  .stage > .temp-password-card {
    width: 100%;
    margin-top: 0;
  }
}

/* 메뉴가 하나(설치기사)면 폰 아래 탭 막대를 숨기고 그 자리만큼의 아래 여백도 거둔다(점검 S22) */
@media (max-width: 760px) {
  .single-menu .menu {
    display: none;
  }

  .single-menu .stage {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

/* 인쇄: 메뉴 단추와 가림막은 찍지 않는다(메뉴 패널·위 막대·띠는 print.css 가 숨긴다) */
@media print {
  .menu-toggle,
  .side-scrim {
    display: none !important;
  }
}