@import url('/tasks.css');
@font-face {
  font-family:"Receipt Pretendard";
  src:url('/fonts/PretendardVariable.woff2') format('woff2');
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

/* ===== 매장 일지: 맥형TV 원본 디자인 기반 디자인 시스템 ===== */
:root {
  /* Slate Blue & Warm Amber Palette */
  --primary: #2b4356;
  --primary-hover: #1e3140;
  --primary-active: #15242f;
  --primary-light: #f0f4f8;
  --primary-subtle: #e2e8f0;
  --primary-border: #cbd5e1;
  --primary-text: #2b4356;

  /* Warm Amber Accent */
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-light: #fef3c7;
  --accent-subtle: #fffbeb;
  --accent-border: #fde68a;

  /* Hero Slate Card */
  --hero-bg: #2b4356;
  --hero-text: #ffffff;
  --hero-text-muted: #bacbd8;
  --hero-border: #3d5a73;
  --hero-bar-bg: rgba(255, 255, 255, 0.2);
  --hero-bar-fill: #38bdf8;

  /* Surfaces & Backgrounds */
  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-subtle: #f8fafc;

  /* Text & Contrast */
  --text-main: #1e293b;
  --text-heading: #0f172a;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #ffffff;

  /* Borders & Dividers */
  --border-light: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;
  --border-focus: #2b4356;

  /* Status Colors */
  --status-success-bg: #ecfdf5;
  --status-success-text: #065f46;
  --status-success-border: #a7f3d0;
  --status-success-solid: #10b981;

  --status-warn-bg: #fffbeb;
  --status-warn-text: #92400e;
  --status-warn-border: #fde68a;

  --status-danger-bg: #fef2f2;
  --status-danger-text: #991b1b;
  --status-danger-border: #fecaca;

  --status-info-bg: #f0f9ff;
  --status-info-text: #0369a1;
  --status-info-border: #bae6fd;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --line-height: 1.5;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--line-height);
  color: var(--text-main);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, p {
  margin: 0 0 8px;
}

h1 {
  font-size: 22px;
  font-weight: 750;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.015em;
  line-height: 1.35;
}

h3 {
  font-size: 15px;
  font-weight: 650;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.muted, small {
  color: var(--text-muted);
  font-size: 13px;
}

/* Buttons & Inputs */
button, input, select, textarea {
  font-family: inherit;
  font-size: 14px;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  color: var(--text-main);
  padding: 8px 14px;
  min-height: 42px;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
  box-shadow: var(--shadow-xs);
}

button:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-heading);
}

button:active {
  transform: translateY(1px);
}

button.primary,
button[type="submit"] {
  background-color: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(43, 67, 86, 0.25);
}

button.primary:hover,
button[type="submit"]:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

button.primary:active,
button[type="submit"]:active {
  background-color: var(--primary-active);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.btn-dashed, button.btn-dashed {
  background-color: var(--accent-subtle);
  border: 1px dashed var(--accent-border);
  color: var(--accent);
  border-radius: var(--radius-md);
  width: 100%;
  padding: 10px 14px;
  font-weight: 600;
  min-height: 44px;
}

.btn-dashed:hover, button.btn-dashed:hover {
  background-color: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-hover);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  background-color: var(--bg-surface);
  color: var(--text-main);
  min-height: 42px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-xs);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43, 67, 86, 0.15);
}

textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}

input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  box-shadow: none;
}

label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
}

label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

fieldset {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background-color: #fafbfc;
}

legend {
  font-weight: 650;
  font-size: 13px;
  color: var(--text-main);
  padding: 0 6px;
}

/* App Shell Layout */
.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background-color: var(--bg-app);
}

/* Desktop Sidebar */
.sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 800;
  font-size: 19px;
  color: var(--primary);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  padding: 0 4px;
}

.brand small {
  display: block;
  font-size: 11px;
  font-weight: 550;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Desktop Navigation List (Flex column, NOT grid, prevent button stretching) */
.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav button {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  height: auto;
  box-shadow: none;
  justify-content: flex-start;
  transition: all 0.15s ease;
}

.nav button:hover {
  background-color: var(--bg-subtle);
  color: var(--text-heading);
}

.nav button.active {
  background-color: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-subnav {
  margin: 4px 0 8px 12px;
  padding-left: 8px;
  border-left: 2px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-subnav button {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  min-height: 32px;
  height: auto;
  color: var(--text-muted);
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-sm);
  justify-content: flex-start;
}

.sidebar-subnav button:hover {
  background-color: var(--bg-subtle);
  color: var(--text-heading);
}

.sidebar-subnav button.active {
  color: var(--primary);
  font-weight: 700;
  background-color: var(--primary-light);
}

.sr, .mobile-menu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Main Content Area */
.main {
  padding: 24px 28px;
  max-width: 1040px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  align-self: start;
}

#view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.topbar select {
  max-width: 240px;
  font-weight: 600;
  background-color: #fafbfc;
  border-color: var(--border-default);
  min-height: 38px;
}

.topbar .account {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar .account span {
  font-weight: 650;
  color: var(--text-heading);
}

#logout {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-muted);
  border-color: var(--border-light);
  background-color: transparent;
}

#logout:hover {
  background-color: var(--status-danger-bg);
  color: var(--status-danger-text);
  border-color: var(--status-danger-border);
}

/* Page Heading */
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.page-heading h1 {
  margin-bottom: 2px;
}

/* Desktop Home 2-Column Grid */
.home-desktop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* General Grid & Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  align-items: start;
}

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}

.card:hover {
  border-color: var(--border-default);
}

.card h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
}

.card h3 {
  overflow-wrap: anywhere;
}

/* Attendance: aligned desktop rows and compact mobile status cards. */
.card.home-attendance { padding: 26px; border: 1px solid #e3e8ef; border-radius: 20px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: background .5s, border-color .5s; }
.home-attendance form { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.home-attendance-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #eef2f7; color: #2b4257; transition: background .4s; }
.home-attendance-icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.home-attendance-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-attendance-label { color: #6b7280; font-size: 13px; overflow-wrap: anywhere; }
.home-attendance-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.home-attendance h2 { margin: 0; padding: 0; border: 0; color: #111827; font-size: 21px; font-weight: 800; }
.home-attendance [data-attendance-value] { color: #374151; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-attendance .home-attendance-chip { display: flex; align-items: center; gap: 6px; margin: 0; color: #0f6b4a; font-size: 13px; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; }
.home-attendance-chip > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.home-attendance-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
:is(.home-attendance, .attendance-current) .attendance-hold { position: relative; overflow: hidden; min-width: 150px; height: 56px; padding: 0 22px; border: 0; border-radius: 14px; background: #2b4257; color: #fff; font-size: 17px; font-weight: 700; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; box-shadow: 0 2px 6px rgba(43,66,87,.25); }
:is(.home-attendance, .attendance-current) .attendance-hold:active { transform: none; }
.attendance-hold [data-hold-label] { position: relative; }
.attendance-hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--hold-progress, 0%); background: #10965f; }
.home-attendance-hint { color: #8a94a3; font-size: 11px; }
.home-attendance .error { grid-column: 1 / -1; margin: 0; }
.home-attendance .error:empty { display: none; }
.card.home-attendance.is-working { background: #f3fbf7; border-color: #bfe6d3; }
.home-attendance.is-working .home-attendance-icon { background: #d9f3e6; color: #0f6b4a; }
.home-attendance.is-working h2 { color: #0f6b4a; }
:is(.home-attendance, .attendance-current).is-working .attendance-hold-fill { background: #b45309; }
.card.home-attendance.is-done { background: #f7f8fa; border-color: #e3e8ef; }
.home-attendance.is-done .home-attendance-icon { background: #e9edf2; color: #6b7280; }
.home-attendance.is-done h2 { color: #374151; }
.home-attendance.is-done .home-attendance-chip { color: #6b7280; }
:is(.home-attendance, .attendance-current).is-done .attendance-hold { background: #6b7a8c; }
.home-attendance.needs-attention h2, .home-attendance.needs-attention .home-attendance-chip { color: #b45309; }
@media (max-width: 600px) {
  .card.home-attendance { padding: 20px; }
  .home-attendance form { grid-template-columns: 44px minmax(0, 1fr); gap: 16px 14px; }
  .home-attendance-icon { width: 44px; height: 44px; }
  .home-attendance-action { grid-column: 1 / -1; align-items: stretch; }
  .home-attendance-hint { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .card.home-attendance, .home-attendance-icon { transition: none; }
}
/* Attendance design: date groups, compact sessions, and the shared home hold button. */
.attendance-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--border-light); border-radius: 50%; background: var(--bg-app); color: var(--primary-text); font-size: 14px; font-weight: 650; }
.attendance-status { display: inline-flex; align-items: center; justify-self: start; gap: 6px; border-radius: var(--radius-pill); padding: 5px 9px; font-size: 12px; font-weight: 650; line-height: 1.5; white-space: nowrap; background: var(--attendance-tint); color: var(--attendance-color); }
.attendance-status > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
body:has(.attendance-page) { background: #f1f4f8; }
.attendance-page { max-width: 920px; margin: 0 auto; padding: 14px 0 60px; display: flex; flex-direction: column; gap: 20px; color: #111827; font-family: 'Receipt Pretendard', Pretendard, sans-serif; line-height: 1.5; }
.attendance-page button, .attendance-correction-dialog button { font-family: inherit; letter-spacing: normal; box-shadow: none; }
.attendance-page-heading { display: flex; flex-direction: column; gap: 6px; }
.attendance-page-heading h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.attendance-page-heading p { margin: 0; color: #6b7280; font-size: 14px; }
.attendance-current, .attendance-history { background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; }
.attendance-current { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.attendance-current-label { font-size: 13px; font-weight: 600; color: #6b7280; }
.attendance-current form { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.attendance-current-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.attendance-current-info h2 { margin: 0; font-size: 20px; font-weight: 700; }
.attendance-current-info p { margin: 0; font-size: 14px; color: #6b7280; }
.attendance-current-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: #6b7280; font-variant-numeric: tabular-nums; }
.attendance-current-status .attendance-live-status { padding: 4px 10px; border-radius: 999px; background: #e7f6ef; }
.attendance-current-status .attendance-live-status.is-missing { background: #fef3c7; }
.attendance-current-elapsed { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.attendance-current-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.attendance-current .attendance-correct-current { height: 56px; padding: 0 18px; border-radius: 12px; border: 1px solid #d6dce5; color: #111827; background: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.attendance-current .error { flex-basis: 100%; margin: 0; }
.attendance-current .error:empty { display: none; }
.attendance-current-note { margin: 0; padding-top: 14px; border-top: 1px solid #eef1f5; color: #6b7280; font-size: 13px; }
.attendance-history { container-type: inline-size; overflow: hidden; }
.attendance-history-heading { padding: 22px 28px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.attendance-history-heading h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.attendance-history-heading p { margin: 0; font-size: 13px; color: #6b7280; }
.attendance-filters { display: flex; padding: 3px; background: #f1f4f8; border-radius: 10px; gap: 2px; }
.attendance-filters button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; color: #6b7280; background: transparent; font-size: 13px; font-weight: 600; }
.attendance-filters button[aria-pressed=true] { color: #111827; background: #fff; box-shadow: 0 1px 2px #00000014; }
.attendance-columns, .attendance-row { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 110px 96px; gap: 16px; align-items: center; }
.attendance-columns { padding: 10px 28px 10px 48px; background: #f8fafc; border-block: 1px solid #e5e9f0; color: #8a94a3; font-size: 12px; font-weight: 600; }
.attendance-columns > :nth-child(3) { text-align: right; }
.attendance-day { margin: 0; border: 0; border-bottom: 1px solid #e5e9f0; padding: 0; border-radius: 0; background: #fff; }
.attendance-day:last-child { border-bottom: 0; }
.attendance-day > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 14px 28px; color: #111827; background: #fff; cursor: pointer; list-style: none; }
.attendance-day > summary::-webkit-details-marker { display: none; }
.attendance-day > summary:hover { background: #fafbfd; }
.attendance-day-chevron { color: #8a94a3; font-size: 10px; width: 10px; flex-shrink: 0; transition: transform .15s; }
.attendance-day[open] > summary .attendance-day-chevron { transform: rotate(90deg); }
.attendance-day-label { font-size: 15px; font-weight: 700; }
.attendance-day-summary { margin-left: auto; color: #6b7280; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attendance-day-rows { padding-bottom: 6px; }
.attendance-entry { padding: 10px 28px 10px 48px; }
.attendance-entry:hover { background: #f8fafc; }
.attendance-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.attendance-person h3 { min-width: 0; margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.attendance-self { padding: 2px 6px; border-radius: 4px; background: #eef1f5; color: #475569; font-size: 11px; font-weight: 600; white-space: nowrap; }
.attendance-sessions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.attendance-session { min-width: 0; }
.attendance-session-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.attendance-session time { font-weight: 500; white-space: nowrap; }
.attendance-dash, .attendance-session-duration { color: #8a94a3; }
.attendance-session-duration { font-size: 13px; }
.attendance-live-status { display: inline-flex; align-items: center; gap: 5px; color: #047857; font-size: 13px; font-weight: 600; }
.attendance-live-status::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #10b981; }
.attendance-live-status.is-missing, .attendance-total.is-missing { color: #b45309; }
.attendance-live-status.is-missing::before { background: currentColor; }
.attendance-tag { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.4; }
.attendance-next-day { color: #6b7280; background: #eef1f5; }
.attendance-tag.attendance-long, .attendance-tag.attendance-unrecorded { color: #b45309; background: #fef3c7; }
.attendance-pending { color: #7c3aed; background: #f1ebfe; }
.attendance-today { color: #1d4ed8; background: #e8eefc; font-weight: 700; }
.attendance-total { color: #111827; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.attendance-total.is-working { color: #047857; }
.attendance-total.is-working.is-missing { color: #b45309; }
.attendance-row-actions { display: flex; justify-content: flex-end; }
.attendance-row-actions button { min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #d6dce5; color: #374151; background: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.attendance-corrections { margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; overflow-wrap: anywhere; }
.attendance-corrections > summary { min-height: 32px; align-content: center; color: #64748b; font-size: 11px; cursor: pointer; }
.attendance-corrections h4 { margin: 10px 0 4px; }
.attendance-corrections .card { margin: 8px 0; padding: 10px; }
.attendance-corrections .card h2 { font-size: 13px; }
.attendance-corrections .record { padding: 10px 0; }
.attendance-corrections .actions button { padding: 6px 8px; font-size: 12px; }
.attendance-correction-dialog { width: calc(100vw - 40px); max-width: 440px; max-height: calc(100dvh - 40px); border: 0; border-radius: 16px; padding: 24px; color: #111827; font-family: 'Receipt Pretendard', Pretendard, sans-serif; box-shadow: 0 20px 50px #0f172a33; }
.attendance-correction-dialog h2 { margin: 0 0 4px; padding: 0; border: 0; font-size: 18px; font-weight: 700; }
.attendance-correction-dialog .fields { display: flex; flex-direction: column; gap: 18px; }
.attendance-dialog-note { margin: 0; color: #6b7280; font-size: 13px; }
.attendance-record-options { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.attendance-record-options legend { padding: 0; margin-bottom: 8px; color: #374151; font-size: 13px; font-weight: 600; }
.attendance-record-options label { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 14px; gap: 4px; border: 1px solid #d6dce5; border-radius: 10px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.attendance-record-options label:has(:checked) { border-color: #1d4ed8; box-shadow: inset 0 0 0 1px #1d4ed8; background: #f3f6fe; }
.attendance-record-options label:focus-within { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.attendance-record-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.attendance-record-options small { color: #8a94a3; font-size: 12px; }
.attendance-correction-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.attendance-correction-dialog label { min-width: 0; color: #374151; font-size: 13px; font-weight: 600; }
.attendance-correction-dialog input:not([type=radio]), .attendance-correction-dialog textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #d6dce5; border-radius: 10px; color: #111827; background: #fff; font: 500 15px 'Receipt Pretendard', sans-serif; box-shadow: none; }
.attendance-correction-dialog textarea { min-height: 84px; font-size: 14px; font-weight: 400; resize: vertical; }
.attendance-correction-dates { margin: -8px 0 0; padding: 0; border: 0; font-size: 12px; color: #6b7280; }
.attendance-correction-dates summary { min-height: 32px; align-content: center; cursor: pointer; }
.attendance-correction-dates p { margin: 8px 0 0; }
.attendance-correction-dialog .actions { margin-top: 18px; justify-content: flex-end; gap: 8px; }
.attendance-correction-dialog .actions button { min-height: 44px; padding: 0 16px; border: 1px solid #d6dce5; border-radius: 10px; background: #fff; color: #111827; font-size: 14px; }
.attendance-correction-dialog .actions button[type=submit] { border: 0; background: #243447; color: #fff; }
.attendance-correction-dialog .actions button:disabled { background: #c3cad4; opacity: 1; }
.attendance-correction-dialog .error:empty { display: none; }
@container (max-width: 720px) {
  .attendance-columns, .attendance-row { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) 90px 72px; gap: 12px; }
  .attendance-entry, .attendance-columns { padding-left: 36px; padding-right: 20px; }
  .attendance-history-heading, .attendance-day > summary { padding-left: 20px; padding-right: 20px; }
}
@container (max-width: 540px) {
  .attendance-history-heading { padding: 18px 16px 14px; }
  .attendance-columns { display: none; }
  .attendance-day:first-child { border-top: 1px solid #e5e9f0; }
  .attendance-day > summary { gap: 6px; padding: 12px 16px; }
  .attendance-day-label { font-size: 14px; }
  .attendance-day-summary { font-size: 12px; }
  .attendance-entry { padding: 12px 16px 12px 32px; }
  .attendance-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .attendance-person { grid-column: 1; grid-row: 1; }
  .attendance-total { grid-column: 2; grid-row: 1; max-width: 110px; font-size: 14px; }
  .attendance-sessions { grid-column: 1 / -1; grid-row: 2; }
  .attendance-row-actions { grid-column: 2; grid-row: 3; }
  .attendance-row-actions:empty { display: none; }
  .attendance-row-actions button { min-height: 36px; }
  .attendance-session-times { font-size: 14px; }
}
@media (max-width: 600px) {
  .attendance-page { padding-top: 8px; }
  .attendance-current { padding: 20px; }
  .attendance-current form { flex-direction: column; align-items: stretch; gap: 16px; }
  .attendance-current-actions { flex-wrap: nowrap; }
  .attendance-current-actions .home-attendance-action { flex: 1; min-width: 0; }
  .attendance-current .attendance-hold { width: 100%; min-width: 0; padding: 0 12px; }
  .attendance-current .attendance-correct-current { padding: 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .attendance-day-chevron { transition: none; }
}
@media (max-width: 380px) {
  .attendance-correction-times { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Slate Hero Card (mac-278, mac-285) ===== */
.hero-card {
  background-color: var(--hero-bg);
  color: var(--hero-text);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.hero-status-label {
  font-size: 12.5px;
  color: var(--hero-text-muted);
  font-weight: 500;
  margin-bottom: 2px;
}

.hero-status-title {
  font-size: 20px;
  font-weight: 750;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.hero-shield-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}

.hero-progress-section {
  margin-bottom: 18px;
}

.hero-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.hero-progress-title {
  font-size: 13px;
  color: var(--hero-text-muted);
}

.hero-progress-numbers {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hero-progress-ratio {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}

.hero-progress-percent {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-light);
}

.hero-progress-bar-track {
  width: 100%;
  height: 6px;
  background-color: var(--hero-bar-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.hero-progress-bar-fill {
  height: 100%;
  background-color: var(--hero-bar-fill);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px;
  gap: 12px;
}

.hero-stat-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.hero-stat-col:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 12px;
}

.hero-stat-info {
  display: flex;
  flex-direction: column;
}

.hero-stat-label {
  font-size: 12px;
  color: var(--hero-text-muted);
}

.hero-stat-value {
  font-size: 17px;
  font-weight: 750;
  color: #ffffff;
}

.hero-stat-arrow {
  color: var(--hero-text-muted);
  font-size: 16px;
}

.hero-action-btn {
  width: 100%;
  background-color: var(--primary);
  color: #ffffff;
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-md);
  padding: 11px 18px;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 16px;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hero-action-btn:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary);
  color: #ffffff;
}

.home-staff-attendance .hero-header { align-items: flex-start; gap: 12px; }
.home-staff-attendance h2 { margin: 0 0 6px; }
.home-staff-total { margin: 4px 0 0; font-size: 12px; color: var(--hero-text-muted); }
.home-staff-refresh { min-height: 44px; padding: 8px 12px; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); font-size: 12px; flex-shrink: 0; }
.home-staff-refresh:hover { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.home-staff-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid rgba(255,255,255,.14); padding: 14px 0 18px; }
.home-staff-counts > span { font-size: 11px; color: var(--hero-text-muted); }
.home-staff-counts strong { display: block; margin-top: 4px; font-size: 18px; color: #fff; }
.home-staff-counts .has-missing, .home-staff-counts .has-missing strong { color: #fde68a; }
.home-staff-list { padding: 0 14px; border-radius: 12px; background: var(--bg-surface); color: var(--text-main); }
.home-staff-row { --attendance-color: #047857; --attendance-tint: #ecfdf5; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 0; }
.home-staff-row + .home-staff-row { border-top: 1px solid var(--border-light); }
.home-staff-row.attendance-done { --attendance-color: #1d4ed8; --attendance-tint: #eff6ff; }
.home-staff-row.attendance-missing { --attendance-color: #92400e; --attendance-tint: #fffbeb; }
.home-staff-row.attendance-unrecorded { --attendance-color: #64748b; --attendance-tint: #f1f5f9; }
.home-staff-row .attendance-avatar { width: 32px; height: 32px; }
.home-staff-person { min-width: 0; }
.home-staff-person h3 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.home-staff-person h3 small { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 400; color: var(--text-muted); }
.home-staff-person p { margin: 4px 0 0; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.home-staff-row .attendance-status { font-size: 11px; padding: 4px 7px; gap: 4px; }
.home-staff-note { margin: 12px 0 0; font-size: 10px; color: var(--hero-text-muted); }
.home-staff-empty { margin: 0; padding: 22px 0; text-align: center; font-size: 13px; color: var(--text-muted); }
@media (max-width: 400px) {
  .home-staff-list { padding: 0 10px; }
  .home-staff-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .home-staff-row .attendance-avatar { display: none; }
  .home-staff-person h3 small { display: block; margin: 2px 0 0; }
}

/* Operational Metric Breakdown Cards (Real Status, No Fake Open/Close) */
.progress-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.progress-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
}

.progress-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.progress-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.progress-card-ratio {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-heading);
}

.progress-card-arrow {
  color: var(--text-dim);
  font-size: 14px;
}

/* Section Header Links */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-header-row h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  border: none;
  padding: 0;
}

.section-header-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px 4px;
  min-height: auto;
  cursor: pointer;
}

.section-header-link:hover {
  text-decoration: underline;
  background: transparent;
}

/* ===== Tasks Accordion (mac-310) ===== */
.tasks-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}

.task-item.active {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.task-item-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-color: var(--bg-surface);
  user-select: none;
  width: 100%;
  border: none;
  box-shadow: none;
  text-align: left;
}

.task-item-header:hover {
  background-color: var(--bg-surface-hover);
}

.task-item-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.task-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.task-chevron {
  color: var(--text-dim);
  font-size: 12px;
  transition: transform 0.2s ease;
}

.task-item.active .task-chevron {
  transform: rotate(180deg);
}

.task-item-body {
  padding: 12px 16px 18px;
  border-top: 1px solid var(--border-light);
  background-color: #ffffff;
}

/* Secondary Sub-navigation Pills (Used on Mobile & Quick Record) */
.subnav-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}

.subnav-pill {
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background-color: var(--bg-surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  min-height: 34px;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.subnav-pill:hover {
  background-color: var(--bg-subtle);
  color: var(--text-heading);
}

.subnav-pill.active {
  background-color: var(--primary);
  color: var(--text-inverse);
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(43, 67, 86, 0.3);
}

/* Management Hub Grid (mac-415) */
.mgmt-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.mgmt-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
  text-align: left;
  min-height: 70px;
  width: 100%;
}

.mgmt-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mgmt-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: #f1f5f9;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.mgmt-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mgmt-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.mgmt-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 400;
}

/* Business Day History List in Mgmt */
.business-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.business-day-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.business-day-info h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 2px;
}

.business-day-info p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* Form Container & Toggles */
.form-toggle-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

form[data-form="taskDate"] { max-width: 100%; }
form[data-form="taskDate"] input { min-width: 0; }
form[data-form="taskDate"] button { flex-shrink: 0; white-space: nowrap; }

.collapsible-form {
  margin-bottom: 18px;
}

.form-card {
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

.form-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.form-card-header h2 {
  border: none;
  padding: 0;
  margin: 0;
}

.btn-close {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color: var(--text-muted);
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}

.btn-close:hover {
  color: var(--text-heading);
  background: transparent;
}

/* Modal Dialog */
dialog {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  box-shadow: var(--shadow-lg);
  max-width: 540px;
  width: 90vw;
  background-color: var(--bg-surface);
}

dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

dialog h2 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

/* Fields & Forms */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}

.full {
  grid-column: 1 / -1;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.error {
  color: var(--status-danger-text);
  background-color: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px;
  white-space: pre-wrap;
  font-weight: 500;
}

.error:empty {
  display: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 650;
  margin: 1px 3px 1px 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.badge-success {
  background-color: var(--status-success-bg);
  color: var(--status-success-text);
  border-color: var(--status-success-border);
}

.badge-danger {
  background-color: var(--status-danger-bg);
  color: var(--status-danger-text);
  border-color: var(--status-danger-border);
}

.badge-warning {
  background-color: var(--status-warn-bg);
  color: var(--status-warn-text);
  border-color: var(--status-warn-border);
}

.badge-info {
  background-color: var(--status-info-bg);
  color: var(--status-info-text);
  border-color: var(--status-info-border);
}

.urgent {
  background-color: var(--status-danger-bg) !important;
  border: 1px solid var(--status-danger-border) !important;
}

/* Records */
.list {
  display: grid;
  gap: 10px;
}

.record {
  border-top: 1px solid var(--border-light);
  padding: 14px 0;
  overflow-wrap: anywhere;
}

.record:first-child {
  border-top: 0;
  padding-top: 2px;
}

.record.urgent {
  padding: 12px;
  border-radius: var(--radius-md);
}

.record p {
  margin: 4px 0;
  white-space: pre-wrap;
}

/* Keep each label beside its value, including wrapped descriptions. */
dl {
  display: grid;
  grid-template-columns: minmax(72px, 30%) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.6;
}

dt { color: var(--text-muted); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13.5px;
  background-color: #fafbfc;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
}

/* KPI Summary Metrics */
.summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.metric {
  flex: 1;
  min-width: 120px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.metric strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
  letter-spacing: -0.03em;
}

/* Login Page */
.login {
  max-width: 400px;
  margin: 10vh auto;
  padding: 32px 26px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}

.login .brand {
  margin-bottom: 18px;
  padding: 0;
}

.login .fields {
  grid-template-columns: 1fr;
}

.login h1 {
  margin: 16px 0 6px;
  font-size: 22px;
}

.hint {
  font-size: 12.5px;
  padding: 10px 12px;
  background-color: var(--primary-light);
  color: var(--text-muted);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 10px 0;
}

/* Table Wrappers */
.table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

th, td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
}

.receipt-table th, .receipt-table td { vertical-align: top; }
.receipt-table th { word-break: keep-all; }
.receipt-table td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-table th:nth-child(n+3), .receipt-table td:nth-child(n+3) { text-align: right; }

@media (max-width: 768px) {
  .receipt-table th, .receipt-table td { padding: 8px 6px; }
}

th {
  background-color: #fafbfc;
  font-weight: 650;
  color: var(--text-heading);
}

tr:last-child td {
  border-bottom: none;
}

/* Toast */
#toast:not(:empty) {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: rgba(30, 41, 59, 0.95);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 1000;
  animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastIn {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

/* User Profile Chip & Role Badges */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12.5px;
}

.badge-owner {
  background-color: #f5f3ff;
  color: #5b21b6;
  border-color: #ddd6fe;
}

.badge-manager {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.badge-employee {
  background-color: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

/* Store Cards in Owner Overview */
.card.store-summary-card {
  border-left: 4px solid var(--primary);
}

.store-record {
  background: #fafbfc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 8px 0;
}

.store-record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.store-record-header h3 {
  margin: 0;
  color: var(--primary);
}

/* Onboarding & Installation Banner */
.card.onboarding-card {
  background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
  border: 1px solid var(--primary-subtle);
  padding: 16px 20px;
  margin-top: 18px;
}

.card.onboarding-card h2 {
  font-size: 15px;
  color: var(--primary);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 4px;
}

.card.onboarding-card p {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.card.onboarding-card button {
  min-height: 36px;
  padding: 5px 12px;
  font-size: 12.5px;
  background-color: #ffffff;
  border-color: var(--border-default);
}

/* Mobile Bottom Navigation Bar */
.bottom-nav {
  display: none;
}

/* Document OCR Evidence Coordinates */
.analysis-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin:1rem 0}
.analysis-image{position:relative;width:100%;line-height:0}
.analysis-image img{width:100%;height:auto;display:block}
.analysis-image svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.analysis-image polygon{stroke-width:2;vector-effect:non-scaling-stroke}
.analysis-image polygon.value{fill:#ffd44966;stroke:#aa7600}
.analysis-image polygon.context{fill:#73bafa44;stroke:#1763a6}
.analysis-grid > *{min-width:0}
.analysis-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.analysis-field-group{margin-bottom:1rem}
.analysis-field-group h3{font-size:.95rem;margin:0 0 .6rem}
.analysis-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem;padding:.75rem;background:var(--bg-subtle);border:1px solid var(--border-light);border-radius:var(--radius-md);min-width:0}
.analysis-field-name,.analysis-field .check{grid-column:1/-1;color:var(--text-muted);font-size:.8rem}
.analysis-field strong{overflow-wrap:anywhere}
.analysis-field button{padding:.3rem .45rem;min-height:36px}
.analysis-review-badge{grid-column:1/-1;color:var(--status-warn-text);font-size:.75rem}
[data-analysis-actions]{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
[data-analysis-actions] > p{flex-basis:100%}
.analysis-field button{font-size:.85rem}
.analysis-status{font-weight:700;padding:.7rem 0}
.receipt-entry-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.receipt-entry-heading h3,.receipt-entry-heading p{margin:0}
.receipt-entry-heading button{flex-shrink:0}
.receipt-upload{padding:1.5rem;border:1.5px dashed var(--primary-border);border-radius:var(--radius-lg);background:var(--primary-light);text-align:center}
.receipt-upload .hint{margin:.4rem 0 1rem;padding:0;border:0;background:none}
.receipt-upload-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:640px;margin:auto}
.receipt-file-action{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);font-weight:600;cursor:pointer;overflow:hidden}
.receipt-file-action:hover{border-color:var(--primary);background:var(--bg-surface-hover)}
.receipt-file-action:focus-within{outline:2px solid var(--border-focus);outline-offset:3px}
.receipt-file-action input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.receipt-upload .receipt-file-name{margin:1rem 0 0;overflow-wrap:anywhere}
.orientation-controls{margin-top:1rem}
.orientation-stage{position:relative;border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;background:var(--primary-subtle)}
.orientation-preview{height:clamp(320px,55vh,560px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.orientation-preview img{max-width:none;max-height:none;object-fit:contain;flex:none}
.orientation-rotate{display:grid;place-items:center;position:absolute;top:1rem;right:1rem;width:48px;height:48px;padding:0;border-radius:50%;font-size:1.8rem;background:var(--bg-surface);box-shadow:var(--shadow-md)}
.orientation-angle{position:absolute;bottom:.75rem;right:1rem;background:var(--primary);color:white;border-radius:var(--radius-pill);padding:.2rem .65rem;font-size:.8rem}
.orientation-confirm{padding:1rem;margin-top:.75rem;background:var(--accent-subtle);border:1px solid var(--accent-border);border-radius:var(--radius-md);font-weight:600}
.orientation-confirm:has(input:checked){background:var(--status-success-bg);border-color:var(--status-success-border)}
.card.receipt-list{margin-top:2rem;padding:1.5rem;background:var(--primary-light);border-top:3px solid var(--primary-border)}
.receipt-list .record{background:var(--bg-surface);border-radius:var(--radius-md);padding:1rem}
@media(max-width:600px){
 .receipt-entry-heading{align-items:flex-start;flex-direction:column}
 .receipt-upload{padding:1rem}
 .receipt-file-action{font-size:.85rem;padding:.6rem}
 .analysis-field{grid-template-columns:minmax(0,1fr);padding:.6rem}
 .analysis-field button{justify-self:start}
 .card.receipt-list{padding:1rem}
}
.analysis-review{border-top:1px solid #ddd;margin-top:1rem;padding-top:1rem}
dialog:has(.analysis-review){max-width:1100px;width:95vw}
@media(max-width:760px){
  .analysis-grid{grid-template-columns:1fr}
  .analysis-image{max-height:none}
}

/* ===== Mobile Responsive (<= 768px, specifically 390px) ===== */
@media (max-width: 768px) {
  .shell {
    grid-template-columns: 1fr;
    padding-bottom: 70px; /* Space for bottom nav */
  }

  .sidebar {
    display: none; /* Mobile hides sidebar, uses bottom navigation */
  }

  .main {
    padding: 14px;
    max-width: 100%;
  }

  /* Two-row mobile topbar: stable, no vertical name breaking */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
  }

  .topbar label {
    width: 100%;
  }

  .topbar select {
    max-width: 100%;
    width: 100%;
    font-size: 13.5px;
    min-height: 38px;
  }

  .topbar .account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .topbar .account .user-chip {
    white-space: nowrap;
    font-size: 12px;
    padding: 3px 8px;
  }

  #logout {
    white-space: nowrap;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
  }

  .card {
    padding: 14px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
  }

  .hero-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
  }

  .hero-status-title {
    font-size: 18px;
  }

  .hero-progress-ratio {
    font-size: 18px;
  }

  .fields {
    grid-template-columns: 1fr;
  }

  .login {
    margin: 6vh 12px;
    padding: 22px 16px;
  }

  h1 {
    font-size: 20px;
  }

  .summary {
    gap: 8px;
  }

  .metric {
    padding: 10px 12px;
    min-width: 90px;
  }

  .metric strong {
    font-size: 20px;
  }

  .mgmt-hub-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .progress-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .progress-card {
    padding: 12px;
  }

  /* Fixed 5-Tab Bottom Navigation Bar */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding: 2px 4px env(safe-area-inset-bottom, 2px);
    justify-content: space-around;
    align-items: center;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 2px;
    min-height: 48px;
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: all 0.15s ease;
  }

  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bottom-nav-item.active {
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
  }

  .bottom-nav-item.active svg {
    stroke: var(--primary);
  }

  #toast:not(:empty) {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 70px;
    width: calc(100vw - 32px);
    text-align: center;
  }
}

/* Complete agy's slate cards and five-category layout with progressive disclosure. */
[hidden] { display: none !important; }
.category-subnav { display: none; }
.home-focus, .home-priority { min-width: 0; }
.home-priority { margin-bottom: 0; }
.hero-total { font-size: .75em; font-weight: 500; color: #d3dfe8; }
.hero-shield-icon svg, .home-shortcuts svg, .task-icon svg, .mgmt-card-icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
button.hero-stat-col {
  border: 0; border-radius: 0; background: transparent; color: var(--hero-text);
  text-align: left; box-shadow: none; min-height: 48px;
}
button.hero-stat-col:first-child { border-right: 1px solid var(--hero-border); }
button.hero-stat-col:hover { background: rgba(255,255,255,.06); }
.hero-stat-info, .hero-stat-label, .hero-stat-value { display: block; }
.hero-action-btn { display: flex; align-items: center; justify-content: space-between; }
.home-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-shortcuts button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; text-align: left; font-size: 13px; }
.home-shortcuts svg { color: var(--accent); width: 18px; height: 18px; }
.priority-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.priority-section-heading h3 { font-size: 12px; color: var(--text-muted); font-weight: 500; margin: 0; }
.priority-section-heading button { min-height: 38px; }
.priority-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.priority-row:last-child { border-bottom: 0; }
.priority-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.45; }
.priority-title small { display: block; font-size: 11px; font-weight: 400; margin-top: 3px; }
.priority-row .badge { white-space: nowrap; flex-shrink: 0; font-size: 10px; }
.compact-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; margin: 0; }
.home-stores { margin-top: 18px; }
.home-stores > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.home-stores > summary strong { font-size: 14px; }
.form-disclosure > summary, .record-disclosure > summary, .home-stores > summary { cursor: pointer; list-style: none; }
.form-disclosure > summary::-webkit-details-marker, .record-disclosure > summary::-webkit-details-marker, .home-stores > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::after, .record-disclosure > summary::after, .home-stores > summary::after { content: '⌄'; color: var(--text-muted); margin-left: auto; padding-left: 8px; }
.form-disclosure[open] > summary::after, .record-disclosure[open] > summary::after, .home-stores[open] > summary::after { content: '⌃'; }
.form-disclosure { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); margin: 12px 0; padding: 0; }
.form-disclosure.card { padding: 0; margin: 0 0 16px; }
.form-disclosure > summary { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--primary); }
.form-disclosure[open] > summary { border-bottom: 1px solid var(--border-light); }
.disclosure-body { padding: 16px; }
.home-stores .disclosure-body { padding: 16px 0 0; }
.record-disclosure { background: transparent; border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0; margin: 0; padding: 0; }
.record-disclosure:last-child { border-bottom: 0; }
.record-disclosure > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; min-height: 56px; }
.record-disclosure > summary h3 { margin: 0; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.record-disclosure > summary .badge { flex-shrink: 0; }
.record-body { padding: 2px 0 18px; }
.record-body > p { white-space: pre-wrap; }
.assignment-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.assignment-badges .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.notice-body { white-space: pre-wrap; }
summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: 4px; }
.task-icon { display: inline-flex; color: var(--accent); }
.task-item-title-group > div { min-width: 0; }
.task-item-title { white-space: normal; }
.task-item-meta { margin-left: 12px; }
.mgmt-card-icon { color: var(--accent); background: var(--accent-subtle); }

@media (max-width: 768px) {
  .home-desktop-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .category-subnav { display: flex; }
  .home-priority { margin-bottom: 0; }
  .home-stores { margin-top: 14px; }
  .home-stores > summary .muted { font-size: 12px; }
  .home-shortcuts button { padding: 10px; min-height: 44px; }
  .priority-row { gap: 8px; }
  .task-item-header { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .task-item-title-group { flex-basis: 100%; }
  .task-item-meta { margin-left: 30px; }
  .task-item-meta .badge { font-size: 10px; }
  .task-item-title { font-size: 14px; }
  .task-item-title-group p { font-weight: 400; }
  .form-toggle-bar { flex-wrap: wrap; }
  .record-disclosure > summary { gap: 8px; }
  .record-disclosure > summary h3 { font-size: 14px; }
  .mgmt-card { padding: 14px; }
  .mgmt-card-icon { width: 32px; height: 32px; }
  .mgmt-card-title { overflow-wrap: anywhere; }
  .bottom-nav { height: calc(60px + env(safe-area-inset-bottom)); }
  .shell { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 768px) {
  .category-subnav { flex-wrap: wrap; overflow-x: visible; }
  #task-filter-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #task-filter-pills button { min-width: 0; text-align: center; justify-content: center; }
}

/* Discount ledger — supplied 할인 내역 design. */
.discount-page { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; color: #1c2733; }
.discount-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.discount-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.discount-header p { font-size: 14px; color: #5b6b7b; margin: 0; text-wrap: pretty; }
.discount-header > div { flex: 1 1 400px; }
.discount-header > button { min-height: 48px; border-radius: 12px; padding: 0 20px; white-space: nowrap; box-shadow: 0 2px 6px #2b405540; }
.discount-page .primary { background: #2b4055; border-color: #2b4055; }
.discount-page .primary:hover { background: #1f3143; }
.discount-summary { padding: 22px 24px; background: #fff; border: 1px solid #dde3ea; border-radius: 16px; display: flex; flex-direction: column; gap: 16px; }
.discount-summary-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #5b6b7b; font-size: 14px; }
.discount-summary-top > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.discount-summary-top strong { color: #1c2733; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.discount-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #eef2f6; gap: 2px; }
.discount-bar > span { flex-basis: 0; }
.discount-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.discount-dot.event, .discount-bar .event { background: #d98b6a; }
.discount-dot.employee, .discount-bar .employee { background: #609ed2; }
.discount-dot.other, .discount-bar .other { background: #52ad89; }
.discount-breakdown { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; color: #5b6b7b; }
.discount-breakdown > span { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.discount-breakdown b { color: #3b4a59; font-weight: 500; }
.discount-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.discount-filters button { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid #dde3ea; border-radius: 99px; color: #3b4a59; font-size: 14px; font-weight: 500; background: #fff; }
.discount-filters button[aria-pressed=true] { background: #2b4055; border-color: #2b4055; color: white; }
.discount-filters button span { font-size: 12px; opacity: .7; }
.discount-list { background: white; border: 1px solid #dde3ea; border-radius: 16px; overflow: hidden; }
.discount-day > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: #f6f8fa; border-bottom: 1px solid #e6ebf0; font-size: 13px; color: #5b6b7b; font-weight: 500; font-variant-numeric: tabular-nums; }
.discount-record { border-bottom: 1px solid #e6ebf0; }
.discount-day:last-child .discount-record:last-child { border-bottom: 0; }
.discount-record > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 18px 24px; list-style: none; cursor: pointer; }
.discount-record > summary::-webkit-details-marker { display: none; }
.discount-record > summary:hover { background: #f9fbfc; }
.discount-badge { border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.discount-badge.event { background: #fae9e0; color: #8e4b30; }
.discount-badge.employee { background: #e4effa; color: #315f88; }
.discount-badge.other { background: #e2f3eb; color: #28684d; }
.discount-record-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.discount-record-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.discount-record-text small { font-size: 12px; color: #5b6b7b; }
.discount-record-amount { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.discount-record-amount.is-cancelled { text-decoration: line-through; color: #5b6b7b; }
.discount-chevron { color: #5b6b7b; transition: transform .15s; }
.discount-record[open] > summary .discount-chevron { transform: rotate(180deg); }
.discount-record-body { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.discount-record-body dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 16px; padding: 16px 18px; margin: 0; background: #f6f8fa; border-radius: 12px; font-size: 14px; }
.discount-record-body dt { color: #5b6b7b; }
.discount-record-body dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.discount-record-body dd span { color: #5b6b7b; }
.discount-correction { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.discount-correction > span { color: #5b6b7b; font-size: 13px; }
.discount-correction button { white-space: nowrap; }
.discount-empty { padding: 56px 24px; display: flex; align-items: center; flex-direction: column; gap: 12px; text-align: center; }
dialog.discount-composer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; color: #1c2733; box-shadow: 0 20px 60px #141e2a40; overflow: hidden; }
.discount-composer[open] { display: flex; flex-direction: column; }
.discount-composer::backdrop { background: #141e2a66; backdrop-filter: none; }
.discount-composer > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #e6ebf0; flex-shrink: 0; }
.discount-composer h2 { font-size: 19px; font-weight: 800; border: 0; padding: 0; margin: 0; }
.discount-composer [data-close-discount] { width: 44px; height: 44px; padding: 0; background: transparent; border: 0; font-size: 26px; color: #5b6b7b; }
.discount-composer form { display: flex; flex: 1; min-height: 0; flex-direction: column; margin: 0; gap: 0; }
.discount-form-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px; display: flex; flex-direction: column; gap: 28px; }
.discount-field { display: flex; flex-direction: column; gap: 10px; }
.discount-field label, .discount-field-label { display: block; font-size: 14px; font-weight: 700; color: #1c2733; }
.discount-field label > span, .discount-field-label > span { color: #b64137; }
.discount-amount-input { display: flex; align-items: center; height: 60px; padding: 0 18px; border: 1.5px solid #cfd8e1; border-radius: 12px; }
.discount-amount-input:focus-within { outline: 2px solid #2b4055; outline-offset: 2px; }
.discount-amount-input input { flex: 1; min-width: 0; width: 0; border: 0; outline: 0; box-shadow: none; padding: 0; font-size: 24px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.discount-amount-input b { font-size: 18px; margin-left: 6px; color: #3b4a59; }
.discount-quick, .discount-suggestions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.discount-quick button { min-height: 32px; padding: 4px 12px; border: 1px solid #dde3ea; border-radius: 8px; background: #f6f8fa; font-size: 13px; color: #3b4a59; }
.discount-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.discount-categories button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1.5px solid #dde3ea; border-radius: 12px; background: white; text-align: left; color: inherit; }
.discount-categories button[aria-pressed=true] { border-color: #2b4055; background: #f2f5f8; }
.discount-categories strong { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.discount-categories small { color: #5b6b7b; font-size: 12px; line-height: 1.4; font-weight: 400; }
.discount-when-label { display: flex; justify-content: space-between; align-items: center; }
.discount-when-label button { border: 0; background: transparent; color: #2b4055; padding: 4px; font-size: 13px; }
.discount-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.discount-when input { min-width: 0; width: 100%; height: 48px; padding: 0 10px; font-size: 15px; }
.discount-field > small { font-size: 13px; color: #5b6b7b; }
.discount-field textarea { width: 100%; min-height: 100px; padding: 12px 14px; border-color: #cfd8e1; border-radius: 10px; font-size: 15px; resize: vertical; }
.discount-suggestions > span { font-size: 12px; color: #5b6b7b; }
.discount-suggestions button { min-height: 30px; padding: 4px 10px; border: 1px solid #dde3ea; border-radius: 99px; background: white; font-size: 13px; color: #3b4a59; }
.discount-composer footer { flex-shrink: 0; padding: 16px 24px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid #e6ebf0; background: #fbfcfd; display: flex; flex-direction: column; gap: 12px; }
.discount-preview { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: #5b6b7b; }
.discount-preview > span { white-space: nowrap; }
.discount-preview output { color: #1c2733; text-align: right; overflow-wrap: anywhere; }
.discount-composer footer .error:empty { display: none; }
.discount-composer footer button { min-height: 52px; width: 100%; border-radius: 12px; font-size: 16px; }
body:has(.discount-composer[open]) { overflow: hidden; }
@media (max-width: 540px) {
  .discount-header h1 { font-size: 26px; }
  .discount-summary { padding: 20px 16px; }
  .discount-day > header { padding: 12px 16px; font-size: 12px; }
  .discount-record > summary { padding: 16px; gap: 8px; }
  .discount-record-amount { font-size: 15px; }
  .discount-record-text strong { font-size: 14px; }
  .discount-record-body { padding: 0 16px 18px; }
  .discount-record-body dl { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .discount-form-body { padding: 20px 16px; }
  .discount-composer > header, .discount-composer footer { padding-left: 16px; padding-right: 16px; }
  .discount-categories button { padding: 12px 8px; }
  .discount-filters button, .discount-quick button, .discount-suggestions button { min-height: 44px; }
}

/* Receipt design 1a with 1c evidence pins. */
dialog.receipt-review-dialog {width:min(540px,100vw);max-width:100vw;height: min(900px,100dvh);max-height:100dvh;padding:0;border:0;border-radius:20px;overflow:hidden;background:#f4f5f7;color:#16181d;}
.receipt-review-dialog > h2 {height:48px;display:flex;align-items:center;gap:2px;margin:0;padding:0 6px;border:0;background:white;font-size:16px;}
.receipt-review-dialog > h2 button {border:0;background:none;width:44px;height:44px;font-size:26px;padding:0;}
.receipt-review-dialog > h2 span {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.receipt-review-dialog > h2 small {background:#eef3fc;color:#2f6fd6;border-radius:6px;padding:4px 8px;font-size:12px;}
.receipt-review-dialog form[data-form=receipt] {display:flex;flex-direction:column;height:calc(100% - 48px);position:relative;gap:0;}
.rr-viewer {position:relative;height:230px;flex:none;background:#101216;overflow:hidden;}
.rr-photo {position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .35s cubic-bezier(.3,.7,.2,1);}
.rr-photo > img {display:block;width:100%;height:100%;max-width:none;}
.rr-pins {position:absolute;inset:0;}
.rr-region {position:absolute;border:1px solid #6ea0f0;background:#6ea0f014;}
.rr-region.is-warning {border-color:#ffb020;background:#ffb02029;}
.rr-region.is-active {border:2px solid #ffcf3f;background:#ffcf3f38;}
.rr-pin {position:absolute;left:100%;top:50%;width:18px;height:18px;min-height:0;padding:0;border:0;border-radius:50%;background:#2f6fd6;color:white;font-size:10px;font-weight:800;transform:translate(var(--pin-offset,0px),-50%) scale(var(--pin-scale,1));transform-origin:0 50%;box-shadow:0 1px 4px #0006;}
.rr-region.is-warning .rr-pin {background:#ffb020;color:#3d2800;}
.rr-pin:focus-visible {outline:3px solid white;outline-offset:2px;}
.rr-caption {position:absolute;left:10px;bottom:10px;max-width:75%;background:#101216cc;color:white;padding:6px 10px;border-radius:8px;font-size:12px;pointer-events:none;}
.rr-viewer > button {position:absolute;top:10px;right:10px;border:1px solid #ffffff44;background:#101216cc;color:white;padding:6px 10px;min-height:36px;font-size:12px;}
.rr-body {flex:1;min-height:0;overflow:auto;padding:12px 14px 16px;overscroll-behavior:contain;}
.rr-summary {display:flex;flex-direction:column;gap:2px;background:#fff1d6;color:#7a4f00;padding:10px 14px;border-radius:12px;margin-bottom:10px;font-size:13px;}
.rr-summary.is-match {background:#e7f5ee;color:#1f5f3e;}
.rr-summary span {font-size:12.5px;opacity:.85;font-variant-numeric:tabular-nums;}
.rr-card {border-radius:14px;overflow:hidden;background:white;margin-bottom:10px;}
.rr-row {display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 16px;border:0;border-bottom:1px solid #eef0f3;border-radius:0;background:white;text-align:left;color:#16181d;}
.rr-row:hover {background:#f1f6fe;}
.rr-row.needs-review {background:#fffaf0;}
.rr-label {width:72px;flex:none;font-size:13.5px;color:#5d6470;}
.rr-value {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:right;font-variant-numeric:tabular-nums;}
.rr-value strong {font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rr-value small {font-size:12.5px;color:#6b717c;}
.rr-row-status {color:#b3b8c1;}
.needs-review .rr-row-status {color:#8a5a00;font-weight:800;}
.rr-items-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px 10px;font-size:14px;}
.rr-items-heading small {font-size:12px;color:#8a909b;}
.rr-add {width:100%;height:50px;border:0;background:white;color:#2f6fd6;border-radius:0;margin:0;font-size:14.5px;font-weight:600;}
.rr-tools {margin:10px 0;font-size:13px;}
.rr-tools > summary {padding:12px;color:#5d6470;cursor:pointer;}
.rr-tools .analysis-grid {display:block;}
.rr-tools .analysis-review {margin:0;padding:10px;}
.rr-footer {flex:none;padding:10px 14px max(28px,env(safe-area-inset-bottom));border-top:1px solid #e3e5ea;background:white;display:flex;flex-direction:column;gap:8px;}
.rr-footer .error:empty {display:none;}
.rr-footer .error {font-size:12px;max-height:80px;overflow:auto;}
.rr-issues {display:flex;overflow-x:auto;gap:6px;}
.rr-issues:empty {display:none;}
.rr-issues button {flex:none;min-height:32px;border-radius:16px;border:1px solid #efd9a6;background:#fff8e8;color:#7a4f00;padding:0 12px;font-size:13px;font-weight:600;}
.rr-confirm {width:100%;height:54px;flex:none;border:0;border-radius:14px;background:#2f6fd6!important;color:white;font-size:16px;font-weight:700;}
.rr-confirm:disabled {background:#e3e6eb!important;color:#6b717c;opacity:1;}
.rr-save-draft {align-self:center;background:none;border:0;padding:0;min-height:28px;font-size:12px;color:#5d6470;text-decoration:underline;}
.rr-sheet {position:absolute;bottom:0;left:0;right:0;z-index:5;max-height:min(560px,calc(100% - 80px));overflow:auto;border-radius:20px 20px 0 0;padding:10px 18px max(30px,env(safe-area-inset-bottom));background:white;box-shadow:0 -10px 30px #0003;}
.rr-handle {width:36px;height:4px;background:#d5d8de;border-radius:2px;margin:0 auto 10px;}
.rr-sheet header {display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rr-sheet header h3 {margin:0;font-size:17px;}
.rr-sheet header button {min-height:36px;padding:4px 12px;background:#f1f2f5;border:0;}
.rr-evidence {font-size:13px;line-height:1.5;color:#5d6470;}
.rr-edit-fields,.rr-control-group {display:grid;grid-template-columns:1fr;gap:12px;width:100%;}
.rr-edit-fields .line {padding:0;border:0;margin:0;width:100%;}
.rr-edit-fields .line .fields {grid-template-columns:1fr 1fr;gap:10px;}
.rr-edit-fields label {font-size:12.5px;min-width:0;}
.rr-edit-fields input,.rr-edit-fields select,.rr-edit-fields textarea {font-size:16px;min-height:50px;border-radius:10px;min-width:0;}
.rr-edit-fields input[type=checkbox] {min-height:20px;}
.rr-sheet > .primary {width:100%;margin-top:12px;background:#2f6fd6;}
.rr-sheet-error {font-size:13px;color:#9b2c2c;}
.rr-sheet-error:empty {display:none;}
.rr-storage[hidden],.rr-sheet[hidden],.rr-viewer[hidden] {display:none!important;}
@media(max-width:600px) {dialog.receipt-review-dialog {inset:0;margin:0;width:100vw;height:100dvh;border-radius:0;} .rr-viewer {height:230px;} }
@media(prefers-reduced-motion:reduce) {.rr-photo {transition:none;}}
.rr-line-options {margin:14px 0;font-size:12px;}
.rr-line-options summary {cursor:pointer;color:#5d6470;padding:8px 0;}
.rr-line-options label {margin:10px 0;}
.rr-pin {min-width:18px;line-height:1;}
.rr-save-draft {border-radius:0;box-shadow:none;}
.rr-save-draft:focus:not(:focus-visible) {background:none;color:#5d6470;}
.receipt-entry > summary {background:#2f6fd6;color:white;border-radius:16px;padding:22px 18px;font-size:17px;}
.receipt-entry > summary::before {content:'◉';margin-right:14px;font-size:24px;}
#new-receipt {display:block;margin:0 auto 12px;border:0;background:none;font-size:13px;color:#5d6470;text-decoration:underline;}
.receipt-list {background:transparent;border:0;box-shadow:none;padding:0;}
.receipt-list > h2 {font-size:13px;color:#5d6470;}
.receipt-list .record {background:white;border:1px solid #e3e5ea;border-radius:14px;margin-bottom:8px;}
.receipt-done {display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 0;}
.receipt-done > span {display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#e7f5ee;color:#1f7a4d;font-size:34px;}
.receipt-done p {text-align:center;color:#5d6470;margin:0;}
.receipt-done button {width:100%;min-height:50px;}
.rr-item-row .rr-label {width:20px;color:#8a909b;font-variant-numeric:tabular-nums;}
.rr-item-row .rr-value {text-align:left;}
.rr-row-amount {font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
.rr-pin {background:#2f6fd6!important;color:#fff!important;}
.rr-region.is-warning .rr-pin {background:#ffb020!important;color:#3d2800!important;}
.rr-summary:not(.is-match) {background:#fdecec;color:#8a2626;}
.rr-adjust-row {display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;}
.rr-adjust-row > label[hidden] {display:none;}
.rr-segments {display:flex;gap:2px;padding:3px;background:#f1f2f5;border-radius:10px;}
.rr-segments button {border:0;background:transparent;color:#6b717c;min-height:42px;padding:0 10px;}
.rr-segments button[aria-pressed=true] {background:white;color:#16181d;box-shadow:0 1px 2px #0002;}
.rr-line-warning {display:flex;flex-direction:column;gap:8px;background:#fdecec;color:#9b2c2c;padding:12px;border-radius:12px;margin-top:12px;font-size:13px;}
.rr-line-warning[hidden] {display:none;}
.rr-line-warning button {background:#9b2c2c;color:white;border:0;}

/* OCR design 1a: preserve its card hierarchy and sheet controls. */
.receipt-review-dialog {font-family:"Receipt Pretendard",Pretendard,system-ui,sans-serif;line-height:normal;}
.receipt-review-dialog button {font-family:inherit;box-shadow:none;letter-spacing:normal;}
.receipt-review-dialog > h2 button {font-size:22px;flex:none;}
.receipt-review-dialog > h2 small {margin-right:10px;font-weight:600;}
.rr-summary > strong {font-size:13.5px;font-weight:600;}
.rr-row:last-child {border-bottom:0;}
.rr-item-row {min-height:64px;padding:10px 16px;gap:10px;}
.rr-item-row .rr-label {font-size:12px;}
.rr-item-row .rr-value strong {font-size:15px;}
.rr-note {color:#7a4f00!important;font-size:11px!important;}
.rr-items-heading {align-items:baseline;}
.rr-extra-label {flex:1;display:flex;flex-direction:column;gap:2px;}
.rr-extra-label strong,.rr-memo strong {font-size:14.5px;font-weight:600;}
.rr-extra-label small {font-size:12px;color:#8a909b;}
.rr-adjust-chip {font-size:12px;font-weight:700;padding:2px 7px;border-radius:5px;background:#e7f5ee;color:#1f7a4d;}
.rr-adjust-chip.needs-review {background:#fff1d6;color:#7a4f00;}
.rr-memo {margin:0;border:0;border-radius:0;background:white;}
.rr-memo > summary {display:flex;gap:10px;align-items:center;min-height:52px;padding:0 16px;list-style:none;cursor:pointer;}
.rr-memo > summary::-webkit-details-marker {display:none;}
.rr-memo > summary span {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:#8a909b;}
.rr-memo > summary::after {content:'⌄';font-size:13px;color:#b3b8c1;}
.rr-memo[open] > summary::after {content:'⌃';}
.rr-memo > .rr-control-group {padding:0 14px 14px;}
.rr-memo label {font-size:0;}
.rr-memo textarea {width:100%;font-size:15px;line-height:1.55;padding:10px 12px;border:1px solid #d5d8de;border-radius:10px;resize:none;}
.rr-shade {position:absolute;inset:0;z-index:4;border:0;border-radius:0;background:rgba(0,0,0,.08);width:100%;height:100%;padding:0;}
.rr-shade:hover {background:rgba(0,0,0,.08);}
.rr-shade[hidden] {display:none!important;}
.rr-sheet header {margin-bottom:12px;}
.rr-sheet header button {height:36px;border-radius:9px;font-size:14px;font-weight:600;}
.rr-evidence {font-size:13px;margin:0 0 12px;}
.rr-edit-fields input,.rr-edit-fields select,.rr-edit-fields textarea {border:1px solid #d5d8de;padding:0 12px;background:white;color:#16181d;}
.rr-edit-fields input:focus {border-color:#2f6fd6;outline-color:#2f6fd6;}
.rr-edit-fields input[type=number] {text-align:right;}
.rr-edit-fields [name=amount] {font-weight:700;}
.rr-sheet[data-kind=field] .rr-edit-fields label {font-size:0;gap:0;}
.rr-sheet[data-kind=field] input {height:56px;font-size:19px;font-weight:600;border:1.5px solid #2f6fd6;border-radius:12px;}
.rr-edit-fields [data-remove-line] {border:0;background:none;color:#9b2c2c;height:40px;font-size:14px;padding:0 4px;}
.rr-save-draft {display:block;margin:12px auto;}
.rr-region {border-radius:2px;}

.receipt-review-dialog .rr-row {font-weight:400;}
.receipt-review-dialog .rr-pin {min-width:18px!important;min-height:18px!important;max-width:18px;max-height:18px;}
.rr-item-row .rr-note {font-size:12.5px!important;font-weight:600;}
.rr-extras > .rr-row {min-height:56px;}
.rr-items-heading {margin-top:-4px;}
.rr-caption {font-size:12.5px;}

#view:has(.receipt-entry) {background:#f4f5f7;}
#view:has(.receipt-entry) > .page-heading h1 {font-size:26px;letter-spacing:-.02em;}
.receipt-entry > summary {display:flex;align-items:center;gap:14px;padding:18px;border:0;list-style:none;}
.receipt-entry > summary::before,.receipt-entry > summary::after {display:none;}
.receipt-entry > summary .receipt-camera-icon {width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}
.receipt-entry > summary > span:last-child {display:flex;flex-direction:column;gap:3px;}
.receipt-entry > summary strong {font-size:17px;font-weight:700;}
.receipt-entry > summary small {font-size:13px;font-weight:400;opacity:.85;}
#new-receipt {display:block;margin:8px auto 14px;border:0;background:none;color:#5d6470;font-size:13.5px;padding:10px;text-decoration:underline;text-underline-offset:3px;box-shadow:none;}
.card.receipt-list {margin-top:16px;padding:0;background:transparent;border:0;box-shadow:none;}
.card.receipt-list > h2 {padding:6px 4px 8px;margin:0;font-size:13px;font-weight:700;color:#5d6470;}
.card.receipt-list .record {padding:0;margin-bottom:8px;border:1px solid #e3e5ea;border-radius:14px;background:white;overflow:hidden;}
.card.receipt-list .record > summary {padding:14px 16px;min-height:64px;display:flex;align-items:center;gap:12px;}
.receipt-record-name {display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.receipt-record-name h3 {margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px!important;font-weight:600;}
.receipt-record-name small {font-size:13px;color:#5d6470;}
.receipt-record-amount {font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.receipt-record-summary:has(.receipt-record-amount) > .badge {display:none;}
.receipt-record-summary::after {display:none!important;}
.card.receipt-list .record-body {padding:0 16px 16px;}

#dialog:has(.receipt-done) {width:min(540px,100vw);height:min(900px,100dvh);max-height:100dvh;padding:0;border:0;background:#fff;}
#dialog:has(.receipt-done) > h2,#dialog:has(.receipt-done) > .actions {display:none;}
.receipt-done {height:100%;padding:0;gap:0;align-items:stretch;}
.receipt-done-message {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;}
.receipt-done-message > span {display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#e7f5ee;color:#1f7a4d;font-size:34px;font-weight:700;}
.receipt-done-message h3 {margin:0;font-size:22px;font-weight:700;}
.receipt-done-message p {font-size:15px;line-height:1.6;}
.receipt-done-actions {display:flex;flex-direction:column;gap:10px;padding:16px 16px max(30px,env(safe-area-inset-bottom));}
.receipt-done-actions button {height:54px;border-radius:14px;border:1px solid #d5d8de;background:white;font-size:16px;font-weight:600;}
.receipt-done-actions .primary {border:0;background:#2f6fd6;color:white;font-weight:700;}
@media(max-width:600px){#dialog:has(.receipt-done){inset:0;margin:0;width:100vw;height:100dvh;max-width:100vw;border-radius:0;}}

#view:has(.receipt-entry),#dialog:has(.receipt-done) {font-family:"Receipt Pretendard",Pretendard,system-ui,sans-serif;}

.rr-pin:active {transform:translate(var(--pin-offset,0px),-50%) scale(var(--pin-scale,1));}
.rr-row:not(.needs-review) {border-color:#eef0f3;}

/* Use the same 1a item hierarchy at every entry point, not only the editor. */
.receipt-detail-items {margin:12px 0;}
.receipt-detail-items .rr-item-row,.analysis-receipt-summary .rr-item-row {font-weight:400;}
.receipt-detail-items .rr-value small,.analysis-receipt-summary .rr-value small {white-space:nowrap;}
.receipt-detail-items .rr-item-row:last-of-type {border-bottom:1px solid #eef0f3;}
.receipt-detail-total {display:flex;justify-content:space-between;gap:12px;padding:14px 16px;font-size:16px;font-weight:700;}
.analysis-receipt-summary {font-family:"Receipt Pretendard",Pretendard,system-ui,sans-serif;background:#f4f5f7;padding:12px 14px 16px;}
.analysis-receipt-summary .rr-row {font-weight:400;}
.analysis-receipt-summary .rr-card:last-child {margin-bottom:0;}

.receipt-entry > summary small {color:inherit;}

/* 매장 공지 UI 개선안 — shared design for the live manager and staff views. */
@font-face { font-family: 'Notice Noto Sans KR'; src: url('/fonts/NoticeNotoSansKR.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Monthly evaluation — supplied 월 평가.dc.html. */
.main:has(.evaluation-page) { max-width: 1256px; }
body:has(.evaluation-page) { background: #eef2f7; }
.evaluation-page { display: flex; flex-direction: column; gap: 20px; color: #0f1b2a; font-family: 'Notice Noto Sans KR', 'Receipt Pretendard', sans-serif; padding: 8px 0 40px; }
.evaluation-page [hidden] { display: none !important; }
.evaluation-page h1, .evaluation-page h2, .evaluation-page h3, .evaluation-page p { margin: 0; }
.evaluation-page button, .evaluation-page input { font-family: inherit; box-shadow: none; }
.evaluation-page button { min-height: 0; border: 1px solid #d5dde7; border-radius: 10px; padding: 0 16px; height: 40px; font-size: 14px; font-weight: 700; color: #475569; background: #fff; transition: background-color .15s, border-color .15s, color .15s; }
.evaluation-page button:hover { background: #f1f5f9; }
.evaluation-page button:focus-visible, .evaluation-page summary:focus-visible, .evaluation-table-scroll:focus-visible { outline: 2px solid #2a4256; outline-offset: 3px; }
.evaluation-page .evaluation-primary { background: #2a4256; color: #fff; border-color: #2a4256; }
.evaluation-page .evaluation-primary:hover { background: #1d3144; }
.evaluation-page .evaluation-outline { background: #fff; color: #2a4256; border-color: #2a4256; white-space: nowrap; }
.evaluation-page .evaluation-outline:hover { background: #2a4256; color: #fff; }
.evaluation-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.evaluation-header > div { display: flex; flex-direction: column; gap: 6px; }
.evaluation-page h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #0f1b2a; }
.evaluation-header p { font-size: 14px; color: #64748b; }
.evaluation-month { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; max-width: 100%; }
.evaluation-month input { height: 44px; min-width: 0; width: 185px; max-width: 100%; padding: 0 14px; border: 1px solid #d5dde7; border-radius: 10px; background: #fff; font-size: 15px; color: #0f1b2a; }
.evaluation-month button { height: 44px; padding: 0 20px; font-size: 15px; }
.evaluation-month .error { grid-column: 1 / -1; }
.evaluation-page .error:empty { display: none; }
.evaluation-criteria { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 16px; background: #e3e9f1; border-radius: 10px; font-size: 13px; color: #475569; line-height: 1.6; }
.evaluation-criteria > strong { color: #2a4256; font-weight: 700; }
.evaluation-criteria > span:last-child { color: #b42318; font-weight: 500; }
.evaluation-tabs { display: flex; gap: 4px; border-bottom: 1px solid #d5dde7; }
.evaluation-tabs button { height: auto; gap: 8px; padding: 12px 18px; border: 0; border-radius: 0; background: transparent; font-size: 15px; margin-bottom: -1px; font-weight: 500; color: #64748b; border-bottom: 2px solid transparent; }
.evaluation-tabs button[aria-selected="true"] { color: #0f1b2a; font-weight: 700; border-bottom-color: #2a4256; }
.evaluation-tabs i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #12b76a; }
.evaluation-tabs button > span { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e3e9f1; color: #2a4256; }
[data-evaluation-current] { display: flex; flex-direction: column; gap: 20px; }
.evaluation-current-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.evaluation-current-heading p { font-size: 14px; color: #64748b; }
.evaluation-current-heading form { max-width: 100%; }
.evaluation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.evaluation-card, .evaluation-surface { min-width: 0; padding: 22px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.evaluation-card { display: flex; flex-direction: column; gap: 18px; }
.evaluation-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.evaluation-person { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.evaluation-person h2 { font-size: 19px; font-weight: 700; line-height: 1.5; color: #0f1b2a; overflow-wrap: anywhere; }
.evaluation-rank { align-self: flex-start; display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #eef2f7; color: #475569; white-space: nowrap; }
.evaluation-rank-1 { background: #fdf0c4; color: #7a5300; }
.evaluation-rank-2 { background: #e8ecf2; color: #3b4a5c; }
.evaluation-rank-3 { background: #f6e3d3; color: #7a3e12; }
.evaluation-score { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.evaluation-score strong { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.evaluation-score > span { font-size: 15px; color: #64748b; font-weight: 500; }
.evaluation-unscored strong { font-size: 24px; line-height: 1.4; color: #64748b; }
.evaluation-achievement { display: flex; flex-direction: column; gap: 8px; }
.evaluation-achievement > div:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; white-space: nowrap; }
.evaluation-achievement span { color: #64748b; }
.evaluation-achievement strong { font-weight: 700; color: #0f1b2a; font-variant-numeric: tabular-nums; }
.evaluation-progress { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.evaluation-progress i { display: block; height: 100%; border-radius: inherit; background: #2a4256; }
.evaluation-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.evaluation-tag { font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 8px; }
.evaluation-tag-contribution { background: #f3f0ff; color: #5b3fc4; }
.evaluation-tag-held { background: #fffaeb; color: #b54708; }
.evaluation-tag-late { background: #fef3f2; color: #b42318; }
.evaluation-tag-cancelled { background: #f2f4f7; color: #475467; }
.evaluation-tag-shared { background: #eff8ff; color: #175cd3; }
.evaluation-tag-zero { opacity: .45; }
.evaluation-contributions { background: #f3f0ff; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.evaluation-contributions > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: #5b3fc4; }
.evaluation-contributions p, .evaluation-history-contribution { font-size: 14px; line-height: 1.55; color: #2e2459; text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-wrap; }
.evaluation-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid #eef2f7; }
.evaluation-page .evaluation-toggle { height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: #eef2f7; color: #2a4256; }
.evaluation-card-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #64748b; min-width: 0; }
.evaluation-card-reward > span { overflow-wrap: anywhere; }
.evaluation-card-reward strong { font-weight: 500; color: #0f1b2a; }
.evaluation-card-reward button { height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.evaluation-page .evaluation-unset { color: #94a3b8; }
.evaluation-evidence { display: flex; flex-direction: column; gap: 12px; }
.evaluation-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.evaluation-filters button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.evaluation-filters button[aria-pressed="true"] { background: #2a4256; color: #fff; border-color: #2a4256; }
.evaluation-groups { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.evaluation-page .evaluation-group { margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; }
.evaluation-group + .evaluation-group { border-top: 1px solid #eef2f7; }
.evaluation-page .evaluation-group > summary { display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px auto; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: #fff; list-style: none; text-align: left; font-size: 14px; color: #0f1b2a; cursor: pointer; }
.evaluation-group > summary::-webkit-details-marker { display: none; }
.evaluation-group > summary::before, .evaluation-group > summary::after { display: none; }
.evaluation-chevron { color: #94a3b8; font-size: 11px; }
.evaluation-group[open] > summary .evaluation-chevron { transform: rotate(90deg); }
.evaluation-group-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evaluation-group-bar { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.evaluation-group-bar i { display: block; height: 100%; background: #12b76a; }
.evaluation-group-count { font-size: 13px; font-weight: 400; color: #64748b; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.evaluation-task-dates { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px 40px; }
.evaluation-task-status { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid #e2e8f0; background: #f2f4f7; color: #475467; }
.evaluation-task-status > span { color: #64748b; }
.evaluation-task-status > strong { font-weight: 700; }
.evaluation-status-completed { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.evaluation-status-pending { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.evaluation-status-open { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.evaluation-status-revision { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.evaluation-rewards, .evaluation-history-detail { display: flex; flex-direction: column; gap: 16px; }
.evaluation-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.evaluation-section-heading > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.evaluation-section-heading h2 { font-size: 18px; font-weight: 700; line-height: 1.5; color: #0f1b2a; }
.evaluation-section-heading p, .evaluation-page .evaluation-reward-note { font-size: 13px; color: #64748b; line-height: 1.6; }
.evaluation-edit-actions { display: flex; gap: 8px; }
.evaluation-table-scroll { min-width: 0; overflow-x: auto; }
.evaluation-page table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; margin: 0; }
.evaluation-page th { padding: 10px 12px; background: transparent; font-size: 13px; font-weight: 500; text-align: left; color: #64748b; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.evaluation-page td { padding: 12px; border-bottom: 1px solid #eef2f7; font-variant-numeric: tabular-nums; }
.evaluation-page tbody tr:hover { background: transparent; }
.evaluation-page .evaluation-reward-table { min-width: 640px; }
.evaluation-reward-table th:first-child { width: 100px; }
.evaluation-reward-table th:nth-child(3) { width: 80px; }
.evaluation-reward-table th:nth-child(4) { width: 220px; }
.evaluation-reward-table th:nth-child(5) { width: 160px; }
.evaluation-reward-table td { padding: 14px 12px; overflow-wrap: anywhere; }
.evaluation-reward-table input { width: 100%; height: 36px; min-height: 36px; padding: 0 10px; border: 1px solid #d5dde7; border-radius: 8px; font-size: 14px; }
.evaluation-history-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.evaluation-history-list { display: flex; flex-direction: column; gap: 8px; }
.evaluation-history-list button { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border-color: #e2e8f0; background: #f8fafc; }
.evaluation-history-list button[aria-pressed="true"] { border-color: #2a4256; background: #fff; }
.evaluation-history-list span { font-size: 13px; font-weight: 400; color: #64748b; }
.evaluation-history-list strong { font-size: 15px; font-weight: 700; color: #0f1b2a; }
.evaluation-page .evaluation-delta { text-align: right; white-space: nowrap; }
.evaluation-page td.evaluation-delta { font-weight: 700; }
.evaluation-positive { color: #067647; }
.evaluation-negative { color: #b42318; }
.evaluation-saved-rewards { display: flex; flex-direction: column; gap: 8px; font-size: 14px; overflow-wrap: anywhere; }
.evaluation-page .evaluation-saved-evidence { margin: 0; }
.evaluation-saved-evidence > section { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.evaluation-page .evaluation-empty { padding: 24px 16px; color: #64748b; font-size: 14px; text-align: center; }
@media (max-width: 1000px) {
  .evaluation-history-layout { grid-template-columns: minmax(0, 1fr); }
  .evaluation-history-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
}
@media (max-width: 600px) {
  .evaluation-header h1 { font-size: 26px; }
  .evaluation-header > div, .evaluation-month { width: 100%; }
  .evaluation-month input { width: 100%; }
  .evaluation-tabs { gap: 0; }
  .evaluation-tabs button { padding: 12px 8px; font-size: 13px; gap: 5px; flex: 1; white-space: nowrap; }
  .evaluation-card, .evaluation-surface { padding: 18px 16px; }
  .evaluation-card-actions { align-items: flex-start; }
  .evaluation-card-reward { justify-content: flex-end; margin-left: auto; }
  .evaluation-page .evaluation-group > summary { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 6px; padding: 12px 10px; }
  .evaluation-group-bar { display: none; }
  .evaluation-task-dates { padding-left: 28px; }
  .evaluation-unscored strong { font-size: 20px; }
}
#view:has(.notice-page) { background: #f1f4f8; }
.notice-page, .notice-composer { font-family: 'Notice Noto Sans KR', 'Receipt Pretendard', sans-serif; color: #1b2430; }
.notice-page { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.notice-page button, .notice-composer button { box-shadow: none; letter-spacing: normal; }
.notice-page button { border-radius: 9px; border-color: #d5dce5; color: #2b3e50; padding: 10px 16px; font-size: 14px; font-weight: 700; }
.notice-page button.primary, .notice-composer button.primary { background: #2b3e50; border-color: #2b3e50; color: #fff; }
.notice-page button.primary:hover, .notice-composer button.primary:hover { background: #1f2e3c; }
.notice-page .notice-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0; border: 0; }
.notice-header h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: #1b2430; letter-spacing: normal; }
.notice-header p { margin: 0; font-size: 14px; color: #6b7684; }
.notice-header-actions { display: flex; gap: 8px; }
.notice-header button { border-radius: 10px; padding: 11px 14px; font-weight: 500; white-space: nowrap; }
.notice-header button.primary { padding: 11px 18px; font-size: 15px; font-weight: 700; }
.notice-list { display: flex; flex-direction: column; gap: 10px; }
.notice-page .notice-admin-card, .notice-staff-card { border: 1px solid #e3e8ef; background: #fff; border-radius: 14px; padding: 0; margin: 0; overflow: hidden; }
.notice-page .notice-admin-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) 120px 14px; align-items: center; gap: 16px; padding: 18px 20px; list-style: none; }
.notice-page .notice-admin-card > summary::after { content: none; }
.notice-admin-card > summary:hover { background: #fafbfd; }
.notice-admin-card > summary::-webkit-details-marker { display: none; }
.notice-overview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.notice-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice-page .notice-title h3 { margin: 0; flex: unset; font-size: 17px; font-weight: 700; line-height: 1.5; color: #1b2430; letter-spacing: normal; overflow-wrap: anywhere; }
.notice-important { font-size: 12px; font-weight: 700; color: #c9342c; background: #fdecea; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #6b7684; overflow-wrap: anywhere; }
.notice-meta i { color: #cfd6df; font-style: normal; }
.notice-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.notice-progress strong { font-size: 13px; color: #c9342c; }
.notice-progress small { font-size: 12px; color: #8a94a3; }
.notice-progress-track { width: 120px; height: 6px; background: #edf0f4; border-radius: 3px; overflow: hidden; }
.notice-progress-track > span { display: block; height: 100%; background: #2b3e50; border-radius: 3px; }
.notice-progress.is-complete strong { color: #1f8a56; }
.notice-progress.is-complete .notice-progress-track > span { background: #1f8a56; }
.notice-chevron { color: #8a94a3; font-size: 14px; text-align: center; }
.notice-admin-card[open] > summary .notice-chevron { transform: rotate(180deg); }
.notice-admin-body { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid #edf0f4; padding: 18px 20px 20px; background: #fbfcfd; }
.notice-page .notice-body { margin: 0; font-size: 15px; line-height: 1.7; color: #333d4b; white-space: pre-wrap; text-wrap: pretty; overflow-wrap: anywhere; }
.notice-people-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #44505f; }
.notice-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; }
.notice-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; min-width: 0; }
.notice-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #fdecea; color: #c9342c; }
.notice-person > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.notice-person > div > span { font-size: 14px; font-weight: 500; }
.notice-person small { font-size: 12px; color: #c9342c; }
.notice-person.is-read small { color: #1f8a56; }
.notice-person.is-read .notice-avatar { background: #e4f4ec; color: #1f8a56; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-page .notice-edit-hint { margin: -10px 0 0; font-size: 12px; color: #8a94a3; }
.notice-delivery { font-size: 12px; color: #6b7684; }
.notice-delivery > summary { cursor: pointer; }
.notice-delivery p { margin: 8px 0 0; overflow-wrap: anywhere; }
.notice-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-page .notice-filters button { border-radius: 20px; font-size: 14px; font-weight: 500; padding: 7px 14px; min-height: 38px; color: #44505f; }
.notice-page .notice-filters button[aria-pressed=true] { background: #2b3e50; border-color: #2b3e50; color: #fff; }
.notice-staff-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.notice-staff-card.is-important-unread { border-color: #f3c6c2; }
.notice-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f6fe4; flex-shrink: 0; }
.notice-staff-card .notice-important { order: -1; }
.notice-page button.notice-task { align-self: flex-start; background: #f1f4f8; border: 0; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 400; color: #44505f; text-align: left; }
.notice-page button.notice-confirm { width: 100%; margin-top: 4px; padding: 14px; border-radius: 10px; font-size: 15px; }
.notice-confirmed { display: flex; align-items: center; gap: 8px; padding-top: 4px; color: #1f8a56; font-size: 14px; font-weight: 500; }
.notice-confirmed > span { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: #1f8a56; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.notice-empty { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 40px 20px; text-align: center; color: #6b7684; font-size: 15px; }
dialog.notice-composer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: #fff; overflow: hidden; }
.notice-composer::backdrop { background: rgba(20,28,38,.45); }
.notice-composer[open] { display: flex; flex-direction: column; }
.notice-composer > header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 16px 24px; border-bottom: 1px solid #edf0f4; }
.notice-composer > header h2 { margin: 0; padding: 0; border: 0; font-size: 19px; font-weight: 700; color: #1b2430; }
.notice-composer [data-close-notice] { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #6b7684; font-size: 26px; font-weight: 400; }
.notice-composer form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; gap: 0; }
.notice-compose-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; display: flex; flex-direction: column; gap: 22px; }
.notice-composer .notice-recipient-field { position: relative; padding: 0; border: 0; border-radius: 0; margin: 0; min-width: 0; background: transparent; }
.notice-recipient-field legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.notice-recipient-field [data-select-all] { position: absolute; right: 0; top: -35px; padding: 4px 0; min-height: 30px; border: 0; background: transparent; color: #2f6fe4; font-size: 13px; font-weight: 500; }
.notice-recipient-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-composer .notice-recipient { position: relative; display: block; margin: 0; cursor: pointer; }
.notice-recipient input, .notice-important-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.notice-recipient > span { display: flex; align-items: center; gap: 4px; border: 1px solid #d5dce5; background: #fff; color: #44505f; padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 500; }
.notice-recipient i { display: none; font-style: normal; }
.notice-recipient input:checked + span { background: #2b3e50; color: #fff; border-color: #2b3e50; }
.notice-recipient input:checked + span i { display: inline; }
.notice-recipient input:focus-visible + span, .notice-important-toggle:has(input:focus-visible) { outline: 2px solid #2f6fe4; outline-offset: 3px; }
.notice-recipient:has(input:disabled) { cursor: default; }
.notice-fixed-targets { margin: 8px 0 0; font-size: 12px; color: #6b7684; }
.notice-composer .notice-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: #1b2430; margin: 0; }
.notice-field small { font-size: 14px; font-weight: 400; color: #8a94a3; }
.notice-composer .notice-field input, .notice-composer .notice-field textarea, .notice-composer .notice-field select { width: 100%; margin: 0; border: 1px solid #d5dce5; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 400; color: #1b2430; background: #fff; }
.notice-composer .notice-field textarea { line-height: 1.6; resize: vertical; min-height: 150px; }
.notice-composer .notice-field :is(input, textarea, select):focus { border-color: #2b3e50; }
.notice-composer .notice-important-toggle { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #e3e8ef; border-radius: 12px; cursor: pointer; margin: 0; position: relative; }
.notice-important-toggle > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.notice-important-toggle strong { font-size: 15px; font-weight: 700; }
.notice-important-toggle small { font-size: 13px; color: #6b7684; font-weight: 400; }
.notice-important-toggle:has(input:checked) { background: #fff6f5; border-color: #f3c6c2; }
.notice-switch { width: 44px; height: 26px; border-radius: 13px; background: #cfd6df; position: relative; flex-shrink: 0; }
.notice-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.notice-important-toggle input:checked + .notice-switch { background: #c9342c; }
.notice-important-toggle input:checked + .notice-switch::after { left: 21px; }
.notice-compose-test { align-self: flex-start; font-size: 13px; border-color: #d5dce5; color: #44505f; font-weight: 500; }
.notice-composer footer { padding: 16px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #edf0f4; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; background: #fff; }
.notice-composer footer p { margin: 0; font-size: 13px; color: #8a94a3; }
.notice-composer footer :is(p, .error):empty { display: none; }
.notice-composer footer button { padding: 15px; font-size: 16px; font-weight: 700; border-radius: 10px; width: 100%; }
.notice-composer footer button:disabled { background: #b7c0cc; border-color: #b7c0cc; opacity: 1; }
@media (max-width: 540px) {
  .notice-header-actions { margin-left: auto; }
  .notice-page .notice-admin-card > summary { grid-template-columns: minmax(0, 1fr) 14px; gap: 12px; padding: 16px; }
  .notice-overview { grid-column: 1; }
  .notice-progress { grid-column: 1; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .notice-progress-track { flex: 1; min-width: 40px; max-width: 120px; }
  .notice-chevron { grid-column: 2; grid-row: 1 / 3; }
  .notice-admin-body, .notice-staff-card { padding: 16px; }
  .notice-meta { gap: 6px; }
  .notice-people { grid-template-columns: repeat(auto-fill, minmax(min(145px, 100%), 1fr)); }
  .notice-composer > header { padding: 12px 20px; }
  .notice-compose-body { padding: 20px; }
  .notice-composer footer { padding-left: 20px; padding-right: 20px; }
  .notice-composer .notice-field :is(input, textarea, select) { font-size: 16px; }
}

/* 직원 인센티브 기록 UI.zip — quick contribution record. */
body:has(.contribution-page), .shell:has(.contribution-page) { background: #eef2f6; }
.contribution-page {
  width: 100%; max-width: 592px; margin: 0 auto; padding: 28px 16px 80px;
  display: flex; flex-direction: column; gap: 20px; color: #1c2530;
  font-family: "Receipt Pretendard", Pretendard, system-ui, sans-serif;
  font-size: 16px; line-height: normal; word-break: keep-all; overflow-wrap: anywhere;
}
.contribution-page :is(h1, h2, p) { margin: 0; }
.contribution-page button { box-shadow: none; font-family: inherit; }
.contribution-page button:focus-visible, .contribution-page summary:focus-visible { outline: 3px solid #c9772a; outline-offset: 3px; }
.contribution-header { display: flex; flex-direction: column; gap: 6px; }
.contribution-header > span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #c9772a; }
.contribution-header h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #1c2530; line-height: normal; }
.contribution-header p { font-size: 14px; color: #6b7785; }
.contribution-page .contribution-form { margin: 0; padding: 20px; background: #fff; border: 1px solid #e1e7ee; border-radius: 20px; box-shadow: 0 1px 2px rgba(20,40,60,.04); }
.contribution-page .contribution-controls { display: flex; flex-direction: column; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
.contribution-notice { display: flex; gap: 10px; align-items: flex-start; background: #fdf6e3; border: 1px solid #f3e4b8; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #7d5a0e; }
.contribution-notice > span { flex: none; box-sizing: content-box; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #b98a1c; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.contribution-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.contribution-step h2 { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 700; line-height: normal; color: #1c2530; letter-spacing: normal; }
.contribution-step h2 > span { font-size: 12px; font-weight: 800; color: #c9772a; }
.contribution-step h2 label { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.contribution-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contribution-types button { min-height: 52px; border-radius: 12px; border: 1px solid #e3e8ee; background: #f3f5f8; color: #3d4a57; font-size: 15px; font-weight: 500; padding: 8px 12px; }
.contribution-types [data-contribution-type="etc"] { grid-column: 1 / -1; }
.contribution-types button[aria-pressed="true"] { border-color: #2b4a63; background: #2b4a63; color: #fff; font-weight: 700; }
.contribution-special { display: flex; flex-direction: column; gap: 8px; background: #f6f8fa; border-radius: 12px; padding: 14px; }
.contribution-special > span { font-size: 13px; font-weight: 700; color: #3d4a57; }
.contribution-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.contribution-subs button { flex: none; white-space: nowrap; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #d5dde6; background: #fff; color: #3d4a57; font-size: 14px; font-weight: 600; }
.contribution-page .contribution-special input { width: 100%; height: 46px; border: 1px solid #d5dde6; border-radius: 10px; padding: 0 12px; font-size: 15px; background: #fff; }
.contribution-page textarea { width: 100%; border: 1px solid #d5dde6; border-radius: 12px; padding: 14px; font-size: 15px; line-height: 1.55; resize: vertical; min-height: 126px; background: #fff; color: #1c2530; outline: none; }
.contribution-page textarea::placeholder, .contribution-special input::placeholder { color: #757575; opacity: 1; }
.contribution-page input, .contribution-page textarea { box-shadow: none; }
.contribution-page textarea:focus, .contribution-page input:focus { border-color: #2b4a63; box-shadow: 0 0 0 3px rgba(43,74,99,.12); outline: none; }
.contribution-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.contribution-dates > span { font-size: 13px; color: #6b7785; margin-right: 2px; }
.contribution-dates button { flex: none; white-space: nowrap; min-height: 34px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #d5dde6; background: #fff; color: #3d4a57; font-size: 13px; font-weight: 600; }
.contribution-page .contribution-dates input { width: auto; max-width: 100%; height: 34px; min-height: 34px; border: 1px solid #d5dde6; border-radius: 999px; padding: 0 10px; font-size: 13px; }
.contribution-subs button[aria-pressed="true"], .contribution-dates button[aria-pressed="true"] { background: #2b4a63; color: #fff; border-color: #2b4a63; }
.contribution-step h2 small { font-size: 12px; font-weight: 600; color: #c9772a; }
.contribution-step h2 small.optional { color: #8a95a1; }
.contribution-upload { min-height: 64px; border: 1.5px dashed #e3a86b; background: #fdf5ec; border-radius: 12px; color: #b5651d; font-size: 15px; font-weight: 700; gap: 10px; padding: 12px; }
.contribution-upload:hover { background: #fbecdc; color: #b5651d; border-color: #e3a86b; }
.contribution-camera { flex: none; width: 20px; height: 15px; border: 2px solid currentColor; border-radius: 4px; display: grid; place-items: center; }
.contribution-camera::after { content: ''; box-sizing: content-box; width: 6px; height: 6px; border: 2px solid currentColor; border-radius: 50%; }
.contribution-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.contribution-photo { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: #e8edf2; display: grid; place-items: center; }
.contribution-photo > span { font-size: 12px; color: #6b7785; }
.contribution-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.contribution-photo button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%; border: 0; background: rgba(20,30,40,.7); color: #fff; font-size: 14px; line-height: 1; }
.contribution-add-photo { width: 84px; height: 84px; border-radius: 12px; border: 1.5px dashed #c8d2dc; background: #f6f8fa; color: #6b7785; font-size: 24px; }
.contribution-photo-hint { font-size: 12px; color: #8a95a1; }
.contribution-photo-error { font-size: 13px; color: #991b1b; }
.contribution-page .contribution-submit { width: 100%; height: 56px; border: 0; border-radius: 14px; background: #2b4a63; color: #fff; font-size: 16px; font-weight: 700; }
.contribution-page .contribution-submit:disabled { background: #e6ebf0; color: #7b8794; cursor: not-allowed; opacity: 1; }
.contribution-page .error:empty { display: none; }
.contribution-history { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.contribution-history > header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding: 0 4px; }
.contribution-history h2 { font-size: 16px; font-weight: 700; color: #1c2530; }
.contribution-history > header > span { font-size: 13px; color: #6b7785; }
.contribution-records { background: #fff; border: 1px solid #e1e7ee; border-radius: 16px; overflow: hidden; }
.contribution-page .contribution-record { margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; }
.contribution-page .contribution-record + .contribution-record { border-top: 1px solid #eef1f4; }
.contribution-page .contribution-record > summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; margin: 0; list-style: none; background: transparent; }
.contribution-record > summary::-webkit-details-marker { display: none; }
.contribution-record > summary::after { display: none; }
.contribution-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #e8edf2; object-fit: cover; }
.contribution-record-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.contribution-record-title { display: flex; gap: 3px 6px; align-items: baseline; flex-wrap: wrap; }
.contribution-record-title strong { font-size: 14px; font-weight: 700; color: #1c2530; }
.contribution-record-title time { font-size: 12px; font-weight: 400; color: #8a95a1; }
.contribution-excerpt { font-size: 13px; font-weight: 400; color: #56626e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contribution-author { font-size: 12px; color: #6b7785; font-weight: 500; }
.contribution-status { flex: none; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: #fdf3e4; color: #a8661c; }
.contribution-status.approved { background: #e6f4ec; color: #237a4b; }
.contribution-status.returned { background: #fcecea; color: #ad4338; }
.contribution-record-detail { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.contribution-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.contribution-record-date { color: #6b7785; }
.contribution-page .contribution-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: #6b7785; }
@media (max-width: 768px) {
  .main #view:has(.contribution-page) { width: calc(100% + 28px); max-width: none; margin-inline: -14px; }
}

/* Inventory / containers — supplied 재고 공병 관리 design. */
.stock-page,.stock-composer{font-family:'Notice Noto Sans KR','Receipt Pretendard',sans-serif;color:#17212b;font-size:14px}
.stock-page{max-width:1180px;margin:0 auto;padding:8px 0 36px;display:flex;flex-direction:column;gap:20px}
.stock-page [hidden],.stock-composer [hidden]{display:none!important}
.stock-page button,.stock-composer button{font-family:inherit;min-height:0;box-shadow:none;letter-spacing:normal;font-size:14px;font-weight:500;border:1px solid #d3dbe4;border-radius:10px;background:#fff;color:#17212b;padding:0 16px;height:40px;white-space:nowrap;line-height:1.4}
.stock-page button:hover,.stock-composer button:hover{background:#f6f8fb;transform:none}
.stock-page button.primary,.stock-composer button.primary{background:#2b4257;color:#fff;border-color:#2b4257;font-weight:700}
.stock-page button:focus-visible,.stock-composer button:focus-visible{outline:2px solid #2b4257;outline-offset:3px}
.stock-page button:disabled,.stock-composer button:disabled{opacity:.5;cursor:not-allowed}
.stock-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.stock-header h1{margin:0;font-size:26px;letter-spacing:-.02em;line-height:1.5;font-weight:700}
.stock-header p{margin:4px 0 0;font-size:14px;color:#5a6978;line-height:1.7}
.stock-header-actions{display:flex;flex-wrap:wrap;gap:8px}
.stock-panel{background:#fff;border:1px solid #e3e8ee;border-radius:16px;overflow:hidden;min-width:0}
.stock-toolbar{padding:16px 20px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e8ee}
.stock-categories{display:flex;flex-wrap:wrap;gap:4px}
.stock-categories button{height:auto;padding:10px 12px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;margin-bottom:-1px;color:#5a6978;font-size:15px;display:flex;gap:6px;align-items:center}
.stock-categories button[aria-pressed=true]{border-color:#2b4257;color:#17212b;font-weight:700}
.stock-categories button span{font-size:12px;color:#8a97a5;font-weight:500;font-variant-numeric:tabular-nums}
.stock-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid #d3dbe4;border-radius:10px;min-width:190px;flex:0 1 260px;margin:0 0 10px;background:#fafbfc;color:#8a97a5;font-size:13px;font-weight:400}
.stock-search input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;flex:1;min-width:0;width:100%;padding:0;box-shadow:none;color:#17212b}
.stock-search:focus-within{outline:2px solid #2b4257;outline-offset:2px}
.stock-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 20px;background:#fafbfc;border-bottom:1px solid #e3e8ee}
.stock-filters button{height:32px;padding:0 12px;border-radius:999px;font-size:13px;display:flex;align-items:center;gap:6px}
.stock-filters button[aria-pressed=true]{background:#2b4257;border-color:#2b4257;color:white}
.stock-filters i,.stock-status i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.stock-filters i.all{background:#8a97a5}.stock-filters i.issue{background:#b72d2d}.stock-filters i.pending{background:#d59430}.stock-filters i.nocount{background:#b3bdc8}
.stock-diff-hint{margin-left:auto;color:#8a97a5;font-size:12px}
.stock-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.stock-table{min-width:920px}
.stock-grid{display:grid;grid-template-columns:minmax(180px,2.2fr) repeat(3,minmax(84px,1fr)) minmax(110px,1.1fr) minmax(180px,auto);gap:12px;padding:14px 20px;align-items:center}
.stock-table-head{padding:10px 20px;font-size:12px;font-weight:500;color:#8a97a5;border-bottom:1px solid #e3e8ee}
.stock-row{border-bottom:1px solid #e3e8ee;background:#fff}.stock-row:last-child{border-bottom:0}
.stock-row.diff,.stock-batch-grid.has-difference{background:oklch(.985 .012 27)}.stock-row.pending{background:oklch(.985 .016 75)}
.stock-item-toggle.stock-item-toggle{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:left;height:auto;white-space:normal;min-width:0}
.stock-chevron{width:22px;height:22px;border-radius:6px;background:#eef1f5;color:#5a6978;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none}
.stock-item-toggle strong,.stock-batch-name strong{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.stock-item-toggle small,.stock-batch-name small{display:block;font-size:12px;color:#8a97a5;font-weight:400;margin-top:2px}
.stock-number{text-align:right;font-variant-numeric:tabular-nums;font-size:15px}.stock-table-head .stock-number{font-size:12px}.stock-book{font-weight:700}
.stock-difference{font-size:14px;color:#8a97a5;font-variant-numeric:tabular-nums;white-space:nowrap}
.stock-difference.diff,.stock-difference.pending{padding:3px 9px;border-radius:999px;font-size:13px;font-weight:700}
.stock-difference.diff{background:oklch(.95 .035 27);color:oklch(.5 .19 27)}.stock-difference.pending{background:oklch(.95 .05 70);color:oklch(.5 .13 60)}
.stock-status{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap}
.stock-status.ok,.stock-match{color:oklch(.5 .1 155)}.stock-status.diff,.stock-invalid{color:oklch(.5 .19 27)}.stock-status.pending{color:oklch(.5 .13 60)}.stock-status.nocount{color:#8a97a5}
.stock-row-actions{display:flex;gap:6px;justify-content:flex-end}.stock-row-actions button{height:32px;padding:0 10px;border-radius:8px;font-size:13px;color:#2b4257}.stock-row-actions .stock-adjust{border-color:oklch(.85 .07 27);color:oklch(.5 .19 27);font-weight:700}
.stock-history{padding:4px 20px 20px 52px}.stock-history h3{font-size:12px;font-weight:500;color:#8a97a5;margin:0 0 8px}.stock-history ol{list-style:none;margin:0;padding:0;border-left:2px solid #e3e8ee}
.stock-event{position:relative;padding:10px 12px 10px 20px;margin-left:-2px;border-radius:0 10px 10px 0;scroll-margin-top:170px}
.stock-event:before{content:'';position:absolute;left:-5px;top:17px;width:8px;height:8px;border-radius:50%;background:#b3bdc8;box-shadow:0 0 0 3px #fff}
.stock-event.count:before{background:#2b4257}.stock-event.adjustment.pending:before{background:#d59430}.stock-event.adjustment.recorded:before{background:#398367}
.stock-event-heading{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-variant-numeric:tabular-nums}.stock-event time{font-size:13px;color:#8a97a5}
.stock-event code{font-size:11px;background:#eef1f5;border-radius:5px;padding:2px 6px;color:#5a6978;overflow-wrap:anywhere}.stock-event p{font-size:13px;color:#5a6978;margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.stock-event-badge{font-size:12px;padding:2px 8px;border-radius:999px;background:oklch(.95 .05 70);color:oklch(.5 .13 60)}.stock-event-badge.approved{background:#e9f4ee;color:#2f7657}
.stock-reference.stock-reference{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:5px 10px;border-radius:8px;border:1px dashed #b9c7d6;background:#f6f9fc;font-size:12px;color:#2b4257;height:auto;white-space:normal;text-align:left;max-width:100%}
.stock-reference code{background:none;padding:0;font-weight:700}
.stock-event-actions{display:flex;gap:12px;margin-top:6px}.stock-event-actions button{height:auto;border:0;background:none;padding:0;font-size:12px;color:#8a97a5;border-radius:0}.stock-event-actions button[data-review]{font-weight:700;color:#2b4257;text-decoration:underline}
.stock-negative{margin:0;padding:0 20px 12px 52px;font-size:13px;color:#b72d2d}.stock-empty{text-align:center;padding:48px 20px;margin:0;color:#8a97a5;font-size:14px}
@keyframes stock-flash{from{background:#fff1ba}to{background:transparent}}.stock-highlight{animation:stock-flash 2s ease-out}
.stock-batch-guide{padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:#eef3f8;border-bottom:1px solid #d9e3ee;color:#2b4257}
.stock-batch-guide button{height:32px;font-size:13px;border-radius:8px;padding:0 12px}.stock-batch-guide label{display:flex;align-items:center;gap:8px;font-size:12px;margin:0}.stock-batch-guide input{font-family:inherit;width:auto;font-size:13px;padding:5px 8px;min-width:0}
.stock-batch-table{min-width:760px}.stock-batch-grid{display:grid;grid-template-columns:minmax(180px,2fr) minmax(90px,1fr) minmax(160px,1.3fr) minmax(90px,1fr) minmax(110px,1fr);gap:12px;padding:10px 20px;align-items:center;border-bottom:1px solid #e3e8ee}
.stock-quantity-input{display:flex;align-items:center;height:40px;border:1px solid #d3dbe4;border-radius:10px;background:white;padding:0 12px;gap:8px;margin:0;color:#8a97a5;font-size:13px;font-weight:400}
.stock-quantity-input input{border:0;outline:0;box-shadow:none;flex:1;min-width:0;width:100%;padding:0;font-size:16px;font-variant-numeric:tabular-nums;text-align:right;color:#17212b;background:none;appearance:textfield}.stock-quantity-input input::-webkit-inner-spin-button{appearance:none}.stock-quantity-input:focus-within{outline:2px solid #2b4257;outline-offset:2px}.has-difference .stock-quantity-input{border-color:oklch(.8 .09 27)}
.stock-last-count{text-align:right;font-size:13px;color:#8a97a5;font-variant-numeric:tabular-nums}.stock-match{font-size:13px}
.stock-page.is-batch{padding-bottom:150px}.stock-batch-footer{position:fixed;left:0;right:0;bottom:0;background:white;border-top:1px solid #d9e1ea;box-shadow:0 -6px 20px #17212b0f;z-index:35;padding:14px 20px}
.stock-batch-footer-inner{max-width:1180px;margin:auto;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.stock-batch-footer-inner>div{display:flex;flex-wrap:wrap;align-items:center;gap:16px;color:#5a6978}.stock-batch-footer-inner>div:last-child{gap:8px}.stock-batch-footer small{display:block;font-size:12px}.stock-batch-footer .error:empty{display:none}.stock-batch-footer .error{max-width:1180px;margin:0 auto 8px}
.stock-composer{position:fixed;inset:0 0 0 auto;margin:0;border:0;border-radius:0;width:min(440px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:0;box-shadow:-10px 0 30px #17212b1f;background:white;overflow:hidden}
.stock-composer[open]{display:flex;flex-direction:column}.stock-composer::backdrop{background:rgba(23,33,43,.28)}
.stock-composer>header{padding:20px 24px;border-bottom:1px solid #e3e8ee;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex:none}.stock-composer h2{font-size:18px;font-weight:700;margin:0;line-height:1.5}.stock-composer header p{font-size:13px;color:#5a6978;margin:4px 0 0}.stock-composer header button{width:32px;height:32px;border-radius:8px;padding:0;flex:none;color:#5a6978}
.stock-composer form{display:flex;flex-direction:column;min-height:0;flex:1}.stock-composer-body{flex:1;overflow-y:auto;min-height:0;padding:20px 24px;display:flex;flex-direction:column;gap:18px}.stock-composer footer{padding:16px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid #e3e8ee;display:flex;justify-content:flex-end;gap:8px;flex:none}.stock-composer footer button{height:42px}
.stock-composer label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;margin:0;min-width:0}.stock-composer input:not([type=checkbox]),.stock-composer select{height:42px;width:100%;min-width:0;border:1px solid #d3dbe4;border-radius:10px;padding:0 12px;font-family:inherit;font-size:14px;font-weight:400;color:#17212b;background:#fff}.stock-composer textarea{min-height:92px;padding:10px 12px;border:1px solid #d3dbe4;border-radius:10px;font:inherit;font-weight:400;resize:vertical}.stock-composer input[readonly]{background:#f6f8fb;color:#5a6978}.stock-composer label.check{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:14px;font-weight:400}.stock-composer input[type=checkbox]{width:18px;height:18px;accent-color:#2b4257;flex:none;margin:0}
.stock-kind-label{font-size:13px;font-weight:700;margin-bottom:-12px}.stock-kind-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;background:#eef1f5;border-radius:10px}.stock-kind-tabs button{height:34px;border:0;border-radius:7px;background:transparent;font-size:13px;color:#5a6978;padding:0}.stock-kind-tabs button[aria-pressed=true]{background:white;color:#17212b;box-shadow:0 1px 2px #00000014}
.stock-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stock-preview,.stock-item-edit-note{padding:12px 14px;border-radius:10px;background:#f6f9fc;border:1px solid #dfe7f0;font-size:13px;line-height:1.7;color:#2b4257;margin:0}.stock-field-hint{margin-top:-12px;font-size:12px;color:#8a97a5}.stock-composer h3{font-size:13px;font-weight:700;margin:0 0 8px}.stock-composer h3 small{font-size:13px;font-weight:400;color:#8a97a5}
.stock-conversion-fields{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}.stock-conversion-fields>span{font-size:13px;color:#5a6978;align-self:end;padding-bottom:12px}.stock-conversions{font-size:12px;color:#5a6978;line-height:1.6;margin:0 0 8px}.stock-conversions:empty{display:none}
[data-stock-basis-options]{display:flex;flex-direction:column;gap:8px}[data-stock-basis-id]{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;height:auto!important;padding:10px 12px!important;white-space:normal!important}[data-stock-basis-id][aria-pressed=true]{border-color:#2b4257;background:#f1f5f9}[data-stock-basis-id]>span:first-child{min-width:0}[data-stock-basis-id] code{font-size:11px;color:#2b4257;overflow-wrap:anywhere}[data-stock-basis-id] small{display:block;font-size:12px;color:#5a6978;margin-top:4px}.stock-basis-empty{font-size:13px;color:#8a97a5;padding:12px;border:1px dashed #d3dbe4;border-radius:10px;margin:0}
@media(max-width:767px){.stock-page{padding-top:4px}.stock-header h1{font-size:24px}.stock-header-actions{width:100%}.stock-header-actions button{flex:1;padding:0 10px;font-size:13px}.stock-toolbar{padding:10px 12px 0;gap:10px}.stock-categories{gap:0;width:100%;flex-wrap:nowrap;overflow-x:auto}.stock-categories button{padding:10px 9px 12px;font-size:14px;flex:none}.stock-search{flex-basis:100%;max-width:none;min-width:0}.stock-filters{padding:10px 12px;gap:6px}.stock-filters button{padding:0 9px;font-size:12px}.stock-diff-hint{width:100%;margin:2px 0 0}.stock-batch-guide{padding:12px;font-size:13px}.stock-batch-guide label{flex-wrap:wrap}.stock-batch-footer{bottom:calc(64px + env(safe-area-inset-bottom));padding:12px 16px}.stock-batch-footer-inner{gap:10px}.stock-batch-footer-inner>div{gap:10px}.stock-batch-footer-inner>div:last-child{margin-left:auto}.stock-composer>header{padding:20px}.stock-composer-body{padding:20px}.stock-composer footer{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){.stock-highlight{animation:none;background:#fff1ba}}

/* ===== 상황 보고: 제공된 상황 보고.dc.html 시안 ===== */
.main:has(.report-page) { max-width: 1136px; }
#view:has(.report-page) { background: #f1f4f8; }
.report-page { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; color: #1b2a38; font-family: 'Notice Noto Sans KR', system-ui, sans-serif; }
.report-page h1, .report-page h2, .report-page p { margin: 0; color: inherit; }
.report-page h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.5; }
.report-page h2 { font-size: 18px; font-weight: 700; letter-spacing: normal; line-height: 1.5; }
.report-page button, .report-page input, .report-page textarea { font-family: inherit; box-shadow: none; }
.report-page button { min-height: 0; color: #2b3e50; border-color: #cbd4de; letter-spacing: normal; }
.report-page button.primary { background: #2b3e50; border-color: #2b3e50; color: #fff; }
.report-page button.primary:hover { background: #1b2a38; }
.report-page button[hidden], .report-page [hidden] { display: none; }
.report-page :is(button, input, textarea):focus-visible { outline: 2px solid #2b3e50; outline-offset: 3px; }
.report-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.report-header > div { display: flex; flex-direction: column; gap: 4px; }
.report-header p { font-size: 14px; color: #5b6b7c; }
.report-page .report-new { height: 48px; padding: 0 22px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; gap: 8px; }
.report-new > span { font-size: 20px; font-weight: 500; line-height: 1; }
.report-current, .report-history { background: #fff; border: 1px solid #e3e8ef; border-radius: 16px; }
.report-current { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.report-current > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.report-current-heading { display: flex; align-items: center; gap: 10px; }
.report-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #1f8a5b; box-shadow: 0 0 0 4px #ddf1e6; }
.report-live-dot.is-empty { background: #8a97a5; box-shadow: 0 0 0 4px #eef1f5; }
.report-current-time { font-size: 14px; color: #5b6b7c; }
.report-current-time strong { color: #1b2a38; }
.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.report-metric { min-width: 0; background: #f5f7fa; border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.report-metric-label { font-size: 14px; font-weight: 500; color: #5b6b7c; }
.report-metric-number { display: flex; align-items: baseline; gap: 4px; overflow-wrap: anywhere; }
.report-metric-number strong { min-width: 0; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.report-metric-number > span { flex: none; font-size: 18px; font-weight: 700; }
.report-metric-music { font-size: 24px; font-weight: 700; line-height: 1.3; min-height: 44px; display: flex; align-items: center; text-wrap: pretty; overflow-wrap: anywhere; }
.report-page .report-missing { color: #8a97a5; }
.report-metric-missing { font-size: 22px; font-weight: 700; line-height: 44px; }
.report-delta { font-size: 13px; color: #5b6b7c; }
.report-delta strong { color: #1b2a38; }
.report-current-memo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #e3e8ef; border-radius: 12px; }
.report-current-memo > span { flex: none; font-size: 13px; font-weight: 700; color: #2b3e50; background: #eef1f5; padding: 3px 8px; border-radius: 6px; }
.report-current-memo p { min-width: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-history { overflow: hidden; }
.report-history > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e3e8ef; }
.report-history > header > span { font-size: 13px; color: #5b6b7c; }
.report-record { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 18px 24px; border-bottom: 1px solid #eef1f5; }
.report-record:last-child { border-bottom: 0; }
.report-record-time { flex: 0 0 108px; display: flex; flex-direction: column; gap: 4px; }
.report-record-time time { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.report-record-time > span { font-size: 13px; color: #5b6b7c; }
.report-record-time .report-latest { align-self: flex-start; font-size: 11px; font-weight: 700; color: #1f8a5b; background: #ddf1e6; padding: 2px 8px; border-radius: 99px; }
.report-record-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.report-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.report-pill { display: flex; align-items: baseline; gap: 6px; max-width: 100%; background: #f5f7fa; border-radius: 8px; padding: 6px 12px; }
.report-pill > span { flex: none; font-size: 12px; color: #5b6b7c; }
.report-pill strong { min-width: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.report-page .report-record-memo { font-size: 15px; line-height: 1.6; color: #3c4c5c; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-page .report-correct-button { flex: none; align-self: flex-start; white-space: nowrap; height: 36px; padding: 0 12px; border: 1px solid #d7dee6; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; color: #3c4c5c; }
.report-page .report-correct-button:hover { border-color: #2b3e50; color: #1b2a38; }
.report-correction-pending { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #8a4b0c; background: #fff4e5; border-radius: 8px; padding: 8px 12px; }
.report-correction-pending strong { flex: none; }
.report-correction-pending > span { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-correction { padding: 12px; border: 1.5px solid #cbd4de; border-radius: 10px; }
.report-correction form { display: flex; flex-direction: column; gap: 8px; }
.report-correction label { color: #1b2a38; font-size: 13px; font-weight: 700; }
.report-correction textarea { padding: 10px 12px; min-height: 70px; border: 1px solid #cbd4de; border-radius: 8px; font-size: 15px; line-height: 1.5; }
.report-correction-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.report-correction-fields > label, .report-correction-fields input { min-width: 0; }
.report-correction-actions { display: flex; justify-content: flex-end; gap: 8px; }
.report-correction-actions button { height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.report-page :is(.report-correction-values, .report-correction-history) summary { font-size: 13px; font-weight: 500; }
.report-page .report-empty { padding: 20px 24px; font-size: 14px; color: #5b6b7c; line-height: 1.7; }
.report-current > .report-empty { padding: 8px 0; }
.report-composer { background: #fff; border: 2px solid #2b3e50; border-radius: 16px; overflow: hidden; }
.report-composer > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: #2b3e50; color: #fff; }
.report-composer > header > div { display: flex; flex-direction: column; gap: 2px; }
.report-composer > header p { font-size: 13px; color: #c9d4df; }
.report-page [data-close-create] { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: rgb(255 255 255 / 12%); color: #fff; font-size: 20px; }
.report-page [data-close-create]:hover { background: rgb(255 255 255 / 22%); }
.report-fields { padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.report-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.report-field label { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #1b2a38; font-size: 14px; font-weight: 700; }
.report-optional { font-size: 11px; font-weight: 500; color: #5b6b7c; background: #eef1f5; padding: 2px 7px; border-radius: 99px; }
.report-field > input { min-width: 0; height: 52px; padding: 0 14px; border: 1.5px solid #cbd4de; border-radius: 10px; font-size: 16px; color: #1b2a38; }
.report-field > textarea { padding: 12px 14px; border: 1.5px solid #cbd4de; border-radius: 10px; font-size: 16px; line-height: 1.6; color: #1b2a38; resize: vertical; }
.report-full { grid-column: 1 / -1; }
.report-time-label { display: flex; align-items: center; justify-content: space-between; }
.report-page [data-report-now] { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 500; color: #2b3e50; text-decoration: underline; }
.report-stepper { display: flex; align-items: center; height: 52px; border: 1.5px solid #cbd4de; border-radius: 10px; overflow: hidden; }
.report-page .report-stepper button { flex: 0 0 48px; height: 100%; border: 0; padding: 0; border-radius: 0; background: #f5f7fa; font-size: 20px; font-weight: 500; color: #2b3e50; }
.report-stepper input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0 4px; border: 0; border-radius: 0; text-align: center; font-size: 20px; font-weight: 700; color: #1b2a38; appearance: textfield; -moz-appearance: textfield; }
.report-stepper input::-webkit-inner-spin-button, .report-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.report-stepper > span { font-size: 14px; color: #5b6b7c; padding-right: 10px; }
.report-page .report-stepper :focus-visible { outline-offset: -3px; }
.report-music-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.report-page .report-music-chips button { max-width: 100%; border: 1px solid #d7dee6; background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 400; color: #3c4c5c; overflow-wrap: anywhere; }
.report-page .report-music-chips button:hover { border-color: #2b3e50; }
.report-composer footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid #e3e8ef; background: #f8fafc; }
.report-page .error { margin: 0; padding: 0; border: 0; background: none; font-size: 14px; color: #b4412f; font-weight: 500; }
.report-form-actions { display: flex; gap: 10px; margin-left: auto; }
.report-form-actions button { height: 48px; padding: 0 20px; border: 1.5px solid #cbd4de; border-radius: 12px; font-size: 15px; font-weight: 700; }
.report-form-actions button.primary { padding: 0 28px; border: 0; }
@keyframes report-flash { from { background: #e6f4ec; } to { background: #fff; } }
.report-saved { animation: report-flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .report-saved { animation: none; } }
@media (max-width: 480px) {
  .report-current, .report-fields { padding: 20px; }
  .report-composer > header, .report-composer footer, .report-history > header, .report-record { padding-inline: 20px; }
}
.main:has(.stock-page){max-width:1236px}
.stock-search{flex-direction:row}
.stock-composer h2{border:0;padding:0}
.stock-scroll-hint{display:none}
@media(max-width:767px){.stock-scroll-hint{display:block;margin:0;padding:8px 12px;font-size:12px;color:#5a6978;border-bottom:1px solid #e3e8ee}}