/* 공통 요소와 배치. 디자인 값은 먼저 로드되는 design-tokens.css 참조. */
:root {
  font-family: var(--font-family);
  color: var(--text);
  background: var(--page-background);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; color: var(--subtle); background: var(--surface-disabled); }
input, select, textarea { min-width: 0; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }
[hidden] { display: none !important; }

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

.site-header {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-18) var(--space-20);
  border-bottom: var(--border-width) solid var(--line);
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-regular);
}

#app { max-width: var(--page-width); margin: 0 auto; padding: var(--space-24) var(--space-20) var(--space-36); }
.form-panel { min-width: 0; outline: none; }
.section-heading { margin-bottom: var(--space-22); }
.heading-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
h1 { margin: 0; font-size: var(--font-size-title); font-weight: var(--font-weight-strong); line-height: var(--leading-normal); }
.progress { color: var(--muted); font-size: var(--font-size-note); white-space: nowrap; }
.section-heading p { margin: var(--space-06) 0 0; color: var(--muted); font-size: var(--font-size-note); line-height: var(--leading-note); }
h2 { margin: 0 0 var(--space-16); font-size: var(--font-size-section); line-height: var(--leading-field); }
h3 { margin: 0 0 var(--space-14); font-size: var(--font-size-subheading); line-height: var(--leading-field); }

.role-options, .types-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-08); }
.role-options { margin-bottom: var(--space-24); }
.role-option, .type-card {
  min-height: var(--control-min-height);
  width: 100%;
  padding: var(--space-12) var(--space-14);
  border: var(--border-width) solid var(--border-choice);
  border-radius: var(--control-radius);
  background: var(--control-background);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  text-align: left;
  font-size: var(--font-size-body);
  line-height: var(--leading-normal);
}
.role-option.selected, .type-card.selected { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.selection-state { font-size: var(--font-size-sm); white-space: nowrap; }

.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.field { display: block; margin-bottom: var(--space-20); min-width: 0; }
.field-label { display: block; margin: 0 0 var(--space-08); font-size: var(--font-size-label); line-height: var(--leading-field); font-weight: var(--font-weight-medium); }
.required { color: var(--text); }
.optional-label { color: var(--muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); margin-left: var(--space-05); }
.field input, .field select, .field textarea, .search-input,
.verify-input, .address-input, .number-control input {
  width: 100%;
  min-height: var(--control-min-height);
  padding: var(--space-11) var(--space-12);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--control-radius);
  background: var(--control-background);
  color: var(--text);
  font-size: var(--font-size-input);
  line-height: var(--leading-normal);
}
.field input::placeholder, .field textarea::placeholder, .verify-input::placeholder,
.number-control input::placeholder { color: var(--subtle); font-size: var(--font-size-label); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-disabled); color: var(--subtle); border-color: var(--line); }
.field textarea { resize: vertical; min-height: var(--textarea-min-height); }
.field-hint, .quantity-summary { margin: var(--space-08) 0 var(--space-14); font-size: var(--font-size-sm); line-height: var(--leading-detail); color: var(--muted); }

.button, .text-button, .dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min-height);
  max-width: 100%;
  padding: var(--space-11) var(--space-16);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--control-radius);
  background: var(--control-background);
  color: var(--text);
  text-decoration: none;
  font-size: var(--font-size-body);
  line-height: var(--leading-normal);
  font-weight: var(--font-weight-medium);
}
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.primary:disabled { background: var(--subtle); border-color: var(--subtle); }
.button.secondary, .button.ghost { background: var(--control-background); color: var(--accent); border-color: var(--accent); }
.text-button { color: var(--accent); border-color: transparent; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: var(--underline-offset); font-size: var(--font-size-label); }
.text-button:disabled { background: transparent; text-decoration: none; }
.wide { width: 100%; }
.actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-28); padding-top: var(--space-20); border-top: var(--border-width) solid var(--line); }
.actions .button { width: 100%; }
.test-notice { margin: var(--space-20) 0 0; font-size: var(--font-size-xs); color: var(--subtle); line-height: var(--leading-note); }

.check-row, .condition {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: var(--control-min-height);
  padding: var(--space-10) 0;
  font-size: var(--font-size-label);
  line-height: var(--leading-field);
  cursor: pointer;
}
.check-row input, .condition input { width: var(--checkbox-size); height: var(--checkbox-size); flex: none; margin: 0; accent-color: var(--accent); }
.conditions-grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-20); }
.condition { border-bottom: var(--border-width) solid var(--line-soft); }
.verify-box { margin: var(--space-20) 0; padding: var(--space-16) 0; border-top: var(--border-width) solid var(--line); border-bottom: var(--border-width) solid var(--line); }
.verify-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.verify-input { letter-spacing: .15em; }
.verify-error { color: var(--error); font-size: var(--font-size-note); line-height: var(--leading-detail); font-weight: var(--font-weight-medium); }
.verification-status { margin: var(--space-14) 0; padding: var(--space-12); border-left: var(--status-border-width) solid var(--accent); background: var(--surface); font-size: var(--font-size-note); line-height: var(--leading-detail); }
.notice { margin-bottom: var(--space-18); padding: var(--space-13); border: var(--border-width) solid var(--line); background: var(--surface); font-size: var(--font-size-note); line-height: var(--leading-detail); overflow-wrap: anywhere; }
.notice.error, .notice.warning { font-weight: var(--font-weight-medium); }
.notice.error { border-left: var(--status-border-width) solid var(--error); color: var(--error); }
.notice.warning, .verification-status.warning { border-left: var(--status-border-width) solid var(--warning); color: var(--warning); }
.notice.success { border-left: var(--status-border-width) solid var(--accent); }
.loading-text, .empty-result { font-size: var(--font-size-label); line-height: var(--leading-detail); margin: var(--space-16) 0; color: var(--muted); }

.form-title-line { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-08); margin: var(--space-20) 0 var(--space-12); }
.form-title-line h2 { margin: 0; }
.search-results { list-style: none; padding: 0; margin: var(--space-14) 0; max-height: var(--search-results-max-height); overflow-y: auto; border: var(--border-width) solid var(--line); }
.search-results li + li { border-top: var(--border-width) solid var(--line); }
.store-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-05); width: 100%; min-height: var(--control-min-height); padding: var(--space-15) var(--space-12); border: 0; background: var(--control-background); color: var(--text); text-align: left; }
.store-option:hover { background: var(--surface); }
.store-option strong { font-size: var(--font-size-body); }
.store-option span { font-size: var(--font-size-sm); color: var(--muted); line-height: var(--leading-note); overflow-wrap: anywhere; }
.selected-store { padding: var(--space-16) 0; border-top: var(--border-width) solid var(--line); border-bottom: var(--border-width) solid var(--line); }
.selected-store strong { font-size: var(--font-size-subheading); }
.selected-store p { margin: var(--space-06) 0 0; font-size: var(--font-size-note); line-height: var(--leading-detail); color: var(--muted); overflow-wrap: anywhere; }
.new-store-box { margin-top: var(--space-20); }
.address-search-button { width: 100%; margin-bottom: var(--space-10); }
.candidate-box { margin: var(--space-20) 0; padding-top: var(--space-18); border-top: var(--border-width) solid var(--line); }

.subsection { margin-top: var(--space-30); padding-top: var(--space-24); border-top: var(--border-width) solid var(--line); }
.item-editor { margin-top: var(--space-24); padding-top: var(--space-20); border-top: var(--border-width) solid var(--line); }
.quantity-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.number-field { display: grid; grid-template-columns: minmax(0, 1fr) var(--quantity-input-width); align-items: center; gap: var(--space-12); min-height: var(--control-min-height); font-size: var(--font-size-label); }
.number-control { display: flex; align-items: center; gap: var(--space-08); min-width: 0; }
.number-control input { min-width: 0; flex: 1; }
.numeric, .number-control input { text-align: right; font-variant-numeric: tabular-nums; }
.number-control > span { flex: none; font-size: var(--font-size-note); }
.segmented { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-08); }
.segmented button { min-height: var(--control-min-height); padding: var(--space-11) var(--space-14); border: var(--border-width) solid var(--border-choice); border-radius: var(--control-radius); background: var(--control-background); color: var(--text); text-align: left; font-size: var(--font-size-body); }
.segmented button.selected { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.floor-row { padding: var(--space-14) 0; border-bottom: var(--border-width) solid var(--line); }
.floor-row .field { margin-bottom: var(--space-14); }
.floor-row .text-button { margin-top: var(--space-06); }
.added-stores { margin-bottom: var(--space-28); padding-bottom: var(--space-16); border-bottom: var(--border-width) solid var(--line); }
.added-store { padding: var(--space-14) 0; border-top: var(--border-width) solid var(--line); }
.added-store strong { font-size: var(--font-size-body); }
.added-store p { margin: var(--space-06) 0 0; font-size: var(--font-size-sm); color: var(--muted); line-height: var(--leading-detail); }
.added-store-actions { display: flex; gap: var(--space-20); }

.review-applicant { padding-bottom: var(--space-20); border-bottom: var(--border-width) solid var(--line); margin-bottom: var(--space-20); font-size: var(--font-size-body); line-height: var(--leading-note); }
.review-applicant p { margin: var(--space-06) 0 0; color: var(--muted); font-size: var(--font-size-note); }
.review-card { padding: var(--space-20) 0; border-bottom: var(--border-width) solid var(--line); }
.review-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-14); }
.review-card-header > div { min-width: 0; }
.review-card-header h2 { margin: 0 0 var(--space-08); }
.review-card-header p { font-size: var(--font-size-note); color: var(--muted); line-height: var(--leading-detail); margin: 0; overflow-wrap: anywhere; }
.review-card-header .text-button { flex: none; }
.review-items { margin: var(--space-16) 0; }
.review-item { padding: var(--space-13) 0; border-bottom: var(--border-width) solid var(--line-soft); }
.review-item dt { font-size: var(--font-size-label); line-height: var(--leading-detail); }
.review-item dd { margin: var(--space-05) 0 0; font-size: var(--font-size-note); color: var(--muted); line-height: var(--leading-detail); }
.review-conditions, .review-memo { margin: var(--space-14) 0 0; font-size: var(--font-size-note); line-height: var(--leading-detail); color: var(--muted); white-space: pre-wrap; }
.receipt-card { padding: var(--space-20) 0; border-bottom: var(--border-width) solid var(--line); }
.receipt-card h2 { margin-bottom: var(--space-12); }
.receipt-number { margin: 0 0 var(--space-12); font-size: var(--font-size-reference); font-weight: var(--font-weight-strong); line-height: var(--leading-field); font-variant-numeric: tabular-nums; }
.identifier { display: block; max-width: 100%; white-space: nowrap; overflow-wrap: normal; word-break: normal; overflow-x: auto; overflow-y: hidden; }
.identifier:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }
.receipt-meta { font-size: var(--font-size-note); line-height: var(--leading-loose); color: var(--muted); }
.receipt-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-20); }
/* Receipt status uses the common tokens without changing intake/review layout. */
body[data-view="receipt"] .receipt-status-item { padding: var(--space-24) 0; border-bottom: var(--border-width) solid var(--line); min-width: 0; }
body[data-view="receipt"] .receipt-status-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-08); }
body[data-view="receipt"] .receipt-status-heading h3 { margin: 0; }
body[data-view="receipt"] .receipt-item-number { margin: var(--space-10) 0; color: var(--muted); font-size: var(--font-size-note); font-variant-numeric: tabular-nums; }
body[data-view="receipt"] .receipt-quantity { margin: var(--space-10) 0; text-align: right; font-size: var(--font-size-label); }
body[data-view="receipt"] .receipt-work-progress, body[data-view="receipt"] .receipt-summary { margin: var(--space-12) 0; font-size: var(--font-size-body); font-weight: var(--font-weight-medium); line-height: var(--leading-detail); }
body[data-view="receipt"] .receipt-status-label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); }
body[data-view="receipt"] .tone-neutral { color: var(--muted); }
body[data-view="receipt"] .tone-accent { color: var(--accent); }
body[data-view="receipt"] .tone-warning { color: var(--warning); }
body[data-view="receipt"] .receipt-status-facts { margin: var(--space-16) 0; font-size: var(--font-size-label); line-height: var(--leading-detail); }
body[data-view="receipt"] .receipt-status-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-12); padding: var(--space-06) 0; }
body[data-view="receipt"] .receipt-status-facts dt { color: var(--muted); }
body[data-view="receipt"] .receipt-status-facts dd { margin: 0; overflow-wrap: anywhere; }
body[data-view="receipt"] .receipt-executions summary { min-height: var(--control-min-height); padding: var(--space-12) 0; cursor: pointer; font-size: var(--font-size-label); line-height: var(--leading-normal); list-style: none; text-decoration: underline; text-underline-offset: var(--underline-offset); }
body[data-view="receipt"] .receipt-executions summary::-webkit-details-marker { display: none; }
body[data-view="receipt"] .receipt-executions summary:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }
body[data-view="receipt"] .receipt-executions ul { list-style: none; padding: 0; margin: 0; }
body[data-view="receipt"] .receipt-executions li { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-08) 0; border-top: var(--border-width) solid var(--line-soft); font-size: var(--font-size-label); }

.address-dialog { width: min(var(--address-dialog-width), calc(100% - var(--space-24))); max-height: calc(100dvh - var(--space-24)); padding: 0; border: var(--border-width) solid var(--subtle); border-radius: var(--control-radius); background: var(--page-background); color: var(--text); overflow: hidden; }
.address-dialog::backdrop { background: var(--backdrop); }
.address-dialog-header { display: flex; justify-content: space-between; gap: var(--space-12); align-items: flex-start; padding: var(--space-16); border-bottom: var(--border-width) solid var(--line); }
.address-dialog-header h2 { margin: 0 0 var(--space-07); font-size: var(--font-size-dialog); }
.address-dialog-header p { margin: 0; color: var(--muted); font-size: var(--font-size-sm); line-height: var(--leading-note); }
.dialog-close { flex: none; font-size: var(--font-size-note); padding: var(--space-11); }
.postcode-body { position: relative; height: min(var(--address-search-max-height), calc(100dvh - var(--address-search-reserved-height))); min-height: var(--address-search-min-height); background: var(--surface); }
.postcode-frame { width: 100%; height: 100%; }
.postcode-frame > div { max-width: 100%; }
.postcode-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-24); background: var(--surface); color: var(--muted); text-align: center; font-size: var(--font-size-note); line-height: var(--leading-loose); z-index: 1; }
.postcode-failure { color: var(--error); font-weight: var(--font-weight-medium); }
.address-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-08); padding: var(--space-12) var(--space-16); border-top: var(--border-width) solid var(--line); color: var(--muted); font-size: var(--font-size-sm); line-height: var(--leading-note); }
.address-dialog-footer .text-button { margin-left: auto; }

.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; padding: var(--space-12); background: var(--control-background); color: var(--accent); min-height: var(--control-min-height); }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100% - var(--space-32)); padding: var(--space-12) var(--space-16); background: var(--toast-background); color: var(--on-accent); font-size: var(--font-size-note); line-height: var(--leading-detail); text-align: center; }
.noscript { max-width: var(--page-width); margin: auto; padding: var(--space-20); }

/* 반응형 기준: 800px 이상. 이 분기 숫자는 CSS 변수로 대체할 수 없습니다. */
@media (min-width: 800px) {
  .site-header { padding-top: var(--space-24); padding-bottom: var(--space-20); font-size: var(--font-size-note); }
  #app { padding-top: var(--space-28); }
  h1 { font-size: var(--font-size-title-wide); }
  .role-option, .type-card, .button, .segmented button { min-height: var(--control-min-height-wide); }

  /* 담당자·본사 입력만 PC에 맞게 넓힙니다. 점주·점장·영수증은 기존 폭입니다. */
  body[data-view="am"] .site-header,
  body[data-view="am"] #app { max-width: var(--staff-page-width); }

  body[data-view="am"] .role-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-view="am"] #app[data-step="1"] .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
  body[data-view="am"] #app[data-step="1"] .form-panel > .field { max-width: calc((100% - var(--space-24)) / 2); }
  body[data-view="am"] .verify-controls { grid-template-columns: minmax(0, 1fr) auto; max-width: var(--address-dialog-width); }

  body[data-view="am"] .intake-workspace.has-details {
    display: grid;
    grid-template-columns: minmax(0, var(--staff-store-column-width)) minmax(0, 1fr);
    column-gap: var(--space-32);
    align-items: start;
  }
  body[data-view="am"] .store-section,
  body[data-view="am"] .cleaning-section,
  body[data-view="am"] .conditions-section { min-width: 0; }
  body[data-view="am"] .store-section > .form-title-line { margin-top: 0; }
  body[data-view="am"] .cleaning-section { margin-top: 0; padding-top: 0; border-top: 0; }
  body[data-view="am"] .conditions-section { grid-column: 1 / -1; }
  body[data-view="am"] .types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-view="am"] .type-card { align-items: flex-start; }
  body[data-view="am"] .type-card > span:first-child { min-width: 0; }
  body[data-view="am"] .quantity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
  body[data-view="am"] .quantity-grid .number-field { grid-template-columns: minmax(0, 1fr); gap: var(--space-06); }
  body[data-view="am"] .segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-view="am"] .conditions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-24); }

  body[data-view="am"] .added-store { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-24); padding: var(--space-08) 0; }
  body[data-view="am"] .added-store-description { display: grid; grid-template-columns: minmax(var(--staff-list-name-min-width), 1fr) minmax(0, 2fr); align-items: baseline; gap: var(--space-24); }
  body[data-view="am"] .added-store-description p { margin: 0; }
  body[data-view="am"] .added-store-actions { gap: var(--space-20); }
  body[data-view="am"] .store-option { display: grid; grid-template-columns: minmax(var(--staff-list-name-min-width), 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: baseline; column-gap: var(--space-20); }
  body[data-view="am"] .candidate-box .store-option { display: flex; }

  body[data-view="am"] .review-item { display: grid; grid-template-columns: minmax(var(--staff-review-label-min-width), 1fr) minmax(0, 3fr); gap: var(--space-20); }
  body[data-view="am"] .review-item dd { margin: 0; }
  body[data-view="am"] .receipt-links { display: flex; flex-wrap: wrap; }
  body[data-view="am"] .actions { display: flex; justify-content: flex-end; flex-wrap: wrap; }
  body[data-view="am"] .actions .button { width: auto; min-width: var(--quantity-input-width); }
}

/* 넓은 담당자 입력의 품목·수량은 1,100px부터 세 열입니다. */
@media (min-width: 1100px) {
  body[data-view="am"] .types-grid,
  body[data-view="am"] .quantity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-view="am"] .floor-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-14); }
  body[data-view="am"] .floor-row .field { margin: 0; }
  body[data-view="am"] .floor-row .number-field { grid-template-columns: minmax(0, 1fr); gap: var(--space-08); }
  body[data-view="am"] .floor-row .text-button { margin: 0; }
}

/* 반응형 기준: 340px 이하. 이 분기 숫자는 CSS 변수로 대체할 수 없습니다. */
@media (max-width: 340px) {
  .site-header, #app { padding-left: var(--space-16); padding-right: var(--space-16); }
  .site-header { font-size: var(--font-size-xs); }
  h1 { font-size: var(--font-size-title-compact); }
  .number-field { grid-template-columns: minmax(0, 1fr) var(--quantity-input-width-compact); gap: var(--space-08); }
}

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