/* 센서 구성 시각 편집기 (public/js/profile-editor/editor.js) — 색은 tokens.css 토큰만 */
.plan-card.is-hidden { display: none; }
.pe-wrap { display: grid; gap: var(--s-3); }
.pe { display: grid; gap: var(--s-3); }
.pe-toolbar { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.pe-tb-grp { display: inline-flex; align-items: center; gap: 2px; padding-left: var(--s-3); border-left: 1px solid var(--border); }
.pe-tb-end { margin-left: auto; gap: var(--s-2); border-left: 0; }
.pe-redo .icon { transform: scaleX(-1); }
.pe-main { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--s-4); align-items: start; }
.pe-stage { display: grid; gap: var(--s-2); min-width: 0; }
.pe-svg { width: 100%; height: min(72vh, 46rem); display: block; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--border); touch-action: none; user-select: none; cursor: default; outline: none; }
.pe-svg:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent); }
.pe[data-tool="add"] .pe-svg { cursor: crosshair; }
.pe.is-ro .pe-svg { cursor: grab; }
.pe-status { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-3); min-height: 1.2em; flex-wrap: wrap; }
.pe-cursor { min-width: 9rem; } .pe-hint { text-align: right; }

/* 평면 */
.pe-pad { fill: var(--plan-pad); stroke: var(--border-strong); stroke-width: .5; }
.pe-grid line { stroke: var(--plan-grid); stroke-width: .12; } .pe-grid line.mj { stroke-width: .3; }
.pe-svg text { font-family: var(--font); fill: var(--text-3); }
.pe-ticks text { font-size: 3px; } .pe-side { font-size: 3.2px; font-weight: 600; }
.pe-zone { fill-opacity: .14; stroke-width: .35; stroke-opacity: .7; cursor: pointer; }
.pe[data-tool="select"] .pe-zone, .pe[data-tool="add"] .pe-zone, .pe[data-tool="prox"] .pe-zone { pointer-events: none; }
.pe-zone.is-on { fill-opacity: .26; stroke-width: .7; stroke-opacity: 1; cursor: move; }
.pe-zl { font-size: 4px; font-weight: 800; fill: var(--plan-ink); pointer-events: none; }
.pe-body { fill: none; stroke: var(--plan-ink); stroke-width: .35; stroke-dasharray: 2 1.5; opacity: .6; pointer-events: none; }
.pe-s { fill: var(--accent); stroke: var(--surface); stroke-width: .25; cursor: pointer; transition: r var(--d-fast) var(--ease); }
.pe-s.off { fill: var(--surface); stroke: var(--text-3); stroke-width: .35; }
.pe-s.is-sel { fill: var(--st-active-line); stroke: var(--surface); stroke-width: .45; }
.pe-s.off.is-sel { stroke: var(--st-active-line); fill: var(--st-active-bg); }
.pe[data-tool="zone"] .pe-s, .pe[data-tool="prox"] .pe-s { pointer-events: none; opacity: .55; }
.pe-nums text { font-size: 1.6px; fill: var(--text-2); pointer-events: none; }
.pe-p { cursor: grab; } .pe[data-tool="select"] .pe-p, .pe[data-tool="add"] .pe-p, .pe[data-tool="zone"] .pe-p { pointer-events: none; }
.pe-p rect { fill: var(--st-active-line); stroke: var(--surface); stroke-width: .4; }
.pe-p text { fill: var(--surface); font-size: 3.6px; font-weight: 800; pointer-events: none; }
.pe-p .fov { fill: var(--st-active-line); opacity: .13; }
.pe-p.is-sel rect { stroke: var(--text); stroke-width: .7; } .pe-p.is-sel .fov { opacity: .24; }
.pe-handles .pe-v { fill: var(--surface); stroke: var(--text); stroke-width: .35; cursor: grab; }
.pe-handles .pe-v.is-sel { fill: var(--st-active-line); stroke: var(--surface); }
.pe-handles .pe-mid { fill: var(--text-3); opacity: .55; cursor: copy; }
.pe-handles .pe-mid:hover { opacity: 1; fill: var(--st-active-line); }
.pe-draw polyline { fill: none; stroke: var(--st-active-line); stroke-width: .5; stroke-dasharray: 1.4 1; }
.pe-draw circle { fill: var(--st-active-line); }
.pe-band { fill: color-mix(in srgb, var(--st-active-line) 10%, transparent); stroke: var(--st-active-line); stroke-width: .3; stroke-dasharray: 1 .8; pointer-events: none; }
.pe-band[hidden] { display: none; }

/* 오른쪽 판 */
.pe-panel { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); position: sticky; top: calc(var(--topbar-h) + var(--s-3)); }
.pe-ph { display: grid; gap: 2px; } .pe-ph b { font-size: var(--fs-14); } .pe-ph span { font-size: var(--fs-12); }
.pe-kv { display: grid; gap: var(--s-2); margin: 0; font-size: var(--fs-13); }
.pe-kv > div { display: flex; justify-content: space-between; gap: var(--s-2); } .pe-kv dt { color: var(--text-2); } .pe-kv dd { margin: 0; font-weight: 600; text-align: right; }
.pe-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.pe-num { display: grid; gap: 4px; font-size: var(--fs-12); color: var(--text-2); font-weight: 600; min-width: 0; }
.pe-numw { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--surface); overflow: hidden; }
.pe-numw:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent); }
.pe-numw .input { border: 0; box-shadow: none; min-width: 0; width: 100%; text-align: right; background: transparent; }
.pe-numw .input:focus { box-shadow: none; outline: 0; }
.pe-numw em { font-style: normal; padding: 0 var(--s-2); color: var(--text-3); font-size: var(--fs-12); }
.pe-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--fs-13); font-weight: 600; }
.pe-btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pe-btns.pe-col { flex-direction: column; } .pe-btns.pe-col .btn { justify-content: flex-start; height: auto; padding: var(--s-3); white-space: normal; text-align: left; }
.pe-del { color: var(--st-critical-fg); }
.pe-sub { display: grid; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.pe-zlist { display: grid; gap: 2px; max-height: 22rem; overflow: auto; margin: 0 calc(var(--s-2) * -1); }
.pe-zrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border: 0; background: none; border-radius: var(--r-chip); font: inherit; font-size: var(--fs-13); color: var(--text); text-align: left; cursor: pointer; }
.pe-zrow:hover { background: var(--hover); } .pe-zrow[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-soft-fg); }
.pe-zrow .chip { height: 1.25rem; font-size: 11px; }
.pe-zdot { width: .75rem; height: .75rem; border-radius: 3px; opacity: .8; }
.pe-pdot { width: 1.25rem; height: 1.25rem; border-radius: 5px; background: var(--st-active-line); color: var(--surface); font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pe-addp .btn { flex: 1 1 45%; }

/* 격자 대화상자 */
.pe-gform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }
.pe-gorder { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pe-ginfo { margin: var(--s-3) 0 0; font-size: var(--fs-13); }
.pe-gerr .err { margin: var(--s-1) 0 0; }

/* 저장 바(시각·JSON 공용) */
.pe-savebar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); position: sticky; bottom: var(--s-3); z-index: var(--z-sticky); box-shadow: var(--shadow-2); }
.pe-savebar[hidden] { display: none; }
.pe-savebar .input { flex: 1 1 14rem; min-width: 0; }
.pe-savebar.is-dirty { border-color: var(--st-caution-line); }

@media (max-width: 1100px) { .pe-main { grid-template-columns: minmax(0, 1fr); } .pe-panel { position: static; } }
@media (max-width: 768px) {
  .pe-svg { height: 62vh; }
  .pe-tb-end { margin-left: 0; width: 100%; } .pe-tb-grp { border-left: 0; padding-left: 0; }
  .pe-hint { text-align: left; }
  .pe-gform { grid-template-columns: 1fr 1fr; }
  .pe-savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-2)); }
  .pe-savebar .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .pe-s { transition: none; } }
.pe-savebar:not(.is-dirty) { position: static; box-shadow: none; }
.pe-numw em { white-space: nowrap; }
.pe-numw .input { padding-right: 2px; }
@media (pointer: coarse) and (max-width: 768px) { .pe-svg { touch-action: pan-y; height: 55vh; } }
.pe-heat { pointer-events: none; }
.pe.heat-on .pe-zone { fill-opacity: .04; } .pe.heat-on .pe-zone.is-on { fill-opacity: .1; }
.pe.heat-on .pe-s:not(.is-sel) { opacity: .55; }

/* 버전 비교 */
.cv { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.cv-table tr.is-changed td { background: color-mix(in srgb, var(--st-caution-line) 10%, transparent); font-weight: 600; }
.cv-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .cv-plans > div { display: grid; gap: var(--s-2); min-width: 0; }
@media (max-width: 720px) { .cv-plans { grid-template-columns: 1fr; } }

/* 침대에 적용 */
.ap-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0; }
.ap-when { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); color: var(--text-2); }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; background: var(--border); max-height: 22rem; overflow-y: auto; }
.ap-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--surface); flex-wrap: wrap; }
.ap-list li.is-cur { background: var(--surface-2); color: var(--text-2); }
.ap-list .check-inline { gap: var(--s-3); } .ap-list .muted { font-size: var(--fs-12); }
.ap-now { font-size: var(--fs-12); color: var(--text-2); }

/* 환경 센서(표면 습도·온도 삼각형, 체온 원) */
.pe-e path { fill: var(--st-caution-line); stroke: var(--surface); stroke-width: .4; }
.pe-e circle { fill: var(--st-delay-line); stroke: var(--surface); stroke-width: .4; }
.pe-e { cursor: grab; } .pe-e.is-sel path, .pe-e.is-sel circle { stroke: var(--text); stroke-width: .8; }
.pe[data-tool="select"] .pe-e, .pe[data-tool="add"] .pe-e, .pe[data-tool="zone"] .pe-e, .pe[data-tool="prox"] .pe-e { pointer-events: none; opacity: .75; }
.pe, .pe-wrap, .pe-toolbar, .pe-main, .pe-stage { min-width: 0; max-width: 100%; }
.pe-toolbar .seg { max-width: 100%; }
@media (max-width: 768px) { .pe-main { grid-template-columns: minmax(0, 1fr); } }