/*
 * 현장고수 모바일 데모 - 현장 야외 가독성 우선 (큰 글자, 높은 대비, 큰 터치 영역)
 *
 * 색, 글자 크기, 간격, 모서리, 그림자는 전부 tokens.css (packages/ui/tokens.ts 에서 생성) 의 변수를 쓴다.
 * 이 파일에 색 값이나 토큰 밖 크기를 직접 쓰지 않는다. 화면 배치 값(탭바 높이 등)만 여기서 정한다.
 * index.html 에서 tokens.css 를 이 파일보다 먼저 불러온다.
 */
:root {
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --scrim: rgba(27, 37, 58, .5);   /* primary 50% (바텀시트 뒤 덮개) */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui);
  background: var(--color-bg-alt); color: var(--color-text);
  font-size: var(--text-body-mobile-size); line-height: var(--text-body-mobile-lh);
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-accent); }

/* ---------- 상단 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-2);
  background: var(--color-primary); color: var(--color-text-on-dark);
}
.topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar-title strong { font-size: var(--text-page-title-size); line-height: var(--text-page-title-lh); font-weight: var(--text-page-title-weight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title span { font-size: var(--text-caption-size); line-height: var(--text-caption-lh); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { min-width: var(--field-touch-min); min-height: var(--field-touch-min); margin-left: calc(-1 * var(--space-3)); background: none; border: 0; color: var(--color-text-on-dark); font-size: var(--text-number-size); line-height: 1; padding: 0 0 var(--space-1); cursor: pointer; }
.demo-badge { background: var(--color-accent); color: var(--color-text-on-dark); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); font-weight: 700; padding: var(--space-0) var(--space-2); border-radius: var(--radius-chip); letter-spacing: .05em; white-space: nowrap; }

/* ---------- 본문 ---------- */
.view { padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--safe-b) + var(--space-5)); max-width: 640px; margin: 0 auto; }
h2 { font-size: var(--text-section-title-size); line-height: var(--text-section-title-lh); font-weight: var(--text-section-title-weight); margin: var(--space-5) 0 var(--space-2); }
h2:first-child { margin-top: var(--space-1); }
.muted { color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.small { font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.row { display: flex; gap: var(--space-2); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: var(--space-3); }

.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-none); }
.card + .card { margin-top: var(--space-3); }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:active { background: var(--color-bg-alt); }
.card-title { font-weight: 700; }
/* 상신 차단: 담당자, 기한이 빠진 카드 (demo-screen-spec 1-2) */
.card.blocked { border-color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--field-touch-min); padding: 0 var(--space-4); border-radius: var(--radius-input); border: 1px solid var(--color-border);
  background: var(--color-bg); font-weight: 700; text-decoration: none; color: var(--color-text); cursor: pointer;
}
.btn.block { display: flex; width: 100%; }
.btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }
.btn.accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-on-dark); }
.btn.danger { color: var(--color-danger); border-color: var(--color-grade-high-bg); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: var(--field-touch-min); padding: 0 var(--space-3); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: var(--field-touch-gap); }
.btn-row > .btn { flex: 1; }

/* ---------- 칩, 배지 (ui-spec 4-1 등급 칩, 4-2 상태 배지) ---------- */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-chip); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); font-weight: 700; background: var(--color-bg-alt); color: var(--color-text-muted); white-space: nowrap; }
.chip.HIGH { min-height: var(--space-5); background: var(--color-grade-high-bg); color: var(--color-grade-high-fg); }
.chip.MID { min-height: var(--space-5); background: var(--color-grade-mid-bg); color: var(--color-grade-mid-fg); }
.chip.LOW { min-height: var(--space-5); background: var(--color-grade-low-bg); color: var(--color-grade-low-fg); }
.chip.st-DRAFT { background: var(--color-bg-alt); color: var(--color-text-muted); }
.chip.st-SIGNED { background: var(--color-primary-soft); color: var(--color-accent); }
.chip.st-COMPLETED { background: var(--color-grade-low-bg); color: var(--color-success); }
.chip.st-IN_PROGRESS, .chip.st-RECEIVED { background: var(--color-primary-soft); color: var(--color-primary); }
.chip.st-AWAIT_RECHECK { background: var(--color-grade-mid-bg); color: var(--color-warning); }
.chip.overdue { background: var(--color-grade-high-bg); color: var(--color-danger); }
.chip.pending { background: var(--color-grade-mid-bg); color: var(--color-warning); }
.chip.auto { background: var(--color-primary-soft); color: var(--color-accent); }

/* ---------- 안내 띠 ---------- */
.notice { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-grade-mid-bg); color: var(--color-warning); border: 1px dashed var(--color-border); }
.notice b { display: block; }
.notice.info { background: var(--color-primary-soft); color: var(--color-accent); border-style: solid; }
.notice.warn { border: 1px solid var(--color-warning); }
.notice.ok { background: var(--color-grade-low-bg); color: var(--color-success); border-style: solid; }
.notice + .notice, .notice + .card, .card + .notice { margin-top: var(--space-3); }

/* ---------- 홈 ---------- */
.hero { background: var(--color-primary); color: var(--color-text-on-dark); border-radius: var(--radius-card); padding: var(--space-4); }
.hero h1 { font-size: var(--text-page-title-size); line-height: var(--text-page-title-lh); font-weight: var(--text-page-title-weight); margin: 0 0 var(--space-1); }
.hero p { margin: 0 0 var(--space-3); opacity: .8; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tile { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); text-decoration: none; color: inherit; }
.tile .num { font-size: var(--text-number-size); line-height: var(--text-number-lh); font-weight: var(--text-number-weight); }
.tile .lbl { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--color-text-muted); }
.tile.alert .num { color: var(--color-danger); }
.tile.disabled { opacity: .7; border-style: dashed; }

/* ---------- 폼 ---------- */
label.field { display: block; }
label.field > span { display: block; font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.input, textarea.input, select.input { width: 100%; min-height: var(--field-touch-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-bg); }
textarea.input { min-height: 72px; resize: vertical; }
.date-ko { display: block; margin-top: var(--space-1); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--color-text-muted); }
.input:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.seg { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-input); overflow: hidden; }
.seg button { flex: 1; min-height: var(--field-touch-min); border: 0; background: var(--color-bg); font-weight: 700; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-border); }
.seg button.on { background: var(--color-primary); color: var(--color-text-on-dark); }
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--field-touch-gap); }
.trade-grid button { min-height: 56px; border-radius: var(--radius-input); border: 2px solid var(--color-border); background: var(--color-bg); font-weight: 700; font-size: var(--text-page-title-size); cursor: pointer; }
.trade-grid button.on { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-on-dark); }

/* ---------- 사진 (ui-spec 4-4: 썸네일 72) ---------- */
.photo-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 160px; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-bg); color: var(--color-text-muted); cursor: pointer; text-align: center; padding: var(--space-3); }
.photo-drop .big { font-size: var(--text-number-size); line-height: var(--text-number-lh); }
.photos { display: flex; gap: var(--space-2); overflow-x: auto; }
.photos img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-input); border: 1px solid var(--color-border); flex: none; }
.photos.lg img { width: 100%; height: auto; max-height: 256px; }
.nophoto { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--color-text-muted); padding: var(--space-3); background: var(--color-bg-sunken); border-radius: var(--radius-input); text-align: center; }

/* ---------- 후보 선택 ---------- */
.cand { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.cand input { width: var(--space-5); height: var(--space-5); margin: 0; flex: none; accent-color: var(--color-primary); }
.cand.on { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.basis { margin-top: var(--space-2); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--color-text-muted); background: var(--color-bg-alt); border-radius: var(--radius-input); padding: var(--space-2) var(--space-3); }
.basis div + div { margin-top: var(--space-1); }

/* ---------- 평가서 항목 ---------- */
.item-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.item-no { width: 28px; height: 28px; border-radius: var(--radius-input); background: var(--color-primary); color: var(--color-text-on-dark); display: grid; place-items: center; font-weight: 700; font-size: var(--text-body-size); flex: none; }
.score { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--color-bg-alt); font-weight: 700; }
.score .eq { color: var(--color-text-muted); font-weight: 400; font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-1) var(--space-3); }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; min-width: 0; }
.impl { margin-top: var(--space-3); border-radius: var(--radius-input); padding: var(--space-2) var(--space-3); background: var(--color-bg-alt); border: 1px dashed var(--color-border); }
.impl.filled { background: var(--color-grade-low-bg); border: 1px solid var(--color-success); }
.impl .ttl { font-weight: 700; font-size: var(--text-small-size); line-height: var(--text-small-lh); display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-1); }
.flash { animation: flash 1.6s ease-out 1; }
/* success(#2E7D32) 를 퍼지게 한 강조. keyframes 안에서는 변수 투명도를 바꿀 수 없어 값으로 둔다 */
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(46,125,50,.6); } 100% { box-shadow: 0 0 0 var(--space-4) rgba(46,125,50,0); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* ---------- 조치 전후 대비 (ui-spec 3-3): 좌우 같은 크기, 가운데 세로선 ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.pair-col { min-width: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-bg); }
.pair-lbl { font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: 700; color: var(--color-text-muted); text-align: center; }
.pair-col label { display: block; cursor: pointer; }
.pair-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); border: 1px solid var(--color-border); }
.pair-photo.empty { display: grid; place-items: center; background: var(--color-bg-sunken); color: var(--color-text-muted); font-size: var(--text-small-size); text-align: center; }
.pair-col label .pair-photo.empty { border: 2px dashed var(--color-border-strong); background: var(--color-bg); color: var(--color-text); font-weight: 700; }
.pair-grade { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); margin-top: var(--space-3); text-align: center; }
.pair-grade > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.pair-arrow { color: var(--color-text-muted); font-size: var(--text-page-title-size); }

/* ---------- 조치 단계 ---------- */
.steps { display: flex; gap: var(--space-1); margin: var(--space-1) 0; }
.steps div { flex: 1; text-align: center; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--color-text-muted); }
.steps div::before { content: ""; display: block; height: var(--space-1); border-radius: var(--radius-chip); background: var(--color-border); margin-bottom: var(--space-1); }
.steps div.done::before { background: var(--color-success); }
.steps div.now { color: var(--color-text); font-weight: 700; }
.steps div.now::before { background: var(--color-accent); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 2px solid var(--color-border); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: var(--space-3); width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--color-primary); }

/* ---------- 본사 집계 ---------- */
.bar { height: var(--space-2); border-radius: var(--radius-chip); background: var(--color-bg-sunken); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-small-size); line-height: var(--text-small-lh); font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--color-border); text-align: center; }
.tbl th { color: var(--color-text-muted); font-weight: 700; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.tbl td:first-child, .tbl th:first-child { text-align: left; }

/* ---------- 서명 (ui-spec 4-5: 높이 160 이상) ---------- */
.sigpad { width: 100%; height: 200px; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-bg); touch-action: none; display: block; }
.sig-img { max-width: 220px; max-height: 88px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-input); }

/* ---------- 하단 탭 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--color-bg); border-top: 1px solid var(--color-border);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--color-text-muted); text-decoration: none; font-weight: 700; }
.tabbar a .ic { font-size: var(--text-page-title-size); line-height: var(--text-page-title-lh); }
.tabbar a.on { color: var(--color-primary); }
.tabbar a.on .ic { color: var(--color-accent); }

/* ---------- 바텀시트 ---------- */
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-body { width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; background: var(--color-bg-alt); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-b)); box-shadow: var(--shadow-pop); }
.sheet-body h3 { margin: 0 0 var(--space-3); font-size: var(--text-page-title-size); line-height: var(--text-page-title-lh); font-weight: var(--text-page-title-weight); }

/* ---------- 토스트 ---------- */
/* 하단 버튼(서명, 조치 완료 등)을 가리지 않게 상단바 바로 아래에 띄운다 */
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + var(--space-7) + var(--space-5)); z-index: 40; max-width: calc(100% - var(--space-6)); background: var(--color-primary); color: var(--color-text-on-dark); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); }
.toast.err { background: var(--color-danger); }

.loading { text-align: center; color: var(--color-text-muted); padding: var(--space-7) 0; }
.empty { text-align: center; color: var(--color-text-muted); padding: var(--space-5) var(--space-3); background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-card); }

/* ---------- 태진 확인 필요 띠 (demo-screen-spec 6-2): 회색 바탕, 말풍선, 작은 본문 ---------- */
.ask-band { display: flex; gap: var(--space-2); margin-top: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-bg-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.ask-band b { display: block; color: var(--color-text); }

/* ---------- 홈: 날씨, 오늘의 위험 TOP 5 ---------- */
.hero-weather { font-size: var(--text-small-size); line-height: var(--text-small-lh); opacity: .85; margin-bottom: var(--space-2); }
.top-list { padding: 0; }
.top-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); min-height: var(--field-touch-min); text-decoration: none; color: inherit; }
.top-row + .top-row { border-top: 1px solid var(--color-border); }
.top-row:active { background: var(--color-bg-alt); }
.top-rank { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-input); background: var(--color-primary); color: var(--color-text-on-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.top-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.top-hazard { font-weight: 700; min-width: 0; }
.top-reasons { gap: var(--space-1); }

/* ---------- 사고보고서: 산업재해조사표 경고 (이 화면의 존재 이유) ---------- */
.alert-slot { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--space-7) + var(--space-3)); z-index: 5; }
.alert-legal { background: var(--color-grade-high-bg); color: var(--color-danger); border: 2px solid var(--color-danger); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: var(--space-1); }
.alert-title { font-size: var(--text-section-title-size); line-height: var(--text-section-title-lh); font-weight: 700; }

/* ---------- 표, 교육 껍데기, 요구사항 현황 ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl .chk { width: var(--space-5); height: var(--space-5); accent-color: var(--color-primary); }
.danger-text { color: var(--color-danger); font-weight: 700; }
.card.blocked .chip.overdue { font-weight: 700; }
.video-box { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; background: var(--color-bg-sunken); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-card); color: var(--color-text-muted); text-align: center; font-weight: 700; }
.sig-placeholder { height: 160px; display: grid; place-items: center; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-card); color: var(--color-text-muted); }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--field-touch-gap); }
.req-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.req-row + .req-row { border-top: 1px solid var(--color-border); }
.req-no { flex: none; width: 28px; text-align: center; font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.req-body { flex: 1; min-width: 0; }
.chip.req-done { background: var(--color-grade-low-bg); color: var(--color-success); }
.chip.req-part { background: var(--color-grade-mid-bg); color: var(--color-warning); }
.chip.req-todo { background: var(--color-bg-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ---------- 조치 감사 로그: 줄마다 시각, 위치, 담당자 ---------- */
.audit-kv { display: grid; grid-template-columns: 48px 1fr; gap: 0 var(--space-2); margin: var(--space-1) 0 0; font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.audit-kv dt { color: var(--color-text-muted); }
.audit-kv dd { margin: 0; min-width: 0; }
.audit-note { margin: var(--space-3) 0 var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-primary-soft); color: var(--color-primary); border-radius: var(--radius-card); font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: 700; }

/* ---------- PoC 실행 계획 (요구사항 현황 화면 하단). 착수 3가지를 가장 눈에 띄게 ---------- */
.poc-steps { padding: 0; }
.poc-step { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); }
.poc-step + .poc-step { border-top: 1px solid var(--color-border); }
.poc-step-no { flex: none; padding: 0 var(--space-2); border-radius: var(--radius-chip); background: var(--color-primary-soft); color: var(--color-accent); font-size: var(--text-caption-size); line-height: var(--text-section-title-lh); font-weight: 700; }
.poc-needs { margin-top: var(--space-6); padding: var(--space-4); background: var(--color-primary); color: var(--color-text-on-dark); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); }
.poc-needs h2 { margin: 0 0 var(--space-3); color: var(--color-text-on-dark); font-size: var(--text-page-title-size); line-height: var(--text-page-title-lh); }
.poc-need { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; }
.poc-need + .poc-need { border-top: 1px solid rgba(255, 255, 255, .2); }
.poc-need-no { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--color-text-on-dark); font-weight: 700; }
.poc-need-what { font-size: var(--text-section-title-size); line-height: var(--text-section-title-lh); font-weight: 700; }

/* ---------- 통합 검색 (껍데기) ---------- */
.search-bar { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.search-bar .input { flex: 1; min-width: 0; }
.search-list { padding: 0; }
.search-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: var(--field-touch-min); }
.search-row + .search-row { border-top: 1px solid var(--color-border); }
.search-title { font-weight: 700; min-width: 0; }
.search-scope { margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-small-lh); }

/* ---------- 안전 전문가 지원: 기준 → 전용 AI → 현장 흐름. 폰은 세로, 넓은 화면은 가로 ---------- */
.flow { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
.flow-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.flow-box.core { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }
.flow-title { font-weight: 700; margin-bottom: var(--space-1); }
.flow-box ul { margin: 0; padding-left: var(--space-5); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.flow-arrow { align-self: center; color: var(--color-text-muted); font-size: var(--text-page-title-size); line-height: 1; }
.flow-arrow::before { content: "↓"; }
@media (min-width: 600px) {
  .flow { flex-direction: row; align-items: center; }
  .flow-box { flex: 1; min-width: 0; }
  .flow-arrow::before { content: "→"; }
}

/* ---------- 본사 집계: CCTV 선행 조건 (제안서 14장) ---------- */
.precond { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.precond-title { font-weight: 700; margin-bottom: var(--space-1); }
.precond p { margin: var(--space-1) 0 0; }
.precond-only { font-weight: 700; color: var(--color-primary); }

/* ---------- TBM → 작업일보 (ERP 연동 핵심 장면) ---------- */
.erp-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-primary-soft); border: 2px solid var(--color-accent); border-radius: var(--radius-card); color: var(--color-primary); font-size: var(--text-body-mobile-size); line-height: var(--text-body-mobile-lh); }
.chip.erp { background: var(--color-accent); color: var(--color-text-on-dark); }

/* ---------- ERP 연동 (2차 범위, 껍데기) ---------- */
.erp-problem { padding: var(--space-3) var(--space-4); background: var(--color-bg-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.erp-problem p { margin: 0; }
.erp-problem p + p { margin-top: var(--space-1); }
.erp-flow { padding: 0; }
.erp-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--space-6) minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.erp-row + .erp-row { border-top: 1px solid var(--color-border); }
.erp-head { font-size: var(--text-small-size); line-height: var(--text-small-lh); font-weight: 700; color: var(--color-text-muted); background: var(--color-bg-alt); }
.erp-arrow { text-align: center; color: var(--color-accent); font-size: var(--text-page-title-size); font-weight: 700; }
.erp-row b { color: var(--color-primary); }
.erp-sub { font-size: var(--text-small-size); line-height: var(--text-small-lh); }