/* PickPC 공용 프리미티브
 *
 * 59개 화면이 전부 여기 있는 요소로 만들어져 있어, 이 파일이 전체 인상을 정합니다.
 * 선택자는 한 글자도 바꾸지 않았습니다 - 브라우저 테스트가 클래스 187곳, id 121곳을
 * 붙잡고 있고, 그리드 트랙 수/sticky/폭 비율도 검사하므로 골격은 그대로 둡니다.
 * 바뀐 것은 선언부(색·여백·타이포·라운드·그림자·모션)뿐입니다.
 */

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

html {
  min-width: 320px;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: inherit;
  /* font-size 는 일부러 두지 않습니다. 여기서 13px 로 내리면 크기를 명시하지 않은
     요소가 16px -> 13px 로 작아져 59개 화면이 한꺼번에 리플로우됩니다.
     본문이 9~11px 에 몰린 문제는 각 표면 스타일시트에서 잡습니다. */
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-normal);
  /* 한글은 단어 중간에서 끊기면 눈에 바로 걸립니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  border: 0;
}

[hidden] {
  display: none !important;
}

/* 제목은 자간을 살짝 좁혀야 큰 글자에서 헐렁해 보이지 않습니다. */
h1,
h2,
h3,
h4 {
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* 대문자 키커는 반대로 벌려야 읽힙니다. */
.section-kicker {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.shell {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--space-7);
}

/* ── 버튼 ── */
.button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  transition: var(--interaction-transition);
  white-space: nowrap;
}

.button:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-raised);
}

.button-secondary {
  border-color: var(--color-control-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.button-secondary:hover {
  border-color: var(--color-primary);
  background: var(--interaction-hover-gradient);
  color: var(--color-primary);
}

.button-danger {
  border-color: var(--color-danger-line);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.button-danger:hover {
  border-color: var(--color-danger);
  background: rgba(239, 105, 105, 0.2);
  box-shadow: none;
}

.button svg,
.icon-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

.icon-button {
  display: inline-grid;
  width: var(--control-height);
  height: var(--control-height);
  min-width: var(--control-height);
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--interaction-transition);
}

.icon-button:hover {
  border-color: var(--color-primary);
  background: var(--interaction-hover-gradient);
  color: var(--color-primary);
}

.button:active:not(:disabled),
.icon-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.45;
}

/* ── 입력 ── 경계가 유일한 식별 수단이라 컨트롤 보더를 씁니다. */
.input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--color-canvas-soft);
  color: var(--color-text);
  font-size: var(--text-body);
  transition: var(--interaction-transition);
}

.input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

.input:hover {
  border-color: var(--color-border-strong);
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

/* ── 표 ── 줄을 촘촘히 긋는 대신 헤더만 분리하고 행은 호버로 짚습니다. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: var(--text-small);
}

.data-table th,
.data-table td {
  height: 48px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* sticky 는 넣지 않았습니다 - .table-wrap 에 높이 제약이 없어 스크롤이 생기지 않으므로
   작동하지 않는 선언이 됩니다. 헤더는 배경과 자간으로만 분리합니다. */
.data-table thead th {
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover {
  background: var(--color-surface-hover);
}

/* ── 다이얼로그 ── */
.dialog {
  width: min(92vw, 560px);
  max-height: min(84vh, 720px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  outline: none;
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}

.dialog::backdrop {
  background: rgba(2, 8, 11, 0.74);
  backdrop-filter: blur(3px);
}

/* ── 토스트 ── */
.toast-region {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 100;
  display: grid;
  width: min(360px, calc(100vw - var(--space-7)));
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--text-small);
  box-shadow: var(--shadow-overlay);
}

/* ── 상태 표시 ── */
.loading-state,
.empty-state,
.error-state {
  display: grid;
  min-height: 152px;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
}

.loading-state strong,
.empty-state strong,
.error-state strong {
  color: var(--color-text);
  font-size: var(--text-lead);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.loading-state p,
.empty-state p,
.error-state p {
  max-width: 520px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.error-state {
  border-color: var(--color-danger-line);
  background: linear-gradient(180deg, var(--color-danger-soft), transparent 62%), var(--color-surface);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: shared-spin 0.8s linear infinite;
}

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

/* workspace.css 에 있던 중복 정의를 여기 한 곳으로 모았습니다.
   sticky 사이드바·탑바(z-index 20)보다 위여야 하므로 300 을 씁니다. */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 300;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

@keyframes shared-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .shell {
    padding-inline: var(--space-5);
  }

  .button {
    padding-inline: var(--space-4);
  }

  .toast-region {
    right: var(--space-5);
    bottom: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .loading-spinner {
    animation-duration: 1.8s;
  }

  .skip-link,
  .button,
  .icon-button,
  .input,
  .data-table tbody tr {
    transition: none;
  }
}