:root {
  --color-accent: #ee6352;
  --color-surface: rgba(0,0,0,.05);
  --color-base: #000000;
  --color-surface-dim: rgba(0,0,0,.08);
  --color-surface-bright: rgba(0,0,0,.03);
  --color-base-muted: #3a3a3a;
  --color-base-soft: rgba(0, 0, 0, 0.04);
  --color-accent-hover: #d9503f;
  --color-accent-soft: rgba(238, 99, 82, 0.34);
  --color-accent-disabled-bg: rgba(238, 99, 82, 0.28);
  --color-accent-disabled-border: rgba(238, 99, 82, 0.42);
  --color-accent-disabled-text: rgba(255, 255, 255, 0.68);
  --color-white: #ffffff;
  --color-neutral-0: var(--color-white);
  --color-neutral-25: var(--color-surface-bright);
  --color-neutral-50: var(--color-white);
  --color-neutral-100: var(--color-surface);
  --color-neutral-150: var(--color-surface);
  --color-neutral-200: var(--color-surface-dim);
  --color-neutral-300: var(--color-surface-dim);
  --color-neutral-600: var(--color-base-muted);
  --color-neutral-700: var(--color-base-muted);
  --color-neutral-900: var(--color-base);
  --color-brand-50: var(--color-surface-bright);
  --color-brand-100: var(--color-surface);
  --color-brand-300: var(--color-accent);
  --color-brand-500: var(--color-accent);
  --color-brand-600: var(--color-accent-hover);
  --color-brand-700: var(--color-base);
  --color-danger-50: var(--color-surface-bright);
  --color-danger-500: var(--color-accent);
  --color-danger-600: var(--color-accent-hover);
  --color-success-50: var(--color-surface-bright);
  --color-success-500: var(--color-base);
  --color-success-600: var(--color-base-muted);
  --color-bg-app: var(--color-neutral-0);
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-subtle: var(--color-surface);
  --color-bg-item-icon: var(--color-surface);
  --color-bg-overlay: rgba(0, 0, 0, 0.62);
  --color-bg-inverse: var(--color-base);
  --color-bg-accent: var(--color-accent);
  --color-bg-danger: var(--color-accent);
  --color-bg-success: var(--color-base);
  --color-text-primary: var(--color-base);
  --color-text-secondary: var(--color-base-muted);
  --color-text-muted: var(--color-base-muted);
  --color-text-chip: rgba(0, 0, 0, 0.62);
  --color-text-inverse: var(--color-white);
  --color-border-default: var(--color-surface-dim);
  --color-border-strong: var(--color-base-muted);
  --color-border-focus: var(--color-accent);
  --color-header-info: rgba(255, 255, 255, 0.55);
  --color-header-button-border: rgba(255, 255, 255, 0.24);
  --color-header-button-bg: rgba(255, 255, 255, 0.06);
  --color-header-button-border-hover: rgba(255, 255, 255, 0.42);
  --color-header-button-bg-hover: rgba(255, 255, 255, 0.14);
  --color-sync-ring: rgba(238, 99, 82, 0.24);
  --color-focus-ring: rgba(238, 99, 82, 0.24);
  --color-search-toast-bg: rgba(0, 0, 0, 0.68);
  --color-search-toast-border: rgba(0, 0, 0, 0.14);
  --color-search-toast-text: rgba(255, 255, 255, 0.62);
  --color-search-toast-text-active: rgba(255, 255, 255, 0.92);
  --color-search-toast-placeholder: rgba(255, 255, 255, 0.44);
  --color-filter-header-bg: rgba(255, 255, 255, 0.82);
  --color-filter-header-border: rgba(0, 0, 0, 0.12);
  --color-table-row-hover: rgba(0, 0, 0, 0.02);
  --color-table-row-danger: rgba(238, 99, 82, 0.04);
  --color-table-row-danger-hover: rgba(238, 99, 82, 0.08);
  --color-status-ok: var(--color-bg-success);
  --color-status-ok-soft: rgba(0, 0, 0, 0.08);
  --color-status-ok-border: rgba(0, 0, 0, 0.24);
  --color-status-warn: var(--color-base-muted);
  --color-status-warn-soft: rgba(0, 0, 0, 0.08);
  --color-status-warn-border: rgba(0, 0, 0, 0.24);
  --color-status-danger: var(--color-bg-danger);
  --color-status-danger-soft: rgba(238, 99, 82, 0.08);
  --color-status-danger-border: rgba(238, 99, 82, 0.3);
  --color-kpi-danger-soft: rgba(238, 99, 82, 0.1);
  --color-kpi-danger-border: rgba(238, 99, 82, 0.35);
  --color-kpi-shortage-border: rgba(238, 99, 82, 0.4);
  --color-kpi-glass-top: rgba(255, 255, 255, 0.9);
  --color-kpi-glass-mid: rgba(240, 240, 240, 0.84);
  --color-kpi-glass-bottom: rgba(229, 229, 229, 0.76);
  --color-kpi-glass-border: rgba(255, 255, 255, 0.86);
  --color-kpi-glass-inner-highlight: rgba(255, 255, 255, 0.96);
  --color-kpi-glass-inner-shadow: rgba(205, 205, 205, 0.72);
  --color-kpi-glass-edge: rgba(255, 255, 255, 0.58);
  --color-kpi-glass-shadow: rgba(255, 255, 255, 0.2);
  --color-kpi-glass-float-ring: rgba(255, 255, 255, 0.32);
  --color-kpi-glass-float-glow: rgba(255, 255, 255, 0.16);
  --color-kpi-glass-float-shadow: rgba(255, 255, 255, 0.24);
  --color-avatar-1: var(--color-accent);
  --color-avatar-2: var(--color-base);
  --color-avatar-3: var(--color-base-muted);
  --color-avatar-4: var(--color-accent-hover);
  --color-avatar-5: rgba(0, 0, 0, 0.78);
  --color-avatar-6: rgba(0, 0, 0, 0.62);
  --gradient-app-shell: linear-gradient(
    180deg,
    var(--color-base) 0%,
    var(--color-base) 100%
  );
  --gradient-surface-soft: linear-gradient(
    180deg,
    var(--color-neutral-0) 0%,
    var(--color-neutral-25) 100%
  );
  --font-family-base: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  --font-family-mono: "DM Mono", "Menlo", "Consolas", monospace;
  --font-family-logo-sans: "Nudake GentleMonster", "Pretendard",
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-family-logo-serif: "Nudake GentleMonster Serif", "Times New Roman",
    Georgia, serif;
  --text-2xs: 10px;
  --text-caption: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 48px;
  --text-4xl: 72px;
  --line-height-tight: 1.1;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --radius-xxs: 6px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 6px 24px rgba(0, 0, 0, 0.16);
  --shadow-strong: 0 14px 36px rgba(0, 0, 0, 0.22);
  --shadow-kpi-float: 0 10px 22px var(--color-kpi-glass-float-shadow),
    0 -1px 10px var(--color-kpi-glass-float-glow),
    0 0 0 1px var(--color-kpi-glass-float-ring),
    0 0 16px var(--color-kpi-glass-float-glow);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --header-height: 64px;
  --tabs-height: 48px;
  --bottom-bar-height: 84px;
  --bottom-bar-max-width: 900px;
  --content-max-width: 1440px;
  --modal-max-width: 720px;
  --modal-small-max-width: 520px;
  --search-toast-width-collapsed: 280px;
  --search-toast-max-chars: 20;
  --search-toast-char-unit: 1em;
  --search-toast-width-expanded: calc(
    (var(--search-toast-max-chars) * var(--search-toast-char-unit)) +
      var(--space-10) + var(--space-5)
  );
  --search-toast-width-collapsed-mobile: clamp(
    calc(var(--space-10) * 4),
    72vw,
    calc(var(--space-10) * 6)
  );
  --search-toast-width-expanded-mobile: var(
    --search-toast-width-collapsed-mobile
  );
  --search-toast-input-font-size-mobile: var(--text-lg);
  --search-toast-placeholder-font-size-mobile: var(--text-md);
  --search-toast-placeholder-font-weight-mobile: var(--weight-medium);
  --modal-item-register-scale: 1;
  --modal-footer-action-height: var(--chip-min-height);
  --modal-footer-height-offset: 20px;
  --modal-footer-bar-height: calc(
    var(--modal-footer-action-height) + var(--modal-footer-height-offset)
  );
  --modal-footer-icon-size: var(--modal-footer-action-height);
  --item-register-qty-control-size: var(--space-9);
  --item-register-qty-btn-font-size: var(--text-xl);
  --item-register-qty-value-font-size: var(--text-xl);
  --item-register-qty-value-min-width: var(--space-8);
  --item-register-qty-gap: var(--space-2);
  --modal-media-crop-scale: 1.1;
  --admin-panel-max-width: 1220px;
  --admin-panel-max-height: 920px;
  --card-min-width: 220px;
  --card-min-height: 268px;
  --input-grid-columns: var(--grid-columns);
  --input-grid-gap: var(--space-5);
  --input-card-min-height: calc(var(--card-min-height) - var(--space-6));
  --item-card-media-offset-y: 0px;
  --item-card-press-scale: 0.97;
  --item-card-press-border-color: var(--color-border-strong);
  --item-card-press-shadow: var(--shadow-medium);
  --table-min-width: 760px;
  --grid-columns: 2;
  --filter-header-min-height: 46px;
  --chip-min-height: 44px;
  --chip-filter-min-height: 44px;
  --chip-font-size: var(--text-md);
  --size-kpi-media: calc(var(--space-10) * 1.44);
  --size-kpi-media-mobile: calc(var(--space-10) * 1.2);
  --scale-kpi-media-crop: 1.5;
  --size-icon-sm: 16px;
  --size-icon-md: 18px;
  --size-stock-bar-width: 56px;
  --size-stock-bar-height: 4px;
  --size-record-row-min-height: 52px;
  --size-record-type-width: 3px;
  --size-record-type-min-height: 28px;
  --size-record-qty-min-width: 36px;
  --size-record-avatar-size: 26px;
  --size-record-action-size: 44px;
  --mobile-header-title-scale: 1.4;
  --iphone-table-min-width: 0px;
  --iphone-search-toast-width: var(--search-toast-width-collapsed-mobile);
  --iphone-header-padding-y: var(--space-3);
  --iphone-header-padding-x: var(--space-4);
  --iphone-header-gap: var(--space-2);
  --iphone-modal-media-height: calc(var(--space-10) * 4);
  --iphone-modal-content-padding-x: var(--space-5);
  --duration-fast: 0.14s;
  --duration-base: 0.22s;
  --easing-standard: ease;
  --blur-filter-header: 8px;
  --blur-kpi-glass: 7px;
  --z-header: 20;
  --z-tabs: 19;
  --z-bottom: 30;
  --z-overlay: 80;
  --z-toast: 90;
  --z-loading: 100;
}
@font-face {
  font-family: Nudake GentleMonster;
  src: url(/fonts/nudake/gentlemonster-regular.woff) format("woff");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Nudake GentleMonster;
  src: url(/fonts/nudake/gentlemonster-bold.woff) format("woff");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Nudake GentleMonster Serif";
  src: url(/fonts/nudake/gentlemonster-serif.otf) format("opentype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
* {
  box-sizing: border-box;
}
html,
body,
#root {
  margin: 0;
  width: 100%;
  height: 100%;
}
body {
  min-height: 100dvh;
  font-family: var(--font-family-base);
  font-size: var(--text-md);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
}
.app-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
}
@supports (height: 100svh) {
  @media (hover: none) and (pointer: coarse) {
    body {
      min-height: 100svh;
    }
    .app-shell {
      min-height: 100svh;
      height: 100svh;
    }
  }
}
.app-header {
  min-height: var(--header-height);
  padding: calc(14px + var(--safe-area-top)) 20px 14px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  box-shadow: none;
  z-index: var(--z-header);
  letter-spacing: 0.08em;
}
.app-header-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
}
.app-logo-wordmark {
  display: inline-block;
  max-width: min(72vw, 640px);
  font-family: var(--font-family-logo-serif);
  font-weight: var(--weight-regular);
  font-size: clamp(12px, 2.8vw, 16px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-header-info);
}
.sync-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-accent);
  box-shadow: 0 0 0 var(--space-1) var(--color-sync-ring);
}
.icon-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-header-button-border);
  border-radius: var(--radius-sm);
  background: var(--color-header-button-bg);
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-4);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}
.icon-button:hover {
  background: var(--color-header-button-bg-hover);
  border-color: var(--color-header-button-border-hover);
}
.settings-icon-button {
  min-width: var(--chip-min-height);
  min-height: var(--chip-min-height);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-icon-button:hover {
  border-color: transparent;
}
.settings-icon-svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab-strip {
  --active-tab-index: 0;
  --tab-count: 3;
  min-height: var(--tabs-height);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--color-bg-surface);
  border-bottom: none;
  padding: 0 var(--space-2);
  gap: 0;
  z-index: var(--z-tabs);
  position: relative;
  overflow: hidden;
}
.tab-button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: rgba(0,0,0,.3);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}
.tab-button:hover {
  color: rgba(0,0,0,.5);
}
.tab-button.is-active {
  color: #000;
}
.tab-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / var(--tab-count));
  height: 2px;
  background: var(--color-bg-inverse);
  transform: translate(calc(var(--active-tab-index) * 100%));
  transition: transform var(--duration-base) var(--easing-standard);
  will-change: transform;
  pointer-events: none;
}
.app-main {
  --main-content-padding: var(--space-5);
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--color-bg-surface);
  padding: var(--main-content-padding);
  padding-bottom: calc(
    var(--bottom-bar-height) + var(--safe-area-bottom) + var(--space-8)
  );
}
.page-wrap {
  width: min(var(--content-max-width), 100%);
  margin: 0 auto;
}
.section-card {
  background: var(--color-bg-surface);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
}
.content-section,
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.page-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.25;
}
.page-subtitle {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}
.section-heading {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
}
.search-input,
.text-input,
.number-input,
.select-input,
.date-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  padding: 0 var(--space-4);
  font-size: var(--text-md);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}
.search-input:focus,
.text-input:focus,
.number-input:focus,
.select-input:focus,
.date-input:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: 0 0 0 var(--space-1) var(--color-focus-ring);
}
.search-input::placeholder,
.text-input::placeholder,
.number-input::placeholder,
.select-input::placeholder,
.date-input::placeholder {
  color: var(--color-surface-dim);
}
.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  align-items: center;
  width: 100%;
  padding: 0;
}
.input-step-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.input-filter-header {
  position: sticky;
  top: -20px;
  z-index: 10;
  display: flex;
  align-items: center;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin: -20px -20px 0 -20px;
  min-height: auto;
  height: auto;
  padding: 20px 20px 12px 20px;
}
.input-filter-header .chip-row {
  height: auto;
}
.search-toast {
  display: none !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom);
  padding: var(--space-3) var(--space-4)
    calc(var(--space-5) + var(--safe-area-bottom));
  justify-content: center;
  pointer-events: none;
}
.search-toast-inner {
  width: min(100%, var(--search-toast-width-collapsed));
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--color-search-toast-bg);
  box-shadow: none;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  pointer-events: auto;
  transition: width var(--duration-base) var(--easing-standard);
}
.search-toast-inner.is-active,
.search-toast-inner:focus-within {
  width: min(100%, var(--search-toast-width-expanded));
}
.search-toast-icon {
  color: var(--color-search-toast-text);
  width: var(--space-5);
  height: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transform: translate(0);
  transition:
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-base) var(--easing-standard);
}
.search-toast-icon-svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.search-input-toast {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  width: calc(var(--search-toast-max-chars) * var(--search-toast-char-unit));
  max-width: 100%;
  flex: 0 1 calc(var(--search-toast-max-chars) * var(--search-toast-char-unit));
  min-width: 0;
  color: var(--color-search-toast-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
  padding: 0 var(--space-2);
  transition: color var(--duration-fast) var(--easing-standard);
}
.search-input-toast:focus {
  border: 0;
  box-shadow: none;
}
.search-input-toast::placeholder {
  color: var(--color-search-toast-placeholder);
  font-weight: var(--weight-bold);
  opacity: 1;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.search-toast-inner.is-active .search-input-toast::placeholder,
.search-toast-inner:focus-within .search-input-toast::placeholder {
  opacity: 0;
}
.search-toast-inner.is-active .search-toast-icon,
.search-toast-inner.is-active .search-input-toast,
.search-toast-inner:focus-within .search-toast-icon,
.search-toast-inner:focus-within .search-input-toast {
  color: var(--color-search-toast-text-active);
}
.search-toast-inner.is-active .search-toast-icon,
.search-toast-inner:focus-within .search-toast-icon {
  transform: translate(calc(var(--space-3) * -1));
}
.chip {
  min-height: auto !important;
  height: auto !important;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.35);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.input-filter-header .chip {
  min-height: auto !important;
  height: auto !important;
}

/* 기물등록 필터칩 — 월 선택기 스타일 (개별 pill), 상단 고정 */
.input-filter-header {
  position: sticky !important;
  top: -20px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: auto !important;
  margin: -20px -20px 0 -20px !important;
  padding: 20px 20px 12px 20px !important;
  z-index: 10 !important;
}
.input-filter-header::-webkit-scrollbar { display: none; }
.input-filter-header .chip-row {
  display: inline-flex;
  flex: 0 0 auto;
  background: none;
  padding: 0;
  gap: 6px;
  width: auto;
  min-width: 0;
  overflow: visible;
}
.input-filter-header .chip {
  flex: 0 0 auto;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.4);
  min-height: 0;
  line-height: 1.2;
  border: none;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.input-filter-header .chip.is-active {
  background: #111;
  color: #fff;
  box-shadow: none;
}
.chip.is-active {
  background: #111;
  color: #fff;
}
.grid-shell {
  width: 100%;
  overflow-x: auto;
}
.input-step-content .grid-shell {
  margin-top: var(--space-1);
  overflow-x: hidden;
}
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(
    var(--grid-columns),
    minmax(var(--card-min-width), 1fr)
  );
  width: max(
    100%,
    calc(
      var(--grid-columns) * var(--card-min-width) + (var(--grid-columns) - 1) *
        var(--space-4)
    )
  );
}
.input-step-content .card-grid {
  gap: var(--input-grid-gap);
  grid-template-columns: repeat(var(--input-grid-columns), minmax(0, 1fr));
  width: 100%;
}
.item-card {
  position: relative;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
  display: block;
  align-content: start;
  text-align: left;
  padding: 0;
  touch-action: manipulation;
  box-shadow: none;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.input-step-content .item-card {
  min-height: var(--input-card-min-height);
}
@media (hover: hover) and (pointer: fine) {
  .item-card:hover .item-card-media {
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    transform: translateY(-3px);
  }
}
@media (hover: none) and (pointer: coarse) {
  .item-card {
    -webkit-tap-highlight-color: transparent;
  }
  .item-card.is-pressed {
    transform: scale(var(--item-card-press-scale));
    border-color: var(--item-card-press-border-color);
    box-shadow: var(--item-card-press-shadow);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .search-input-toast {
    font-size: var(--search-toast-input-font-size-mobile);
  }
  .search-input-toast::placeholder {
    font-size: var(--search-toast-placeholder-font-size-mobile);
    font-weight: var(--search-toast-placeholder-font-weight-mobile);
  }
}
.item-card.is-selected .item-card-media {
  box-shadow: 0 0 0 2px var(--color-bg-inverse);
}
.item-card-status {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.item-card-status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-8);
  min-height: var(--space-8);
  border: 0;
  border-radius: var(--radius-xxs);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
}
.item-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  padding-bottom: 32px;
  background: #f0f0f2;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.2s ease;
}
@media (max-width: 599px) {
  .item-card-media { aspect-ratio: 3 / 2; }
}
.item-card-media picture,
.item-register-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.item-card-media picture,
.item-card-media img,
.item-register-media picture,
.item-register-media img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.item-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.item-card .item-card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  align-items: stretch;
  padding: 0;
}
.item-card .item-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: translateY(var(--item-card-media-offset-y));
}
.item-card-media-fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.12);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.item-card-media-fallback.is-hidden {
  opacity: 0;
}
.item-card-media-fallback svg,
.item-register-media-fallback svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.item-card-media-fallback svg {
  width: var(--space-9);
  height: var(--space-9);
}
.item-card .item-card-media-fallback {
  width: 100%;
  height: 100%;
  transform: translateY(var(--item-card-media-offset-y));
}
.item-card .item-card-media-fallback svg {
  width: var(--space-8);
  height: var(--space-8);
}
.item-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 16px 12px 10px;
  background: linear-gradient(transparent 0%, rgba(240,240,242,.92) 50%);
  text-align: center;
}
.item-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  letter-spacing: -0.02em;
}
.item-card-subtitle {
  display: none;
}
.item-card-qty {
  font-size: 11px;
  color: rgba(0,0,0,.3);
  letter-spacing: -0.01em;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.metric-box {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  padding: var(--space-4);
}
.metric-box-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.metric-value {
  margin: 0;
  font-size: calc(var(--text-2xl) + var(--space-2));
  font-weight: var(--weight-extrabold);
  line-height: var(--line-height-tight);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-8);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  background: var(--color-bg-danger);
}
.badge.is-ok {
  background: var(--color-bg-success);
}
.table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: var(--table-min-width);
  background: var(--color-bg-surface);
}
.data-table th,
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  font-size: var(--text-sm);
  text-align: left;
}
.data-table th {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-weight: var(--weight-bold);
}
.data-table td.is-center,
.data-table th.is-center,
.is-center {
  text-align: center;
}
.text-danger {
  color: var(--color-bg-danger);
  font-weight: var(--weight-bold);
}
.text-success {
  color: var(--color-bg-success);
  font-weight: var(--weight-bold);
}
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.record-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.inline-actions {
  display: flex;
  gap: var(--space-2);
}
.inline-actions button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  cursor: pointer;
}
.month-nav-header {
  position: sticky;
  top: calc(var(--main-content-padding) * -1);
  z-index: calc(var(--z-tabs) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-filter-header-bg);
  backdrop-filter: blur(var(--blur-filter-header));
  -webkit-backdrop-filter: blur(var(--blur-filter-header));
  margin: calc(var(--main-content-padding) * -1)
    calc(var(--main-content-padding) * -1) 0;
  height: var(--filter-header-min-height);
  padding: 0 var(--main-content-padding);
}
.month-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}
.month-nav button {
  min-width: var(--chip-min-height);
  min-height: var(--chip-min-height);
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  cursor: pointer;
}
.month-nav strong {
  min-width: 130px;
  text-align: center;
}
.month-nav-arrow {
  min-width: var(--chip-min-height);
  min-height: var(--chip-min-height);
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--duration-fast) var(--easing-standard);
}
.month-nav-arrow:hover {
  background: var(--color-bg-subtle);
}
.month-nav-arrow-svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.month-nav-label {
  min-width: 120px;
  text-align: center;
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
.summary-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.summary-kpi-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.summary-kpi-hint {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.summary-kpi-strip {
  position: relative;
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
  padding: var(--space-1)
    calc(var(--main-content-padding) + ((100vw - 100%) / 2));
  background: var(--color-base-muted);
  box-shadow: var(--shadow-soft);
  border-radius: 0;
}
.summary-kpi-strip:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--space-9);
  pointer-events: none;
  background: linear-gradient(
    270deg,
    var(--color-base-muted) 25%,
    transparent 100%
  );
}
.summary-kpi-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.summary-kpi-bar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.summary-kpi-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 calc(var(--card-min-width) - var(--space-5));
  padding: var(--space-3);
  border-radius: var(--radius-xs);
  min-height: calc(var(--chip-min-height) * 2);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    145deg,
    var(--color-kpi-glass-top) 0%,
    var(--color-kpi-glass-mid) 52%,
    var(--color-kpi-glass-bottom) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--color-kpi-glass-inner-highlight),
    inset 0 -1px 0 var(--color-kpi-glass-inner-shadow),
    0 0 8px var(--color-kpi-glass-shadow),
    var(--shadow-kpi-float);
  border: 1px solid var(--color-kpi-glass-border);
  backdrop-filter: blur(var(--blur-kpi-glass));
  -webkit-backdrop-filter: blur(var(--blur-kpi-glass));
  transform: translateY(calc(var(--space-1) * -0.5));
  scroll-snap-align: start;
}
.summary-kpi-card:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: linear-gradient(
      168deg,
      var(--color-kpi-glass-inner-highlight) 0%,
      var(--color-kpi-glass-edge) 34%,
      transparent 70%
    ),
    radial-gradient(
      135% 85% at 8% 0%,
      var(--color-kpi-glass-edge) 0%,
      transparent 62%
    );
  z-index: 0;
  opacity: 0.72;
  pointer-events: none;
}
.summary-kpi-card:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: linear-gradient(
      90deg,
      var(--color-kpi-glass-edge) 0%,
      transparent 22%,
      transparent 78%,
      var(--color-kpi-glass-edge) 100%
    ),
    linear-gradient(
      180deg,
      transparent 46%,
      var(--color-kpi-glass-inner-shadow) 100%
    );
  opacity: 0.88;
  z-index: 0;
  pointer-events: none;
}
.summary-kpi-card > * {
  position: relative;
  z-index: 1;
}
.summary-kpi-card-media {
  position: relative;
  flex: 0 0 var(--size-kpi-media);
  width: var(--size-kpi-media);
  height: var(--size-kpi-media);
  border-radius: var(--radius-xs);
  border: 0;
  background: transparent;
  overflow: hidden;
}
.summary-kpi-card-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.summary-kpi-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--scale-kpi-media-crop));
  transform-origin: center;
}
.summary-kpi-card-media-fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  opacity: 1;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.summary-kpi-card-media-fallback.is-hidden {
  opacity: 0;
}
.summary-kpi-card-media-fallback svg {
  width: var(--space-6);
  height: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.summary-kpi-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.summary-kpi-card-name {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  text-shadow: 0 1px 0 var(--color-kpi-glass-inner-highlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-kpi-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.summary-kpi-card-shortage {
  font-family: var(--font-family-base);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-status-danger);
}
.summary-kpi-card-stock {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.summary-kpi-empty {
  flex: 1 0 100%;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}
.summary-section-header {
  align-items: flex-end;
  flex-wrap: wrap;
}
.summary-section-header .section-heading {
  white-space: nowrap;
  flex-shrink: 0;
}
.summary-table-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.summary-filter-chips {
  flex-shrink: 0;
}
.summary-sort-header-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}
.summary-sort-header-button:hover,
.summary-sort-header-button.is-active {
  color: var(--color-text-primary);
}
.summary-sort-header-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-1) / 4);
  font-size: var(--text-2xs);
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(-1px);
}
.summary-sort-tri {
  display: block;
}
.summary-sort-header-arrow.is-both .summary-sort-tri {
  opacity: 0.86;
}
.summary-sort-header-arrow.is-asc .summary-sort-tri.down,
.summary-sort-header-arrow.is-desc .summary-sort-tri.up {
  opacity: 0.3;
}
.data-table th.is-mono {
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}
.data-table td.is-mono {
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
}
.data-table tbody tr:hover td {
  background: var(--color-table-row-hover);
}
.data-table tr.row-danger td {
  background: var(--color-table-row-danger);
}
.data-table tr.row-danger:hover td {
  background: var(--color-table-row-danger-hover);
}
.stock-bar-track {
  width: var(--size-stock-bar-width);
  height: var(--size-stock-bar-height);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  overflow: hidden;
  margin: 0 auto;
}
.stock-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--easing-standard);
}
.stock-bar-fill.is-ok {
  background: var(--color-status-ok);
}
.stock-bar-fill.is-warn {
  background: var(--color-status-warn);
}
.stock-bar-fill.is-danger {
  background: var(--color-status-danger);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  border: 1px solid;
}
.status-badge.is-ok {
  color: var(--color-status-ok);
  background: var(--color-status-ok-soft);
  border-color: var(--color-status-ok-border);
}
.status-badge.is-warn {
  color: var(--color-status-warn);
  background: var(--color-status-warn-soft);
  border-color: var(--color-status-warn-border);
}
.status-badge.is-danger {
  color: var(--color-status-danger);
  background: var(--color-status-danger-soft);
  border-color: var(--color-status-danger-border);
}
.records-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.records-toolbar-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.records-count-label {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.record-group-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.record-group-header {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-default);
}
.record-group + .record-group .record-group-header {
  border-top: 1px solid var(--color-border-default);
}
.record-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  min-height: var(--size-record-row-min-height);
}
.record-rows .record-row:last-child {
  border-bottom: none;
}
.record-row:hover {
  background: var(--color-bg-subtle);
}
.record-type-bar {
  width: var(--size-record-type-width);
  min-height: var(--size-record-type-min-height);
  align-self: stretch;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.record-type-bar.is-add {
  background: var(--color-status-ok);
}
.record-type-bar.is-damage {
  background: var(--color-status-danger);
}
.record-row-body,
.record-row-primary {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.record-row-item {
  flex: 1;
  min-width: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-row-secondary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.record-reason-chip {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  border: 1px solid;
  flex-shrink: 0;
}
.record-reason-chip.is-add {
  color: var(--color-status-ok);
  background: var(--color-status-ok-soft);
  border-color: var(--color-status-ok-border);
}
.record-reason-chip.is-damage {
  color: var(--color-status-danger);
  background: var(--color-status-danger-soft);
  border-color: var(--color-status-danger-border);
}
.record-qty {
  font-family: var(--font-family-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: var(--size-record-qty-min-width);
  text-align: right;
}
.record-qty.is-add {
  color: var(--color-status-ok);
}
.record-qty.is-damage {
  color: var(--color-status-danger);
}
.record-author-avatar {
  width: var(--size-record-avatar-size);
  height: var(--size-record-avatar-size);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
}
.record-author-avatar.avatar-1 {
  background: var(--color-avatar-1);
}
.record-author-avatar.avatar-2 {
  background: var(--color-avatar-2);
}
.record-author-avatar.avatar-3 {
  background: var(--color-avatar-3);
}
.record-author-avatar.avatar-4 {
  background: var(--color-avatar-4);
}
.record-author-avatar.avatar-5 {
  background: var(--color-avatar-5);
}
.record-author-avatar.avatar-6 {
  background: var(--color-avatar-6);
}
.record-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}
.record-action-btn {
  width: var(--size-record-action-size);
  height: var(--size-record-action-size);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
}
.record-action-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}
.record-action-btn.is-danger:hover {
  color: var(--color-status-danger);
  background: var(--color-status-danger-soft);
}
@media (max-width: 599px) {
  .record-group-list {
    border: none;
    border-radius: 0;
    gap: var(--space-3);
  }
  .record-group-header {
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border-default);
  }
  .record-group + .record-group .record-group-header {
    border-top: 1px solid var(--color-border-default);
  }
  .record-rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .record-row {
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--color-border-default);
    padding: var(--space-3);
    gap: var(--space-2);
    min-height: unset;
  }
  .record-row.is-add {
    border-left: var(--size-record-type-width) solid var(--color-status-ok);
  }
  .record-row.is-damage {
    border-left: var(--size-record-type-width) solid var(--color-status-danger);
  }
  .record-type-bar {
    display: none;
  }
  .record-row-body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
  }
  .record-row-primary {
    width: 100%;
  }
  .record-row-secondary {
    width: 100%;
    flex-wrap: wrap;
  }
  .record-actions {
    margin-left: auto;
  }
  .record-qty {
    font-size: var(--text-sm);
    min-width: unset;
    text-align: left;
  }
}
.bottom-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom);
  padding: var(--space-3) var(--space-4)
    calc(var(--space-3) + var(--safe-area-bottom));
  pointer-events: none;
}
.bottom-action-inner {
  width: min(100%, var(--bottom-bar-max-width));
  margin: 0 auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-medium);
  min-height: var(--bottom-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  pointer-events: auto;
}
.bottom-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.bottom-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.action-btn {
  min-height: 44px;
  min-width: 84px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  padding: 0 var(--space-4);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.action-btn:hover:not(:disabled) {
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}
.action-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.action-btn:disabled {
  cursor: not-allowed;
  opacity: 1;
  background: var(--color-bg-subtle);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}
.action-btn.is-primary {
  background: #111;
  border-color: #111;
  color: var(--color-text-inverse);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.action-btn.is-primary:hover:not(:disabled) {
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
}
.action-btn.is-danger {
  background: var(--color-bg-danger);
  border-color: var(--color-bg-danger);
  color: var(--color-text-inverse);
}
.action-btn.is-danger:hover:not(:disabled) {
  background: var(--color-danger-600);
  border-color: var(--color-danger-600);
}
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal {
  width: min(92vw, var(--modal-max-width));
  max-height: 86dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 24px;
  border: none;
  background: var(--color-bg-surface);
  box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.03);
  padding: var(--space-6);
}
.modal-small {
  width: min(92vw, var(--modal-small-max-width));
}
.modal.modal-item-register {
  width: min(
    95vw,
    calc(var(--modal-max-width) * var(--modal-item-register-scale))
  );
  padding: 0;
  overflow: hidden;
  height: calc(
    (86dvh - (var(--space-6) * 2)) * var(--modal-item-register-scale)
  );
  max-height: calc(
    (86dvh - (var(--space-6) * 2)) * var(--modal-item-register-scale)
  );
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dialog-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--line-height-tight);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.item-register-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.item-register-media {
  position: relative;
  height: calc(var(--space-10) * 5);
  min-height: calc(var(--space-10) * 5);
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-5);
}
.item-register-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(var(--modal-media-crop-scale));
  transform-origin: center;
  pointer-events: none;
}
.item-register-media-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.item-register-media-picture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.item-register-media-picture-full {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.item-register-media-picture-full.is-ready {
  opacity: 1;
}
.item-register-media-fallback {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.item-register-media-fallback.is-hidden {
  opacity: 0;
}
.item-register-media-fallback svg {
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
}
.item-register-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: var(--modal-footer-icon-size);
  height: var(--modal-footer-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-2xl);
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-standard);
}
.item-register-close:hover {
  background: transparent;
  color: var(--color-text-secondary);
}
.item-register-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  flex: 1;
  min-height: 0;
  padding: var(--space-4) var(--space-6) 0;
}
.item-register-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-shrink: 0;
}
.item-register-title-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}
.item-register-title-wrap .page-subtitle {
  margin: 0;
}
.item-register-quantity {
  display: flex;
  align-items: center;
  gap: var(--item-register-qty-gap);
  flex-shrink: 0;
}
.item-register-qty-btn {
  width: var(--item-register-qty-control-size);
  height: var(--item-register-qty-control-size);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--item-register-qty-btn-font-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard);
}
.item-register-qty-value {
  min-width: var(--item-register-qty-value-min-width);
  text-align: center;
  font-size: var(--item-register-qty-value-font-size);
  font-weight: var(--weight-extrabold);
  line-height: var(--line-height-tight);
}
.item-register-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.item-register-label {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.item-register-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.item-register-segment {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  padding: var(--space-1);
}
.item-register-segment-indicator {
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: var(--space-1);
  width: calc(50% - var(--space-1));
  border-radius: var(--radius-pill);
  background: var(--color-bg-inverse);
  transform: translate(0);
  opacity: 0;
  transition:
    transform var(--duration-base) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
}
.item-register-segment.has-active .item-register-segment-indicator {
  opacity: 1;
}
.item-register-segment.is-second .item-register-segment-indicator {
  transform: translate(100%);
}
.item-register-segment-btn {
  position: relative;
  z-index: 1;
  min-height: var(--chip-min-height);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-chip);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-standard);
}
.item-register-segment-btn.is-active {
  color: var(--color-text-inverse);
}
.item-register-helper {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.item-register-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: 0;
  margin-top: var(--space-3);
}
.item-register-footer {
  flex-shrink: 0;
  margin: 0;
  min-height: calc(var(--modal-footer-bar-height) + var(--safe-area-bottom));
  padding: 0 var(--space-6) var(--safe-area-bottom);
  background: var(--color-bg-surface);
  display: flex;
  align-items: center;
}
.item-register-actions {
  height: var(--modal-footer-action-height);
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.item-register-actions .action-btn {
  flex: 1;
  min-width: 0;
  min-height: 100%;
  padding: 0 var(--space-4);
  font-size: var(--text-md);
  border: 0;
}
.item-register-save-btn.action-btn.is-primary {
  background: var(--color-bg-accent);
  border-color: var(--color-bg-accent);
}
.item-register-save-btn.action-btn.is-primary:hover:not(:disabled) {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
}
.item-register-save-btn.action-btn.is-primary:disabled {
  background: var(--color-accent-disabled-bg);
  border-color: var(--color-accent-disabled-border);
  color: var(--color-accent-disabled-text);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 var(--color-header-button-border-hover);
}
.admin-panel {
  width: min(100%, var(--admin-panel-max-width));
  height: min(100%, var(--admin-panel-max-height));
  background: var(--color-bg-app);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-header {
  min-height: var(--header-height);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-tabs {
  display: flex;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
  gap: var(--space-2);
  padding: var(--space-2);
}
.admin-tab {
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  cursor: pointer;
}
.admin-tab.is-active {
  color: var(--color-text-inverse);
  background: var(--color-bg-inverse);
}
.admin-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-5);
}
.admin-item-row {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  padding: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.admin-item-row label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.admin-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.admin-image-card {
  min-height: var(--card-min-height);
}
.admin-image-preview {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
}
.admin-stock-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.toast {
  position: fixed;
  bottom: calc(
    var(--bottom-bar-height) + var(--safe-area-bottom) + var(--space-4)
  );
  left: 50%;
  transform: translate(-50%);
  z-index: var(--z-toast);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-medium);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.loading-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-loading);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-bg-overlay);
}
.loading-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  padding: var(--space-6);
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.loading-spinner {
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-pill);
  border: var(--space-1) solid var(--color-border-default);
  border-top-color: var(--color-bg-accent);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.empty-state {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  text-align: center;
  padding: var(--space-6);
}
@media (min-width: 600px) {
  :root {
    --grid-columns: 3;
  }
  .app-main {
    --main-content-padding: var(--space-6);
    padding: var(--main-content-padding);
    padding-bottom: calc(
      var(--bottom-bar-height) + var(--safe-area-bottom) + var(--space-8)
    );
  }
}
@media (min-width: 900px) {
  :root {
    --grid-columns: 4;
  }
}
@media (min-width: 1200px) {
  :root {
    --grid-columns: 4;
  }
}
@media (min-width: 1366px) {
  :root {
    --grid-columns: 5;
  }
  .app-main {
    --main-content-padding: var(--space-7);
    padding: var(--main-content-padding);
    padding-bottom: calc(
      var(--bottom-bar-height) + var(--safe-area-bottom) + var(--space-8)
    );
  }
}
@media (max-width: 899px) {
  .metric-row {
    grid-template-columns: 1fr;
  }
  .bottom-action-inner {
    width: 100%;
  }
  .section-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .summary-kpi-hint {
    display: none;
  }
  .record-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-item-row {
    flex-wrap: wrap;
  }
}
@media (max-width: 599px) {
  :root {
    --input-grid-columns: 2;
    --input-grid-gap: var(--space-4);
    --input-card-min-height: 0px;
    --item-register-qty-control-size: calc(var(--space-9) - var(--space-1));
    --item-register-qty-btn-font-size: var(--text-lg);
    --item-register-qty-value-font-size: var(--text-lg);
    --item-register-qty-value-min-width: var(--space-7);
    --item-register-qty-gap: var(--space-1);
  }
  .app-header {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .app-header-title {
    flex: 1;
    min-width: 0;
  }
  .app-logo-wordmark {
    max-width: 100%;
    font-size: clamp(
      calc(var(--text-sm) * var(--mobile-header-title-scale)),
      calc(4.6vw * var(--mobile-header-title-scale)),
      calc(var(--text-md) * var(--mobile-header-title-scale))
    );
  }
  .app-header-info {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .app-main {
    --main-content-padding: var(--space-4);
    padding: var(--main-content-padding);
    padding-bottom: calc(
      var(--bottom-bar-height) + var(--safe-area-bottom) + var(--space-7)
    );
  }
  .tab-button {
    min-height: 52px;
    font-size: var(--text-sm);
  }
  .modal {
    padding: var(--space-5);
  }
  .modal.modal-item-register {
    width: min(
      96vw,
      calc(var(--modal-max-width) * var(--modal-item-register-scale))
    );
    height: calc(
      (86dvh - (var(--space-5) * 2)) * var(--modal-item-register-scale)
    );
    max-height: calc(
      (86dvh - (var(--space-5) * 2)) * var(--modal-item-register-scale)
    );
  }
  .item-register-media {
    padding: var(--space-5) var(--space-4);
  }
  .item-register-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .item-register-quantity {
    white-space: nowrap;
  }
  .item-register-footer {
    padding: 0 var(--space-5) var(--safe-area-bottom);
  }
  .item-register-actions .action-btn {
    min-height: var(--modal-footer-action-height);
  }
  .bottom-action-inner {
    border-radius: var(--radius-md);
  }
  .bottom-status {
    max-width: 44vw;
  }
  .toast {
    width: calc(100% - var(--space-8));
    text-align: center;
  }
  .search-toast {
    padding: var(--space-2) var(--space-2)
      calc(var(--space-4) + var(--safe-area-bottom));
  }
  .search-toast-inner {
    width: min(100%, var(--search-toast-width-collapsed-mobile));
  }
  .search-toast-inner.is-active,
  .search-toast-inner:focus-within {
    width: min(100%, var(--search-toast-width-expanded-mobile));
  }
  .search-toast-inner.is-active .search-toast-icon,
  .search-toast-inner:focus-within .search-toast-icon {
    transform: none;
  }
}
@media (max-width: 430px) and (hover: none) and (pointer: coarse) {
  :root {
    --grid-columns: 1;
    --table-min-width: var(--iphone-table-min-width);
  }
  .app-header {
    padding: var(--iphone-header-padding-y) var(--iphone-header-padding-x);
    gap: var(--iphone-header-gap);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .app-logo-wordmark {
    font-size: clamp(
      calc(var(--text-xs) * var(--mobile-header-title-scale)),
      calc(4.6vw * var(--mobile-header-title-scale)),
      calc(var(--text-md) * var(--mobile-header-title-scale))
    );
  }
  .app-header-info {
    width: auto;
    font-size: var(--text-xs);
    gap: var(--space-2);
    justify-content: flex-end;
  }
  .tab-strip {
    padding: 0;
  }
  .tab-button {
    min-height: 48px;
  }
  .app-main {
    --main-content-padding: var(--space-3);
    padding: var(--main-content-padding);
    padding-bottom: calc(
      var(--bottom-bar-height) + var(--safe-area-bottom) + var(--space-6)
    );
  }
  .input-step-content {
    padding-bottom: calc(
      var(--chip-min-height) + var(--safe-area-bottom) + var(--space-7)
    );
  }
  .grid-shell {
    overflow-x: hidden;
  }
  .card-grid {
    width: 100%;
  }
  .search-toast {
    padding: var(--space-1) var(--space-4)
      calc(var(--safe-area-bottom) + var(--space-3));
  }
  .search-toast-inner,
  .search-toast-inner.is-active,
  .search-toast-inner:focus-within {
    width: min(100%, var(--iphone-search-toast-width));
  }
  .summary-shortage-table-wrap,
  .summary-all-table-wrap {
    overflow-x: hidden;
  }
  .summary-shortage-table,
  .summary-all-table {
    min-width: 100%;
  }
  .summary-all-table th:nth-child(4),
  .summary-all-table td:nth-child(4),
  .summary-all-table th:nth-child(6),
  .summary-all-table td:nth-child(6) {
    display: none;
  }
  .summary-kpi-hint {
    display: none;
  }
  .summary-kpi-card {
    gap: var(--space-2);
  }
  .summary-kpi-card-media {
    flex-basis: var(--size-kpi-media-mobile);
    width: var(--size-kpi-media-mobile);
    height: var(--size-kpi-media-mobile);
  }
  .summary-kpi-strip:after {
    width: var(--space-7);
  }
  .summary-shortage-table th,
  .summary-shortage-table td,
  .summary-all-table th,
  .summary-all-table td {
    padding: var(--space-2);
    font-size: var(--text-xs);
  }
  .modal.modal-item-register {
    width: min(
      96vw,
      calc(var(--modal-max-width) * var(--modal-item-register-scale))
    );
    height: 84dvh;
    max-height: 84dvh;
  }
  .item-register-media {
    height: var(--iphone-modal-media-height);
    min-height: var(--iphone-modal-media-height);
    padding: var(--space-4);
  }
  .item-register-content {
    padding: var(--space-3) var(--iphone-modal-content-padding-x) 0;
  }
  .item-register-header {
    gap: var(--space-2);
  }
  .item-register-footer {
    padding: 0 var(--iphone-modal-content-padding-x) var(--safe-area-bottom);
  }
}
@keyframes admin-panel-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.admin-panel {
  animation: admin-panel-in var(--duration-base) var(--easing-standard);
}
.admin-header-title {
  font-family: var(--font-family-logo-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  letter-spacing: 0.05em;
  color: var(--color-text-inverse);
  flex: 1;
  text-align: center;
}
.admin-header-ctx {
  min-width: 120px;
  display: flex;
  justify-content: flex-end;
}
.admin-close-btn {
  min-width: var(--chip-min-height);
  min-height: var(--chip-min-height);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-close-btn:hover {
  border-color: transparent;
  background: var(--color-header-button-bg-hover);
}
.admin-close-svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.admin-save-all-btn {
  font-size: var(--text-sm);
  min-width: 0;
  padding: 0 var(--space-3);
  white-space: nowrap;
}
.admin-delete-btn {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
  flex-shrink: 0;
}
.admin-delete-btn:hover:not(:disabled) {
  color: var(--color-bg-danger);
  background: var(--color-accent-soft);
}
.admin-delete-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}
.admin-trash-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-edit-btn {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
  flex-shrink: 0;
}
.admin-edit-btn:hover {
  color: var(--color-bg-inverse);
  background: var(--color-bg-subtle);
}
.admin-edit-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.admin-item-row.is-editing {
  flex-wrap: wrap;
  align-items: flex-start;
}
.admin-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.admin-edit-confirm-btn,
.admin-edit-cancel-btn {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    color var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
}
.admin-edit-confirm-btn {
  color: var(--color-text-primary);
}
.admin-edit-confirm-btn:hover:not(:disabled) {
  color: var(--color-bg-success);
  background: var(--color-bg-subtle);
}
.admin-edit-cancel-btn {
  color: var(--color-text-muted);
}
.admin-edit-cancel-btn:hover:not(:disabled) {
  color: var(--color-bg-danger);
  background: var(--color-accent-soft);
}
.admin-edit-confirm-btn:disabled,
.admin-edit-cancel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-check-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-item-row.is-confirm {
  border-color: var(--color-bg-danger);
  background: #ee63520a;
}
.admin-count {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
.admin-stock-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.admin-dirty-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-accent);
  flex-shrink: 0;
}
.admin-stock-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.admin-stock-field .number-input {
  width: 80px;
}
.number-input.is-low {
  color: var(--color-bg-danger);
  font-weight: var(--weight-bold);
}
@keyframes admin-row-flash {
  0% {
    background: var(--color-accent-soft);
  }
  to {
    background: var(--color-bg-surface);
  }
}
.admin-item-row.is-saved {
  animation: admin-row-flash 1.5s var(--easing-standard) forwards;
}
.admin-images-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.admin-image-card.is-unregistered {
  border-color: var(--color-accent-soft);
}
.action-btn.admin-upload-done {
  background: var(--color-bg-success);
  border-color: var(--color-bg-success);
  color: var(--color-text-inverse);
}
.admin-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.text-input.is-error-input {
  border-color: var(--color-bg-danger);
}
.admin-field-error {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-bg-danger);
}
.admin-list-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .admin-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .admin-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.admin-stock-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .admin-stock-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-stock-grid .admin-item-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-stock-grid .admin-stock-controls {
    width: 100%;
    justify-content: flex-start;
  }
}
.admin-reasons-layout {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .admin-reasons-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
.admin-image-card {
  min-height: unset;
  overflow: hidden;
}
.admin-image-card .item-card-media {
  margin-top: calc(var(--space-5) * -1);
  margin-left: calc(var(--space-5) * -1);
  margin-right: calc(var(--space-5) * -1);
  aspect-ratio: 3 / 2;
  padding: 0;
}
.admin-image-card .item-card-media img {
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.admin-image-card .item-card-media-fallback {
  width: 100%;
  height: 100%;
}
@media (max-width: 599px) {
  .admin-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .admin-panel {
    width: 100%;
    height: calc(100dvh - var(--space-6));
    max-height: calc(100dvh - var(--space-6));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
}
.pin-modal {
  text-align: center;
}
.pin-dots {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  padding: var(--space-5) 0 var(--space-3);
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-strong);
  background: transparent;
  transition:
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}
.pin-dot.is-filled {
  background: var(--color-bg-inverse);
  border-color: var(--color-bg-inverse);
}
.pin-hint,
.pin-error-msg,
.pin-lockout-msg {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  min-height: 1.4em;
}
.pin-hint {
  color: var(--color-text-muted);
}
.pin-error-msg {
  color: var(--color-bg-danger);
  font-weight: var(--weight-semibold);
}
.pin-lockout-msg {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.pin-key {
  min-height: 52px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-subtle);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}
.pin-key:hover:not(:disabled) {
  background: var(--color-surface-dim);
}
.pin-key:active:not(:disabled) {
  transform: scale(0.95);
}
.pin-key:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pin-key.is-primary {
  background: var(--color-bg-inverse);
  border-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.pin-key.is-primary:hover:not(:disabled) {
  background: var(--color-base-muted);
  border-color: var(--color-base-muted);
}
.pin-key.is-back {
  font-size: var(--text-md);
}

.records-toolbar {
  gap: var(--space-4);
}
.records-toolbar-top {
  justify-content: space-between;
  align-items: center;
}
.records-filter-chips {
  flex-wrap: nowrap;
  padding: 0 2px;
}
.records-count-label {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}
.records-search-wrap {
  position: relative;
  display: block;
}
.records-search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  display: inline-flex;
  pointer-events: none;
}
.records-search-icon-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.records-search-input {
  padding-left: calc(var(--space-9) + var(--space-1));
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  border-color: transparent;
}
.records-search-input:focus {
  border-color: var(--color-border-strong);
}
.record-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.record-group-header {
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-neutral-600);
}
.record-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.record-row {
  position: relative;
  background: var(--color-neutral-100);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: unset;
}
.record-row:hover {
  background: var(--color-neutral-150);
  box-shadow: none;
}
.record-row.is-add {
  border-left: 0;
}
.record-row.is-damage {
  border-left: 0;
}
.record-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.record-item-media {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.record-item-media-svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.record-row-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.record-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.record-row-item {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-row-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.record-author-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.record-qty {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  min-width: 40px;
  text-align: right;
}
.record-reason-chip {
  font-size: 11px;
  padding: 3px 8px;
}
.record-actions {
  margin-left: var(--space-1);
  align-self: center;
}
.record-action-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
}
@media (max-width: 899px) {
  .records-toolbar {
    gap: var(--space-3);
  }
  .record-author-text {
    max-width: 120px;
  }
}
@media (max-width: 599px) {
  .record-row-main {
    align-items: flex-start;
  }
  .record-actions {
    align-self: flex-start;
    margin-left: 0;
  }
  .record-row-head {
    gap: var(--space-2);
  }
  .record-item-media {
    width: 44px;
    height: 44px;
  }
}

.record-group-header {
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}
.record-row-main {
  width: 100%;
  align-items: flex-start;
}
.record-row-content {
  min-width: 0;
  flex: 1;
}
.record-row-head {
  align-items: flex-start;
}
.record-row-sub {
  gap: var(--space-1);
  align-items: center;
}
.record-reason-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.record-reason-text.is-add {
  color: var(--color-text-secondary);
}
.record-reason-text.is-damage {
  color: var(--color-status-danger);
}
.record-meta-dot {
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-text-muted);
}
.record-author-text {
  max-width: none;
}

.record-row-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 64px auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.record-item-media {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.record-item-media-picture {
  display: block;
  width: 100%;
  height: 100%;
}
.record-item-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.record-row-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.record-row-item {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-row-sub {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.record-qty-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 64px;
}
.record-qty {
  display: inline-block;
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 76px;
}
.record-action-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.record-reason-text {
  white-space: nowrap;
}
.record-author-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .record-row-main {
    grid-template-columns: 44px minmax(0, 1fr) 56px auto;
    gap: var(--space-2);
  }
  .record-item-media {
    width: 44px;
    height: 44px;
  }
  .record-actions {
    min-width: 72px;
  }
}

/* Tablet density tuning for Records tab */
@media (min-width: 768px) and (max-width: 1180px) {
  .records-toolbar,
  .record-group-list {
    max-width: 820px;
    margin-inline: auto;
    width: 100%;
  }

  .record-row-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .record-row-content {
    flex: 0 1 460px;
    min-width: 0;
  }

  .record-qty-col {
    margin-left: var(--space-2);
    min-width: 56px;
  }

  .record-actions {
    margin-left: auto;
    min-width: 76px;
  }
}

/* Final vertical alignment fix: qty + edit/delete */
.record-row-main {
  align-items: center;
}

.record-qty-col,
.record-actions {
  align-self: center;
}

.record-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.record-action-btn {
  line-height: 0;
  padding: 0;
}

.record-action-btn .admin-edit-svg,
.record-action-btn .admin-trash-svg {
  display: block;
  width: 16px;
  height: 16px;
}

@media (max-width: 599px) {
  .record-row-main {
    align-items: center;
  }

  .record-actions {
    align-self: center;
  }
}

/* Right-align qty on tablet/desktop */
@media (min-width: 768px) {
  .record-row-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 72px;
    align-items: center;
    width: 100%;
  }

  .record-row-content {
    min-width: 0;
  }

  .record-qty-col {
    width: 72px;
    min-width: 72px;
    margin-left: 0;
    justify-content: flex-end;
  }

  .record-qty {
    width: 100%;
    min-width: 0;
    text-align: right;
  }

  .record-actions {
    margin-left: 0;
    justify-content: flex-end;
  }
}

@media (max-width: 599px) {
  .record-row-main {
    grid-template-columns: 44px minmax(0, 1fr) 56px;
  }
}

/* Tone down reason colors in Records tab */
.record-reason-text,
.record-reason-text.is-add,
.record-reason-text.is-damage {
  color: var(--color-text-secondary);
}

.record-major-type {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Swipe-to-reveal actions for Records rows */
.record-row {
  --record-actions-width: 84px;
  position: relative;
  overflow: hidden;
}

.record-row-main {
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  will-change: transform;
  transition: transform var(--duration-base) var(--easing-standard);
}

.record-row.is-dragging .record-row-main {
  transition: none;
}

.record-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--record-actions-width);
  min-width: var(--record-actions-width);
  margin-left: 0;
  padding-right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.record-row.is-swiped .record-actions {
  pointer-events: auto;
}

@media (max-width: 599px) {
  .record-qty-col {
    padding-right: var(--space-2);
  }
}

/* Records tab final interaction + polish pass */
.records-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(240, 240, 240, 0.98)
  );
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.records-swipe-hint-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.records-swipe-hint-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(238, 99, 82, 0.1);
  color: var(--color-accent);
}

.records-swipe-hint-icon-svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.records-swipe-hint-text {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.records-swipe-hint-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.records-swipe-hint-close:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.16);
}

.records-swipe-hint-close:active {
  transform: translateY(1px);
}

.record-row {
  --record-actions-width: 84px;
  --record-action-hit-size: 44px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(240, 240, 240, 0.96)
  );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
}

.record-row:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1),
    rgba(245, 245, 245, 0.98)
  );
  border-color: rgba(0, 0, 0, 0.1);
}

.record-row.is-open {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.record-row-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 64px 44px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 74px;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  transition: transform var(--duration-base) var(--easing-standard);
}

.record-row.is-dragging .record-row-main {
  transition: none;
}

.record-item-media {
  border-color: rgba(0, 0, 0, 0.08);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.96),
    rgba(240, 240, 240, 0.88)
  );
}

.record-row-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.record-row-item {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.record-row-sub {
  gap: var(--space-1);
  min-width: 0;
}

.record-major-type {
  color: var(--color-text-primary);
}

.record-reason-text,
.record-author-text {
  color: var(--color-text-secondary);
}

.record-qty-col {
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.record-qty {
  min-width: 40px;
  text-align: right;
  font-weight: var(--weight-bold);
}

.record-more-trigger {
  width: var(--record-action-hit-size);
  height: var(--record-action-hit-size);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.04);
  transition:
    opacity var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.record-more-trigger:hover,
.record-more-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--color-text-primary);
}

.record-more-trigger:active {
  transform: scale(0.97);
}

.record-more-trigger.is-active,
.record-row.is-dragging .record-more-trigger,
.record-row.is-swiped .record-more-trigger {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

.record-more-trigger-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.record-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--record-actions-width);
  min-width: var(--record-actions-width);
  padding: 0 6px 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 0;
  background: linear-gradient(
    180deg,
    rgba(252, 252, 252, 0.96),
    rgba(233, 233, 233, 0.98)
  );
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.record-row.is-swiped .record-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.record-action-btn {
  width: var(--record-action-hit-size);
  height: var(--record-action-hit-size);
  flex: 0 0 var(--record-action-hit-size);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.05);
  transition:
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.record-action-btn:hover,
.record-action-btn:focus-visible {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--color-text-primary);
}

.record-action-btn.is-danger {
  background: rgba(238, 99, 82, 0.12);
  border-color: rgba(238, 99, 82, 0.22);
  color: var(--color-accent);
}

.record-action-btn.is-danger:hover,
.record-action-btn.is-danger:focus-visible {
  background: rgba(238, 99, 82, 0.18);
  border-color: rgba(238, 99, 82, 0.32);
  color: var(--color-accent-hover);
}

.record-action-btn:active {
  transform: scale(0.98);
}

.record-action-btn .admin-edit-svg,
.record-action-btn .admin-trash-svg {
  width: 16px;
  height: 16px;
  display: block;
}

@media (max-width: 599px) {
  .records-swipe-hint {
    align-items: flex-start;
    flex-direction: column;
  }

  .records-swipe-hint-close {
    width: 100%;
  }

  .record-row-main {
    grid-template-columns: 44px minmax(0, 1fr) 54px 44px;
    gap: var(--space-2);
  }

  .record-item-media {
    width: 44px;
    height: 44px;
  }

  .record-qty-col {
    min-width: 54px;
    padding-right: 0;
  }
}

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.42s ease,
    visibility 0.42s step-end;
}
.boot-splash.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.24s ease;
}
.boot-splash.is-exit {
  opacity: 0;
  visibility: hidden;
}
.boot-splash-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.boot-splash-line {
  display: block;
  font-family: var(--font-family-logo-serif);
  font-weight: var(--weight-regular);
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(22px, 5.6vw, 52px);
}
@media (max-width: 599px) {
  .boot-splash-title {
    gap: 4px;
  }
  .boot-splash-line {
    font-size: clamp(20px, 8.4vw, 36px);
  }
}

@keyframes app-enter-fade-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes app-enter-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.app-shell {
  opacity: 0;
  transition: opacity 0.28s ease;
}
body.app-loaded .app-shell {
  opacity: 1;
}

body.app-loaded .app-header {
  animation: app-enter-fade-up 0.36s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
body.app-loaded .tab-strip {
  animation: app-enter-fade-up 0.42s cubic-bezier(0.2, 0.72, 0.2, 1) 0.04s both;
}
body.app-loaded .app-main {
  animation: app-enter-fade 0.36s ease 0.08s both;
}
body.app-loaded .page-wrap > *,
body.app-loaded .search-toast,
body.app-loaded .bottom-action,
body.app-loaded .bottom-action-bar,
body.app-loaded .section-card {
  animation: app-enter-fade-up 0.48s cubic-bezier(0.2, 0.72, 0.2, 1) 0.12s both;
}
body.app-loaded .page-wrap > *:nth-child(2) {
  animation-delay: 0.18s;
}
body.app-loaded .page-wrap > *:nth-child(3) {
  animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .boot-splash,
  body.app-loaded .app-header,
  body.app-loaded .tab-strip,
  body.app-loaded .app-main,
  body.app-loaded .page-wrap > *,
  body.app-loaded .search-toast,
  body.app-loaded .bottom-action,
  body.app-loaded .bottom-action-bar,
  body.app-loaded .section-card {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Modal clipping fix: item register modal on iPhone/iOS */
body.app-loaded .overlay,
body.app-loaded .overlay .modal {
  animation: none !important;
  transform: none !important;
}

.modal.modal-item-register {
  height: min(
    calc((86dvh - (var(--space-6) * 2)) * var(--modal-item-register-scale)),
    calc(
      100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
        (var(--space-5) * 2)
    )
  );
  max-height: min(
    calc((86dvh - (var(--space-6) * 2)) * var(--modal-item-register-scale)),
    calc(
      100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
        (var(--space-5) * 2)
    )
  );
}

@media (max-width: 599px) {
  .overlay.overlay-item-register {
    align-items: center;
    justify-content: center;
    padding: max(var(--space-2), var(--safe-area-top)) var(--space-2)
      max(var(--space-2), var(--safe-area-bottom));
  }

  .modal.modal-item-register {
    width: min(
      100%,
      calc(var(--modal-max-width) * var(--modal-item-register-scale))
    );
    height: min(
      calc((86dvh - (var(--space-5) * 2)) * var(--modal-item-register-scale)),
      calc(
        100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
          (var(--space-2) * 2)
      )
    );
    max-height: min(
      calc((86dvh - (var(--space-5) * 2)) * var(--modal-item-register-scale)),
      calc(
        100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
          (var(--space-2) * 2)
      )
    );
  }
}

@media (max-width: 430px) and (hover: none) and (pointer: coarse) {
  .overlay.overlay-item-register {
    align-items: center;
    justify-content: center;
    padding: max(var(--space-1), var(--safe-area-top)) var(--space-1)
      max(var(--space-1), var(--safe-area-bottom));
  }

  .modal.modal-item-register {
    width: min(
      100%,
      calc(var(--modal-max-width) * var(--modal-item-register-scale))
    );
    height: min(
      84dvh,
      calc(
        100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
          (var(--space-1) * 2)
      )
    );
    max-height: min(
      84dvh,
      calc(
        100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
          (var(--space-1) * 2)
      )
    );
  }
}

/* Long item names: keep one line and allow horizontal scroll */
.item-register-content,
.item-register-header {
  min-width: 0;
  width: 100%;
}

.item-register-title-wrap .dialog-title {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.item-register-title-wrap .dialog-title::-webkit-scrollbar {
  display: none;
}

/* Mobile header wordmark layout */
.app-logo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.42ch;
}

.app-logo-wordmark-line {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 599px) {
  .app-header-title {
    white-space: normal;
  }

  .app-logo-wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 100%;
    font-size: clamp(11px, 3.4vw, 14px);
    line-height: 1.02;
    letter-spacing: 0.045em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .app-logo-wordmark-line {
    display: block;
  }

  .app-logo-wordmark-sub {
    font-size: 0.96em;
  }
}

@media (max-width: 430px) and (hover: none) and (pointer: coarse) {
  .app-logo-wordmark {
    font-size: clamp(10px, 3.8vw, 13px);
  }
}

/* Item register: show author chips in two rows */
.item-register-scroll
  .item-register-section:nth-of-type(2)
  .item-register-chip-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-columns: max-content;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.item-register-scroll
  .item-register-section:nth-of-type(2)
  .item-register-chip-grid::-webkit-scrollbar {
  display: none;
}

.item-register-scroll
  .item-register-section:nth-of-type(2)
  .item-register-chip-grid
  .chip {
  width: max-content;
}

/* Header title: a bit more vertical breathing room + larger type */
.app-logo-wordmark {
  padding-block: 2px;
  font-size: clamp(15px, 2.4vw, 22px);
  line-height: 1.05;
}

.app-logo-wordmark-sub {
  font-size: 1em;
}

@media (max-width: 599px) {
  .app-header {
    padding-top: calc(var(--space-4) + 2px);
    padding-bottom: calc(var(--space-4) + 2px);
  }

  .app-logo-wordmark {
    padding-block: 3px;
    gap: 3px;
    font-size: clamp(12px, 3.8vw, 16px);
    line-height: 1.06;
  }
}

@media (max-width: 430px) and (hover: none) and (pointer: coarse) {
  .app-logo-wordmark {
    font-size: clamp(11px, 4.2vw, 15px);
  }
}

.item-register-scroll {
  padding-bottom: var(--space-2);
}

/* iPhone SE class devices: prevent item-register content clipping */
@media (max-width: 430px) and (max-height: 740px) and (hover: none) and (pointer: coarse) {
  .modal.modal-item-register {
    height: min(
      90dvh,
      calc(
        100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
          (var(--space-1) * 2)
      )
    );
    max-height: min(
      90dvh,
      calc(
        100dvh - var(--safe-area-top) - var(--safe-area-bottom) -
          (var(--space-1) * 2)
      )
    );
  }

  .item-register-media {
    height: calc(var(--space-10) * 2.75);
    min-height: calc(var(--space-10) * 2.75);
    padding: var(--space-3);
  }

  .item-register-content {
    padding-top: var(--space-2);
  }

  .item-register-scroll {
    margin-top: var(--space-1);
    gap: var(--space-1);
    padding-bottom: var(--space-3);
  }

  .item-register-section {
    gap: var(--space-1);
  }
}

/* Records tab: restore simple card styling with full-card swipe actions */
.records-swipe-hint,
.record-more-trigger {
  display: none !important;
}

.record-row {
  --record-row-radius: 12px;
  --record-action-radius: 12px;
  --record-actions-width: 112px;
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--record-row-radius);
  background: var(--color-neutral-100);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
  contain: paint;
}

.record-row:hover {
  border-color: rgba(0, 0, 0, 0.1);
}

.record-row.is-open {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background: var(--color-neutral-100);
}

.record-row-shell {
  appearance: none;
  border: 0;
  position: relative;
  z-index: auto;
  display: block;
  width: 100%;
  min-width: 0;
  padding: var(--space-3) calc(var(--space-3) + 2px);
  border-radius: inherit;
  background: var(--color-neutral-100);
  color: inherit;
  font: inherit;
  text-align: left;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
  transition:
    transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background var(--duration-fast) var(--easing-standard);
}

@media (hover: hover) and (pointer: fine) {
  .record-row-shell {
    cursor: pointer;
  }
}

@media (min-width: 900px) {
  .record-row-shell {
    cursor: pointer;
  }
}

.record-row:hover .record-row-shell {
  background: var(--color-neutral-150);
}

.record-row.is-dragging .record-row-shell {
  transition: none;
}

.record-row.is-dragging .record-row-shell,
.record-row.is-open .record-row-shell {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .record-row-shell,
  .record-actions {
    transition: none !important;
  }
}

.record-row-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 64px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  transform: none !important;
  transition: none;
}

.record-row.is-open .record-row-main {
  transform: none !important;
}

.record-item-media {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-border-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.record-row-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.record-row-item {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-row-sub {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  flex-wrap: wrap;
}

.record-major-type,
.record-reason-text,
.record-author-text {
  color: var(--color-text-secondary);
}

.record-author-text {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-qty-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 64px;
  padding-right: 5px;
}

.record-inline-actions {
  display: none;
}

.record-qty {
  display: inline-block;
  min-width: 40px;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.record-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: var(--record-actions-width);
  min-width: var(--record-actions-width);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  overflow: hidden;
  border-radius: var(--record-row-radius);
  background: transparent;
  pointer-events: none;
  transform: translate3d(var(--record-actions-width), 0, 0);
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.record-row.is-actions-ready .record-actions {
  pointer-events: auto;
}

.record-row.is-dragging .record-actions {
  pointer-events: none;
  transition: none;
}

.record-action-btn {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--record-action-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition:
    filter var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.record-action-btn:hover,
.record-action-btn:focus-visible {
  filter: brightness(1.01);
}

.record-action-btn.is-danger {
  background: rgba(238, 99, 82, 0.88);
  border: 0;
  color: #fff;
}

.record-action-btn:active {
  filter: brightness(0.95);
  transform: none;
}

.record-confirm-shell {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.record-confirm-text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.record-confirm-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.record-confirm-btn {
  min-width: 44px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    filter var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.record-confirm-btn:hover:not(:disabled),
.record-confirm-btn:focus-visible:not(:disabled) {
  filter: brightness(1.01);
}

.record-confirm-btn.is-danger {
  background: rgba(238, 99, 82, 0.88);
  border: 0;
  color: #fff;
}

.record-confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.record-inline-action-btn {
  flex: 1 1 50%;
  width: 48px;
  min-width: 48px;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #7a7a7a, #686868);
  color: #ffffff;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--easing-standard),
    filter var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard);
}

.record-inline-action-btn + .record-inline-action-btn {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
}

.record-inline-action-btn.is-danger {
  background: linear-gradient(180deg, #ef6a56, #e75b48);
  color: #ffffff;
}

.record-inline-action-btn:hover,
.record-inline-action-btn:focus-visible {
  filter: brightness(1.02);
}

.record-inline-action-btn:active {
  transform: translateY(1px);
}

.record-action-btn .admin-edit-svg,
.record-action-btn .admin-trash-svg {
  display: none;
}

@media (max-width: 899px) {
  .record-author-text {
    max-width: 120px;
  }

  .record-action-btn {
    font-size: 11px;
  }

  .record-confirm-shell {
    align-items: flex-start;
    flex-direction: column;
  }

  .record-confirm-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (min-width: 900px) {
  .record-row-main {
    grid-template-columns: 48px minmax(0, 1fr) 72px;
    gap: var(--space-3);
  }

  .record-qty-col {
    min-width: 72px;
  }

  .record-actions {
    height: 100%;
  }

  .record-inline-actions {
    display: none !important;
  }

  .record-action-btn {
    min-width: 44px;
    font-size: 12px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 599px) {
  .record-row-shell {
    padding: var(--space-3) calc(var(--space-3) + 2px);
  }

  .record-row-main {
    grid-template-columns: 44px minmax(0, 1fr) 56px;
    gap: var(--space-2);
  }

  .record-item-media {
    width: 44px;
    height: 44px;
  }

  .record-qty-col {
    min-width: 56px;
  }

  .record-confirm-actions {
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════
   T-01: 월 선택기 칩 (Month Picker Chip)
   ═══════════════════════════════════════════════════════ */

/* 기존 month-nav-header를 좌측 정렬 툴바로 전환 */
.month-nav-header {
  justify-content: flex-start;
  gap: 8px;
}

/* 기존 화살표 네비게이션 숨김 */
.month-nav {
  gap: 0;
}
.month-nav-arrow {
  display: none !important;
}

/* 월 라벨을 칩으로 리스타일 */
.month-nav-label {
  min-width: auto;
  padding: 6px 12px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.month-nav-label::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid rgba(255,255,255,.6);
  margin-left: 2px;
}

/* 월 선택 드롭다운 */
.mp-dropdown {
  position: fixed;
  min-width: 140px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 100;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mp-dropdown::-webkit-scrollbar { width: 0; }

.mp-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,.7);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-dropdown-item:hover {
  background: rgba(0,0,0,.04);
}
.mp-dropdown-item.is-active {
  background: #111;
  color: #fff;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   T-02: 검색 아이콘 버튼 (Search Icon Toggle)
   ═══════════════════════════════════════════════════════ */

/* 기본: 32x32 아이콘 버튼으로 축소 */
.records-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(.4,0,.2,1),
              background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.records-search-icon {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  flex-shrink: 0;
  color: #555;
}
.records-search-icon-svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.records-search-input {
  width: 0;
  opacity: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  transition: width 0.25s cubic-bezier(.4,0,.2,1),
              opacity 0.15s ease;
}

/* 확장 상태 */
.records-search-wrap.is-search-open {
  width: 100%;
  background: rgba(0,0,0,.05);
  border-radius: 10px;
  padding: 0 10px;
  gap: 7px;
}
.records-search-wrap.is-search-open .records-search-input {
  width: 100%;
  opacity: 1;
  padding: 6px 0;
}
.records-search-input:focus {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   T-03: 수정 모달 CSS 개선 (기존 폼 모달 정리)
   ═══════════════════════════════════════════════════════ */

/* 수정 모달 내부 정리 — 기물등록 스타일에 가깝게 */
.modal-item-register + .modal-overlay + div .dialog-title,
.stack > .dialog-title {
  font-size: 16px;
  font-weight: 800;
}
.stack > .form-row {
  gap: 6px;
}
.stack > .form-row label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(0,0,0,.35);
  letter-spacing: .04em;
}
.stack > .form-row .select-input,
.stack > .form-row .date-input,
.stack > .form-row .number-input {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  background: #f8f8f8;
  font-size: 13px;
  font-weight: 600;
}
.stack > .dialog-actions {
  margin-top: 8px;
  gap: 8px;
}
.stack > .dialog-actions .action-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}
.stack > .dialog-actions .action-btn.is-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ═══════════════════════════════════════════════════════
   T-04: 재고현황 상단 툴바 레이아웃
   ═══════════════════════════════════════════════════════ */

/* KPI 카드 영역 숨김 */
.summary-kpi-head,
.summary-kpi-strip {
  display: none !important;
}

/* "전체 재고" 헤딩 숨김 */
.summary-section-header {
  display: none !important;
}

/* month-nav-header를 flex 툴바로 확장 */
.page-wrap.stack > .month-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 8px;
}

/* 재고현황 툴바 우측 영역 (검색+재고표) */
.inv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* 검색 아이콘 (재고현황 + 등록기록 공통) */
.inv-srch-ico,
.rec-srch-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.inv-srch-ico svg,
.rec-srch-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #555;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* 공통 검색 바 (아이콘 클릭 → 토글) */
.nud-search-bar {
  display: none;
  padding: 0 0 8px;
}
.nud-search-bar.is-open {
  display: block;
}
.nud-search-bar input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
}
.nud-search-bar input:focus {
  border-color: rgba(0, 0, 0, 0.25);
  background: #fff;
}

/* 재고표 버튼 */
.inv-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.inv-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #333;
  stroke-width: 1.5;
}

/* 필터 칩 리스타일 */
.summary-table-toolbar {
  padding: 0;
  margin: 0;
}
.summary-filter-chips {
  display: flex;
  background: rgba(0,0,0,.05);
  border-radius: 10px;
  padding: 3px;
  gap: 0;
  position: relative;
}
.summary-filter-chips .chip {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: none;
  color: #3a3a3a;
  min-height: 0;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.summary-filter-chips .chip.is-active {
  color: #000;
  background: none;
}
/* 슬라이딩 인디케이터 (JS 주입) */
.seg-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: left 0.25s cubic-bezier(.4,0,.2,1), width 0.25s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════
   T-05 + T-06: 요약 스트립 + 4열 재고 테이블
   ═══════════════════════════════════════════════════════ */

/* 기존 HTML 테이블 숨김 */
.summary-all-table-wrap {
  display: none !important;
}

/* 요약 스트립 — 상단 (카드형) */
.inv-summary-strip {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.03);
  margin-bottom: 4px;
}
.inv-summary-strip p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.4);
}
.inv-summary-strip .inv-total-num { color: #000; }
.inv-summary-strip .inv-short-num { color: #ee6352; }

/* 요약 스트립 — 하단 (구분선형) */
.inv-summary-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 0;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 2px;
}
.inv-summary-foot p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.4);
}
.inv-summary-foot .inv-total-num { color: #000; }
.inv-summary-foot .inv-short-num { color: #ee6352; }

/* 4열 그리드 테이블 */
.inv-grid-table {
  display: flex;
  flex-direction: column;
}
.inv-grid-hd {
  display: grid;
  grid-template-columns: 1fr 56px 40px 36px;
  gap: 0 6px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
  align-items: end;
}
.inv-grid-hd span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.35);
  text-align: right;
}
.inv-grid-hd span:first-child { text-align: left; }

.inv-grid-body {
  display: flex;
  flex-direction: column;
}
.inv-grid-row {
  display: grid;
  grid-template-columns: 1fr 56px 40px 36px;
  gap: 0 6px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  align-items: center;
}
.inv-grid-row:last-child { border-bottom: none; }

/* 품명 (dot 포함) */
.inv-grid-nm {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-grid-nm .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inv-grid-nm .dot.red { background: #ee6352; }
.inv-grid-nm .dot.ok { background: rgba(0,0,0,.12); }
.inv-grid-row.is-mute .inv-grid-nm { color: rgba(0,0,0,.35); }

/* 현재/기준 */
.inv-grid-ratio {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,.55);
}
.inv-grid-ratio .std { color: rgba(0,0,0,.25); }
.inv-grid-row.is-mute .inv-grid-ratio { color: rgba(0,0,0,.25); }

/* 파손 */
.inv-grid-dmg {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #ee6352;
}
.inv-grid-dmg.none { color: rgba(0,0,0,.1); }

/* 부족 */
.inv-grid-def {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.inv-grid-def.neg { color: #ee6352; }
.inv-grid-def.none { color: rgba(0,0,0,.12); font-weight: 600; }

/* Shortage row left accent */
/* 부족 행 강조는 빨간 도트로 충분 — 좌측 보더 제거 */

/* 재고현황/등록기록 탭 하단 여백 축소 (바텀바 없음) */
.app-main:has(.page-wrap.stack) {
  padding-bottom: calc(var(--safe-area-bottom) + var(--space-5)) !important;
}

/* ═══════════════════════════════════════════════════════
   T-07: 태블릿 2단 분할 레이아웃
   ═══════════════════════════════════════════════════════ */

@media (min-width: 600px) {
  /* 2단 분할 컨테이너 */
  .inv-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }

  /* 좌측 패널 수직 구분선 */
  .inv-grid-2col > div:first-child {
    border-right: 1px solid rgba(0,0,0,.06);
    padding-right: 24px;
  }

  /* 패널별 섹션 제목 */
  .inv-panel-title {
    margin: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0,0,0,.4);
    padding-bottom: 4px;
  }

  /* 태블릿 열 너비 확대 */
  .inv-grid-2col .inv-grid-hd,
  .inv-grid-2col .inv-grid-row {
    grid-template-columns: 1fr 64px 48px 40px;
  }

  /* 패널 풋터 */
  .inv-panel-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 0;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 2px;
  }
  .inv-panel-foot p {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
  }
  .inv-panel-foot.is-shortage p { color: rgba(0,0,0,.4); }
  .inv-panel-foot.is-shortage .pf-num { color: #ee6352; }
  .inv-panel-foot.is-normal p { color: rgba(0,0,0,.3); }
  .inv-panel-foot.is-normal .pf-num { color: rgba(0,0,0,.5); }

  /* 태블릿에서 상단/하단 요약 스트립 숨김 (패널 풋터로 대체) */
  .inv-summary-strip,
  .inv-summary-foot {
    display: none;
  }

  /* 태블릿 툴바: 파손/추가 요약 인라인 */
  .inv-toolbar-tablet-sum {
    display: flex;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(0,0,0,.4);
    align-items: center;
  }
  .inv-toolbar-tablet-sum .val { color: #ee6352; }

  /* 태블릿에서 검색 숨김 (재고표는 유지) */
  .inv-srch-ico {
    display: none;
  }

  /* 태블릿: 세그먼트가 헤더로 이동 → 기존 위치 숨김 */
  .summary-table-toolbar {
    display: none;
  }
  .records-toolbar-top {
    display: none !important;
  }

  /* 태블릿: 재고현황 전체/부족만 토글 제거 */
  .month-nav-header .summary-filter-chips {
    display: none !important;
  }

  /* 태블릿: 재고현황 툴바 — 좌측 모음 */
  .page-wrap.stack > .month-nav-header {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .inv-toolbar-right {
    margin-left: 0 !important;
    gap: 6px !important;
  }

  /* 태블릿: 등록기록 툴바 — 좌측 모음 (재고현황과 통일) */
  .page-wrap.stack > .month-nav-header:has(.records-filter-chips) {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* 태블릿: 등록기록 칩 컴팩트 */
  .month-nav-header .records-filter-chips {
    max-width: 300px !important;
    flex-shrink: 0 !important;
  }
  .month-nav-header .records-filter-chips .chip {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  /* 슬라이딩 인디케이터 숨기고 active 칩에 직접 배경 */
  .month-nav-header .records-filter-chips .seg-indicator {
    display: none !important;
  }
  .month-nav-header .records-filter-chips .chip.is-active {
    background: #111 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* 태블릿: 재고 테이블 행 패딩/폰트 최적화 */
  .inv-grid-hd {
    padding: 6px 0;
  }
  .inv-grid-row {
    padding: 7px 0;
  }
  .inv-grid-nm {
    font-size: 12px;
  }
  .inv-grid-ratio {
    font-size: 12px;
  }
  .inv-grid-dmg {
    font-size: 12px;
  }
  .inv-grid-def {
    font-size: 12px;
  }

  /* ── 태블릿: 등록기록 max-width 제한 ── */

  /* ── 태블릿: 뷰포트 고정 레이아웃 (헤더 고정 + 콘텐츠만 스크롤) ── */

  /* 재고현황 / 등록기록 탭: app-main 뷰포트 고정 */
  .app-main:has(.inv-grid-container),
  .app-main:has(.records-toolbar) {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* page-wrap이 남은 높이를 채움 */
  .app-main:has(.inv-grid-container) > .page-wrap.stack,
  .app-main:has(.records-toolbar) > .page-wrap.stack {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* 월 선택기는 고정 */
  .app-main:has(.inv-grid-container) .month-nav-header,
  .app-main:has(.records-toolbar) .month-nav-header {
    flex-shrink: 0 !important;
  }

  /* 콘텐츠 영역이 남은 높이를 채움 (스크롤은 각 컬럼에서) */
  .app-main:has(.inv-grid-container) .content-section,
  .app-main:has(.records-toolbar) .content-section {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── 재고현황: 2열 독립 스크롤 + 테이블 헤더 고정 ── */
  .app-main:has(.inv-grid-container) .inv-grid-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .app-main:has(.inv-grid-container) .inv-grid-2col {
    flex: 1 !important;
    min-height: 0 !important;
    grid-template-rows: 1fr !important;
  }
  /* 각 패널: 독립 스크롤 컨테이너 (오버레이 스크롤바) */
  .app-main:has(.inv-grid-container) .inv-grid-2col > div {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-main:has(.inv-grid-container) .inv-grid-2col > div::-webkit-scrollbar {
    display: none;
  }
  /* 패널 제목: sticky 고정 */
  .app-main:has(.inv-grid-container) .inv-grid-2col .inv-panel-title {
    position: sticky !important;
    top: 0 !important;
    background: var(--color-bg-surface, #fff) !important;
    z-index: 2 !important;
    padding-top: 4px !important;
  }
  /* 테이블 헤더 (품명/현재기준/파손/부족): sticky 고정 */
  .app-main:has(.inv-grid-container) .inv-grid-2col .inv-grid-hd {
    position: sticky !important;
    top: 18px !important;
    background: var(--color-bg-surface, #fff) !important;
    z-index: 1 !important;
  }
  /* 패널 풋터: sticky 하단 고정 */
  .app-main:has(.inv-grid-container) .inv-grid-2col .inv-panel-foot {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--color-bg-surface, #fff) !important;
    z-index: 1 !important;
  }

  /* ── 등록기록: 2열 독립 스크롤 ── */
  .app-main:has(.records-toolbar) .records-2col {
    flex: 1 !important;
    min-height: 0 !important;
    grid-template-rows: 1fr !important;
  }
  .app-main:has(.records-toolbar) .records-2col-left,
  .app-main:has(.records-toolbar) .records-2col-right {
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-main:has(.records-toolbar) .records-2col-left::-webkit-scrollbar,
  .app-main:has(.records-toolbar) .records-2col-right::-webkit-scrollbar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   T-08: 재고표 모달 (바텀시트 / 센터 다이얼로그)
   ═══════════════════════════════════════════════════════ */

.stocksheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.stocksheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.3);
}

/* 모바일: 바텀시트 */
.stocksheet-sheet {
  position: relative;
  margin-top: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 88%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  z-index: 1;
}
.stocksheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.15);
  margin: 10px auto 0;
}
.stocksheet-hd {
  padding: 14px 16px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.stocksheet-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.stocksheet-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #333;
  border: none;
  cursor: pointer;
  position: relative;
}
.stocksheet-body {
  overflow-y: auto;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 재고표 테이블 그리드 */
.st-hd {
  display: grid;
  grid-template-columns: auto 1fr 48px 48px;
  gap: 0 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
  align-items: end;
}
.st-hd span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
  text-align: right;
}
.st-hd span:first-child { text-align: center; }
.st-hd span:nth-child(2) { text-align: left; }

.st-row {
  display: grid;
  grid-template-columns: auto 1fr 48px 48px;
  gap: 0 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  align-items: center;
}
.st-row:last-child { border-bottom: none; }
.st-no {
  font-size: 10px;
  font-weight: 700;
  color: rgba(0,0,0,.25);
  text-align: center;
  min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.st-nm {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
.st-val {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.st-val.std { font-weight: 700; color: rgba(0,0,0,.3); }
.st-val.match { color: rgba(0,0,0,.6); }
.st-val.short { color: #ee6352; }

.stocksheet-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 4px;
}
.stocksheet-foot p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,.4);
}
.stocksheet-foot .sf-total { color: #000; }
.stocksheet-foot .sf-short { color: #ee6352; }

/* 태블릿: 센터 다이얼로그 */
@media (min-width: 600px) {
  .stocksheet-overlay {
    align-items: center;
    justify-content: center;
  }
  .stocksheet-sheet {
    margin: 0;
    width: 680px;
    max-height: 80%;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0,0,0,.18);
  }
  .stocksheet-handle { display: none; }

  /* 재고표 2열 분할 */
  .st-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
  }
  .st-2col > .st-col {
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   T-09: 등록기록 상단 툴바 통일
   ═══════════════════════════════════════════════════════ */

/* 필터칩 + 건수 라벨 숨김 (레퍼런스에 없음) */
.records-toolbar-top {
  display: none !important;
}

/* React 내장 검색 완전 숨김 (별도 nud-search-bar로 대체) */
.records-search-wrap {
  display: none !important;
}

/* records-toolbar 여백 최소화 */
.records-toolbar {
  gap: 0 !important;
  min-height: 0 !important;
}

/* 등록기록 헤더 검색 아이콘 — 공통 정의(4825)와 통일 */
.rec-srch-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.rec-srch-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #555;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════
   T-10: 스와이프 애니메이션 수정
   ═══════════════════════════════════════════════════════ */

/* 1. opacity 제거 — contain: paint 로 물리적 클리핑. 항상 보임 */
.record-actions {
  opacity: 1 !important;
}

/* 2. is-swiped 의 opacity 오버라이드도 불필요 (이미 1) */
.record-row.is-swiped .record-actions {
  opacity: 1;
}

/* 3. 정착 easing → 살짝 overshoot (네이티브 bounce) */
.record-row-shell {
  transition:
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--duration-fast) var(--easing-standard) !important;
}
.record-actions {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 4. 드래그 중에는 전환 없음 (즉시 따라감) */
.record-row.is-dragging .record-row-shell,
.record-row.is-dragging .record-actions {
  transition: none !important;
}

/* 5. z-index 정리: shell auto, actions 2 (이미 적용됨 — 보강) */
.record-row-shell {
  z-index: auto !important;
}

/* ═══════════════════════════════════════════════════════
   T-13: 삭제 확인 스타일 정리
   ═══════════════════════════════════════════════════════ */

/* 확인 셸: 연한 배경 + 센터 정렬 (레퍼런스 sw-confirm) */
.record-confirm-shell {
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  min-height: auto !important;
}

/* 확인 텍스트: 뮤트 컬러 */
.record-confirm-text {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* 확인 버튼 베이스 */
.record-confirm-btn {
  height: 34px !important;
  min-height: 34px !important;
  min-width: auto !important;
  padding: 0 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: rgba(0, 0, 0, 0.5) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* 삭제 확인 버튼 */
.record-confirm-btn.is-danger {
  background: #ee6352 !important;
  border-color: #ee6352 !important;
  color: #fff !important;
}

/* 삭제 중 로딩 상태 */
.record-confirm-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* 모바일 세로 레이아웃 유지 */
@media (max-width: 599px) {
  .record-confirm-shell {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ═══════════════════════════════════════════════════════
   T-14: 최종 검수 보정
   ═══════════════════════════════════════════════════════ */

/* tabular-nums 누락 보정 */
.inv-total-num,
.inv-short-num,
.pf-num,
.sf-total,
.sf-short {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════
   등록기록 테이블형 레이아웃 (레퍼런스 매칭)
   ═══════════════════════════════════════════════════════ */

/* --- 필터 칩 → 세그먼트 컨트롤 (T-09 숨김 해제) --- */
.records-toolbar-top {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
.records-count-label { display: none !important; }

.records-filter-chips {
  display: flex !important;
  gap: 6px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}
.records-filter-chips .chip {
  flex: 0 0 auto !important;
  text-align: center !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.4) !important;
  background: rgba(0,0,0,.08) !important;
  border: none !important;
  border-radius: 8px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative !important;
  z-index: 1 !important;
}
.records-filter-chips .chip.is-active {
  background: #111 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.records-filter-chips .seg-indicator {
  display: none !important;
}

/* records-toolbar 간격 복원 */
.records-toolbar {
  gap: var(--space-3) !important;
}

/* --- 카드 → 플랫 행 (모든 카드 스타일 완전 제거) --- */
.record-row {
  --record-row-radius: 0 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  contain: paint !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 0 !important;
  border-left: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: auto !important;
}
.record-row:last-child {
  border-bottom: none !important;
}
.record-row:hover {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
.record-row.is-open {
  border-color: transparent !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}

/* 타입바 숨김 */
.record-type-bar {
  display: none !important;
}

/* 셸 → 플랫 */
.record-row-shell {
  padding: 9px 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* --- 메인: 3열 그리드 (1fr 60px 44px) --- */
.record-row-main {
  display: grid !important;
  grid-template-columns: 1fr 60px 44px !important;
  gap: 0 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: auto !important;
  transform: none !important;
}

/* 썸네일 숨김 */
.record-item-media {
  display: none !important;
}

/* 콘텐츠: 1-2열 스팬, 내부 flex row */
.record-row-content {
  grid-column: 1 / 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  flex: none !important;
  position: relative !important;
  padding-right: 68px !important;
}

/* 서브 → display:contents (자식을 flex 아이템으로 승격) */
.record-row-sub {
  display: contents !important;
}

/* 타입 태그 (파손/추가) → 품명 앞 인라인 */
.record-major-type {
  order: 1 !important;
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.record-row.is-damage .record-major-type {
  background: rgba(238, 99, 82, 0.08) !important;
  color: #ee6352 !important;
}
.record-row.is-add .record-major-type {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #555 !important;
}

/* 아이템명 */
.record-row-item {
  order: 2 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: 50% !important;
}

/* 구분점 숨김 */
.record-meta-dot {
  display: none !important;
}

/* 사유 텍스트 (단순 파손, 입고 등) → 품명 뒤 보조 텍스트 */
.record-reason-text {
  display: inline !important;
  order: 3 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.3) !important;
  margin-left: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 작성자 → 절대배치로 2열 위치 */
.record-author-text {
  order: 10 !important;
  position: absolute !important;
  right: 0 !important;
  width: 60px !important;
  text-align: right !important;
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 수량 → 3열 */
.record-qty-col {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.record-qty {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  min-width: auto !important;
}
.record-qty.is-damage {
  color: #ee6352 !important;
}

/* --- 날짜 그룹 헤더 (→ 아래 통합 블록으로 이동) --- */

/* 열 헤더 (JS 주입) */
.rt-col-hd {
  display: grid;
  grid-template-columns: 1fr 60px 44px;
  gap: 0 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
  align-items: end;
}
.rt-col-hd span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  text-align: right;
}
.rt-col-hd span:first-child {
  text-align: left;
}

/* record-rows: 2열 카드 그리드 제거 → 1열 리스트 */
.record-rows {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* 카드 왼쪽 컬러바 제거 */
.record-row.is-add,
.record-row.is-damage {
  border-left: none !important;
}

/* 그룹 헤더: 카드 스타일 완전 제거 */
.record-group-header {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 16px 0 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(0, 0, 0, 0.35) !important;
  letter-spacing: 0.04em !important;
}
.record-group + .record-group .record-group-header {
  border-top: none !important;
}

/* 스와이프 힌트 배너 숨김 */
.records-swipe-hint {
  display: none !important;
}

/* 그룹 간격 정리 */
.record-group {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.record-group-list {
  gap: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 확인 셸 내 그리드 보정 */
.record-row.is-confirming .record-row-main {
  display: none !important;
}
.record-confirm-shell {
  grid-column: 1 / -1 !important;
}

/* 액션 영역: 플랫 행에 맞춤 */
.record-actions {
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   T-15: 접근성 보완
   ═══════════════════════════════════════════════════════ */

/* 44px 최소 터치 영역 확보 (시각 크기는 유지, 히트 영역 확대) */
.rec-srch-ico,
.inv-srch-ico,
.stocksheet-close,
.mp-dropdown-item {
  position: relative;
}
.rec-srch-ico::after,
.inv-srch-ico::after,
.stocksheet-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* 확인 버튼 터치 영역: 34px visual → 44px hit */
.record-confirm-btn {
  position: relative !important;
}
.record-confirm-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}

/* 월 선택기 드롭다운 항목 최소 높이 */
.mp-dropdown-item {
  min-height: 44px;
}

/* 포커스 표시: 키보드 내비게이션 시 가시성 */
.rec-srch-ico:focus-visible,
.inv-srch-ico:focus-visible,
.inv-btn:focus-visible,
.stocksheet-close:focus-visible,
.record-confirm-btn:focus-visible,
.mp-dropdown-item:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   T-16: 레퍼런스 비율 매칭
   레퍼런스 콘텐츠 288px → iPhone Pro 353px (패딩 20px)
   비율 1.22× 스케일 적용
   ═══════════════════════════════════════════════════════ */

/* 콘텐츠 영역: 패딩 20px → 콘텐츠폭 353px */
.app-main {
  --main-content-padding: 20px !important;
  padding: 20px !important;
  padding-bottom: calc(
    var(--bottom-bar-height) + var(--safe-area-bottom) + 32px
  ) !important;
}

/* 스택 간격 */
.page-wrap.stack {
  gap: 8px !important;
}

/* 검색 바 하단 간격 */
.nud-search-bar {
  padding: 0 0 4px !important;
}

/* 월 선택기 행: sticky 제거, 높이 축소 + 좌우 정렬 */
.page-wrap.stack > .month-nav-header {
  position: sticky !important;
  top: -20px !important;
  margin: -20px -20px 0 -20px !important;
  padding: 20px 20px 12px 20px !important;
  height: auto !important;
  min-height: auto !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10 !important;
}

/* 세그먼트 컨트롤: 전체 너비로 정렬 */
.summary-table-toolbar {
  padding: 0 !important;
  margin: 0 !important;
}
.summary-filter-chips {
  width: 100% !important;
}
.records-toolbar {
  padding: 0 !important;
}
.records-toolbar-top {
  padding: 0 !important;
}
.records-filter-chips {
  width: auto !important;
}

/* --- 재고현황 테이블 (비율 스케일) --- */
.inv-grid-hd {
  grid-template-columns: 1fr 64px 44px 40px !important;
  padding: 6px 0 !important;
}
.inv-grid-hd span {
  font-size: 10px !important;
}
.inv-grid-row {
  grid-template-columns: 1fr 64px 44px 40px !important;
  padding: 10px 0 !important;
}
.inv-grid-nm {
  font-size: 13px !important;
}
.inv-grid-ratio {
  font-size: 13px !important;
}
.inv-grid-dmg {
  font-size: 13px !important;
}
.inv-grid-def {
  font-size: 14px !important;
}

/* --- 등록기록 테이블 (비율 스케일) --- */
.record-row-shell {
  padding: 10px 0 !important;
}
.record-row-main {
  grid-template-columns: 1fr 64px 48px !important;
}
.rt-col-hd {
  grid-template-columns: 1fr 64px 48px !important;
}
.rt-col-hd span {
  font-size: 10px !important;
}
.record-row-item {
  font-size: 13px !important;
}
.record-major-type {
  font-size: 10px !important;
}
.record-reason-text {
  font-size: 10px !important;
}
.record-author-text {
  font-size: 12px !important;
  width: 64px !important;
}
.record-row-content {
  padding-right: 72px !important;
}
.record-qty {
  font-size: 14px !important;
}
.record-group-header {
  font-size: 11px !important;
}

/* --- 툴바 높이 통일 --- */
.month-nav-label {
  padding: 8px 14px !important;
  font-size: 13px !important;
}
.inv-srch-ico,
.rec-srch-ico {
  width: 28px !important;
  height: 28px !important;
}
.inv-srch-ico svg,
.rec-srch-ico svg {
  width: 13px !important;
  height: 13px !important;
}
.inv-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* --- 전탭 칩/필터/세그먼트 크기 통일 --- */
.chip,
.input-filter-header .chip,
.summary-filter-chips .chip,
.records-filter-chips .chip,
.month-nav-label,
.uni-seg-btn,
.inv-btn {
  font-size: 13px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

/* ═══════════════════════════════════════════════════════
   T-20: 등록기록 2열 레이아웃 (태블릿)
   ═══════════════════════════════════════════════════════ */

/* 모바일: 우측 패널 숨김 */
.records-2col-right {
  display: none;
}

@media (min-width: 768px) {
  .records-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
  .records-2col-right {
    display: block !important;
  }

  /* 패널 제목 — 상단 sticky */
  .rec-summary-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0,0,0,.35);
    padding-bottom: 6px;
    position: sticky;
    top: 0;
    background: var(--color-bg-surface, #fff);
    z-index: 2;
    padding-top: 4px;
  }

  /* 헤더 행 — 상단 sticky (제목 아래) */
  .rec-summary-hd {
    display: grid;
    grid-template-columns: 1fr 56px 48px 36px 36px;
    padding: 4px 0;
    font-size: 9px;
    font-weight: 700;
    color: rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: sticky;
    top: 22px;
    background: var(--color-bg-surface, #fff);
    z-index: 1;
  }
  .rec-summary-hd span:not(:first-child) {
    text-align: right;
  }

  /* 데이터 행 */
  .rec-summary-row {
    display: grid;
    grid-template-columns: 1fr 56px 48px 36px 36px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 13px;
  }

  /* 품명 + dot */
  .rec-summary-nm {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .rec-summary-nm .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .rec-summary-nm .dot.has-issue { background: #ee6352; }
  .rec-summary-nm .dot.is-ok { background: #ccc; }
  .rec-summary-nm span:last-child { font-weight: 600; }

  /* 수치 */
  .rec-summary-val {
    text-align: right;
    font-weight: 700;
    font-size: 13px;
  }
  .rec-summary-val.is-damage { color: #ee6352; }
  .rec-summary-val.is-add { color: #3182ce; }
  .rec-summary-val.is-none { color: #ddd; }

  /* 풋터 — 하단 sticky 고정 */
  .rec-summary-foot {
    display: flex;
    justify-content: space-between;
    padding: 8px 0 0;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(0,0,0,.4);
    position: sticky;
    bottom: 0;
    background: var(--color-bg-surface, #fff);
    z-index: 1;
    padding-bottom: 4px;
  }
  .rec-summary-foot .num { color: #ee6352; }
  .rec-summary-foot .num-add { color: #3182ce; }
  .rec-summary-foot-sub {
    border-top: none;
    padding-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(0,0,0,.3);
  }

  /* ── 파손/추가 세부사항 패널 (표에 통합됨, 비활성) ── */
  .rec-detail-panel {
    margin-top: 20px;
  }
  .rec-detail-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0,0,0,.35);
    padding-bottom: 6px;
  }
  .rec-detail-hd {
    display: grid;
    grid-template-columns: 1fr 48px 48px;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 700;
    color: rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .rec-detail-hd span:not(:first-child) {
    text-align: right;
  }
  .rec-detail-row {
    display: grid;
    grid-template-columns: 1fr 48px 48px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 13px;
  }
  .rec-detail-reason {
    font-weight: 600;
  }
  .rec-detail-val {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .rec-detail-val.is-damage { color: #ee6352; }
  .rec-detail-val.is-add { color: #3182ce; }
  .rec-detail-foot {
    display: grid;
    grid-template-columns: 1fr 48px 48px;
    padding: 8px 0 0;
    border-top: 1px solid rgba(0,0,0,.1);
    margin-top: 2px;
    font-size: 12px;
    font-weight: 800;
  }
  .rec-detail-foot span:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .rec-detail-foot .is-damage { color: #ee6352; }
  .rec-detail-foot .is-add { color: #3182ce; }
}

/* ═══════════════════════════════════════════════════════
   U: 유니폼 탭
   ═══════════════════════════════════════════════════════ */

/* 탭 4열 오버라이드 */
.tab-strip {
  grid-template-columns: repeat(var(--tab-count, 4), minmax(0, 1fr));
}

/* 서브탭 세그먼트 (기존 칩 스타일 통일) */
/* ═══ Uniform v3 — Toss style ═══ */

/* 글자 드래그 방지 */
.uni-seg-bar,
.uni-hero,
.uni-expand-card,
.uni-emp-row,
.uni-modal-sheet,
.uni-fab-menu {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.uni-stock-input,
.uni-modal-sheet input[type="text"],
.uni-modal-sheet input[type="number"],
.uni-modal-sheet input[type="date"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Segment bar */
.uni-segment-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -20px -20px var(--space-4) -20px;
  padding: 20px 20px 12px 20px;
  position: sticky;
  top: -20px;
  z-index: 10;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.uni-segment-ctrl {
  display: flex;
  gap: 6px;
}
.uni-seg-btn {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(0,0,0,.35);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1);
  white-space: nowrap;
}
.uni-seg-btn.is-active {
  background: #111;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.uni-search-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.05);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.4);
}

/* Search bar */
.uni-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
}
.uni-search-input {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  background: rgba(0,0,0,.03);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.uni-search-input:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: 0 0 0 var(--space-1) var(--color-focus-ring);
}
.uni-toggle-resigned {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: rgba(0,0,0,.4);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.uni-toggle-resigned input { accent-color: var(--color-bg-inverse); }

/* ── Overview ── */
.uni-overview {
  padding: 0 0 100px;
}

/* Hero cards */
.uni-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: var(--space-4);
}
.uni-hero-card-disposal {
  grid-column: 1 / -1;
  padding: 20px 24px;
}
.uni-hero-card-disposal .uni-hero-big {
  font-size: 32px;
}
.uni-hero-big.is-accent {
  color: var(--color-accent);
}
.uni-hero-card.has-items {
  background: rgba(238,99,82,.04);
  box-shadow: inset 0 0 0 1px rgba(238,99,82,.1), 0 1px 2px rgba(0,0,0,.04);
}
.uni-hero-card {
  background: rgba(0,0,0,.02);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.2,0.8,0.2,1), transform 0.15s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.15s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
}
.uni-hero-card:active { background: rgba(0,0,0,.06); transform: scale(0.98); }
.uni-hero-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: rgba(0,0,0,.35);
  margin-bottom: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.uni-hero-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.uni-hero-big {
  font-size: 48px;
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.uni-hero-unit {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: rgba(0,0,0,.4);
}
.uni-hero-sub {
  font-size: var(--text-xs);
  color: rgba(0,0,0,.4);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Expandable card */
.uni-expand-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  border: none;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
.uni-expand-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--text-md);
}
.uni-expand-hd:active { background: rgba(0,0,0,.02); }
.uni-expand-title {
  font-weight: var(--weight-bold);
  font-size: 15px;
  color: var(--color-text-primary);
}
.uni-expand-arrow {
  font-size: 12px;
  color: rgba(0,0,0,.25);
  transition: transform 0.25s ease;
}
.uni-expand-arrow.is-open { transform: rotate(180deg); }
.uni-expand-body {
  padding: 0 20px 20px;
  animation: uni-expand-in 0.25s ease;
}
@keyframes uni-expand-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.uni-expand-empty {
  text-align: center;
  padding: var(--space-4) 0;
  color: rgba(0,0,0,.25);
  font-size: var(--text-sm);
}

/* Stock detail (inside expand) */
.uni-stock-group { margin-bottom: var(--space-3); }
.uni-stock-group:last-child { margin-bottom: 0; }
.uni-stock-group-hd {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: rgba(0,0,0,.35);
  padding-bottom: 6px;
  margin-bottom: 2px;
  letter-spacing: .02em;
}
.uni-stock-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0 7px var(--space-3);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.uni-stock-detail-row:last-child { border-bottom: 0; }
.uni-stock-detail-nm {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}
.uni-stock-detail-qty {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.uni-stock-detail-qty.is-zero { color: var(--color-accent); }

/* Laundry detail (inside expand) */
.uni-laundry-group { margin-bottom: var(--space-3); }
.uni-laundry-group:last-child { margin-bottom: 0; }
.uni-laundry-group-hd {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 4px;
}
.uni-laundry-group-date {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: rgba(0,0,0,.3);
}
.uni-laundry-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 6px var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.uni-laundry-detail-row:last-child { border-bottom: 0; }

/* Summary strip below hero cards */
.uni-summary-strip {
  font-size: 13px;
  color: rgba(0,0,0,.35);
  padding: var(--space-3) 0;
  text-align: center;
  margin: var(--space-1) 0 var(--space-2);
  line-height: 1.4;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

/* Disposal banner — removed, now uses .uni-hero-card-disposal */

/* Disposal history sheet */
.uni-disposal-summary {
  background: rgba(0,0,0,.03);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(0,0,0,.5);
  line-height: 1.6;
}
.uni-disposal-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.uni-disposal-row-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.uni-disposal-row-date {
  color: rgba(0,0,0,.35);
  font-weight: var(--weight-bold);
  min-width: 36px;
}
.uni-disposal-row-name {
  font-weight: var(--weight-bold);
}
.uni-disposal-row-item {
  color: rgba(0,0,0,.5);
}
.uni-disposal-row-reason {
  margin-left: auto;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}
.uni-disposal-row-reason.lost { color: #f59e0b; }
.uni-disposal-row-reason.damaged { color: var(--color-accent); }
.uni-disposal-row-reason.discard { color: rgba(0,0,0,.3); }
.uni-disposal-row-note {
  font-size: var(--text-xs);
  color: rgba(0,0,0,.3);
  padding-left: 44px;
  margin-top: 2px;
}

/* Stock detail sheet header */
.uni-stock-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-3);
}
.uni-stock-detail-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.uni-btn-sm {
  padding: 6px 14px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  min-height: 32px;
}
.uni-btn-outline {
  background: transparent;
  border: 1px solid rgba(0,0,0,.15);
  color: var(--color-text-primary);
}
.uni-btn-outline:active { background: rgba(0,0,0,.04); }
.uni-stock-detail-sub {
  font-size: var(--text-sm);
  color: rgba(0,0,0,.4);
  padding: 0 var(--space-5) var(--space-3);
}
.uni-stock-edit-input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: rgba(0,0,0,.02);
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.uni-stock-edit-input:focus {
  outline: none;
  border-color: var(--color-text-primary);
  background: #fff;
}
.uni-stock-edit-input.is-zero { color: var(--color-accent); }
.uni-stock-detail-footer {
  text-align: center;
  padding: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: var(--space-3);
}

/* ── Issue Status View ── */
.uni-issue-view {
  padding: 0 0 100px;
}
/* Employee list (one-line rows) */
.uni-employee-list {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
}
.uni-emp-row {
  display: flex;
  align-items: center;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
  min-height: 48px;
  transition: background 0.1s ease;
  border-radius: 8px;
}
.uni-emp-row:active {
  background: rgba(0,0,0,.03);
}
.uni-emp-row.is-resigned {
  opacity: 0.4;
}
.uni-emp-row-name {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.uni-emp-row-size {
  font-size: var(--text-sm);
  color: rgba(0,0,0,.35);
  margin-left: var(--space-2);
  background: rgba(0,0,0,.06);
  padding: 2px 8px;
  border-radius: 6px;
}
.uni-emp-row-badge {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: #f59e0b;
  background: rgba(245,158,11,.1);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
}
.uni-emp-row-resign {
  font-size: var(--text-xs);
  color: rgba(0,0,0,.3);
  margin-left: var(--space-2);
}
.uni-emp-row-right {
  margin-left: auto;
  font-size: var(--text-xs);
  color: rgba(0,0,0,.15);
  font-variant-numeric: tabular-nums;
}

/* FAB system */
.uni-fab-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 99;
  animation: uni-fade-in 0.15s ease;
}
.uni-fab-wrap {
  position: fixed;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  right: var(--space-5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
.uni-fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.9);
  transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1);
}
.uni-fab-wrap.is-open .uni-fab-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.uni-fab-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.uni-fab-item:nth-child(1) { transition-delay: 0.03s; }
.uni-fab-item:nth-child(2) { transition-delay: 0.06s; }
.uni-fab-item:nth-child(3) { transition-delay: 0.09s; }
.uni-fab-item:nth-child(4) { transition-delay: 0.12s; }
.uni-fab-item-label {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-medium);
  white-space: nowrap;
}
.uni-fab-item-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: var(--shadow-medium);
}
.uni-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1);
  flex-shrink: 0;
}
.uni-fab:active { transform: scale(0.92); }
.uni-fab-wrap.is-open .uni-fab { transform: rotate(45deg); }

/* Pick list (staff selector) */
.uni-pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.uni-pick-item {
  padding: 10px 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}
.uni-pick-item:active { background: rgba(0,0,0,.04); }

/* Empty */
.uni-empty {
  text-align: center;
  padding: 60px var(--space-5);
  color: rgba(0,0,0,.3);
  font-size: var(--text-md);
}
.uni-empty button {
  margin-top: var(--space-4);
}
.uni-empty-text {
  text-align: center;
  padding: var(--space-6) 0;
  color: rgba(0,0,0,.25);
  font-size: var(--text-sm);
}

/* 2col tablet right (keep) */
.uni-2col-right { display: none; }

/* Modal overlay — matches existing .overlay pattern */
.uni-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: uni-fade-in var(--duration-base) var(--easing-standard);
}
@keyframes uni-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes uni-slide-up { from { transform: translateY(100%) } to { transform: translateY(0) } }
.uni-modal-bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
}
.uni-modal-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 85vh;
  background: var(--color-bg-surface);
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  animation: uni-slide-up 0.3s cubic-bezier(0.2,0.8,0.2,1);
  will-change: transform;
  box-shadow: 0 -2px 20px rgba(0,0,0,.06);
}
.uni-modal-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.15);
  margin: 0 auto;
  padding: 0;
  display: block;
}
.uni-modal-handle-area {
  padding: 12px 0 16px;
  cursor: grab;
  touch-action: none;
}
.uni-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  border: 0;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--duration-fast) var(--easing-standard);
}
.uni-modal-close:active { background: var(--color-surface); }
.uni-modal-title {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 var(--space-4);
  padding-right: 36px;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

/* Form elements — matches existing .text-input / .select-input */
.uni-form-row { margin-bottom: var(--space-3); }
.uni-form-row label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: rgba(0,0,0,.4);
  margin-bottom: 5px;
  letter-spacing: .04em;
}
.uni-form-row input,
.uni-form-row select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.uni-form-row input:focus,
.uni-form-row select:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: 0 0 0 var(--space-1) var(--color-focus-ring);
}
.uni-select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.uni-form-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.uni-form-chips button {
  padding: 6px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.uni-form-chips button.is-active {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-color: var(--color-bg-inverse);
}
.uni-chip-locked {
  opacity: 0.5;
  cursor: default !important;
}
.uni-form-qty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.uni-form-qty button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--easing-standard);
}
.uni-form-qty button:active { background: var(--color-bg-subtle); }
.uni-form-qty button:disabled { opacity: 0.3; cursor: default; }
.uni-form-qty strong {
  font-size: var(--text-xl);
  min-width: 30px;
  text-align: center;
  color: var(--color-text-primary);
}
.uni-form-chips-sm button {
  padding: 4px 10px !important;
  font-size: var(--text-xs) !important;
}
.uni-form-qty-sm {
  gap: 6px !important;
}
.uni-form-qty-sm button {
  width: 28px !important;
  height: 28px !important;
  font-size: var(--text-md) !important;
}
.uni-form-qty-sm strong {
  font-size: var(--text-md) !important;
  min-width: 20px;
}

/* Buttons — matches existing .action-btn pattern */
.uni-btn-primary {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: 0 var(--space-5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.uni-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.uni-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.uni-btn-cancel {
  min-height: 52px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: 0 var(--space-5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.uni-btn-danger {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  padding: 0 var(--space-5);
  cursor: pointer;
  transition: all 0.15s ease;
}
.uni-btn-danger:active:not(:disabled) { transform: scale(0.98); }
.uni-btn-danger:disabled { opacity: 0.35; cursor: not-allowed; }
.uni-btn-full { display: block; width: 100%; }

/* Sticky bottom */
.uni-sticky-bottom {
  position: sticky;
  bottom: 0;
  background: var(--color-bg-surface);
  padding: var(--space-3) 0 calc(env(safe-area-inset-bottom));
  margin-top: var(--space-4);
  border-top: 1px solid rgba(0,0,0,.06);
}
.uni-sticky-row {
  display: flex;
  gap: var(--space-2);
}
.uni-sticky-row button { flex: 1; }

/* Set form */
.uni-set-list { padding: var(--space-1) 0; }
.uni-set-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.uni-set-row:last-child { border-bottom: none; }
.uni-set-row.is-zero { opacity: 0.35; }
.uni-set-row.is-zero .uni-set-row-name { text-decoration: line-through; }
.uni-set-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.uni-set-row-name {
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.uni-set-variant {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-left: 2px;
}

/* Issue summary */
.uni-issue-summary {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}
.uni-issue-summary-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: rgba(0,0,0,.4);
  margin: 0 0 var(--space-1);
  letter-spacing: .04em;
}
.uni-issue-summary-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* Signature */
.uni-signature-wrap { width: 100%; }
.uni-signature-notice {
  font-size: var(--text-xs);
  color: rgba(0,0,0,.4);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-base);
}
.uni-signature-canvas {
  width: min(100%, 360px);
  height: 160px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  touch-action: none;
  cursor: crosshair;
}
.uni-signature-clear {
  display: block;
  margin-top: 6px;
  border: 0;
  background: none;
  color: rgba(0,0,0,.4);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}

/* Detail: header with more menu */
.uni-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  position: relative;
}
.uni-more-btn {
  border: 0;
  background: var(--color-surface-bright);
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--easing-standard);
}
.uni-more-btn:active { background: var(--color-surface); }
.uni-more-menu {
  position: absolute;
  right: 0;
  top: 40px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-medium);
  z-index: 10;
  overflow: hidden;
  min-width: 120px;
}
.uni-more-menu button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}
.uni-more-menu button:active { background: var(--color-bg-subtle); }
.uni-more-menu button:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.06); }

/* Section label — matches inv-grid-hd pattern */
.uni-section-label {
  font-size: 9px;
  font-weight: var(--weight-extrabold);
  color: rgba(0,0,0,.4);
  margin: 0 0 var(--space-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Detail table */
.uni-detail-table { margin: 0 0 var(--space-1); }
.uni-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.uni-detail-item {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.uni-detail-qty {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

/* Detail item rows (merged view) */
.uni-detail-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: 14px;
}
.uni-detail-item-name {
  font-weight: 600;
  color: var(--color-text-primary);
}
.uni-detail-item-variant {
  color: rgba(0,0,0,.4);
  margin-left: 4px;
}
.uni-detail-item-qty {
  font-variant-numeric: tabular-nums;
  color: rgba(0,0,0,.5);
  font-weight: 600;
  flex-shrink: 0;
}

/* Item action row chevron */
.uni-detail-item-row.is-tappable {
  cursor: pointer;
}
.uni-detail-item-row.is-tappable:active {
  background: rgba(0,0,0,.03);
}
.uni-detail-item-chevron {
  color: rgba(0,0,0,.2);
  font-size: 12px;
  margin-left: var(--space-2);
}

/* Item action sheet */
.uni-item-action-header {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: var(--space-4);
}
.uni-item-action-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
}
.uni-item-action-qty {
  font-size: var(--text-sm);
  color: rgba(0,0,0,.4);
  margin-top: var(--space-1);
}
.uni-item-action-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: var(--space-2);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-align: center;
}
.uni-item-action-btn:active {
  background: rgba(0,0,0,.03);
}
.uni-item-action-btn.is-danger {
  color: var(--color-accent);
}
.uni-item-action-cancel {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  background: none;
  font-size: var(--text-md);
  color: rgba(0,0,0,.4);
  cursor: pointer;
  text-align: center;
}

/* Disposal form */
.uni-disposal-reasons {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.uni-disposal-reason {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-xs);
  background: var(--color-bg-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
  cursor: pointer;
}
.uni-disposal-reason.is-active {
  border-color: var(--color-bg-inverse);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.uni-disposal-qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
}
.uni-disposal-qty-row label {
  font-weight: var(--weight-semibold);
  min-width: 36px;
}
.uni-disposal-qty-row .uni-qty-ctrl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.uni-disposal-qty-row .uni-qty-ctrl button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-xs);
  background: var(--color-bg-surface);
  font-size: 16px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uni-disposal-qty-row .uni-qty-ctrl span {
  min-width: 20px;
  text-align: center;
  font-weight: var(--weight-bold);
}
.uni-disposal-qty-row .uni-qty-max {
  color: rgba(0,0,0,.4);
  font-size: var(--text-sm);
}
.uni-disposal-note-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.uni-disposal-note-row label {
  font-weight: var(--weight-semibold);
  min-width: 36px;
}
.uni-disposal-note-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  outline: none;
}
.uni-disposal-note-row input:focus {
  border-color: var(--color-bg-inverse);
}

/* History link */
.uni-detail-history-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 13px;
  color: rgba(0,0,0,.4);
  cursor: pointer;
}
.uni-detail-history-link:active {
  color: rgba(0,0,0,.6);
}
.uni-detail-history-link .arrow {
  font-size: 12px;
}

/* History */
.uni-history-section { margin: 0; }
.uni-history-batch {
  margin-bottom: var(--space-2);
}
.uni-history-batch-hd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0 2px;
  border-bottom: 2px solid var(--color-text-primary);
}
.uni-history-date {
  font-size: var(--text-xs);
  color: rgba(0,0,0,.4);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.uni-sig-btn {
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.uni-history-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 0 7px var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.uni-history-row:active { background: var(--color-bg-subtle); }
.uni-history-desc {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.uni-history-arrow {
  color: rgba(0,0,0,.25);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* Resign checklist */
.uni-resign-checklist { margin: var(--space-2) 0; }
.uni-resign-label {
  font-size: 9px;
  font-weight: var(--weight-extrabold);
  color: rgba(0,0,0,.4);
  margin: 0 0 var(--space-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.uni-resign-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
  font-size: var(--text-md);
}
.uni-resign-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-bg-inverse);
  flex-shrink: 0;
}
.uni-resign-name {
  flex: 1;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.uni-resign-item:not(.is-checked) .uni-resign-name { color: rgba(0,0,0,.25); }
.uni-resign-qty {
  font-weight: var(--weight-bold);
  color: rgba(0,0,0,.4);
  font-variant-numeric: tabular-nums;
}

/* Delete link */
.uni-delete-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-3) 0 2px;
  margin-top: var(--space-3);
  border: 0;
  background: none;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Laundry list */
.uni-laundry-list { margin: 0 0 var(--space-2); }
.uni-laundry-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.uni-laundry-name {
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  flex-shrink: 0;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uni-laundry-date {
  color: rgba(0,0,0,.4);
  font-size: var(--text-caption);
  flex-shrink: 0;
}
.uni-laundry-item {
  flex: 1;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uni-laundry-qty {
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.uni-laundry-del-btn {
  border: 0;
  background: none;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xxs);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--easing-standard);
}
.uni-laundry-del-btn:active { background: rgba(238,99,82,.08); }
.uni-add-manual-btn {
  display: block;
  width: 100%;
  padding: var(--space-3);
  margin: var(--space-2) 0;
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-sm);
  background: none;
  color: rgba(0,0,0,.4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-align: center;
  transition: background var(--duration-fast) var(--easing-standard);
}
.uni-add-manual-btn:active { background: var(--color-bg-subtle); }

/* Stock list */
.uni-stock-list { margin: 0; }
.uni-stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.uni-stock-nm {
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
}
.uni-stock-ctrl {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.uni-stock-ctrl button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background: var(--color-bg-surface);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--easing-standard);
}
.uni-stock-ctrl button:disabled { opacity: 0.3; cursor: default; }
.uni-stock-ctrl button:active { background: var(--color-bg-subtle); }
.uni-stock-qty {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  min-width: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
}
.uni-stock-qty.is-zero { color: var(--color-accent); }

/* Right panel */
.uni-right-empty {
  padding: 60px 0;
  text-align: center;
  color: rgba(0,0,0,.25);
  font-size: var(--text-sm);
}
.uni-right-panel {
  padding: var(--space-1) 0;
}
.uni-panel-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.uni-panel-back button {
  border: 0;
  background: none;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: var(--space-1) 0;
}

/* Signature lightbox */
.uni-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 10);
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.uni-lightbox-img {
  max-width: 90vw;
  max-height: 60vh;
  background: var(--color-bg-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

/* ═══ Uniform v3 Tablet ═══ */
@media (min-width: 600px) {
  .uni-hero-big { font-size: 56px; }
  .uni-hero-card { padding: 24px; }
  .uni-signature-canvas { height: 200px; }
  .uni-employee-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .uni-2col-right {
    display: block;
    position: fixed;
    right: 0;
    top: 100px;
    bottom: 0;
    width: 50%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 var(--space-5);
    border-left: 1px solid rgba(0,0,0,.06);
  }
  .uni-2col-right::-webkit-scrollbar { display: none; }
  .uni-modal-overlay { align-items: center; }
  .uni-modal-sheet {
    max-width: min(420px, 90vw);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    padding: var(--space-6);
    animation: uni-scale-in var(--duration-base) var(--easing-standard);
  }
  @keyframes uni-scale-in {
    from { transform: scale(0.95); opacity: 0 }
    to { transform: scale(1); opacity: 1 }
  }
  .uni-modal-handle { display: none; }
}

/* ═══════════════════════════════════════════════════════
   STEP WIZARD MODAL — 기물등록
   ═══════════════════════════════════════════════════════ */

/* 모달 오버라이드: auto height */
.modal.modal-item-register {
  width: min(95vw, 440px) !important;
  height: auto !important;
  max-height: 86dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.18) !important;
}

.sw-modal {
  display: flex;
  flex-direction: column;
  max-height: 86dvh;
  background: #fff;
}

.sw-bar {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #ddd;
  margin: 8px auto 0;
  display: none;
}

.sw-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  flex-shrink: 0;
}

.sw-name {
  font-size: 15px;
  font-weight: 800;
  color: #111;
}

.sw-meta {
  font-size: 11px;
  color: #999;
  margin-top: 3px;
}

.sw-meta b {
  color: #555;
}

.sw-red {
  color: #e8604f;
  font-weight: 700;
}

.sw-prog {
  display: flex;
  gap: 3px;
  padding: 0 20px;
  margin: 14px 0 4px;
  flex-shrink: 0;
}

.sw-prog-s {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #eee;
  transition: background .2s;
}

.sw-prog-s.done,
.sw-prog-s.now {
  background: #111;
}

.sw-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 20px 4px;
  -webkit-overflow-scrolling: touch;
}

.sw-q {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  line-height: 1.45;
  margin-bottom: 20px;
}

.sw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sw-chip {
  padding: 13px 20px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #f5f5f5;
  color: #888;
  transition: background .15s, color .15s;
}

.sw-chip.on {
  background: #111;
  color: #fff;
}

.sw-chip:active {
  transform: scale(.97);
}

/* 양자택일 카드 */
.sw-big-cards {
  display: flex;
  gap: 12px;
}

.sw-big {
  flex: 1;
  padding: 22px 16px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: #f5f5f5;
  color: #888;
  text-align: center;
  transition: background .15s, color .15s;
  line-height: 1.4;
}

.sw-big.on {
  background: #111;
  color: #fff;
}

.sw-big:active {
  transform: scale(.97);
}

.sw-big-hint {
  font-size: 11px;
  font-weight: 600;
  color: #bbb;
  margin-top: 4px;
  display: block;
}

.sw-big.on .sw-big-hint {
  color: rgba(255,255,255,.55);
}

/* 등록자 그리드 */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sw-gcell {
  padding: 13px 4px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #f5f5f5;
  color: #888;
  text-align: center;
  transition: background .15s, color .15s;
}

.sw-gcell.on {
  background: #111;
  color: #fff;
}

.sw-gcell:active {
  transform: scale(.95);
}

/* 하단 버튼 */
.sw-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: #fff;
  flex-shrink: 0;
  border-top: 1px solid #f5f5f5;
}

.sw-btn {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s;
}

.sw-btn:active:not(:disabled) {
  transform: scale(.97);
}

.sw-btn-cc {
  background: #f5f5f5;
  color: #999;
}

.sw-btn-sv {
  background: #111;
  color: #fff;
}

.sw-btn-sv:disabled {
  background: #ddd;
  color: #aaa;
  cursor: not-allowed;
}

.sw-footer-single {
  justify-content: flex-start;
}

.sw-btn-back {
  flex: none;
  background: none;
  color: #999;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 4px;
}

/* 기타 직접 입력 */
.sw-input-wrap {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.sw-input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #111;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  background: #fff;
  outline: none;
  caret-color: #111;
}

.sw-input::placeholder {
  color: #ccc;
  font-weight: 500;
}

.sw-input-btn {
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #111;
  color: #fff;
  flex-shrink: 0;
  transition: background .15s;
}

.sw-input-btn:disabled {
  background: #ddd;
  color: #aaa;
  cursor: not-allowed;
}

/* 리뷰 화면 */
.sw-rv-title {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin-bottom: 4px;
}

.sw-rv-desc {
  font-size: 11px;
  color: #999;
  margin-bottom: 14px;
}

.sw-rv-rows {
  display: flex;
  flex-direction: column;
}

.sw-rv-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background .1s;
  border-radius: 4px;
}

.sw-rv-row:last-child {
  border-bottom: none;
}

.sw-rv-row:active {
  background: #fafafa;
}

.sw-rv-label {
  width: 56px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #bbb;
}

.sw-rv-val {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #111;
}

.sw-rv-edit {
  font-size: 10px;
  color: #bbb;
  flex-shrink: 0;
  padding: 4px 8px;
}

.sw-rv-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-rv-qb {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.sw-rv-qb:active {
  transform: scale(.9);
}

.sw-rv-mi {
  background: rgba(0,0,0,.05);
  color: #999;
}

.sw-rv-pl {
  background: #111;
  color: #fff;
}

.sw-rv-qn {
  font-size: 15px;
  font-weight: 800;
  color: #111;
  min-width: 20px;
  text-align: center;
}

/* 모바일: 바텀시트 */
@media (max-width: 599px) {
  .overlay.overlay-item-register {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modal.modal-item-register {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92dvh !important;
  }

  .sw-bar {
    display: block;
  }

  .sw-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sw-q {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .sw-chip {
    padding: 11px 16px;
    font-size: 12px;
    border-radius: 10px;
  }

  .sw-big {
    padding: 18px 14px;
    font-size: 13px;
    border-radius: 12px;
  }

  .sw-big-hint {
    font-size: 10px;
  }

  .sw-gcell {
    padding: 11px 3px;
    font-size: 11px;
  }
}

/* ── stock input modal ── */
.uni-stock-input-form { padding-bottom: 80px; }
.uni-stock-matrix { margin-bottom: 20px; }
.uni-stock-matrix-label { font-size: var(--text-md); font-weight: var(--weight-extrabold); margin: 0 0 8px; }
.uni-stock-matrix-grid { display: grid; grid-template-columns: 60px repeat(3, 1fr); gap: 6px; align-items: center; }
.uni-stock-matrix-header { font-size: var(--text-xs); color: rgba(0,0,0,.4); font-weight: var(--weight-bold); text-align: center; }
.uni-stock-matrix-row-label { font-size: var(--text-sm); color: rgba(0,0,0,.6); font-weight: var(--weight-semibold); }
.uni-stock-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--radius-xs);
  background: var(--color-bg-subtle, #f5f5f5);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  padding: 0 4px;
  box-sizing: border-box;
}
.uni-stock-input::-webkit-outer-spin-button,
.uni-stock-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.uni-stock-input:focus {
  border-color: var(--color-bg-inverse, #111);
  background: var(--color-bg-surface, #fff);
  outline: none;
}
.uni-stock-single-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.uni-stock-single-label { font-size: var(--text-md); font-weight: var(--weight-bold); }
.uni-stock-single-input { width: 80px; }
.uni-stock-input-sticky {
  position: sticky;
  bottom: 0;
  padding: 12px 0;
  background: var(--color-bg-surface, #fff);
  border-top: 1px solid rgba(0,0,0,.06);
  z-index: 10;
}

/* Global: premium transitions & tap highlight */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] {
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* ═══════════════════════════════════════════════════════
   Loading / Skeleton States
   ═══════════════════════════════════════════════════════ */
[data-loading] {
  background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-xs);
  color: transparent !important;
}
[data-loading] * {
  visibility: hidden;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════
   Focus Visible — Keyboard Navigation
   ═══════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid rgba(0,0,0,.2);
  outline-offset: 2px;
}
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   Responsive Font Sizes
   ═══════════════════════════════════════════════════════ */
@media (max-width: 374px) {
  :root {
    --text-2xs: 9px;
    --text-caption: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
  }
}
@media (min-width: 768px) {
  .uni-hero-big {
    font-size: clamp(48px, 6vw, 64px);
  }
  .metric-value {
    font-size: clamp(32px, 4vw, 40px);
  }
  .page-title {
    font-size: clamp(24px, 3vw, 32px);
  }
}

/* ═══════════════════════════════════════════════════════
   Color Accessibility — Coral on White
   ═══════════════════════════════════════════════════════ */
/* #ee6352 on white = ~3.4:1 contrast ratio. Darken for text usage. */
.text-danger,
.record-qty.is-damage,
.inv-grid-dmg:not(.none),
.inv-grid-def.neg,
.rec-summary-val.is-damage {
  color: #d44a3a;
}

/* ═══════════════════════════════════════════════════════
   Micro-interactions — Polish
   ═══════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .action-btn:active:not(:disabled),
  .chip:active,
  .uni-seg-btn:active,
  .inv-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .item-card:active:not(.is-selected) {
    background: rgba(0,0,0,.02);
  }
  .record-row-shell:active {
    background: rgba(0,0,0,.01) !important;
  }
}

/* Tab content fade */
.app-main {
  animation: none;
}
body.app-loaded .app-main > .page-wrap {
  animation: tab-content-fade 0.2s ease both;
}
@keyframes tab-content-fade {
  from { opacity: 0.92; }
  to { opacity: 1; }
}

/* Chip selection bounce */
.chip.is-active,
.uni-seg-btn.is-active {
  animation: chip-select 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes chip-select {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* 드롭다운: body에 fixed로 배치 (stacking context 문제 회피) */

/* ═══════════════════════════════════════════════════════
   Editorial Polish — 등록기록 tab
   ═══════════════════════════════════════════════════════ */

/* 1. Date header — editorial newspaper-section feel */
.record-group-header {
  border-bottom: none !important;
  padding: 16px 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.35) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* 2. Record row — subtle card feel */
.record-row {
  border-radius: 8px !important;
  margin-bottom: 4px !important;
}
.record-row-shell:active {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* 3. Type badge — refined editorial tags */
.record-major-type {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
.record-row.is-damage .record-major-type {
  background: rgba(238, 99, 82, 0.08) !important;
  color: #d44a3a !important;
}
.record-row.is-add .record-major-type {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

/* 4. Quantity number — editorial weight + tabular */
.record-qty {
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.record-qty.is-damage {
  color: #d44a3a !important;
}

/* 5. Monthly summary table — cleaner separators & number alignment */
@media (min-width: 768px) {
  .rec-summary-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  }
  .rec-summary-val {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }
  .rec-summary-val.is-damage {
    color: #d44a3a !important;
  }
}