/* Customer shell + home only. Figma sources/adaptations: docs/design/customer-kit.md.
   No shared body/button/input/modal rules: journal forms and other pages keep their styles.
   !important below only counters the incumbent theme's visual overrides, never visibility. */
#page-user-main.customer-kit-shell {
  --ck-paper: #fff;
  --ck-subtle: #fafafa;
  --ck-hover: #f5f5f5;
  --ck-ink: #171717;
  --ck-text: #404040;
  --ck-muted: #737373;
  --ck-line: #e5e5e5;
  --ck-input-line: #d4d4d4;
  --ck-danger: #e00000;
  --ck-font: "Selo Admin Inter", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* Untitled UI header 7925:545069. Existing navigation order/collapse is unchanged. */
#page-user-main.customer-kit-shell .topbar {
  background: var(--ck-paper) !important;
  color: var(--ck-ink) !important;
  border-bottom: 1px solid var(--ck-line);
  box-shadow: none !important;
  font-family: var(--ck-font);
  min-height: 64px;
  padding-inline: 24px;
}
#page-user-main.customer-kit-shell .topbar-title {
  color: var(--ck-ink) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}
#page-user-main.customer-kit-shell .topbar :is(.topbar-btn, .topbar-hamburger, .topbar-logout-btn, .topbar-user, .rs-request-btn) {
  background: var(--ck-paper) !important;
  color: var(--ck-text) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font: 600 14px/20px var(--ck-font) !important;
  min-height: 36px;
}
#page-user-main.customer-kit-shell .topbar :is(.topbar-btn, .topbar-hamburger) { border-color: transparent !important; }
#page-user-main.customer-kit-shell .topbar .topbar-user { border-color: transparent !important; padding-inline: 8px; }
#page-user-main.customer-kit-shell .topbar :is(.topbar-btn, .topbar-hamburger, .topbar-logout-btn, .topbar-user, .rs-request-btn):hover { background: var(--ck-hover) !important; }
/* Reuse the purchased person placeholder already approved in the admin table. */
#page-user-main.customer-kit-shell :is(.topbar-avatar, .dd-avatar) { background: url('/icons/admin-person.svg') center / contain no-repeat !important; color: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; }
#page-user-main.customer-kit-shell :is(.topbar-avatar, .dd-avatar) svg { opacity: 0; }
#page-user-main.customer-kit-shell .topbar-avatar { width: 32px; height: 32px; }
#page-user-main.customer-kit-shell .dd-avatar { width: 40px; height: 40px; }
#page-user-main.customer-kit-shell .sidebar {
  background: var(--ck-paper) !important;
  border-right: 1px solid var(--ck-line) !important;
  box-shadow: none !important;
  font-family: var(--ck-font);
  scrollbar-color: var(--ck-input-line) transparent;
}
#page-user-main.customer-kit-shell .sidebar-logo { border-bottom-color: var(--ck-line) !important; }
#page-user-main.customer-kit-shell .sidebar-logo span { color: var(--ck-ink) !important; font-family: var(--ck-font); }
#page-user-main.customer-kit-shell .sidebar.open .sidebar-logo { justify-content: flex-start; padding-left: 20px !important; }
#page-user-main.customer-kit-shell .sidebar.open :is(.sidebar-item, .sidebar-accordion-header) { padding-left: 20px !important; padding-right: 20px !important; }
#page-user-main.customer-kit-shell .sidebar :is(.sidebar-item, .sidebar-accordion-header, .sidebar-sub-item) {
  color: var(--ck-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  outline: none;
  box-shadow: none !important;
  font-family: var(--ck-font) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
#page-user-main.customer-kit-shell .sidebar :is(.sidebar-item, .sidebar-accordion-header, .sidebar-sub-item):hover,
#page-user-main.customer-kit-shell .sidebar :is(.sidebar-item, .sidebar-accordion-header, .sidebar-sub-item).active {
  background: var(--ck-subtle) !important;
  color: var(--ck-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
#page-user-main.customer-kit-shell .sidebar :is(.sidebar-item-icon, .sidebar-item-icon svg, .sidebar-accordion-header svg) { color: var(--ck-text) !important; stroke: currentColor !important; }
#page-user-main.customer-kit-shell .sidebar :is(.sidebar-group-label, .sidebar-subcategory-label) { color: var(--ck-muted) !important; border-color: var(--ck-line) !important; letter-spacing: 0; }
#page-user-main.customer-kit-shell .sidebar #menu-emergency,
#page-user-main.customer-kit-shell .sidebar #menu-emergency :is(.sidebar-item-icon, svg) { color: var(--ck-danger) !important; }

/* Existing profile/notification panels: same content, positions and opening logic. */
#page-user-main.customer-kit-shell :is(.topbar-dropdown, .noti-panel) {
  background: var(--ck-paper) !important;
  color: var(--ck-text) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%) !important;
  font: 400 14px/20px var(--ck-font);
}
#page-user-main.customer-kit-shell :is(.topbar-dd-head, .noti-panel-header, .dd-sub-bar-block, .dd-section, .dd-stat-card) {
  background: var(--ck-paper) !important;
  color: var(--ck-text) !important;
  border-color: var(--ck-line) !important;
  box-shadow: none !important;
}
#page-user-main.customer-kit-shell :is(.topbar-dd-item, .topbar-dd-name, .topbar-dd-role, .topbar-dd-company, .dd-stat-label, .dd-stat-value) { color: var(--ck-text) !important; font-family: var(--ck-font); }
#page-user-main.customer-kit-shell .topbar-dd-notify-status.off { color: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell .topbar-dd-notify-test { background: var(--ck-paper) !important; color: var(--ck-text) !important; border: 1px solid var(--ck-input-line) !important; border-radius: 8px !important; padding: 6px 10px !important; box-shadow: none !important; }
#page-user-main.customer-kit-shell .topbar-dd-item { border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; }
#page-user-main.customer-kit-shell .topbar-dd-item:hover { background: var(--ck-hover) !important; }
#page-user-main.customer-kit-shell .topbar-dd-item.danger { color: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell .topbar-dd-profile { box-shadow: 0 4px 12px rgb(0 0 0 / 6%) !important; animation: none; }
#page-user-main.customer-kit-shell .topbar-dd-head { padding: 20px; }
#page-user-main.customer-kit-shell .topbar-dd-name { font: 600 16px/24px var(--ck-font); letter-spacing: 0; }
#page-user-main.customer-kit-shell :is(.topbar-dd-company, .topbar-dd-role) { font: 400 13px/20px var(--ck-font); letter-spacing: 0; }
#page-user-main.customer-kit-shell .dd-stat-grid { background: var(--ck-paper); padding: 16px 20px; gap: 12px; border-bottom: 1px solid var(--ck-line); }
#page-user-main.customer-kit-shell .dd-stat-card { padding: 0; text-align: left; border: 0; }
#page-user-main.customer-kit-shell .dd-stat-label { font: 400 12px/18px var(--ck-font); letter-spacing: 0; color: var(--ck-muted) !important; }
#page-user-main.customer-kit-shell :is(.dd-stat-value, .dd-stat-plan) { font: 500 14px/20px var(--ck-font) !important; letter-spacing: 0 !important; }
#page-user-main.customer-kit-shell .dd-stat-value.urgent { color: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell :is(.dd-sub-bar-block, .dd-section) { padding: 16px 20px; }
#page-user-main.customer-kit-shell :is(.dd-sub-label, .dd-sub-date, .dd-section-head) { color: var(--ck-text); font: 400 13px/20px var(--ck-font); letter-spacing: 0; }
#page-user-main.customer-kit-shell .dd-sub-progress { height: 3px; border-radius: 0; background: var(--ck-line); }
#page-user-main.customer-kit-shell .dd-sub-progress-fill { background: var(--ck-text) !important; border-radius: 0; transition: none; }
#page-user-main.customer-kit-shell .dd-sub-progress-fill.urgent { background: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell .dd-sub-progress-fill::after { content: none; animation: none; }
#page-user-main.customer-kit-shell .topbar-dd-notify-status { color: var(--ck-text) !important; }
#page-user-main.customer-kit-shell .topbar-dd-notify-status .push-dot { width: 6px; height: 6px; box-shadow: none !important; animation: none !important; }
#page-user-main.customer-kit-shell .topbar-dd-notify-status .push-dot.off { background: var(--ck-muted); }
#page-user-main.customer-kit-shell .topbar-dd-notify-status .push-dot.pending { background: var(--ck-muted); }
#page-user-main.customer-kit-shell .topbar-dd-notify-status .push-dot.on { background: var(--ck-text); }
#page-user-main.customer-kit-shell .topbar-dd-profile .topbar-dd-item { min-height: 44px; padding: 12px 20px; font: 400 14px/20px var(--ck-font); }

/* Table header 9413:728012 + body 9405:710420, compact four-column variant.
   Keep eight groups and each group's scroll limit; use spare desktop width for names. */
#page-user-main.customer-kit-shell .main-area:has(#content-home.active),
#page-user-main.customer-kit-shell .content:has(> #content-home.active) { background: var(--ck-paper) !important; }
#page-user-main.customer-kit-shell .content:has(> #content-home.active) { padding: 24px !important; }
#page-user-main.customer-kit-shell #content-home .home-grid,
#page-user-main.customer-kit-shell #content-home .ovsheet {
  --ov-paper: var(--ck-paper); --ov-frame: var(--ck-line); --ov-bar: var(--ck-paper);
  --ov-tool: var(--ck-subtle); --ov-head: var(--ck-paper); --ov-line: var(--ck-line);
  --ov-line2: var(--ck-line); --ov-line3: var(--ck-line); --ov-ink: var(--ck-ink);
  --ov-dim: var(--ck-muted); --ov-date: var(--ck-text); --ov-bad: var(--ck-danger);
  --ov-btn: var(--ck-paper); --ov-btn-hover: var(--ck-hover); --ov-btn-line: var(--ck-input-line);
  --ov-hover: var(--ck-hover); --ov-sel: var(--ck-hover);
  --ov-pg-on: var(--ck-ink); --ov-pg-on-ink: var(--ck-paper);
  font-family: var(--ck-font);
  letter-spacing: 0;
}
#page-user-main.customer-kit-shell #content-home .home-grid { grid-template-columns: minmax(480px, 1fr) minmax(0, 1.2fr); gap: 24px; padding: 20px; border: 1px solid var(--ck-line); border-radius: 12px; background: var(--ck-paper); margin: 0; }
#page-user-main.customer-kit-shell #content-home :is(.home-jboard, #mainCalCard) { background: var(--ck-paper) !important; border: 0 !important; box-shadow: none !important; }
#page-user-main.customer-kit-shell #content-home .hj-band { background: var(--ck-paper); border-top: 0; border-bottom: 1px solid var(--ck-line); color: var(--ck-ink); padding: 10px 12px; font: 600 14px/20px var(--ck-font); }
#page-user-main.customer-kit-shell #content-home .hj-box { padding: 0; scrollbar-color: var(--ck-input-line) transparent; }
#page-user-main.customer-kit-shell #content-home .home-jboard-col + .home-jboard-col { margin-top: 16px; }
#page-user-main.customer-kit-shell #content-home .hj-table td { border: 0; border-bottom: 1px solid var(--ck-line); background: var(--ck-paper); color: var(--ck-text); padding: 6px 8px; height: 44px; font: 400 13px/20px var(--ck-font); }
#page-user-main.customer-kit-shell #content-home .hj-table .hj-name { padding-left: 12px; font-weight: 500; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
#page-user-main.customer-kit-shell #content-home .hj-table .jboard-name { font: 500 14px/20px var(--ck-font); white-space: normal; overflow: visible; word-break: keep-all; overflow-wrap: anywhere; }
#page-user-main.customer-kit-shell #content-home .hj-table .hj-date { width: 130px; font-size: 12px; font-variant-numeric: tabular-nums; }
#page-user-main.customer-kit-shell #content-home .hj-table .hj-state { width: 74px; font-size: 12px; }
#page-user-main.customer-kit-shell #content-home .hj-table .hj-act { width: 64px; padding: 4px; }
#page-user-main.customer-kit-shell #content-home .hj-table :is(.hj-undone, .hj-rejected) { color: var(--ck-danger); }
#page-user-main.customer-kit-shell #content-home .hj-table tr:hover td { background: var(--ck-subtle); }

/* Untitled UI secondary sm 3287:429435, no new click handlers. */
#page-user-main.customer-kit-shell #content-home :is(.jboard-btn, .cal-nav-btn, .cal-today-btn),
#page-user-main.customer-kit-shell .caldm-modal :is(.caldm-btn, .caldm-save) {
  background: var(--ck-paper) !important; color: var(--ck-text) !important;
  border: 1px solid var(--ck-input-line) !important; border-radius: 8px !important;
  padding: 7px 10px; min-height: 36px; height: auto;
  font: 600 13px/20px var(--ck-font) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%) !important;
}
#page-user-main.customer-kit-shell #content-home :is(.jboard-btn, .cal-nav-btn, .cal-today-btn):hover,
#page-user-main.customer-kit-shell .caldm-modal :is(.caldm-btn, .caldm-save):hover { background: var(--ck-hover) !important; }
#page-user-main.customer-kit-shell #content-home .cal-nav-btn { font-size: 0 !important; min-width: 36px; }
#page-user-main.customer-kit-shell #content-home .cal-nav-btn::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: currentColor; mask: url('/icons/admin-chevron-down.svg') center / contain no-repeat; transform: rotate(90deg); }
#page-user-main.customer-kit-shell #content-home .cal-nav-btn[aria-label="다음 달"]::before { transform: rotate(-90deg); }
#page-user-main.customer-kit-shell :is(.topbar, .sidebar, #content-home, .caldm-modal) :is(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ck-text) !important; outline-offset: 3px !important;
}
#page-user-main.customer-kit-shell #content-home ::selection { background: var(--ck-input-line); color: var(--ck-ink); }

/* Content Calendar 106:381. Existing Sunday-first/date/event logic is retained.
   The kit's blue frame/tag tint is adapted to the approved admin neutral palette. */
#page-user-main.customer-kit-shell #content-home .cal-header { background: var(--ck-paper); border: 0; border-bottom: 1px solid var(--ck-line); padding: 0 0 12px; gap: 8px; }
#page-user-main.customer-kit-shell #content-home .cal-month { font: 600 16px/24px var(--ck-font); color: var(--ck-ink); }
#page-user-main.customer-kit-shell #content-home .cal-grid { padding: 0; }
#page-user-main.customer-kit-shell #content-home #mainCalCard { height: auto !important; }
#page-user-main.customer-kit-shell #content-home #mainCalCard .cal-grid { flex: 0 0 auto !important; }
#page-user-main.customer-kit-shell #content-home #mainCalCard .cal-body { grid-auto-rows: auto !important; }
#page-user-main.customer-kit-shell #content-home .cal-days-row { border-color: var(--ck-line); }
#page-user-main.customer-kit-shell #content-home .cal-day-label { background: var(--ck-paper); border-color: var(--ck-line); color: var(--ck-muted); padding: 10px 0 !important; font: 500 12px/18px var(--ck-font) !important; }
#page-user-main.customer-kit-shell #content-home .cal-cell { border-color: var(--ck-line); background: var(--ck-paper); padding: 12px !important; }
#page-user-main.customer-kit-shell #content-home .cal-cell:hover,
#page-user-main.customer-kit-shell #content-home .cal-cell.selected { background: var(--ck-subtle); }
#page-user-main.customer-kit-shell #content-home .cal-date { color: var(--ck-ink); font: 500 14px/20px var(--ck-font) !important; font-variant-numeric: tabular-nums; }
#page-user-main.customer-kit-shell #content-home .cal-date.today-num { color: var(--ck-paper) !important; background: var(--ck-ink) !important; border-radius: 4px; }
#page-user-main.customer-kit-shell #content-home :is(.cal-date.sun:not(.today-num), .cal-day-label.sun) { color: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell #content-home .cal-date.other { color: var(--ck-muted); }
#page-user-main.customer-kit-shell #content-home .cal-event { border: 0 !important; border-radius: 4px !important; background: var(--ck-hover) !important; color: var(--ck-text) !important; padding: 3px 4px !important; font: 500 12px/18px var(--ck-font) !important; }
#page-user-main.customer-kit-shell #content-home .cal-event.type-alert-due { color: var(--ck-ink) !important; font-weight: 700 !important; }
#page-user-main.customer-kit-shell #content-home .cal-event.type-alert-past { color: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell #content-home .cal-event.done { color: var(--ck-muted) !important; text-decoration: line-through; }

/* Untitled UI dialog 4057:415359/input 11351:120131. Calendar dialog only. */
#page-user-main.customer-kit-shell .caldm-modal { background: var(--ck-paper) !important; color: var(--ck-text); border: 1px solid var(--ck-line); border-radius: 16px !important; box-shadow: 0 12px 32px rgb(0 0 0 / 12%) !important; font-family: var(--ck-font); }
#page-user-main.customer-kit-shell .caldm-modal .ccp-modal-head { background: var(--ck-paper); border-bottom: 1px solid var(--ck-line); padding: 20px 24px; }
#page-user-main.customer-kit-shell .caldm-modal .ccp-modal-title { color: var(--ck-ink); font: 600 18px/28px var(--ck-font); }
#page-user-main.customer-kit-shell .caldm-modal .ccp-modal-close { width: 36px; height: 36px; font-size: 0; border-radius: 6px; color: var(--ck-muted); }
#page-user-main.customer-kit-shell .caldm-modal .ccp-modal-close::before { content: ""; width: 20px; height: 20px; background: currentColor; mask: url('/icons/admin-x-close.svg') center / contain no-repeat; }
#page-user-main.customer-kit-shell .caldm-modal .ccp-modal-body { padding: 24px !important; }
#page-user-main.customer-kit-shell .caldm-modal :is(.caldm-date, .caldm-add-h, .caldm-label, .caldm-type, .caldm-time-row label) { color: var(--ck-text); font: 500 14px/20px var(--ck-font); }
#page-user-main.customer-kit-shell .caldm-modal :is(.caldm-empty, .caldm-hint, .caldm-time) { color: var(--ck-muted); font: 400 12px/18px var(--ck-font); }
#page-user-main.customer-kit-shell .caldm-modal .caldm-input { background: var(--ck-paper); color: var(--ck-ink); border: 1px solid var(--ck-input-line); border-radius: 8px; padding: 8px 12px; min-height: 40px; font: 400 14px/20px var(--ck-font); box-shadow: none; caret-color: var(--ck-ink); }
#page-user-main.customer-kit-shell .caldm-modal .caldm-input::placeholder { color: var(--ck-muted); }
#page-user-main.customer-kit-shell .caldm-modal .caldm-row { background: var(--ck-paper); border: 0; border-bottom: 1px solid var(--ck-line); border-radius: 0; padding: 12px 0; }
#page-user-main.customer-kit-shell .caldm-modal .caldm-btn.del { color: var(--ck-danger) !important; }
#page-user-main.customer-kit-shell .caldm-modal .caldm-save { width: auto; margin-top: 16px; padding: 8px 20px; background: var(--ck-ink) !important; color: var(--ck-paper) !important; }
#page-user-main.customer-kit-shell .caldm-modal .caldm-save:hover { background: var(--ck-text) !important; color: var(--ck-paper) !important; }

@media (max-width: 1100px) {
  #page-user-main.customer-kit-shell #content-home .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  #page-user-main.customer-kit-shell .topbar { padding-inline: 12px; }
  #page-user-main.customer-kit-shell .content:has(> #content-home.active) { padding: 12px !important; }
  #page-user-main.customer-kit-shell #content-home .home-grid { padding: 0; gap: 20px; }
  #page-user-main.customer-kit-shell #content-home .content-grid { padding: 12px; }
  #page-user-main.customer-kit-shell #content-home :is(.jboard-btn, .cal-nav-btn, .cal-today-btn),
  #page-user-main.customer-kit-shell .caldm-modal :is(.caldm-btn, .caldm-save) { min-height: 44px; }
  #page-user-main.customer-kit-shell #content-home .hj-table td { padding: 4px; }
  #page-user-main.customer-kit-shell #content-home .hj-table .hj-name { padding-left: 4px; }
  #page-user-main.customer-kit-shell #content-home .hj-table .hj-date { width: 108px; font-size: 11px; }
  /* Reclaim only an entirely empty date column; populated dates immediately restore it. */
  #page-user-main.customer-kit-shell #content-home .hj-table:not(:has(.hj-date:not(:empty))) .hj-date { width: 0; padding: 0; }
  #page-user-main.customer-kit-shell #content-home .hj-table .hj-state { width: 54px; white-space: normal; }
  #page-user-main.customer-kit-shell #content-home .hj-table .hj-act { width: 56px; }
  #page-user-main.customer-kit-shell #content-home .cal-cell { padding: 4px !important; }
}