/* Jeongdo Design System — reusable components and layout primitives. */

html { background: var(--color-surface-canvas); }

body {
  font-family: var(--font-family-sans);
  line-height: var(--line-height-normal);
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
}

::selection { background: var(--color-info-subtle); color: var(--color-text-primary); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-action-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.skip-link {
  position: fixed;
  z-index: 2000;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.container { max-width: var(--content-max); padding: var(--space-8); }

.site-header {
  position: relative;
  z-index: 100;
  min-height: var(--header-height);
  padding: var(--space-3) max(var(--space-5), calc((100vw - var(--content-max)) / 2));
  border-color: var(--color-border-subtle);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-text-primary);
  font-family: var(--font-family-data);
  font-size: var(--font-size-xs);
  letter-spacing: -0.08em;
}
.brand-name { white-space: nowrap; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.site-header .site-nav a {
  /* 메뉴 항목은 단어 단위로 줄바꿈하지 않는다. 넓이가 부족한 화면은
     breakpoint의 wrap/가로 스크롤 규칙이 처리한다. */
  white-space: nowrap;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.site-header .site-nav a:hover { background: var(--color-surface-subtle); }
.nav-secondary { display: contents; }

.page-head { gap: var(--space-5); margin-bottom: var(--space-6); }
.page-head h1 { margin: 0; font-size: var(--font-size-2xl); line-height: var(--line-height-tight); }
.page-head-actions, .button-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cluster { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.inline-action-form { display: inline-flex; margin: 0; }
.is-hidden { display: none; }
.w-full { width: 100%; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.ml-3 { margin-left: var(--space-3); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.section-heading { margin-top: 0; }
.helper-text { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.status-panel { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); }
.status-panel.success { background: var(--color-success-subtle); color: var(--color-success); }
.status-title { font-weight: var(--font-weight-semibold); }
.status-meta { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.status-help { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.surface-subtle { background: var(--color-surface-subtle); }
.label-auto { width: auto !important; }
.dynamic-swatch { background: var(--swatch-color, var(--color-text-disabled)); }
.dynamic-border { border-left-color: var(--accent-color, var(--color-border-strong)) !important; }
.dynamic-bar { height: var(--bar-size, 0%); }
.dynamic-progress { width: var(--progress, 0%); }
.pay-amount-fixed { width: 6.875rem !important; text-align: right; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.375rem; height: 1.375rem; }
.icon-lg { width: 2.25rem; height: 2.25rem; }
.empty-icon { font-size: 2.25rem; line-height: 1; }

.btn {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: background var(--motion-fast), border-color var(--motion-fast),
    color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.btn:hover { border-color: var(--color-border-strong); box-shadow: 0 3px 10px rgba(23, 26, 29, 0.07); }
.btn:active { transform: translateY(1px); }
.btn.primary { border-color: var(--color-action-primary); background: var(--color-action-primary); color: var(--color-text-inverse); }
.btn.primary:hover { border-color: var(--color-action-primary-hover); background: var(--color-action-primary-hover); }
.btn.danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn.danger:hover { background: var(--color-danger); color: var(--color-text-inverse); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.sm { min-height: 2rem; padding: 0 var(--space-3); font-size: var(--font-size-xs); }
.btn.icon { width: 2.5rem; padding: 0; }

.card, .panel {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-default);
  box-shadow: var(--shadow-sm);
}
.card { padding: var(--space-6); }
.panel { padding: var(--space-5); }
.card-header, .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }

.form { width: 100%; max-width: var(--content-narrow); }
.form-card { padding: var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface-default); }
.field, .form .row { display: grid; grid-template-columns: minmax(7.5rem, 0.28fr) 1fr; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.field-label, .form .row > label { width: auto; color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.field-hint { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
:where(.field, .form .row, .login-form) input:not([type="checkbox"]):not([type="radio"]),
:where(.field, .form .row, .login-form) select,
:where(.field, .form .row, .login-form) textarea,
.input {
  min-height: 2.625rem;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font: inherit;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
:where(.field, .form .row, .login-form) input:focus,
:where(.field, .form .row, .login-form) select:focus,
:where(.field, .form .row, .login-form) textarea:focus,
.input:focus { border-color: var(--color-action-focus); outline: none; box-shadow: var(--focus-ring); }
.form .row.actions { display: flex; gap: var(--space-2); padding-left: calc(28% + var(--space-4)); }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.badge.info { background: var(--color-info-subtle); color: var(--color-info); }
.badge.success { background: var(--color-success-subtle); color: var(--color-success); }
.badge.warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge.danger { background: var(--color-danger-subtle); color: var(--color-danger); }

.alert, .flash { padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.alert.info { border-color: var(--color-info-border); background: var(--color-info-subtle); color: var(--color-info); }
.alert.success, .flash.ok { border-color: var(--color-success-border); background: var(--color-success-subtle); color: var(--color-success); }
.alert.warning { border-color: var(--color-warning-border); background: var(--color-warning-subtle); color: var(--color-warning); }
.alert.danger, .flash.error { border-color: var(--color-danger-border); background: var(--color-danger-subtle); color: var(--color-danger); }

.toast {
  position: fixed;
  z-index: 1200;
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  max-width: min(24rem, calc(100vw - var(--space-8)));
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
}
.toast.success { background: var(--color-success); }
.toast.warning { background: var(--color-warning); }
.toast.danger { background: var(--color-danger); }
.is-loading { cursor: wait; }
.is-loading::before {
  width: .875rem;
  height: .875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jd-spin .7s linear infinite;
  content: "";
}
@keyframes jd-spin { to { transform: rotate(360deg); } }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.data-table { width: 100%; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--color-surface-default); }
.data-table th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: left; }
.data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--color-surface-canvas); }
.action-cell { text-align: right; }
.action-cell .button-group { justify-content: flex-end; }

.empty-state, .empty { max-width: 32rem; margin: var(--space-12) auto; padding: var(--space-10); border: 1px dashed var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-surface-default); text-align: center; color: var(--color-text-secondary); }
.empty-state-title { margin: 0 0 var(--space-2); color: var(--color-text-primary); font-size: var(--font-size-xl); }

.modal-backdrop { background: rgba(23, 26, 29, 0.68); backdrop-filter: blur(3px); }
.modal-content { border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }

/* Bring feature-specific legacy surfaces onto the same visual foundation. */
:where(.dash-cover, .dash-card, .dash-quick, .exp-metric, .exp-add,
  .exp-list-wrap, .ce-add, .ce-list-wrap, .ce-year-summary, .cd-card,
  .cd-section, .slide-block, .cal-sidebar, .share-card) {
  border-color: var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-default);
  box-shadow: var(--shadow-sm);
}
:where(.dash-card, .material-card, .cd-card) {
  transition: border-color var(--motion-fast), transform var(--motion-fast),
    box-shadow var(--motion-fast);
}
:where(.dash-card, .material-card, .cd-card):hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-md);
}
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) input,
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) select {
  border-color: var(--color-border-default);
  border-radius: var(--radius-sm);
}
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) input:focus,
:where(.exp-add-form, .ce-add-form, .mat-search-bar, .inline-form) select:focus {
  border-color: var(--color-action-focus);
  outline: none;
  box-shadow: var(--focus-ring);
}
:where(.project-table, .exp-table, .ce-table, .cd-proj-table) th {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

.dash-sub-spaced { margin: var(--space-6) 0; }
.dash-icon, .share-icon {
  display: inline-grid;
  width: fit-content;
  min-width: 3rem;
  min-height: 1.75rem;
  place-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-info);
  font-family: var(--font-family-data);
  font-size: .6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
}
.share-icon { margin-inline: auto; }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-secondary); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.dash-progress-bar { width: var(--progress, 0%); background: var(--progress-color, var(--color-info)); }

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-10);
  text-align: left;
}
.hero::after {
  position: absolute;
  inset: var(--space-8) 0 auto auto;
  width: min(26rem, 42vw);
  height: 8rem;
  background-image: linear-gradient(var(--color-border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 1rem 1rem;
  content: "";
  opacity: .62;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, var(--color-text-primary));
}
.hero-kicker { position: relative; z-index: 1; margin: 0 0 var(--space-3); color: var(--color-info); font-family: var(--font-family-data); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { position: relative; z-index: 1; max-width: 46rem; font-size: var(--font-size-display); line-height: 1.08; letter-spacing: -.045em; }
.hero-sub { position: relative; z-index: 1; max-width: 38rem; margin-top: var(--space-4); font-size: var(--font-size-lg); }

.big-card { position: relative; min-height: 13rem; padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.big-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.big-card-num { font-family: var(--font-family-data); color: var(--color-info); }
.big-card.primary { background: var(--color-surface-inverse); }

.login-wrap { position: relative; background: var(--color-surface-canvas); }
.login-wrap::before { position: absolute; inset: 0 50% 0 0; background: var(--color-surface-inverse); content: ""; }
.login-card { position: relative; width: min(100%, 27rem); max-width: none; padding: var(--space-10); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }
.login-brand { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.login-title { margin: 0; }
.login-form .row { display: block; }
.login-form .row.actions { padding: 0; }
.login-form .row.actions .btn { width: 100%; }

@media (max-width: 64rem) {
  .site-header { align-items: flex-start; }
  .site-nav { flex-wrap: wrap; }
}

@media (max-width: 48rem) {
  .container { padding: var(--space-5); }
  .site-header { align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .brand-name { font-size: var(--font-size-md); }
  .site-header .site-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
  }
  .site-header .site-nav a { flex: 0 0 auto; padding: var(--space-2); font-size: var(--font-size-xs); white-space: nowrap; }
  .nav-secondary { display: contents; }
  .user-info { display: inline-flex; flex: 0 0 auto; margin-left: var(--space-2); white-space: nowrap; }
  .company-switcher { display: inline-block; flex: 0 0 auto; }
  .page-head { align-items: flex-start; }
  .page-head-actions { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .field, .form .row { display: block; }
  .field-label, .form .row > label { display: block; margin-bottom: var(--space-2); }
  .form .row.actions { padding-left: 0; }
  .login-wrap::before { inset: 0 0 58% 0; }
  .login-card { padding: var(--space-8) var(--space-6); }
  .data-table-responsive, .data-table-responsive tbody, .data-table-responsive tr, .data-table-responsive td { display: block; width: 100%; }
  .data-table-responsive thead { display: none; }
  .data-table-responsive { border: 0; background: transparent; }
  .data-table-responsive tr { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-default); }
  .data-table-responsive td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; }
  .data-table-responsive td[data-label]::before { content: attr(data-label); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
  .data-table-responsive .action-cell { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
  .data-table-responsive .action-cell .button-group { width: 100%; justify-content: flex-start; }
}

@media print {
  .skip-link { display: none; }
  body { background: var(--color-surface-default); }
}