/* FACTORY PULSE v2 — 3D 공장 트윈 추가 스타일 (designer, 2026-09-29)
   바탕은 css/twin.css(CityFlow twin 사본) 그대로. 여기에는 공장판에서 새로 생긴 것만 둔다.
   색 규칙: 이상만 색(ISA-101). 원천 반영 확인 = 차콜 ●(초록 금지 · 메인 결정 #1). */

.fp-twin { --fp-reflect: #4b5361; --fp-reflect-ring: #aab2bf; }

/* 3D 캔버스 */
.fp-scene canvas { display: block; outline: none; cursor: grab; }
.fp-scene canvas:active { cursor: grabbing; }

/* 공용 칩 */
.fp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  line-height: 16px; white-space: nowrap; text-shadow: none;
}
.fp-chip--sim { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border-accent); }
.fp-chip--mock { color: var(--text-dim); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-strong); font-weight: 500; }

/* 부팅 — 생성 이미지·모의 고지 */
.fp-boot__sim { margin-top: 10px; display: flex; align-items: center; gap: 8px; justify-content: center; font-size: var(--fs-xs); color: var(--text-dim); }

/* 좌상단 HUD — 모의 표기 줄 */
.fp-hud__sim { color: var(--text-dim); font-family: var(--font-sans); }

/* 상단 고정 문구 — 제어하지 않음 */
.fp-guard {
  position: absolute; z-index: 11; top: var(--sp-5); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  background: var(--surface-glass-strong); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  backdrop-filter: blur(12px); pointer-events: none; white-space: nowrap;
}
.fp-guard::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA2B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12h7'/%3E%3C/svg%3E");
}
.fp-guard[data-kind="crane"] { border-color: rgba(251, 191, 36, 0.55); }
.fp-guard[data-kind="crane"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBBF24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12h7'/%3E%3C/svg%3E");
}

/* 바닥 칩 — 3D 바닥에 붙는 생성 이미지 고지 */
.fp-groundchip {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; color: #E6EAF2;
  background: rgba(7, 9, 17, 0.72); border: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap; pointer-events: none;
}
.fp-groundchip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }

/* 마커 — 공장 기기 유형 */
.fp-node--hub .twin-node__label { font-weight: 700; }
.twin-node--source { --cf-color: var(--text-dim) !important; }
.twin-node--source .twin-node__dot { border-style: dashed; }
.twin-node--source .twin-node__label { color: var(--text-dim); font-weight: 600; }
.fp-node--crane .twin-node__dot, .fp-node--press .twin-node__dot, .fp-node--weld .twin-node__dot, .fp-node--forklift .twin-node__dot { border-radius: 9px; }
.fp-node--forklift .twin-node__halo { opacity: 0.18; }

/* 말풍선 — 원천 반영 확인(차콜) */
.twin-callout--reflect { --cf-tone: var(--fp-reflect-ring); }
.twin-callout--reflect .twin-callout__icon {
  color: var(--fp-reflect) !important; background: var(--fp-reflect) !important;
  border: 1.5px solid var(--fp-reflect-ring); box-shadow: none;
}
.twin-callout--reflect .twin-callout__bubble { border-color: var(--fp-reflect-ring); box-shadow: 0 0 0 1px var(--border); animation: none; }

/* 단계 도크 — 질문 줄 · 모의 꼬리표 */
.fp-question {
  list-style: none; margin: 0 0 6px; padding: 8px 10px;
  font-size: 12px; line-height: 1.45; color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.fp-question__q { display: inline-block; margin-right: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--accent); }
.fp-mock { grid-column: 1 / -1; margin-top: 4px; font-size: 10.5px; color: var(--text-faint); }
.fp-dock__note { margin-left: 8px; font-size: 11px; color: var(--text-faint); align-self: center; }
.twin-dock { width: 360px; }
.twin-dock__body { max-height: 440px; }

/* 통신 로그 — JSON 머리 모의 표기 */
.fp-jsonhead { margin: 5px 0 -2px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.fp-jsonhead b { color: var(--text-dim); font-weight: 600; }
.twin-entity__head .fp-chip { margin-left: auto; }

/* 팝오버 */
.fp-urn { font-family: var(--font-mono); font-size: 10px; word-break: break-all; }
.fp-pop__note { margin-top: 8px; font-size: 11px; color: var(--text-faint); }

/* 판정부피 평면 투영 삽입도(S2) */
.fp-inset {
  width: 264px; padding: 10px 14px 12px;
  background: var(--surface-glass-strong); border: 1px solid var(--border-strong); border-radius: var(--radius);
  backdrop-filter: blur(12px);
}
.fp-inset[hidden] { display: none; }
.fp-inset__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.fp-inset__svg { display: block; width: 100%; height: auto; background: #1b202a; border-radius: 6px; }
.fp-inset__aisle { fill: rgba(120, 130, 145, 0.25); stroke: rgba(251, 191, 36, 0.7); stroke-width: 1; }
.fp-inset__vol { fill: rgba(248, 113, 113, 0.18); stroke: #F87171; stroke-width: 1.5; }
.fp-inset__vol2 { fill: rgba(154, 162, 178, 0.14); stroke: #9AA2B2; stroke-width: 1.2; stroke-dasharray: 4 3; }
.fp-inset__vol.is-ghost { fill: none; stroke: rgba(248, 113, 113, 0.35); stroke-dasharray: 4 3; }
.fp-inset__vol2.is-ghost { fill: none; stroke: rgba(154, 162, 178, 0.35); }
.fp-inset__load { fill: #2f3640; stroke: #FBBF24; stroke-width: 1.2; }
.fp-inset__person { fill: #E6EAF2; stroke: #F87171; stroke-width: 2.5; }
.fp-inset__person.is-out { stroke: #9AA2B2; }
.fp-inset__t { font-family: var(--font-mono); font-size: 9.5px; fill: #E6EAF2; }
.fp-inset__t--dim { fill: #9AA2B2; }
.fp-inset__foot { margin-top: 7px; font-size: 11.5px; color: var(--text-dim); }
.fp-inset__foot b { color: var(--st-error); }
.fp-inset__foot--dim { margin-top: 2px; font-size: 10.5px; color: var(--text-faint); }

/* 알림 — 후보는 경보색이 아니라 후보 띠(좌측 3px)로 */
.twin-alert__en { color: var(--text-faint); }

/* 마커 이름표 — 밝은 지붕 위에서도 읽히게(좌상단 HUD 와 같은 검정 외곽) */
.fp-twin .twin-node__label {
  color: #DCE2EC;
  text-shadow: 1px 1px 0 rgba(0,0,0,.85), -1px 1px 0 rgba(0,0,0,.85), 1px -1px 0 rgba(0,0,0,.85), -1px -1px 0 rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.7);
}

/* HUD 패널 밑으로 들어간 마커 */
.twin-node.is-underhud { opacity: 0.18; pointer-events: none; }

/* 팝오버 — 속성 한 줄에 하나(URN·좌표가 길어 2쌍 배치가 깨진다) */
.fp-twin .twin-pop { width: 300px; }
.fp-twin .twin-pop__meta { display: grid; grid-template-columns: 64px 1fr; gap: 5px 10px; }
.fp-twin .twin-pop__meta dd { min-width: 0; overflow-wrap: anywhere; }

/* ════════ v0.2 단지 확장 (designer 2026-09-29) ════════ */

/* 보기 전환 칩 — 좌상단 HUD 넷째 줄. 화면 이동일 뿐 설비 신호가 아니다 */
.fp-viewchips { display: flex; align-items: center; gap: 4px; margin-top: 10px; pointer-events: auto; }
.fp-viewchips__label { margin-right: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-faint); }
.fp-viewchip {
  min-width: 34px; height: 28px; padding: 0 10px;
  font: 600 13px/1 var(--font-sans); color: var(--text-dim);
  background: var(--surface-glass-strong); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  cursor: pointer; transition: color 140ms, border-color 140ms, background 140ms;
}
.fp-viewchip:hover { color: var(--text); border-color: var(--border-accent); }
.fp-viewchip.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* 새 마커 유형 */
.fp-node--plant .twin-node__dot { width: 36px; height: 36px; border-radius: 10px; }
.fp-node--plant .twin-node__dot svg { width: 20px; height: 20px; }
.fp-node--plant .twin-node__label { font-size: 12.5px; font-weight: 700; color: #F1F4F9; top: calc(50% + 27px); }
.fp-node--plant, .fp-node--facility { --cf-color: var(--text-dim) !important; }
.fp-node--plant .twin-node__badge, .fp-node--facility .twin-node__badge { display: none; }
.fp-node--facility .twin-node__dot { border-radius: 9px; }
.fp-node--facility .twin-node__label { font-weight: 600; color: #DCE2EC; }
.fp-node--machine .twin-node__dot, .fp-node--controller .twin-node__dot, .fp-node--gauge .twin-node__dot, .fp-node--valve .twin-node__dot { border-radius: 9px; }
.fp-node--quad .twin-node__dot, .fp-node--robot .twin-node__dot { border-width: 2px; }
.fp-node--light .twin-node__dot { width: 22px; height: 22px; background: rgba(12, 18, 30, 0.86); }
.fp-node--light .twin-node__dot svg { width: 13px; height: 13px; }
.fp-node--light .twin-node__halo, .fp-node--light .twin-node__badge { display: none; }
.fp-node--light .twin-node__label { top: calc(50% + 17px); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.fp-node--light { --cf-color: var(--accent) !important; }
.fp-node--truck .twin-node__dot { border-radius: 8px; }

/* 영상 패널(V-CLIP) · 사진 패널(V-PHOTO) — 우상단 스택, 삽입도와 같은 틀 */
.fp-clip__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0e14; border-radius: 6px; border: 1px solid var(--border); }
.fp-clip__cap, .fp-photo__chip { margin-top: 7px; }
.fp-clip__cap .fp-chip, .fp-photo__chip .fp-chip, .fp-pop__clipcap .fp-chip { white-space: normal; line-height: 1.35; padding: 3px 8px; font-family: var(--font-sans); font-size: 10.5px; }
.fp-clip__note { margin-top: 4px; font-size: 10.5px; line-height: 1.4; color: var(--text-faint); }
.fp-clip__blank { display: grid; place-items: center; aspect-ratio: 16 / 9; font-size: 11px; color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: 6px; }
.fp-clip__blankcard {
  margin-bottom: 8px; padding: 12px 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
  border: 1.5px dashed var(--border-strong); border-radius: 6px; background: rgba(255, 255, 255, 0.02);
}
.fp-clip__blankcard b { display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); }
.fp-chip--ref { color: #E6EAF2; background: rgba(154, 162, 178, 0.14); border: 1px dashed rgba(154, 162, 178, 0.7); font-weight: 500; }

.fp-photo__fig { margin: 0; }
.fp-photo__fig img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.fp-photo__empty {
  display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3; padding: 10px; text-align: center;
  font-size: 11.5px; color: var(--text-dim); border: 1.5px dashed var(--border-strong); border-radius: 6px; background: rgba(255, 255, 255, 0.02);
}
.fp-photo__empty b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); }
.fp-photo__nomodel { margin-top: 7px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, 0.04); border-left: 2px solid var(--text-faint); border-radius: 0 4px 4px 0; }
.fp-photo__rows { display: grid; grid-template-columns: 78px 1fr; gap: 5px 8px; margin-top: 8px; font-size: 11.5px; }
.fp-photo__rows dt { color: var(--text-faint); }
.fp-photo__rows dd { margin: 0; color: var(--text); }
.fp-photo__rows dd.is-empty { color: var(--text-faint); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 1px 6px; }
.fp-human { margin-left: 6px; padding: 0 6px; font-size: 10px; font-weight: 600; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }

/* S11 삽입도 — 로봇 전용 구역(빗금) · 부품 보급 위치(점선) · 거리선 */
.fp-inset__robotzone { fill: rgba(251, 191, 36, 0.10); stroke: rgba(251, 191, 36, 0.75); stroke-width: 1; }
.fp-inset__feed { fill: rgba(154, 162, 178, 0.16); stroke: #D6DCE6; stroke-width: 1.2; stroke-dasharray: 4 3; }
.fp-inset__robot { fill: #3a414c; stroke: #E4E7EC; stroke-width: 1.2; }
.fp-inset__dist { stroke: #E6EAF2; stroke-width: 1; stroke-dasharray: 2 2; }

/* 단계 도크 — 증거 수준 배지 · 시나리오 원칙 한 줄 */
.fp-evidence {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: #DDD6FE;
  background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.5); border-radius: var(--radius-pill);
}
.fp-evidence__k { font-family: var(--font-mono); font-size: 10.5px; color: #C4B5FD; }
.fp-scnote { list-style: none; margin: -2px 0 6px; padding: 0 2px; font-size: 11px; line-height: 1.45; color: var(--text-faint); }

/* 상단 고정 문구 — 로봇 */
.fp-guard[data-kind="robot"], .fp-guard[data-kind="hmr"] { border-color: rgba(167, 139, 250, 0.6); }

/* 팝오버 — 클립 썸네일 · 공장 보기 */
.fp-pop__clips { display: grid; gap: 6px; margin: 8px 0 2px; }
.fp-pop__clips.is-two { grid-template-columns: 1fr 1fr; }
.fp-pop__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0e14; border-radius: 5px; border: 1px solid var(--border); }
.fp-pop__clipcap { margin: 4px 0 6px; }
.fp-pop__go { margin-top: 8px; width: 100%; justify-content: center; }
.fp-twin .twin-pop { width: 320px; }
.fp-viewchip, .fp-viewchips__label { text-shadow: none; }
.fp-viewchip b { margin-right: 3px; font-size: 16px; font-weight: 600; vertical-align: -1px; }

/* 이름표 위로(이웃 마커와 겹칠 때) */
.fp-node--lblup .twin-node__label { top: auto; bottom: calc(50% + 21px); }
.fp-node--light.fp-node--lblup .twin-node__label { bottom: calc(50% + 14px); }
/* S11 삽입도 범례 */
.fp-inset__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 10.5px; color: var(--text-faint); }
.fp-inset__legend i { display: inline-block; width: 12px; height: 9px; border-radius: 2px; }
.fp-inset__legend i.is-zone { background: rgba(251, 191, 36, 0.18); border: 1px solid rgba(251, 191, 36, 0.8); }
.fp-inset__legend i.is-feed { margin-left: 4px; background: rgba(154, 162, 178, 0.2); border: 1px dashed #D6DCE6; }

.fp-evidence[hidden] { display: none; }
.twin-dock__titles .fp-evidence { margin: 6px 0 0; }
.fp-inset__legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fp-pop__photo { margin: 8px 0 2px; }
.fp-pop__photo img { aspect-ratio: 16 / 10; }
.fp-node--nolabel .twin-node__label { opacity: 0; }
.fp-node--nolabel:hover .twin-node__label { opacity: 1; }