/* ============================================================
   울산늘봄누리센터 물품대여시스템 · 메인 스타일시트
   반응형: Mobile(≤640) / Tablet(641~1024) / Desktop(≥1025)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 본문 조판: 늘봄누리센터 공식 홈페이지 기준
   (font-size 16px 기준 · line-height 1.6 · letter-spacing -.01em) */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--text-primary);
  background: var(--bg-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   레이아웃 (헤더 + 사이드바 + 메인)
   ============================================================ */
.layout { min-height: 100vh; display: flex; flex-direction: column; }

/* --- 헤더 --- */
.hdr {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center;
}
.hdr-inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-4);
}
.hdr-brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.hdr-logo { height: 34px; width: auto; }
.hdr-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.hdr-brand-title { font-size: var(--fs-md); font-weight: 700; color: var(--primary-dark); letter-spacing: var(--ls-tight); }
.hdr-brand-sub { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 500; }

.hdr-nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-6); }
.hdr-nav a {
  padding: 8px 14px; border-radius: var(--r-md); font-size: var(--fs-md);
  font-weight: 500; color: var(--text-secondary); transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.hdr-nav a:hover { background: var(--bg-subtle); color: var(--text-primary); }
.hdr-nav a.on { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }

.hdr-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.hdr-icon-btn {
  width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; background: var(--surface);
  position: relative; transition: all var(--dur-fast) var(--ease); font-size: var(--fs-md);
}
.hdr-icon-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.hdr-icon-btn .badge-dot {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  background: var(--st-out); color: #fff; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: 700; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; border: 2px solid var(--surface);
}
.hdr-user { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-2); }
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-full); background: var(--primary-tint);
  color: var(--primary-dark); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-base); flex-shrink: 0;
}
.hdr-user-info { display: flex; flex-direction: column; line-height: 1.25; }
.hdr-user-name { font-size: var(--fs-sm); font-weight: 600; }
.hdr-user-role { font-size: var(--fs-xs); color: var(--text-tertiary); }
.hdr-burger { display: none; }

/* --- 본문 --- */
.body-wrap {
  flex: 1; width: 100%; max-width: var(--container-max);
  margin: 0 auto; padding: var(--sp-6); display: flex; gap: var(--sp-6);
}
.body-wrap.full { display: block; }

/* --- 사이드바 --- */
.side {
  width: var(--sidebar-w); flex-shrink: 0; align-self: flex-start;
  position: sticky; top: calc(var(--header-h) + var(--sp-6));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-2) 0; overflow: hidden;
}
.side-group { padding: var(--sp-2) 0; }
.side-group + .side-group { border-top: 1px solid var(--border); }
.side-title {
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
  font-size: var(--fs-2xs); font-weight: 800; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .6px;
}
.side-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4); font-size: var(--fs-md); color: var(--text-secondary);
  border-left: 3px solid transparent; transition: all var(--dur-fast) var(--ease);
}
.side-item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.side-item.on {
  background: var(--primary-tint); color: var(--primary-dark);
  font-weight: 600; border-left-color: var(--primary);
}
.side-item .ic { width: 20px; text-align: center; flex-shrink: 0; font-size: var(--fs-md); }
.side-item .cnt {
  margin-left: auto; background: var(--bg-muted); color: var(--text-secondary);
  font-size: var(--fs-2xs); font-weight: 700; padding: 1px 7px; border-radius: var(--r-full);
}
.side-item.on .cnt { background: var(--primary); color: #fff; }
.side-item .cnt.alert { background: var(--st-out); color: #fff; }

.main { flex: 1; min-width: 0; }

/* ============================================================
   공통 컴포넌트
   ============================================================ */

/* --- 페이지 헤더 --- */
.page-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
/* 공식 홈페이지 대제목 스케일(40→34→28px) 중 관리화목에 맞춰 28px 단계 사용 */
.page-title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-title); }
.page-sub { font-size: var(--fs-md); color: var(--text-secondary); margin-top: 4px; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--text-tertiary); margin-bottom: var(--sp-3); }
.crumb .cur { color: var(--text-secondary); font-weight: 600; }

/* --- 카드 --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.card-pad { padding: var(--sp-5); }
.card-hd {
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.card-hd h3 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: var(--ls-tight); }
.card-hd .sub { font-size: var(--fs-base); color: var(--text-secondary); margin-top: 3px; }
.card-body { padding: var(--sp-5); }
.card-ft { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); }

/* --- 버튼 --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-md);
  font-weight: 600; border: 1px solid transparent; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease); text-align: center;
  line-height: 1.5; min-height: var(--control-h); box-sizing: border-box;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-secondary { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--secondary-dark); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover:not(:disabled) { background: var(--accent-dark); }
.btn-ghost { background: var(--surface); color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.btn-outline:hover:not(:disabled) { background: var(--primary-tint); }
.btn-danger { background: var(--surface); color: var(--st-out); border-color: #FCA5A5; }
.btn-danger:hover:not(:disabled) { background: var(--st-out-bg); }
.btn-danger-solid { background: var(--st-out); color: #fff; border-color: var(--st-out); }
/* 공식 홈페이지 버튼 스케일: 소 14 / 중 16 / 대 18px */
.btn-xs { padding: 4px 9px; font-size: var(--fs-xs); border-radius: var(--r-sm); min-height: 28px; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); min-height: 34px; }
.btn-lg { padding: 14px 26px; font-size: var(--fs-lg); min-height: 52px; }
.btn-block { width: 100%; }

/* --- 배지 --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-full);
  white-space: nowrap; line-height: 1.5;
}
.badge::before { content: '●'; font-size: 8px; }
.badge.no-dot::before { display: none; }
.b-ok { background: var(--st-ok-bg); color: var(--st-ok-text); }
.b-low { background: var(--st-low-bg); color: var(--st-low-text); }
.b-out { background: var(--st-out-bg); color: var(--st-out-text); }
.b-pending { background: var(--st-pending-bg); color: var(--st-pending-text); }
.b-return { background: var(--st-return-bg); color: var(--st-return-text); }
.b-cancel { background: var(--st-cancel-bg); color: var(--st-cancel-text); }
.b-neutral { background: var(--bg-muted); color: var(--text-secondary); }
.b-accent { background: var(--accent-tint); color: var(--accent-dark); }

/* --- 폼 ---
   행 높이 정렬 규칙
   1) .field 내부는 [라벨] → [입력] → [힌트] 순서로 고정
   2) .form-row / .form-row-3 는 align-items:start 로 셀 늘어남 방지
   3) 라벨·입력 높이를 토큰으로 고정해 좌우 셀의 입력창 y좌표를 일치
   4) 폼 블록(.field/.form-row/.form-row-3) 사이 수직 간격을 일괄 적용
   ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* 폼 블록 간 수직 리듬 — 어떤 조합이든 동일한 간격 유지 */
:is(.field, .form-row, .form-row-3, .field-group)
  + :is(.field, .form-row, .form-row-3, .field-group) { margin-top: var(--sp-5); }
.label {
  font-size: var(--fs-base); font-weight: 600; color: #374151;
  line-height: 1.4; min-height: calc(var(--fs-base) * 1.4);
  display: block;
}
.label .req { color: var(--st-out); margin-left: 2px; }
.hint { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5; }
.err { font-size: var(--fs-xs); color: var(--st-out); font-weight: 500; line-height: 1.5; }
.input, .select, .textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 13px; font-size: var(--fs-md); line-height: 1.5;
  min-height: var(--control-h); background: var(--surface);
  transition: all var(--dur-fast) var(--ease); color: var(--text-primary);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint);
}
.input:disabled, .select:disabled { background: var(--bg-muted); color: var(--text-tertiary); }
.input.error, .select.error { border-color: var(--st-out); }
.textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 15px; padding-right: 34px;
}
.textarea { min-height: 96px; }
.form-row, .form-row-3 {
  display: grid; align-items: start;
  column-gap: var(--sp-4); row-gap: var(--sp-5);
}
.form-row { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
/* 행 내부 .field 는 자체 margin-top 을 쓰지 않음 (그리드 row-gap 이 담당) */
.form-row > .field, .form-row-3 > .field { margin-top: 0 !important; }
.input-group { display: flex; gap: var(--sp-2); align-items: center; }
.input-group .input, .input-group .select { flex: 1; min-width: 0; }
.input-group .btn { flex-shrink: 0; }

/* --- 아이콘 선택기 (대표 아이콘 / 카테고리 아이콘) --- */
.icon-picker {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: var(--sp-3);
}
.icon-preview {
  width: 64px; height: 64px; flex-shrink: 0; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); line-height: 1;
}
.icon-picker-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.icon-picker-body .chip-row { max-height: 120px; overflow-y: auto; }
.icon-picker .chip, .modal .chip[data-ic] {
  font-size: var(--fs-xl); line-height: 1; padding: 6px 9px; min-width: 42px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-custom { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .icon-picker { flex-direction: column; align-items: stretch; }
  .icon-preview { width: 56px; height: 56px; font-size: 28px; }
}

/* --- 실물 사진 선택기 (물품 등록·수정) ---
   아이콘 선택기와 같은 골격을 쓰되 미리보기를 크게 두어
   업로드한 사진을 저장 전에 충분히 확인할 수 있게 한다. */
.photo-picker {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: var(--sp-3);
}
.photo-preview {
  width: 132px; height: 132px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; position: relative;
}
/* 사진이 없을 때는 점선으로 "비어 있음"을 분명히 보여준다 */
.photo-preview:not(.has-img) { border-style: dashed; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-3); font-size: var(--fs-sm); text-align: center;
}
.photo-empty-ic { font-size: 30px; line-height: 1; }
.photo-picker-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.photo-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.photo-status { font-size: var(--fs-sm); color: var(--text-2); min-height: 1.2em; }
.photo-status.ok { color: var(--success); font-weight: 600; }
.photo-status.err { color: var(--danger); font-weight: 600; }

/* 목록 행에서 쓰는 사진 썸네일
   (강사 카드용 .item-thumb 와 이름이 겹치지 않도록 별도 클래스를 쓴다) */
.photo-thumb {
  width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover;
  border: 1px solid var(--border); background: var(--surface-2);
  display: block; flex-shrink: 0;
}
.item-photo-lg {
  width: 100%; max-height: 320px; object-fit: contain;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2); display: block;
}

@media (max-width: 640px) {
  .photo-picker { flex-direction: column; align-items: stretch; }
  .photo-preview { width: 100%; height: 200px; }
  .photo-actions .btn { flex: 1; }
}

.check-row { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-md); }
input[type='checkbox'].cb, input[type='radio'].cb {
  appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-xs); background: var(--surface); flex-shrink: 0;
  cursor: pointer; position: relative; margin-top: 1px; transition: all var(--dur-fast);
}
input[type='radio'].cb { border-radius: var(--r-full); }
input[type='checkbox'].cb:checked, input[type='radio'].cb:checked {
  background: var(--primary); border-color: var(--primary);
}
input[type='checkbox'].cb:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type='radio'].cb:checked::after {
  content: ''; position: absolute; inset: 4px; background: #fff; border-radius: 50%;
}

.switch {
  width: 42px; height: 24px; background: var(--border-strong); border-radius: var(--r-full);
  position: relative; cursor: pointer; transition: background var(--dur) var(--ease); flex-shrink: 0;
}
.switch.on { background: var(--primary); }
.switch::after {
  content: ''; position: absolute; width: 20px; height: 20px; background: #fff;
  border-radius: 50%; top: 2px; left: 2px; transition: left var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.switch.on::after { left: 20px; }

/* --- 검색 입력 ---
   돋보기 아이콘 여백은 토큰(--search-ic-pad)으로 관리한다.
   폰트 스케일이 커질 때 아이콘·여백이 함께 커지지 않으면
   placeholder 문구가 아이콘과 겹치므로 반드시 토큰으로 함께 조정할 것. */
.search-box { position: relative; display: block; min-width: 0; }
.search-box .input {
  padding-left: var(--search-ic-pad);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--search-ic-x) center;
  background-size: var(--search-ic-size);
}

/* --- 필터 바 (검색 + 셀렉트 + 체크박스 + 버튼) ---
   데스크탑은 가로 배치, 모바일(≤640px)은 2열 그리드로 정렬해
   요소별 폭이 제각각으로 흐트러지지 않게 한다. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.filter-bar.has-labels { align-items: flex-end; }
.filter-bar > .search-box { flex: 1 1 240px; }
.filter-bar > .field { flex: 0 1 auto; min-width: 0; margin-top: 0 !important; }
.filter-bar > .field.grow { flex: 1 1 240px; }
.filter-bar > .select, .filter-bar > .input { flex: 0 1 auto; width: auto; min-width: 140px; }
.filter-bar > .check-row { flex: 0 0 auto; align-items: center; white-space: nowrap; }
.filter-bar > .btn { flex: 0 0 auto; }
.filter-bar .fb-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; }
.filter-bar.has-labels .fb-actions { margin-left: 0; }

@media (max-width: 1024px) {
  .filter-bar .fb-actions { margin-left: 0; }
}
@media (max-width: 640px) {
  .filter-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-2); row-gap: var(--sp-3); align-items: center;
  }
  .filter-bar > .search-box,
  .filter-bar > .field.grow,
  .filter-bar > .check-row,
  .filter-bar .fb-actions { grid-column: 1 / -1; }
  .filter-bar > .select,
  .filter-bar > .input,
  .filter-bar > .field { width: 100%; min-width: 0; }
  .filter-bar > .select, .filter-bar > .input { min-width: 0; }
  .filter-bar .fb-actions .btn { flex: 1; }
}

/* --- 칩 / 필터 --- */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: var(--fs-sm); background: var(--surface); color: var(--text-secondary);
  font-weight: 500; transition: all var(--dur-fast) var(--ease); white-space: nowrap;
}
.chip:hover:not(.on) { border-color: var(--primary); color: var(--primary); }
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.chip .n { opacity: .75; margin-left: 3px; font-size: var(--fs-xs); }

/* --- 탭 --- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); overflow-x: auto; }
.tab {
  padding: 11px 18px; font-size: var(--fs-md); color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  font-weight: 500; transition: all var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text-primary); }
.tab.on { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.tab .cnt {
  margin-left: 5px; font-size: var(--fs-2xs); background: var(--bg-muted); color: var(--text-secondary);
  padding: 2px 7px; border-radius: var(--r-full); font-weight: 700;
}
.tab.on .cnt { background: var(--primary-tint); color: var(--primary-dark); }

/* --- 테이블 --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 공식 홈페이지 표 스케일: th·td 18px → 모바일 17px (관리 표는 밀도 고려해 16px) */
.table { font-size: var(--fs-md); min-width: 680px; }
.table th {
  text-align: left; padding: 11px var(--sp-3); background: var(--bg-subtle);
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0;
}
.table td {
  padding: 12px var(--sp-3); border-bottom: 1px solid var(--border);
  vertical-align: middle; line-height: 1.5;
}
/* 행 높이 통일 — 배지/버튼이 든 칸과 텍스트만 든 칸의 높이 차이 제거 */
.table tbody tr { height: 56px; }
.table tbody td > .btn-xs, .table tbody td > .btn-sm { vertical-align: middle; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { font-family: var(--font-mono); font-size: var(--fs-sm); }
.table .right { text-align: right; }
.table .center { text-align: center; }
.table-link { color: var(--primary); font-weight: 600; }
.table-link:hover { text-decoration: underline; }

/* --- KPI --- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); position: relative; overflow: hidden;
  transition: all var(--dur-fast) var(--ease);
}
.kpi:hover { box-shadow: var(--shadow-md); }
.kpi-lbl { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.kpi-val { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.kpi-val small { font-size: var(--fs-md); font-weight: 600; color: var(--text-tertiary); margin-left: 2px; }
.kpi-val.pending { color: var(--st-pending); }
.kpi-val.warn { color: var(--st-low-text); }
.kpi-val.ok { color: var(--primary); }
.kpi-val.danger { color: var(--st-out); }
.kpi-delta { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 5px; }
.kpi-delta.up { color: var(--primary); } .kpi-delta.down { color: var(--st-out); }
.kpi-ic { position: absolute; right: 14px; top: 14px; font-size: 26px; opacity: .18; }

/* --- 그리드 --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
/* 모바일에서도 2열 유지 (스캔 버튼 등) */
.grid-2-keep { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-main-side { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-5); align-items: start; }
.grid-side-main { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-5); align-items: start; }
.sticky-side { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

/* --- 히어로 --- */
.hero {
  padding: var(--sp-8) var(--sp-6);
  background: linear-gradient(135deg, var(--primary-tint) 0%, var(--surface) 65%);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  margin-bottom: var(--sp-5); position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, var(--primary-tint-2) 0%, transparent 70%); opacity: .6;
}
.hero h1 { font-size: var(--fs-4xl); color: var(--primary-darker); margin-bottom: 10px; letter-spacing: var(--ls-title); position: relative; }
.hero p { color: var(--text-secondary); font-size: var(--fs-lg); max-width: 660px; line-height: var(--lh-base); position: relative; }
.hero-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; position: relative; }

/* --- 알림 박스 --- */
.notice {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-md);
  border-left: 3px solid var(--primary); background: var(--primary-tint);
  color: var(--primary-darker); line-height: 1.6;
}
.notice.warn { border-left-color: var(--st-low); background: var(--st-low-bg); color: var(--st-low-text); }
.notice.danger { border-left-color: var(--st-out); background: var(--st-out-bg); color: var(--st-out-text); }
.notice.info { border-left-color: var(--st-pending); background: var(--st-pending-bg); color: var(--st-pending-text); }
.notice.ok { border-left-color: var(--st-ok); background: var(--st-ok-bg); color: var(--st-ok-text); }
.notice strong { font-weight: 700; }

/* --- 빈 상태 --- */
.empty { text-align: center; padding: var(--sp-12) var(--sp-6); }
.empty-ic { font-size: 56px; margin-bottom: var(--sp-4); opacity: .45; }
.empty h3 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 8px; }
.empty p { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom: var(--sp-5); }

/* --- 스켈레톤 --- */
.skel {
  background: linear-gradient(90deg, var(--bg-muted) 25%, #EAECEF 50%, var(--bg-muted) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 13px; margin-bottom: 8px; }
.skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } .skel-line.w80 { width: 80%; }

/* --- 스텝 --- */
.steps {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: var(--sp-5); overflow-x: auto;
}
.step { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--text-tertiary); white-space: nowrap; }
.step.on { color: var(--primary); font-weight: 700; }
.step.done { color: var(--primary-dark); }
.step-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg-muted);
  color: var(--text-tertiary); display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 800; flex-shrink: 0;
}
.step.on .step-num, .step.done .step-num { background: var(--primary); color: #fff; }
.step-line { flex: 1; height: 2px; background: var(--border); min-width: 20px; }

/* --- 타임라인 --- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: var(--sp-2) 0; }
.tl-item::before {
  content: ''; position: absolute; left: -24px; top: 12px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong);
}
.tl-item.done::before { background: var(--primary); border-color: var(--primary); }
.tl-item.now::before { background: var(--primary); border-color: var(--primary-tint); box-shadow: 0 0 0 4px var(--primary-tint); }
.tl-item.danger::before { background: var(--st-out); border-color: var(--st-out); }
.tl-title { font-size: var(--fs-md); font-weight: 600; }
.tl-time { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 3px; }
.tl-desc { font-size: var(--fs-base); color: var(--text-secondary); margin-top: 4px; }

/* --- 수량 스테퍼 --- */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.qty button { padding: 9px 13px; color: var(--text-secondary); font-size: var(--fs-lg); line-height: 1; user-select: none; transition: background var(--dur-fast); }
.qty button:hover:not(:disabled) { background: var(--bg-subtle); color: var(--primary); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty input {
  width: 52px; text-align: center; border: none; border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); font-size: var(--fs-md); font-weight: 600; padding: 9px 0;
}
.qty input:focus { outline: none; background: var(--primary-tint); }

/* --- 프로그레스 바 --- */
.pbar { height: 6px; background: var(--bg-muted); border-radius: var(--r-full); overflow: hidden; }
.pbar > span { display: block; height: 100%; background: var(--primary); border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease); }
.pbar.low > span { background: var(--st-low); }
.pbar.out > span { background: var(--st-out); }

/* --- 모달 --- */
.modal-back {
  position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  animation: fadeIn var(--dur) var(--ease);
}
.modal {
  background: var(--surface); border-radius: var(--r-xl); width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-xl);
  animation: slideUp var(--dur) var(--ease);
}
.modal.wide { max-width: 760px; }
.modal-hd { padding: var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-hd h3 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-tight); }
.modal-close { font-size: 26px; color: var(--text-tertiary); line-height: 1; padding: 4px; }
.modal-body { padding: var(--sp-5); }
.modal-ft { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); justify-content: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- 토스트 --- */
.toast-wrap { position: fixed; top: 76px; right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--text-primary); color: #fff; padding: 12px 18px; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 500; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px; animation: toastIn var(--dur) var(--ease);
  max-width: 380px; pointer-events: auto;
}
.toast.ok { background: var(--primary-dark); }
.toast.err { background: #B91C1C; }
.toast.warn { background: var(--accent-dark); }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* --- 드롭다운 --- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  min-width: 260px; z-index: var(--z-drawer); overflow: hidden; display: none;
}
.dropdown-menu.open { display: block; animation: slideUp var(--dur-fast) var(--ease); }
.dropdown-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px var(--sp-4); font-size: var(--fs-md); border-bottom: 1px solid var(--border); }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--bg-subtle); }
.dropdown-hd { padding: 12px var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-base); font-weight: 700; background: var(--bg-subtle); display: flex; justify-content: space-between; }

/* ============================================================
   물품 / 프로그램 카드
   ============================================================ */
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.prog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); transition: all var(--dur) var(--ease); display: block;
}
.prog-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prog-ic {
  width: 52px; height: 52px; border-radius: var(--r-md); display: flex; align-items: center;
  justify-content: center; font-size: 30px; margin-bottom: var(--sp-3);
}
.prog-card h3 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 5px; letter-spacing: var(--ls-tight); }
.prog-card .meta { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: var(--sp-3); line-height: 1.55; }
.prog-card .go { font-size: var(--fs-base); color: var(--primary); font-weight: 700; }

.item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.item-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: all var(--dur) var(--ease); display: flex; flex-direction: column;
}
.item-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.item-thumb {
  height: 132px; background: var(--bg-subtle); display: flex; align-items: center;
  justify-content: center; font-size: 46px; border-bottom: 1px solid var(--border);
  position: relative;
}
.item-thumb .st-tag { position: absolute; top: 9px; right: 9px; }
/* 실물 사진이 등록된 카드 — 이모지 자리를 사진으로 채운다 */
.item-thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.item-cat { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 600; margin-bottom: 4px; }
.item-name { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; line-height: 1.35; letter-spacing: var(--ls-tight); }
.item-spec { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: var(--sp-3); flex: 1; }
.item-stock { display: flex; align-items: baseline; gap: 4px; margin-bottom: var(--sp-3); }
.item-stock .n { font-size: var(--fs-2xl); font-weight: 800; color: var(--primary); }
.item-stock .t { font-size: var(--fs-base); color: var(--text-tertiary); }
.item-stock.out .n { color: var(--st-out); }
.item-stock.low .n { color: var(--st-low-text); }
.item-foot { display: flex; gap: 6px; }

/* --- 물품 상세 --- */
.detail-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--sp-8); }
.detail-hero {
  height: 300px; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 110px;
}
/* 실물 사진이 있으면 잘리지 않게 contain 으로 전체를 보여준다
   (물품 형태 확인이 목적이므로 cover 로 잘라내지 않는다) */
.detail-hero.has-img { overflow: hidden; padding: var(--sp-2); }
.detail-hero.has-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.spec-table { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.spec-row { display: grid; grid-template-columns: 140px 1fr; font-size: var(--fs-md); border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-row dt { padding: 12px var(--sp-4); background: var(--bg-subtle); color: var(--text-secondary); font-weight: 600; }
.spec-row dd { padding: 12px var(--sp-4); }
.stock-box { display: flex; gap: var(--sp-3); }
.stock-card { flex: 1; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.stock-card .l { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 4px; }
.stock-card .v { font-size: var(--fs-3xl); font-weight: 800; }
.stock-card .v.ok { color: var(--primary); } .stock-card .v.out { color: var(--st-out); }

/* --- 장바구니 --- */
.cart-item { display: grid; grid-template-columns: 56px 1fr auto auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: none; }
.cart-thumb { width: 56px; height: 56px; background: var(--primary-tint); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.cart-name { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 4px; }
.cart-meta { font-size: var(--fs-base); color: var(--text-secondary); }
.sum-row { display: flex; justify-content: space-between; font-size: var(--fs-md); padding: 8px 0; color: #4B5563; }
.sum-total { display: flex; justify-content: space-between; font-size: var(--fs-lg); font-weight: 800; padding: var(--sp-3) 0; border-top: 1px solid var(--border); margin-top: 6px; }

/* --- 신청 목록 아이템 --- */
.req-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.req-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.req-no { font-size: var(--fs-xs); color: var(--primary); font-weight: 800; font-family: var(--font-mono); margin-bottom: 5px; }
.req-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 5px; letter-spacing: var(--ls-tight); }
.req-items { font-size: var(--fs-base); color: #4B5563; margin-bottom: 5px; }
.req-date { font-size: var(--fs-sm); color: var(--text-tertiary); }
.req-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.req-steps { display: flex; gap: 4px; margin-top: 9px; }
.req-steps > i { width: 44px; height: 4px; border-radius: 2px; background: var(--bg-muted); }
.req-steps > i.on { background: var(--primary); }
.req-steps > i.danger { background: var(--st-out); }

/* ============================================================
   인증 화면
   ============================================================ */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); background: linear-gradient(160deg, var(--primary-tint) 0%, var(--bg-subtle) 45%);
}
.auth-card {
  width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: var(--sp-8); box-shadow: var(--shadow-lg);
}
.auth-card.wide { max-width: 620px; }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.auth-logo img { height: 44px; }
.auth-title { font-size: var(--fs-3xl); font-weight: 800; text-align: center; letter-spacing: var(--ls-title); }
.auth-sub { font-size: var(--fs-md); color: var(--text-secondary); text-align: center; margin-top: 6px; margin-bottom: var(--sp-6); }
.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--text-tertiary); font-size: var(--fs-xs); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-foot { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--text-secondary); }
.auth-foot a { color: var(--primary); font-weight: 700; }
.role-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-subtle); border-radius: var(--r-md); margin-bottom: var(--sp-5); }
.role-tabs button { flex: 1; padding: 10px; font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); border-radius: var(--r-sm); transition: all var(--dur-fast); }
.role-tabs button.on { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-xs); }
.demo-box { background: var(--bg-subtle); border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-4); line-height: 1.7; }
.demo-box b { color: var(--text-primary); }
.demo-box code { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); }

/* ============================================================
   모바일 하단 내비게이션 (PWA)
   ============================================================ */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-nav-h);
  background: var(--surface); border-top: 1px solid var(--border); z-index: var(--z-header);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav-inner { display: grid; grid-template-columns: repeat(var(--nav-cols, 4), 1fr); height: var(--mobile-nav-h); }
.mobile-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: 600; position: relative;
}
.mobile-nav a .ic { font-size: 21px; line-height: 1; }
.mobile-nav a.on { color: var(--primary); }
.mobile-nav a .n {
  position: absolute; top: 6px; right: 50%; margin-right: -20px; min-width: 15px; height: 15px;
  background: var(--st-out); color: #fff; border-radius: var(--r-full); font-size: var(--fs-2xs);
  display: flex; align-items: center; justify-content: center; font-weight: 800; padding: 0 3px;
}

/* --- 모바일 드로어 --- */
.drawer-back { position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: var(--z-drawer); display: none; }
.drawer-back.open { display: block; animation: fadeIn var(--dur-fast); }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 282px; background: var(--surface);
  z-index: calc(var(--z-drawer) + 1); transform: translateX(-100%);
  transition: transform var(--dur) var(--ease); overflow-y: auto; box-shadow: var(--shadow-xl);
}
.drawer.open { transform: none; }
.drawer-hd { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   QR 스캐너
   ============================================================ */
.scanner-box { position: relative; background: #0B0F14; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; max-width: 460px; margin: 0 auto; }
.scanner-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.scan-frame .box { width: 62%; aspect-ratio: 1; border-radius: var(--r-lg); box-shadow: 0 0 0 9999px rgba(0,0,0,.45); position: relative; }
.scan-frame .box::before, .scan-frame .box::after,
.scan-frame .box > i::before, .scan-frame .box > i::after {
  content: ''; position: absolute; width: 30px; height: 30px; border: 3px solid var(--primary);
}
.scan-frame .box::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.scan-frame .box::after { top: -2px; right: -2px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.scan-frame .box > i::before { bottom: -2px; left: -2px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.scan-frame .box > i::after { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }
.scan-line { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--primary); box-shadow: 0 0 12px var(--primary); animation: scanMove 2.2s ease-in-out infinite; }
@keyframes scanMove { 0%,100% { top: 22%; } 50% { top: 78%; } }
.scan-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: var(--fs-md); font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

.scan-mode { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.scan-mode button {
  flex: 1; padding: 14px; border: 2px solid var(--border); border-radius: var(--r-lg);
  font-size: var(--fs-md); font-weight: 700; background: var(--surface); color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease); display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.scan-mode button .ic { font-size: 26px; }
.scan-mode button.on.out { border-color: var(--st-pending); background: var(--st-pending-bg); color: var(--st-pending-text); }
.scan-mode button.on.in { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-dark); }

/* --- 본문 읽기용 영역 (약관·개인정보·이용안내) ---
   늘봄누리센터 공식 홈페이지 body 선언값 18px / line-height 1.6 그대로 적용 */
.prose { font-size: var(--fs-lg); line-height: var(--lh-base); letter-spacing: var(--ls-base); color: #444; }
.prose p { margin-bottom: var(--sp-3); }
.prose h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-title); margin: var(--sp-6) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-tight); margin: var(--sp-5) 0 var(--sp-2); color: var(--text-primary); }
.prose li { margin-bottom: 4px; }
@media (max-width: 640px) {
  /* 공식 홈페이지 반응형 단계(18→17→16px) 반영 */
  .prose { font-size: var(--fs-md); }
  .prose h2 { font-size: var(--fs-2xl); }
  .prose h3 { font-size: var(--fs-lg); }
}

/* --- QR 라벨 --- */
.label-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.label-card { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--sp-3); text-align: center; background: var(--surface); }
.label-card canvas, .label-card img { margin: 0 auto var(--sp-2); }
.label-card .sku { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.label-card .nm { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
/* 라벨 안의 바코드 — 인쇄 시 축소되지 않도록 폭을 그대로 유지 */
.label-card .bc-wrap { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.label-card .bc-wrap svg { max-width: 100%; height: auto; }

/* ============================================================
   외부 스캐너 장비 상태 표시줄
   ============================================================ */
.wedge-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 14px; margin-bottom: var(--sp-4);
  border: 1px solid var(--border-strong); border-left: 4px solid var(--text-tertiary);
  border-radius: var(--r-md); background: var(--surface);
  transition: border-color .18s, background .18s;
}
.wedge-bar .wedge-ic { font-size: 22px; line-height: 1; flex-shrink: 0; }
.wedge-bar .wedge-tx { flex: 1; min-width: 0; }
.wedge-bar .wedge-tx b { display: block; font-size: var(--fs-sm); }
.wedge-bar .wedge-tx .text-xs { color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
.wedge-bar .wedge-sw {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: var(--fs-xs); color: var(--text-secondary); cursor: pointer; user-select: none;
}
.wedge-bar .wedge-sw input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.wedge-bar.ready { border-left-color: var(--primary); background: var(--primary-tint); }
.wedge-bar.ready .wedge-tx b { color: var(--primary-darker); }
.wedge-bar.busy { border-left-color: var(--st-low); background: var(--st-low-bg); }
.wedge-bar.ok { border-left-color: var(--st-ok); background: var(--st-ok-bg); }
.wedge-bar.ok .wedge-tx b { color: var(--st-ok-text); }
.wedge-bar.off { border-left-color: var(--border-strong); background: var(--bg-subtle); opacity: .75; }

/* ============================================================
   차트 래퍼
   ============================================================ */
.chart-wrap { position: relative; height: 280px; }
.chart-wrap.sm { height: 220px; }
.chart-wrap.lg { height: 340px; }

/* ============================================================
   기타
   ============================================================ */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .ml-auto { margin-left: auto; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; }
.text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); } .text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); }
.text-muted { color: var(--text-secondary); } .text-faint { color: var(--text-tertiary); }
.text-primary-c { color: var(--primary); } .text-danger { color: var(--st-out); }
.font-bold { font-weight: 700; } .font-semi { font-weight: 600; }
.mono { font-family: var(--font-mono); }
.text-center { text-align: center; } .text-right { text-align: right; }
.w-full { width: 100%; } .hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: var(--sp-4) 0; }
.nowrap { white-space: nowrap; }

/* ============================================================
   반응형 — 태블릿 (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .body-wrap { padding: var(--sp-4); gap: var(--sp-4); }
  .side { display: none; }
  .hdr-nav { display: none; }
  .hdr-burger { display: flex; }
  .item-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-main-side, .grid-side-main { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .detail-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .prog-grid { grid-template-columns: repeat(2, 1fr); }
  .label-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   반응형 — 모바일 (≤640px)
   ============================================================ */
@media (max-width: 640px) {
  /* 공식 홈페이지는 모바일에서도 본문 크기를 줄이지 않음 → 16px 유지 */
  body { padding-bottom: var(--mobile-nav-h); font-size: var(--fs-md); }
  .hdr-inner { padding: 0 var(--sp-4); gap: var(--sp-2); min-width: 0; }
  .hdr-logo { height: 28px; }
  /* 강사 확대 스케일에서 브랜드 문구가 길어져 우측 영역을 밀어내면
     가로 스크롤이 생기므로 축소를 허용하고 말줄임 처리한다. */
  .hdr-brand { flex-shrink: 1; min-width: 0; }
  .hdr-brand-text { min-width: 0; }
  .hdr-brand-title {
    font-size: var(--fs-base);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hdr-brand-sub { display: none; }
  .hdr-user-info { display: none; }
  .hdr-right { flex-shrink: 0; }
  .body-wrap { padding: var(--sp-3); }
  .mobile-nav { display: block; }

  .page-title { font-size: var(--fs-2xl); }
  .page-hd { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .page-actions .btn { flex: 1; }

  .hero { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero p { font-size: var(--fs-md); }

  .item-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .item-thumb { height: 104px; font-size: 36px; }
  .item-body { padding: var(--sp-3); }
  .prog-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .kpi { padding: var(--sp-3); }
  .kpi-val { font-size: var(--fs-3xl); }
  .kpi-ic { display: none; }

  .form-row, .form-row-3 { grid-template-columns: 1fr; gap: var(--sp-3); }
  .card-pad, .card-body { padding: var(--sp-4); }
  .card-hd { padding: var(--sp-3) var(--sp-4); }

  .req-card { grid-template-columns: 1fr; padding: var(--sp-4); }
  .req-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .cart-item { grid-template-columns: 48px 1fr; grid-template-areas: 'thumb info' 'qty qty'; row-gap: var(--sp-3); }
  .cart-thumb { grid-area: thumb; width: 48px; height: 48px; font-size: 24px; }

  .auth-page { padding: var(--sp-3); align-items: flex-start; padding-top: var(--sp-6); }
  .auth-card { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-lg); }
  .auth-title { font-size: var(--fs-2xl); }

  /* ------------------------------------------------------------------ *
     표 → 카드 자동 전환 (모바일 최적화)

     이전 문제 : .table 에 min-width 580~960px 이 걸려 있어 390px 화면에서는
     무조건 가로 스크롤이 생겼다. 실측 결과 /admin/items 는 표 폭이 960px,
     화면 밖으로 넘친 요소가 458개였고 오른쪽 끝의 [수정][삭제][±재고]
     버튼에 손이 닿지 않았다.

     해결 : 모바일에서는 표를 해체해 행 하나를 카드 하나로 쌓는다.
     각 칸 앞에는 원래 열 제목을 붙여 어떤 값인지 알 수 있게 한다.
     열 제목은 common.js 가 thead 를 읽어 data-th 속성으로 자동 주입하므로
     화면 27곳의 표 마크업을 하나도 고치지 않아도 된다.

     .table-plain 을 붙인 표는 이 변환에서 제외한다(2열 스펙 표 등).
   * ------------------------------------------------------------------ */
  /* 카드로 변환된 표는 넘칠 일이 없으므로 스크롤 컨테이너를 해제한다.
     (해제하지 않으면 position:sticky 헤더 잔재와 겹쳐 여백이 생긴다)
     단, 변환 제외 표(.table-plain)를 담은 래퍼는 스크롤을 남겨 둔다. */
  .table-wrap:not(:has(.table-plain)) { overflow-x: visible; }

  /* 인라인 style="min-width:960px" 이 6곳에 있어 !important 가 필요하다.
     인라인 스타일은 선택자 우선순위로는 이길 수 없다. */
  .table:not(.table-plain) {
    min-width: 0 !important; width: 100%; display: block; font-size: var(--fs-base);
    border-collapse: separate; border-spacing: 0;
  }
  .table:not(.table-plain) thead { display: none; }   /* 열 제목은 각 칸으로 옮겨진다 */
  .table:not(.table-plain) tbody { display: block; }

  .table:not(.table-plain) tbody tr {
    display: block; height: auto;                     /* 고정 56px 해제 */
    background: var(--surface-1);
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  .table:not(.table-plain) tbody tr:hover td { background: transparent; }

  /* ⚠ flex 가 아니라 grid 를 쓴다.
     flex 로 하면 한 칸에 값이 여러 개(강사명 + 소속 + 연락처처럼
     div 가 3개) 있을 때 값들이 가로로 나란히 눌려 "박준\n호",
     "2\n종\n5\n점" 처럼 한 글자씩 접혔다(실측 스크린샷 확인).
     grid 의 두 번째 칸에 값 전체를 몰아넣어 세로로 쌓는다. */
  .table:not(.table-plain) tbody td {
    display: grid; grid-template-columns: 34% 1fr;
    align-items: center; gap: var(--sp-3);
    padding: 10px 0; min-height: 44px;                /* 터치 타겟 확보 */
    border-bottom: 1px dashed var(--border-subtle, var(--border));
    text-align: right !important;                     /* 값은 우측 정렬 */
  }
  /* 값이 여러 개인 칸은 두 번째 열 안에서 세로로 쌓인다. */
  .table:not(.table-plain) tbody td > * { grid-column: 2; }
  .table:not(.table-plain) tbody tr td:last-child { border-bottom: none; }

  /* 열 제목 (common.js 가 주입한 data-th) */
  .table:not(.table-plain) tbody td::before {
    content: attr(data-th);
    grid-column: 1;                                   /* grid 첫 열 고정 */
    text-align: left;                                 /* 라벨은 좌측 */
    font-size: var(--fs-xs); font-weight: 800; color: var(--text-secondary);
    letter-spacing: .2px;
  }
  /* 제목이 없는 칸(빈 th·체크박스·처리 버튼)은 라벨 자리를 비우지 않는다 */
  .table:not(.table-plain) tbody td[data-th='']::before { display: none; }

  /* 값이 여러 개(버튼 묶음)인 칸은 값 쪽을 오른쪽 정렬로 모아 준다 */
  .table:not(.table-plain) tbody td > * { min-width: 0; }

  /* 첫 칸은 카드 제목처럼 강조한다 (라벨 숨기고 크게) */
  /* 제목 칸은 값 우측정렬(위 td 규칙)을 물려받으면 안 된다.
     실측에서 REQ-20260829-0001 이 오른쪽에 붙어 카드 제목처럼
     보이지 않았다. 좌측 정렬로 되돌린다. */
  .table:not(.table-plain) tbody td.td-head {
    display: block; padding: var(--sp-3) 0 10px;
    font-size: var(--fs-lg); font-weight: 700;
    text-align: left !important;
  }
  .table:not(.table-plain) tbody td.td-head::before { display: none; }

  /* 처리 버튼 칸 — 버튼을 가로로 펼쳐 누르기 쉽게 */
  .table:not(.table-plain) tbody td.td-actions {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    padding-top: var(--sp-3); padding-bottom: var(--sp-3);
  }
  .table:not(.table-plain) tbody td.td-actions::before { display: none; }
  .table:not(.table-plain) tbody td.td-actions .btn {
    flex: 1 1 auto; min-height: 44px; min-width: 84px;
  }

  /* 체크박스 칸 — 18px 로 측정됐던 것을 44px 로 */
  /* 위 td 규칙이 grid 이므로 flex 로 되돌려야 '선택' 라벨과 체크박스가
     좌측에 붙는다(grid 로 두면 34% 열 뒤로 밀려난다). */
  .table:not(.table-plain) tbody td.td-check {
    display: flex; justify-content: flex-start;
  }
  .table:not(.table-plain) tbody td.td-check::before {
    content: '선택'; display: block; flex: 0 0 auto; margin-right: var(--sp-3);
  }

  /* "내용 없음" 안내 행은 카드로 만들지 않는다 */
  .table:not(.table-plain) tbody td[colspan] {
    display: block; text-align: center !important; padding: var(--sp-5) 0;
  }
  .table:not(.table-plain) tbody td[colspan]::before { display: none; }
  .table:not(.table-plain) tbody tr.tr-empty { border: none; background: transparent; }

  /* 합계 행 등은 강조 유지 */
  .table:not(.table-plain) tfoot { display: block; }
  .table:not(.table-plain) tfoot tr { display: block; padding: var(--sp-2) var(--sp-3); }
  .table:not(.table-plain) tfoot td { display: flex; justify-content: space-between; padding: 8px 0; }

  /* 변환에서 제외된 표(2열 스펙 등)는 종전처럼 가로 스크롤 허용 */
  .table.table-plain { min-width: 0; font-size: var(--fs-base); }
  .table.table-plain th, .table.table-plain td { padding: 11px var(--sp-2); }

  .toast-wrap { top: auto; bottom: calc(var(--mobile-nav-h) + 16px); left: 12px; right: 12px; }
  .toast { max-width: none; }
  .modal { max-height: 92vh; border-radius: var(--r-lg); }
  .modal-ft { flex-direction: column-reverse; }
  .modal-ft .btn { width: 100%; }
  .label-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { padding: var(--sp-3); font-size: var(--fs-sm); }
  .step span:not(.step-num) { display: none; }
  .detail-hero { height: 200px; font-size: 76px; }
  .spec-row { grid-template-columns: 100px 1fr; }
  .chart-wrap { height: 240px; }
}

/* --- 인쇄 --- */
@media print {
  .hdr, .side, .mobile-nav, .page-actions, .btn, .toast-wrap { display: none !important; }
  body { background: #fff; padding: 0; }
  .body-wrap { padding: 0; display: block; }
  .card { border-color: #ccc; box-shadow: none; break-inside: avoid; }
  .label-card { break-inside: avoid; }
  /* 화면 전용 요소(선택 도구·안내문 등)는 종이에 인쇄하지 않는다 */
  .no-print { display: none !important; }
  /* 인쇄 대상에서 제외한 라벨 */
  .label-card.is-off { display: none !important; }
}

/* --- 모션 최소화 (접근성) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   공통 미디어 행 · 강조 아이콘 (강사 화면 리스트)
   아이콘 박스 크기를 토큰(--icon-sm/md/lg)으로 통일해
   data-scale='senior' 에서 자동으로 함께 커지도록 구성
   ============================================================ */
.media-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: calc(var(--icon-sm) + 12px);
  border-radius: var(--r-md); transition: background var(--dur-fast) var(--ease);
}
.media-row:hover { background: var(--surface-2); }
.media-ic {
  width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0;
  background: var(--bg-subtle); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--icon-sm) * 0.5); line-height: 1;
}
.media-ic.tint { background: var(--primary-tint); }
.big-ic {
  width: var(--icon-lg); height: var(--icon-lg); border-radius: 50%;
  background: var(--surface); margin: 0 auto var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--icon-lg) * 0.45); box-shadow: var(--shadow-sm);
}
.step-ic { font-size: var(--fs-4xl); margin-bottom: 10px; line-height: 1; }

/* ============================================================
   강사(이용자) 화면 확대 배치 · <html data-scale="senior">
   50~60대 이용자 가독성 최우선 — 아이콘·터치영역·여백 확대
   ============================================================ */
[data-scale='senior'] .btn { padding: 13px 22px; }
[data-scale='senior'] .btn-lg { padding: 17px 30px; min-height: 60px; }
[data-scale='senior'] .btn-sm { padding: 9px 15px; min-height: 40px; font-size: var(--fs-base); }
[data-scale='senior'] .btn-xs { padding: 6px 12px; min-height: 34px; font-size: var(--fs-sm); }
[data-scale='senior'] .input,
[data-scale='senior'] .select,
[data-scale='senior'] .textarea { padding: 13px 15px; }
[data-scale='senior'] .textarea { min-height: 120px; }
/* 위 padding 단축 속성이 .search-box 의 padding-left 를 덮으므로 다시 지정
   (미지정 시 돋보기 아이콘과 placeholder 문구가 겹침) */
[data-scale='senior'] .search-box .input { padding-left: var(--search-ic-pad); }
[data-scale='senior'] .label { font-size: var(--fs-md); }
[data-scale='senior'] .hint { font-size: var(--fs-base); }
[data-scale='senior'] input[type='checkbox'].cb,
[data-scale='senior'] input[type='radio'].cb { width: 24px; height: 24px; }
[data-scale='senior'] input[type='checkbox'].cb:checked::after {
  left: 7px; top: 3px; width: 6px; height: 12px; border-width: 0 2.5px 2.5px 0;
}
[data-scale='senior'] .check-row { gap: var(--sp-3); }
/* 확대 스케일에서는 사진 썸네일도 함께 키워 물품 식별이 쉽게 한다 */
[data-scale='senior'] .photo-thumb { width: 56px; height: 56px; }
/* 확대 스케일에서는 각 컨트롤 폭이 커지므로 필터 바 최소폭을 낮춰
   데스크탑에서 한 줄에 배치되도록 조정 (줄바꿈은 유지) */
[data-scale='senior'] .filter-bar > .search-box { flex: 1 1 200px; }
[data-scale='senior'] .filter-bar > .select { min-width: 130px; }
[data-scale='senior'] .card-hd { padding: var(--sp-4) var(--sp-5); }
[data-scale='senior'] .card-hd h3 { font-size: var(--fs-2xl); }
[data-scale='senior'] .card-body, [data-scale='senior'] .card-pad { padding: var(--sp-6); }
[data-scale='senior'] .page-title { font-size: var(--fs-4xl); }
[data-scale='senior'] .page-sub { font-size: var(--fs-lg); }
[data-scale='senior'] .crumb { font-size: var(--fs-md); }

/* 프로그램·물품 카드 */
[data-scale='senior'] .prog-ic {
  width: var(--icon-md); height: var(--icon-md); font-size: calc(var(--icon-md) * 0.56);
}
[data-scale='senior'] .prog-card h3 { font-size: var(--fs-2xl); }
[data-scale='senior'] .prog-card .meta,
[data-scale='senior'] .prog-card .go { font-size: var(--fs-md); }
[data-scale='senior'] .prog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
[data-scale='senior'] .item-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
[data-scale='senior'] .item-thumb { height: 168px; font-size: 62px; }
[data-scale='senior'] .item-cat { font-size: var(--fs-base); }
[data-scale='senior'] .item-name { font-size: var(--fs-xl); }
[data-scale='senior'] .item-spec { font-size: var(--fs-md); }
[data-scale='senior'] .item-stock .n { font-size: var(--fs-3xl); }
[data-scale='senior'] .item-stock .t { font-size: var(--fs-md); }
[data-scale='senior'] .item-body { padding: var(--sp-5); }

/* 물품 상세 */
[data-scale='senior'] .detail-hero { height: 340px; font-size: 132px; }
[data-scale='senior'] .spec-row { font-size: var(--fs-lg); grid-template-columns: 168px 1fr; }
[data-scale='senior'] .spec-row dt, [data-scale='senior'] .spec-row dd { padding: 15px var(--sp-4); }
[data-scale='senior'] .stock-card .l { font-size: var(--fs-md); }
[data-scale='senior'] .stock-card .v { font-size: var(--fs-4xl); }

/* 장바구니 · 신청 카드 */
[data-scale='senior'] .cart-thumb {
  width: var(--icon-md); height: var(--icon-md); font-size: calc(var(--icon-md) * 0.5);
}
[data-scale='senior'] .cart-item { grid-template-columns: var(--icon-md) 1fr auto auto; }
[data-scale='senior'] .cart-name { font-size: var(--fs-xl); }
[data-scale='senior'] .cart-meta { font-size: var(--fs-md); }
[data-scale='senior'] .qty button { padding: 13px 19px; font-size: var(--fs-2xl); }
[data-scale='senior'] .qty input { font-size: var(--fs-xl); width: 64px; padding: 13px 0; }

/* 표 · 배지 · 상태 */
[data-scale='senior'] .table { font-size: var(--fs-lg); }
[data-scale='senior'] .table th { font-size: var(--fs-base); text-transform: none; letter-spacing: 0; }
[data-scale='senior'] .table td { padding: 16px var(--sp-4); }
[data-scale='senior'] .table tbody tr { height: 68px; }
[data-scale='senior'] .badge { font-size: var(--fs-base); padding: 5px 12px; }
[data-scale='senior'] .chip { font-size: var(--fs-md); padding: 10px 18px; }
[data-scale='senior'] .tab { font-size: var(--fs-lg); padding: 14px 22px; }

/* 히어로 · 빈 상태 · 안내 */
[data-scale='senior'] .hero p { font-size: var(--fs-xl); }
[data-scale='senior'] .empty-ic { font-size: 76px; }
[data-scale='senior'] .empty h3 { font-size: var(--fs-2xl); }
[data-scale='senior'] .empty p { font-size: var(--fs-lg); }
[data-scale='senior'] .steps { font-size: var(--fs-md); }
[data-scale='senior'] .step { font-size: var(--fs-md); }
[data-scale='senior'] .step-num { width: 30px; height: 30px; font-size: var(--fs-base); }
[data-scale='senior'] .kpi-lbl { font-size: var(--fs-md); }
[data-scale='senior'] .kpi-ic { font-size: 34px; }

/* 헤더 · 사이드 · 모바일 내비 (터치 타깃 확대) */
[data-scale='senior'] .hdr-nav a { font-size: var(--fs-md); padding: 10px 16px; }
[data-scale='senior'] .side-item { font-size: var(--fs-md); padding: 13px var(--sp-4); }
[data-scale='senior'] .side-item .ic { font-size: var(--fs-lg); width: 26px; }
[data-scale='senior'] .mobile-nav a { font-size: var(--fs-sm); }
[data-scale='senior'] .mobile-nav a .ic { font-size: 27px; }
[data-scale='senior'] .dropdown-item { font-size: var(--fs-md); padding: 15px var(--sp-4); }
[data-scale='senior'] .toast { font-size: var(--fs-lg); padding: 15px 22px; }

/* 강사 화면 태블릿·모바일 보정 */
@media (max-width: 1024px) {
  [data-scale='senior'] .item-grid { grid-template-columns: repeat(2, 1fr); }
  [data-scale='senior'] .prog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  [data-scale='senior'] .item-grid { grid-template-columns: 1fr; }
  [data-scale='senior'] .prog-grid { grid-template-columns: 1fr; }
  [data-scale='senior'] .item-thumb { height: 150px; font-size: 56px; }
  [data-scale='senior'] .detail-hero { height: 240px; font-size: 96px; }
  [data-scale='senior'] .table { font-size: var(--fs-md); }
  [data-scale='senior'] .table tbody tr { height: auto; }
  [data-scale='senior'] .page-title { font-size: var(--fs-3xl); }
  [data-scale='senior'] .step-ic { font-size: var(--fs-3xl); }
}

/* ============================================================
   모바일 터치 타깃 확보 (≤640px)
   ------------------------------------------------------------
   실측 근거 — 390×844 iPhone 화면에서 손가락으로 누르기 어려운
   (높이 44px 미달 또는 폭 30px 미달) 요소를 세어 확인했다.

     화면            적용 전   원인
     /admin           16개     헤더버튼 34~42px · 표내부 링크 · 모달 닫기
     /admin/requests  11개     헤더버튼 · 체크박스 18px · 라벨
     /admin/items      7개     헤더버튼 · 체크박스

   44px 은 Apple HIG 권장치(iOS 44pt)이며 Android 는 48dp 를 권장한다.
   여기서는 44px 을 기준으로 맞춘다.

   ⚠ 시각적 크기를 키우면 레이아웃이 무너지는 요소(체크박스 등)는
     크기를 바꾸지 않고 ::after 로 투명한 확장 영역만 넓힌다.
     보이는 모양은 그대로, 누를 수 있는 범위만 커진다.
   ⚠ PC 화면은 마우스로 정확히 누를 수 있어 손댈 필요가 없다.
     그래서 모든 규칙을 미디어쿼리 안에 둔다.
   ============================================================ */
@media (max-width: 640px) {
  /* 헤더 아이콘 버튼 — 34×36 → 44×44 */
  .hdr-icon-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* 사용자 버튼 — 42×34 → 44 높이 확보 (아바타 크기는 유지) */
  .hdr-user { min-height: 44px; }
  .hdr-user-avatar { min-width: 34px; min-height: 34px; }

  /* 브랜드 링크 — 223×28 → 높이만 44 로. 폭은 이미 충분하다. */
  .hdr-brand { min-height: 44px; }

  /* 모달 닫기 — 26px 글꼴에 padding 4px 뿐이었다 */
  .modal-close {
    min-width: 44px; min-height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* 표 안의 텍스트 링크 — 글자 높이만큼만 눌리던 것을 44px 로.
     ⚠ line-height: 44px 로 늘리면 안 된다. 실측에서 신청번호
       (REQ-20260829-0001) 가 두 줄로 접히자 줄 간격이 44px 씩
       벌어져 카드가 흉하게 늘어졌다(스크린샷 확인).
       줄간격은 정상으로 두고 위아래 여백으로 높이를 만든다. */
  .table-link {
    display: inline-block; min-height: 44px;
    line-height: 1.45; padding: 11px 0;
  }

  /* 체크박스·라디오 — 보이는 크기(18px)는 유지하고 누를 범위만 넓힌다.
     ::after 로 44×44 투명 영역을 중앙 정렬로 덮어씌운다. */
  input[type='checkbox'].cb, input[type='radio'].cb { position: relative; }
  input[type='checkbox'].cb::before, input[type='radio'].cb::before {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }
  /* 체크 표시(::after)가 위 확장 영역에 가리지 않도록 위로 올린다. */
  input[type='checkbox'].cb:checked::after,
  input[type='radio'].cb:checked::after { z-index: 1; }

  /* 체크박스를 감싼 라벨 자체도 누를 수 있게 한다. */
  label.label, label.check-row {
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* 작은 버튼 — 34px 최소높이를 44px 로. 표 카드 안의 버튼은
     위쪽 .td-actions 규칙에서 이미 44px 이 적용되어 중복돼도 무해하다. */
  .btn-sm, .btn-xs { min-height: 44px; }

  /* 탭 — 11px 상하 여백으로 42px 였다 */
  .tab { min-height: 44px; display: inline-flex; align-items: center; }

  /* 페이지네이션·필터 칩 등 작은 조작 요소 일괄 보정 */
  .page-link, .chip, .filter-chip { min-height: 44px; display: inline-flex; align-items: center; }

  /* 카드 헤더 우측의 "관리 →" 류 작은 링크 (실측 37×21).
     마크업을 고치지 않고 위치만 잡아 44px 을 확보한다. */
  .card-hd > a { min-height: 44px; display: inline-flex; align-items: center; }

  /* 빵부스러기(경로 표시) 링크 — "홈" 이 실측 16×32 로 가장 작았다.
     좌우 여백까지 눌리게 넓혀 44px 을 만든다. */
  .crumb a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 6px; margin: 0 -6px;   /* 시각적 위치는 그대로 */
  }

  /* 물품 카드 제목 링크 — 실측 312×38. 카드 전체가 눌리는 구조라
     실사용엔 문제없지만 기준(44px)에 맞춘다. */
  .item-card a, .item-body a { min-height: 44px; }

  /* 약관·개인정보처리방침 등 안내 상자 안의 텍스트 링크 (실측 140×19).
     .notice 안에서 실제로 나타났으므로 그 경로를 포함한다. */
  .form-hint a, .text-xs a, a.link-sm, .notice a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}