/* 001-shared-particle-quality — 전역 스타일 + 공통 컴포넌트 클래스
   design.md §16~20 그대로 이식, 값은 tokens.css 변수만 참조한다. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  font-size: 13px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.num { font-variant-numeric: tabular-nums; }
svg { display: block; }
button { font-family: inherit; }

/* ---------- 레이아웃 셸 ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.rail {
  width: var(--rail-width);
  flex-shrink: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0;
}
.rail-mark {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-bottom: 26px;
}
.rail-item {
  width: 64px; min-height: 56px; padding: 10px 4px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-muted); margin-bottom: 6px; cursor: pointer; position: relative;
  border: none; background: none; font: inherit; text-decoration: none;
}
.rail-item .rlabel { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; }
.rail-item.active { background: var(--accent-tint); color: var(--accent); }
.rail-item.active::before {
  content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--accent);
}

.col-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-desktop); border-bottom: 1px solid var(--border);
}
.brand-block .brand-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.brand-block .screen-name { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.user-area { display: flex; align-items: center; gap: 16px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mid); }
.user-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-tint); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.factory-tag {
  font-size: 12px; color: var(--text-muted); background: var(--neutral-bg);
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px;
}
.logout-btn {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted);
  background: none; border: none; cursor: pointer; padding: 6px 4px;
}
.logout-btn:hover { color: var(--text-strong); }

.bottom-nav {
  display: none; /* 데스크톱에서 숨김, 768px 이하에서 표시 */
  flex-shrink: 0; height: 62px; border-top: 1px solid var(--border);
  background: var(--bg);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-muted); background: none; border: none; text-decoration: none;
}
.nav-btn.active { color: var(--accent); }
.nav-btn .nlabel { font-size: 10px; font-weight: 600; }

.main { flex: 1 1 auto; display: flex; overflow: hidden; min-height: 0; }
.input-col { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 22px var(--pad-desktop) 0 var(--pad-desktop); }
.content-max { max-width: var(--content-max); }
.content-max-wide { max-width: var(--content-max-wide); margin: 0 auto; }
.side-col {
  width: var(--side-col-width); flex-shrink: 0; border-left: 1px solid var(--border);
  padding: 22px 28px; overflow-y: auto; background: var(--bg-softer);
}

/* ---------- 세그먼트 탭 ---------- */
.segmented { display: inline-flex; border: 1px solid var(--border-mid); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; }
.seg {
  padding: 10px 20px; min-height: var(--control-min-h); display: flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; background: var(--bg);
  border: none; font: inherit; text-decoration: none;
}
.seg.active { background: var(--accent); color: #fff; }

/* ---------- 섹션 / 필드 ---------- */
.section-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 12px 0; display: flex; align-items: center; gap: 8px; }
.section-title .req { font-size: 11px; font-weight: 500; color: var(--text-faint); }
.section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-field); }
.field-grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text-muted); display: flex; gap: 4px; }
.field label .star { color: var(--required); }
.control {
  min-height: var(--control-min-h); border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  padding: 0 12px; font-size: 13px; color: var(--text); display: flex; align-items: center;
  background: var(--bg); width: 100%;
}
.control.optional-empty { color: var(--text-ghost); }
.control.has-error, .mesh-cell.has-error { border-color: var(--error-border); }
.field-error { font-size: 11px; color: var(--error); margin-top: 2px; }
.form-error-banner { font-size: 13px; color: var(--error); background: var(--error-bg); border: 1px solid var(--error-border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px; }
.control-btn { cursor: pointer; justify-content: space-between; }
.control-btn:hover { border-color: var(--text-ghost); }
/* 디자인 점검에서 발견: measurement_input.html의 아코디언 토글 버튼이 이 스타일을
   인라인 style로 통째로 재구현하고 있었음 — 공통 클래스로 이동. */
.details-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: var(--control-min-h); background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; font-family: inherit;
}
.chev { color: var(--text-faint); flex-shrink: 0; transition: transform 0.15s ease; }
.chev.rot { transform: rotate(180deg); }

.dropdown-wrap { position: relative; }
.dropdown-panel {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg);
  border: 1px solid var(--border-mid); border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(20, 24, 31, 0.08); z-index: 20; padding: 4px;
}
.dropdown-panel.is-open { display: block; }
/* JS 미로딩 대비: 폼 자체는 <select>로도 항상 동작해야 하므로(plan.md §4),
   이 패널은 순수 시각적 향상이며 없어도 <select> 폴백이 기능을 대체한다. */
.opt {
  min-height: var(--control-min-h); display: flex; align-items: center; padding: 0 12px;
  font-size: 13px; color: var(--text-mid); border-radius: var(--radius-sm); cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font: inherit;
}
.opt:hover { background: var(--neutral-bg); }
.opt.active { background: var(--accent-tint); color: var(--accent); font-weight: 700; }

.factory-row { display: flex; align-items: center; gap: 10px; }
.factory-locked { flex: 1; display: flex; align-items: center; gap: 8px; }
.factory-changed-tag {
  font-size: 10px; color: var(--warning-tag-text); background: var(--warning-bg);
  border: 1px solid var(--warning-border); border-radius: 4px; padding: 1px 6px; font-weight: 700;
}
.link-btn {
  min-height: var(--control-min-h); display: inline-flex; align-items: center; font-size: 12px;
  color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 6px;
  font-weight: 600; font: inherit;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: var(--control-min-h); display: flex; align-items: center; font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill); padding: 0 14px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- mesh 입력 ---------- */
.mesh-title-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.mesh-note { font-size: 12px; color: var(--text-faint); }
.mesh-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.mesh-cell { border: 1px solid var(--border-mid); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.mesh-cell .mesh-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.mesh-cell .mesh-value { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 3px; }
.mesh-cell .mesh-unit { font-size: 11px; color: var(--text-faint); font-weight: 500; }
/* 001-shared-particle-quality Phase 6: 이전엔 읽기 전용 표시값이던 mesh-value 자리에
   실제 입력을 받는다 — 값 텍스트와 동일하게 보이도록 테두리/배경 없이 폰트만 상속. */
.mesh-value input.mesh-input {
  border: none; background: transparent; font: inherit; color: inherit; width: 3.6em; padding: 0;
}
/* T083 접근성 점검에서 발견: outline:none만 있으면 키보드 포커스가 안 보임 —
   기본 아웃라인 대신 시각적으로 어울리는 box-shadow 링으로 대체(포커스 표시는 유지). */
.mesh-value input.mesh-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-tint-border, var(--accent)); border-radius: 2px; }
.mesh-value input.mesh-input::-webkit-outer-spin-button,
.mesh-value input.mesh-input::-webkit-inner-spin-button { margin: 0; }

/* ---------- 계산 영역 ---------- */
.calc-bar {
  position: sticky; bottom: 0; margin: 0 calc(-1 * var(--pad-desktop)); padding: 16px var(--pad-desktop);
  background: var(--bg); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.calc-values { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.calc-item .calc-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.calc-item .calc-value { font-size: 20px; font-weight: 700; color: var(--text); }
.calc-item .calc-value .unit { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }

/* ---------- 버튼 ---------- */
.btn {
  min-height: var(--control-min-h); padding: 0 22px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--bg); color: var(--text-mid); border-color: var(--border-mid); }
.btn-ghost:hover { border-color: var(--text-ghost); }
.btn-disabled { background: var(--bg-soft); color: var(--text-ghost); cursor: not-allowed; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--bg); color: var(--error); border-color: var(--error-border); }
.btn-danger:hover { background: var(--error-bg); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 배지 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid;
}
.badge-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.badge-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.badge-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error); }
.badge-info { background: var(--accent-tint); border-color: var(--accent-tint-border); color: var(--accent); }
.badge-neutral { background: var(--neutral-bg); border-color: var(--border); color: var(--text-muted); }
.badge-success-quiet { background: var(--bg); border-color: var(--success-border); color: var(--success-text); }

/* ---------- 성공 배너 ---------- */
.success-banner { border: 1px solid var(--success-border); background: var(--success-bg); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px; }
.success-banner .sb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.success-banner .sb-detail { font-size: 12px; color: var(--success-text); margin-bottom: 12px; }
.success-banner .sb-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 사이드 컬럼(추세/최근 이력) ---------- */
.side-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.side-sub { font-size: 12px; color: var(--text-faint); margin-bottom: 14px; }
.chart-box { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 24px; background: var(--bg); }
.chart-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.hist-item { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.hist-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text); font-weight: 600; margin-bottom: 3px; }
.hist-meta { font-size: 11px; color: var(--text-faint); display: flex; gap: 6px; align-items: center; }
.hist-tag { background: var(--hist-tag-bg); color: var(--hist-tag-text); border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 600; }

/* ---------- 차트 모드 탭 ---------- */
.mtabs { display: inline-flex; border: 1px solid var(--border-mid); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; }
.mtab { padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; background: var(--bg); border: none; font: inherit; }
.mtab.active { background: var(--accent-tint); color: var(--accent); }

.mesh-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding-top: 8px; }
.mesh-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.mesh-bar { width: 100%; max-width: 22px; background: var(--accent); border-radius: 3px 3px 0 0; }
.mesh-bar-label { font-size: 10px; color: var(--text-faint); margin-top: 6px; }

.mesh-hbar-list { display: flex; flex-direction: column; gap: 8px; }
.mesh-hbar-row { display: flex; align-items: center; gap: 8px; }
.mesh-hbar-label { width: 42px; font-size: 11px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.mesh-hbar-track { flex: 1; height: 14px; background: var(--neutral-bg); border-radius: 3px; overflow: hidden; }
.mesh-hbar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.mesh-hbar-val { width: 40px; text-align: right; font-size: 11px; color: var(--text-mid); flex-shrink: 0; }

/* ---------- 상태 패널 (Loading / Empty / Error) ---------- */
.state-panel {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--bg-softer);
}
.state-panel .sp-title { font-size: 14px; font-weight: 700; color: var(--text); }
.state-panel .sp-desc { font-size: 12px; color: var(--text-muted); max-width: 340px; }
.state-panel.err { background: var(--error-tint-soft); border-color: var(--error-border); }

/* ---------- 필터 바 (보고서 / 이력 공통) ---------- */
.filter-bar { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label { font-size: 12px; color: var(--text-muted); }
.filter-actions { display: flex; gap: 10px; margin-left: auto; }
.applied-line { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }

.hist-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 8px; }
.hist-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-filter-label { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.include-deleted-toggle { font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 6px 2px; display: flex; align-items: center; gap: 6px; }
.include-deleted-toggle .box { width: 14px; height: 14px; border: 1px solid var(--border-mid); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.include-deleted-toggle.on .box { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 표 (보고서 / 이력) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
table.rpt-table, table.rec-table { border-collapse: collapse; width: 100%; font-size: 12px; }
table.rpt-table { min-width: 640px; }
table.rpt-table th, table.rpt-table td,
table.rec-table th, table.rec-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
table.rpt-table td.num, table.rpt-table th.num,
table.rec-table td.num, table.rec-table th.num { text-align: right; }
table.rpt-table th:first-child, table.rpt-table td:first-child,
table.rec-table th:first-child, table.rec-table td:first-child { position: sticky; left: 0; background: var(--bg); }
table.rpt-table thead th, table.rec-table thead th { background: var(--bg-soft); color: var(--text-muted); font-weight: 600; font-size: 11px; }
.rec-row { cursor: pointer; }
.rec-row:hover td { background: var(--bg-soft); }
.rec-row.deleted td { color: var(--text-ghost); }
.rec-row.deleted .rec-primary { text-decoration: line-through; }

/* ---------- 상세 / 수정 / 충돌 패널 ---------- */
.detail-panel { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; }
.detail-panel.edit { border-color: var(--accent-tint-border); background: var(--accent-tint-soft); }
.detail-panel.conflict { border-color: var(--warning-border); background: var(--warning-tint-soft); }
.detail-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.detail-title { font-size: 14px; font-weight: 700; color: var(--text); }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; margin-bottom: 18px; }
.detail-row { display: flex; flex-direction: column; gap: 3px; }
.detail-row .dk { font-size: 11px; color: var(--text-faint); }
.detail-row .dv { font-size: 13px; color: var(--text); font-weight: 600; }
.detail-meta-row { display: flex; gap: 28px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin-bottom: 16px; font-size: 12px; color: var(--text-muted); }
.change-list { margin-bottom: 16px; }
.change-item { font-size: 12px; color: var(--text-mid); padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.change-item .cf { font-weight: 700; margin-right: 6px; }
.change-item .cb { color: var(--error); text-decoration: line-through; margin-right: 6px; }
.change-item .ca { color: var(--success-text); font-weight: 600; }
.conflict-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.conflict-col { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--bg); margin-bottom: 10px; }
.conflict-col .cc-title { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }

/* ---------- 보고서 요약 / 탭 / 차트 ---------- */
.rtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.rtab {
  padding: 10px 16px; min-height: var(--control-min-h); display: flex; align-items: center; font-size: 13px;
  font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; border-bottom: 2px solid transparent;
  background: none; font: inherit;
}
.rtab.active { color: var(--accent); border-bottom-color: var(--accent); }

.summary-strip { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 20px; }
.summary-item .si-label { font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
.summary-item .si-value { font-size: 17px; font-weight: 700; color: var(--text); }

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.bar-chart { display: flex; align-items: flex-end; gap: 24px; height: 130px; padding: 0 8px; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar-fill { width: 40px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-val { font-size: 12px; font-weight: 700; color: var(--text); }
.bar-name { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.stack-row { margin-bottom: 12px; }
.stack-row .stack-label { font-size: 12px; color: var(--text-mid); margin-bottom: 5px; font-weight: 600; }
.stack-bar { display: flex; height: 20px; border-radius: 3px; overflow: hidden; }
.seg-large { background: var(--accent); }
.seg-mid { background: var(--chart-mid); }
.seg-fine { background: var(--chart-fine); }
.stack-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

.excel-hint { font-size: 12px; color: var(--text-faint); }

/* ============================================================
   반응형 — design.md §20 (단일 브레이크포인트, research.md §5)
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 13px; }
  .accordion-body { display: none; } /* JS(app.js)가 인라인 style로 열림/닫힘 토글 */

  .app-shell { flex-direction: column; min-height: 100vh; }
  .rail { display: none; }
  .bottom-nav { display: flex; order: 3; }
  .col-right { order: 2; flex: 1 1 auto; }

  .topbar { height: 52px; padding: 0 var(--pad-mobile); }
  .brand-block { flex-shrink: 0; }
  .brand-block .brand-name { font-size: 14px; white-space: nowrap; }
  .brand-block .screen-name { white-space: nowrap; }
  /* 디자인 점검에서 발견: 390px에서 user-area 콘텐츠(사용자칩+공장태그+로그아웃)가
     brand-name과 겹쳐 "로그아웃"이 "로그아"/"웃"으로 단어 중간에 줄바꿈되던 버그 —
     1차 수정(nowrap + .user-area{overflow-x:auto})은 단어 줄바꿈은 막았지만
     user-area 자체가 줄지 않아 페이지 전체가 24px 가로 스크롤되는 회귀를 만듦
     (documentElement.scrollWidth 414 vs innerWidth 390). Claude Design 승인안대로
     브랜드/로그아웃은 항상 완전히 노출(flex-shrink:0)하고, 사용자명 → 공장 태그
     순으로 먼저 폭을 양보(text-overflow:ellipsis)해 컨테이너 레벨 스크롤 없이
     390px 안에 항상 수렴하게 한다. */
  .user-area { min-width: 0; gap: 8px; }
  .user-chip { min-width: 0; overflow: hidden; }
  .user-chip .user-dot { flex-shrink: 0; }
  .user-chip .chip-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px;
  }
  .factory-tag {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; flex-shrink: 1;
  }
  .logout-btn { flex-shrink: 0; white-space: nowrap; }

  .main { flex-direction: column; }
  .input-col { padding: 16px var(--pad-mobile) 0 var(--pad-mobile); }
  .side-col { display: none; } /* design.md §4: 사이드 컬럼은 데스크톱 전용 */

  .field-grid { grid-template-columns: 1fr; }
  .mesh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .calc-bar { margin: 0 calc(-1 * var(--pad-mobile)); padding: 12px var(--pad-mobile) 14px var(--pad-mobile); flex-direction: column; align-items: stretch; }
  .calc-values { justify-content: space-between; }
  .calc-bar .btn { width: 100%; }

  .hist-filter-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow-x: visible; gap: 10px; }
  .hist-filter-group { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .include-deleted-toggle { white-space: nowrap; align-self: flex-start; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }

  /* design.md §14: 보고서 표는 모바일에서도 숨기지 않고 .table-wrap의 가로 스크롤로 유지한다.
     측정 이력 표(rec-table)만 모바일에서 카드 리스트(rec-list-mobile)로 대체한다. */
  table.rec-table { display: none; }
  .rec-list-mobile { display: flex; flex-direction: column; }
  table.rpt-table { min-width: 480px; } /* 데스크톱 640px보다 좁혀 스크롤 시작점을 당김 */

  .mesh-bar-chart { display: none; }
  .mesh-hbar-list { display: flex; }

  .chart-row { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .conflict-compare { grid-template-columns: 1fr; }

  .content-max, .content-max-wide { max-width: 100%; }
}

@media (min-width: 769px) {
  .mesh-hbar-list { display: none; } /* 데스크톱은 세로 막대(mesh-bar-chart) 사용 */
  .rec-list-mobile { display: none; }
}