/* ═══════════════════════════════════════════════════════════════
   VIEWFORT — 디지털 트윈 데모 공용 HUD
   두 씬(스마트팩토리 / 반도체 팹)이 같은 브랜드 시스템을 공유한다.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy:#0E1B2A;
  --navy-deep:#070E17;
  --stone:#E8E6E1;
  --labs:#22D3EE;
  --studio:#F5A524;
  --design:#8B5CF6;
  --ok:#3FBF7F;
  --warn:#F2C43A;
  --bad:#E2413F;
  --line:rgba(232,230,225,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--navy-deep);overflow:hidden}
body{
  font-family:'Space Grotesk','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',
              'Malgun Gothic',sans-serif;
  color:var(--stone);
  -webkit-font-smoothing:antialiased;
}
/* 메인 캔버스만 — 다른 canvas(미니맵 등)에 영향 주지 않도록 id 로 좁힌다 */
#c{display:block;position:fixed;inset:0;width:100%;height:100%}

.grade{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(7,14,23,.72) 100%);
  mix-blend-mode:multiply;opacity:.85;
}

.hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hud > *{pointer-events:auto}
.panel{
  background:rgba(7,14,23,.55);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ── 브랜드 ── */
.brand{position:absolute;top:22px;left:26px;display:flex;gap:14px;align-items:flex-start}
.brand svg{width:34px;height:34px;flex:none;margin-top:2px}
.brand .wm{font-size:19px;letter-spacing:.24em;font-weight:600;line-height:1}
.brand .tag{font-size:9.5px;letter-spacing:.30em;color:rgba(232,230,225,.5);margin-top:7px}
.brand .tag b{color:var(--labs);font-weight:500}

/* ── 씬 전환 탭 ── */
.scenes{position:absolute;top:74px;left:26px;display:flex;gap:0}
.scenes a{
  font:inherit;font-size:9px;letter-spacing:.2em;text-decoration:none;
  color:rgba(232,230,225,.55);background:rgba(7,14,23,.5);
  border:1px solid var(--line);border-right:0;padding:8px 12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s;
}
.scenes a:last-child{border-right:1px solid var(--line)}
.scenes a:hover{color:var(--stone)}
.scenes a[aria-current]{color:var(--navy);background:var(--labs);border-color:var(--labs)}

/* ── 컨트롤 버튼 ── */
.ctl{position:absolute;top:22px;right:26px;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end}
.ctl .row{display:flex;gap:8px}
.ctl button{
  font:inherit;font-size:9.5px;letter-spacing:.2em;
  color:rgba(232,230,225,.72);background:rgba(7,14,23,.55);
  border:1px solid var(--line);padding:9px 13px;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:color .2s,border-color .2s,background .2s;
}
.ctl button:hover{color:var(--stone);border-color:rgba(34,211,238,.55)}
.ctl button[data-on="1"]{color:var(--navy);background:var(--labs);border-color:var(--labs)}
.ctl button.danger{color:rgba(226,65,63,.85);border-color:rgba(226,65,63,.4)}
.ctl button.danger:hover{color:#ff6b68;border-color:rgba(226,65,63,.85)}
.ctl button.danger[data-on="1"]{color:var(--navy);background:var(--bad);border-color:var(--bad)}
.ctl button.learn{color:rgba(245,165,36,.9);border-color:rgba(245,165,36,.4)}
.ctl button.learn:hover{color:#ffc266;border-color:rgba(245,165,36,.85)}
.ctl button.learn[data-on="1"]{color:var(--navy);background:var(--studio);border-color:var(--studio)}

/* ── 씬 라벨 ── */
.shot{position:absolute;left:26px;bottom:26px;padding:14px 18px 15px;min-width:246px}
.shot .k{font-size:9px;letter-spacing:.28em;color:rgba(232,230,225,.42)}
.shot .v{font-size:15px;letter-spacing:.05em;margin-top:7px;color:var(--stone)}
.shot .v::after{content:'';display:block;width:26px;height:2px;background:var(--labs);margin-top:10px}
.shot .sub{font-size:11px;color:rgba(232,230,225,.55);margin-top:4px;letter-spacing:.02em}

/* ── KPI ── */
.kpi{
  position:absolute;right:26px;bottom:26px;padding:13px 16px;
  display:grid;grid-template-columns:auto auto;gap:6px 22px;
  font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.kpi dt{color:rgba(232,230,225,.45);letter-spacing:.16em;font-size:9px;align-self:center}
.kpi dd{text-align:right;color:var(--stone)}
.kpi dd b{font-weight:600;font-size:13px}
.kpi dd.on{color:var(--labs)}
.kpi dd.warn{color:var(--studio)}
.kpi dd.bad{color:var(--bad)}

.hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.22em;color:rgba(232,230,225,.34);
  white-space:nowrap;transition:opacity .5s;
}
.hint b{color:rgba(232,230,225,.62);font-weight:500}

/* ── 인트로 ── */
.intro{
  position:fixed;inset:0;z-index:40;background:var(--navy-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .9s ease .2s, visibility .9s ease .2s;
}
.intro.gone{opacity:0;visibility:hidden}
.intro svg{width:56px;height:56px;opacity:.9}
.intro .t{font-size:13px;letter-spacing:.42em;color:rgba(232,230,225,.62)}
.intro .p{width:190px;height:2px;background:rgba(232,230,225,.14);overflow:hidden}
.intro .p i{display:block;height:100%;width:35%;background:var(--labs);
  animation:sweep 1.15s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(390%)}}

/* ── 설비 인스펙터 ── */
.ins{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s,visibility .35s}
.ins.on{opacity:1;visibility:visible}
.ins.on .ins-panel{pointer-events:auto}
.ins-holo{
  position:absolute;left:calc(50% - 92px);top:50%;transform:translate(-50%,-50%);
  width:min(58vh,44vw);height:min(58vh,44vw);pointer-events:none;
}
.ins-holo::before,.ins-holo::after{content:'';position:absolute;width:26px;height:26px;
  border:1px solid rgba(34,211,238,.75)}
.ins-holo::before{left:0;top:0;border-right:0;border-bottom:0}
.ins-holo::after{right:0;bottom:0;border-left:0;border-top:0}
.ins-holo i{position:absolute;width:26px;height:26px;border:1px solid rgba(34,211,238,.75)}
.ins-holo i:first-child{right:0;top:0;border-left:0;border-bottom:0}
.ins-holo i:last-child{left:0;bottom:0;border-right:0;border-top:0}
.ins-panel{
  position:absolute;right:26px;top:96px;bottom:26px;width:330px;
  padding:18px 18px 14px;overflow:hidden;display:flex;flex-direction:column;
  border-left:2px solid var(--labs);
}
.ins-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ins-k{font-size:9px;letter-spacing:.28em;color:rgba(232,230,225,.42)}
.ins-name{font-size:17px;letter-spacing:.03em;margin-top:8px;line-height:1.25}
.ins-id{font-size:10.5px;letter-spacing:.12em;color:var(--labs);margin-top:6px}
.ins-x{font:inherit;font-size:13px;color:rgba(232,230,225,.5);background:none;
  border:1px solid var(--line);width:26px;height:26px;cursor:pointer;flex:none}
.ins-x:hover{color:var(--stone);border-color:rgba(232,230,225,.5)}
.ins-status{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:10px;letter-spacing:.16em}
.ins-status i{width:7px;height:7px;background:var(--ok);border-radius:50%;
  box-shadow:0 0 8px var(--ok);animation:blip 1.6s infinite}
.ins-status em{margin-left:auto;font-style:normal;color:rgba(232,230,225,.45)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.ins-body{flex:1;overflow-y:auto;margin-top:2px;padding-right:4px;min-height:0}
.ins-body::-webkit-scrollbar{width:3px}
.ins-body::-webkit-scrollbar-thumb{background:rgba(34,211,238,.4)}
.ins-sec{font-size:8.5px;letter-spacing:.28em;color:rgba(232,230,225,.35);
  margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ins-body .ins-sec:first-child{margin-top:12px}
.ins-desc{font-size:11.5px;line-height:1.65;color:rgba(232,230,225,.78);letter-spacing:.01em}
.ins-specs{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:11px}
.ins-specs dt{color:rgba(232,230,225,.45);letter-spacing:.04em;white-space:nowrap}
.ins-specs dd{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ins-live{display:flex;flex-direction:column;gap:9px}
.lv{font-size:10px;letter-spacing:.06em}
.lv .r{display:flex;justify-content:space-between;color:rgba(232,230,225,.5)}
.lv .r b{color:var(--stone);font-variant-numeric:tabular-nums;font-weight:500}
.lv .t{height:3px;background:rgba(232,230,225,.12);margin-top:4px;overflow:hidden}
.lv .t i{display:block;height:100%;background:var(--labs);transition:width .5s ease}
body.inspecting .kpi, body.inspecting .shot, body.firemode .shot{opacity:0;visibility:hidden}
.kpi,.shot{transition:opacity .3s,visibility .3s}

/* ── 비상 경보 ── */
.alarm{
  position:absolute;top:88px;left:50%;transform:translate(-50%,-14px);
  width:min(580px,84vw);padding:14px 18px 12px;
  background:rgba(38,10,10,.72);border:1px solid rgba(226,65,63,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s,transform .35s;
}
.alarm.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.alarm.gas{background:rgba(10,34,26,.72);border-color:rgba(63,191,127,.5)}
.al-top{display:flex;align-items:center;gap:13px}
.al-ico{width:26px;height:26px;color:#FF6B68;flex:none;animation:blip 1s infinite}
.alarm.gas .al-ico{color:#6FE3AE}
.al-title{font-size:14px;letter-spacing:.2em;color:#FF8582}
.alarm.gas .al-title{color:#8DF0C2}
.al-sub{font-size:11px;color:rgba(232,230,225,.72);margin-top:4px;letter-spacing:.02em}
.al-t{margin-left:auto;font-size:12px;color:#FF8582;font-variant-numeric:tabular-nums;
  letter-spacing:.08em}
.alarm.gas .al-t{color:#8DF0C2}
.al-bar{height:2px;background:rgba(226,65,63,.2);margin-top:11px;overflow:hidden}
.al-bar i{display:block;height:100%;width:0;background:var(--bad)}
.alarm.gas .al-bar i{background:var(--ok)}
.al-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:11px}
.al-grid div{font-size:9px;letter-spacing:.14em}
.al-grid span{display:block;color:rgba(232,230,225,.42)}
.al-grid b{display:block;font-size:11.5px;color:var(--stone);margin-top:4px;
  letter-spacing:.04em;font-weight:500}

.vig{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;transition:opacity .4s;
  box-shadow:inset 0 0 190px 40px rgba(226,65,63,.55)}
.vig.on{opacity:1;animation:pulseV 1.5s ease-in-out infinite}
.vig.gas{box-shadow:inset 0 0 190px 40px rgba(63,191,127,.42)}
@keyframes pulseV{0%,100%{opacity:.5}50%{opacity:1}}

/* ── 미니맵 ── */
.mini{position:absolute;left:26px;top:auto;bottom:26px;padding:9px;
  background:rgba(7,14,23,.6);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mini.on{opacity:1;visibility:visible}
.mini canvas{display:block;width:252px;height:178px}
.mini-k{font-size:8.5px;letter-spacing:.26em;color:rgba(232,230,225,.42);margin-top:8px}

/* ── 호버 툴팁 ── */
.tip{position:absolute;padding:6px 10px;font-size:10px;letter-spacing:.12em;
  background:rgba(7,14,23,.86);border:1px solid rgba(34,211,238,.45);color:var(--stone);
  pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;
  transform:translate(14px,-50%)}
.tip.on{opacity:1}

/* ═══ CCTV ═══ */
.cctv{position:absolute;right:26px;bottom:26px;display:none;grid-template-columns:1fr 1fr;
  gap:8px}
.cctv.on{display:grid}
body.inspecting .cctv{display:none}
body.cctv-on .kpi{opacity:0;visibility:hidden}
.cam{
  position:relative;width:212px;height:120px;cursor:pointer;
  border:1px solid var(--line);background:transparent;overflow:hidden;
  transition:border-color .2s;
}
.cam:hover{border-color:rgba(34,211,238,.7)}
.cam .lbl{position:absolute;left:6px;top:5px;font-size:8px;letter-spacing:.14em;
  color:rgba(232,230,225,.8);text-shadow:0 1px 3px #000;pointer-events:none}
.cam .rec{position:absolute;right:6px;top:5px;display:flex;align-items:center;gap:4px;
  font-size:7.5px;letter-spacing:.16em;color:#FF6B68;text-shadow:0 1px 3px #000;
  pointer-events:none}
.cam .rec::before{content:'';width:5px;height:5px;background:#E2413F;border-radius:50%;
  animation:blip 1.2s infinite}
.cam .ts{position:absolute;left:6px;bottom:5px;font-size:8px;letter-spacing:.08em;
  color:rgba(232,230,225,.75);text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums;
  pointer-events:none}
.cam .sc{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}

/* CCTV 팝업 */
.campop{position:absolute;inset:0;display:none;place-items:center;background:none}
.campop.on{display:grid}
/* 안쪽만 투명하게 두고 바깥을 어둡게 — 캔버스 피드가 가려지지 않는다 */
.campop-in{position:relative;width:min(74vw,1080px);aspect-ratio:16/9;
  border:1px solid rgba(34,211,238,.5);background:transparent;
  box-shadow:0 0 0 100vmax rgba(4,8,13,.76)}
.campop-view{position:absolute;inset:0}
.campop-bar{position:absolute;left:0;right:0;top:-38px;display:flex;align-items:center;gap:14px}
.campop-bar .n{font-size:13px;letter-spacing:.2em}
.campop-bar .z{font-size:10px;letter-spacing:.12em;color:rgba(232,230,225,.55)}
.campop-bar .x{margin-left:auto;font:inherit;font-size:12px;color:rgba(232,230,225,.6);
  background:none;border:1px solid var(--line);width:28px;height:28px;cursor:pointer}
.campop-bar .x:hover{color:var(--stone);border-color:rgba(232,230,225,.5)}
.campop-hud{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.campop-hud::before{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  color:rgba(34,211,238,.5)}
.campop-tags{position:absolute;left:12px;bottom:12px;right:12px;display:flex;gap:16px;
  font-size:9px;letter-spacing:.16em;color:rgba(232,230,225,.7);text-shadow:0 1px 3px #000}
.campop-tags b{color:var(--labs);font-weight:500}

/* ═══ 교육 모드 ═══ */
.learn{
  position:absolute;left:50%;bottom:26px;transform:translate(-50%,16px);
  width:min(880px,92vw);padding:0;opacity:0;visibility:hidden;
  transition:opacity .4s,visibility .4s,transform .4s;
}
.learn.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
body.learning .hint,body.learning .shot{opacity:0;visibility:hidden}
.lr-steps{display:flex;gap:2px;margin-bottom:10px}
.lr-steps button{
  flex:1;font:inherit;font-size:8.5px;letter-spacing:.1em;padding:7px 2px;cursor:pointer;
  color:rgba(232,230,225,.5);background:rgba(7,14,23,.6);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lr-steps button:hover{color:var(--stone)}
.lr-steps button[data-on="1"]{color:var(--navy);background:var(--studio);border-color:var(--studio)}
.lr-steps button i{display:block;font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:0;margin-bottom:3px}
.lr-body{display:flex;gap:0;align-items:stretch}
.lr-text{flex:1;padding:16px 20px}
.lr-no{font-size:9px;letter-spacing:.28em;color:var(--studio)}
.lr-t{font-size:19px;letter-spacing:.04em;margin-top:8px}
.lr-t small{font-size:11px;letter-spacing:.14em;color:rgba(232,230,225,.5);
  margin-left:10px;font-weight:400}
.lr-d{font-size:12px;line-height:1.75;color:rgba(232,230,225,.8);margin-top:10px}
.lr-kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lr-kw span{font-size:9px;letter-spacing:.1em;padding:4px 8px;
  border:1px solid rgba(34,211,238,.35);color:var(--labs)}
.lr-nav{display:flex;gap:8px;margin-top:14px;align-items:center}
.lr-nav button{font:inherit;font-size:9.5px;letter-spacing:.18em;padding:8px 14px;
  cursor:pointer;color:rgba(232,230,225,.75);background:none;border:1px solid var(--line)}
.lr-nav button:hover{color:var(--stone);border-color:rgba(232,230,225,.45)}
.lr-nav .prog{margin-left:auto;font-size:9px;letter-spacing:.16em;
  color:rgba(232,230,225,.42);font-variant-numeric:tabular-nums}

/* 웨이퍼 단면 뷰 */
.xsec{width:300px;border-left:1px solid var(--line);padding:14px 14px 10px;flex:none}
.xsec-k{font-size:8.5px;letter-spacing:.24em;color:rgba(232,230,225,.42)}
.xsec canvas{display:block;width:272px;height:132px;margin-top:9px}
.xsec-l{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:9px;font-size:8.5px;
  letter-spacing:.06em;color:rgba(232,230,225,.6)}
.xsec-l i{display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:-1px}

@media (max-width:1180px){
  .xsec{display:none}
  .cam{width:170px;height:96px}
}
@media (max-width:860px){
  .kpi,.hint,.mini,.cctv{display:none}
  .shot{left:16px;bottom:16px;min-width:0}
  .brand{top:16px;left:16px}
  .scenes{top:66px;left:16px}
  .ctl{top:16px;right:16px}
  .ctl button{padding:8px 10px;letter-spacing:.14em}
  .ins-panel{right:12px;left:12px;width:auto;top:auto;bottom:12px;height:46vh}
  .ins-holo{left:50%;top:22%;transform:translate(-50%,-50%);width:34vh;height:34vh}
  .learn{width:94vw}
  .lr-steps button{font-size:0;padding:8px 2px}
  .lr-steps button i{font-size:11px;margin:0}
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — 클린룸 하이키
   스마트팩토리(다크 산업 톤)와 반도체 팹(밝은 클린룸 톤)을 갈라놓는다.
   패널은 화이트 글래스, 텍스트는 네이비. 캔버스 계열(미니맵·단면도)은
   어둡게 남겨 "계측 디스플레이"로 읽히게 한다.
   ═══════════════════════════════════════════════════════════════ */
body.theme-light{
  --stone:#132335;
  --line:rgba(19,35,53,.15);
  --labs:#0B8AA3;
  background:#E9EFF4;
  color:#132335;
}
body.theme-light .grade{
  /* 화이트 공간에서는 어둡게 덮지 않고, 가장자리만 아주 옅게 눌러준다 */
  mix-blend-mode:multiply;opacity:.55;
  background:radial-gradient(ellipse at 50% 42%,#ffffff 44%,#C6D3DF 100%);
}
body.theme-light .panel{
  background:rgba(255,255,255,.72);
  border-color:rgba(19,35,53,.14);
  box-shadow:0 1px 24px rgba(19,35,53,.07);
}
body.theme-light .brand .wm{color:#0E1B2A}
body.theme-light .brand .tag{color:rgba(19,35,53,.5)}
body.theme-light .brand svg rect{stroke:#0E1B2A}
body.theme-light .scenes a{
  color:rgba(19,35,53,.55);background:rgba(255,255,255,.62);
  border-color:rgba(19,35,53,.14);
}
body.theme-light .scenes a:hover{color:#0E1B2A}
body.theme-light .scenes a[aria-current]{color:#fff;background:#0B8AA3;border-color:#0B8AA3}
body.theme-light .ctl button{
  color:rgba(19,35,53,.66);background:rgba(255,255,255,.7);
  border-color:rgba(19,35,53,.14);
}
body.theme-light .ctl button:hover{color:#0E1B2A;border-color:rgba(11,138,163,.6)}
body.theme-light .ctl button[data-on="1"]{color:#fff;background:#0B8AA3;border-color:#0B8AA3}
body.theme-light .ctl button.learn{color:#B0740C;border-color:rgba(176,116,12,.34)}
body.theme-light .ctl button.learn[data-on="1"]{color:#fff;background:#D89412;border-color:#D89412}
body.theme-light .ctl button.danger{color:#C0322F;border-color:rgba(192,50,47,.34)}
body.theme-light .ctl button.danger[data-on="1"]{color:#fff;background:#D0403C;border-color:#D0403C}

body.theme-light .shot .k,
body.theme-light .kpi dt,
body.theme-light .ins-k,
body.theme-light .ins-sec,
body.theme-light .mini-k,
body.theme-light .xsec-k{color:rgba(19,35,53,.45)}
body.theme-light .shot .sub{color:rgba(19,35,53,.6)}
body.theme-light .shot .v::after{background:#0B8AA3}
body.theme-light .kpi dd{color:#132335}
body.theme-light .kpi dd.on{color:#0B8AA3}
body.theme-light .kpi dd.bad{color:#C0322F}
body.theme-light .hint{color:rgba(19,35,53,.42)}
body.theme-light .hint b{color:rgba(19,35,53,.7)}

body.theme-light .intro{background:#E9EFF4}
body.theme-light .intro .t{color:rgba(19,35,53,.6)}
body.theme-light .intro .p{background:rgba(19,35,53,.12)}
body.theme-light .intro .p i{background:#0B8AA3}
body.theme-light .intro svg rect{stroke:#0E1B2A}

body.theme-light .ins-panel{border-left-color:#0B8AA3}
body.theme-light .ins-id{color:#0B8AA3}
body.theme-light .ins-desc{color:rgba(19,35,53,.78)}
body.theme-light .ins-specs dt{color:rgba(19,35,53,.5)}
body.theme-light .ins-x{color:rgba(19,35,53,.5);border-color:rgba(19,35,53,.18)}
body.theme-light .ins-status i{background:#1D9E6A;box-shadow:0 0 8px rgba(29,158,106,.6)}
body.theme-light .ins-status em{color:rgba(19,35,53,.45)}
body.theme-light .lv .r{color:rgba(19,35,53,.55)}
body.theme-light .lv .r b{color:#132335}
body.theme-light .lv .t{background:rgba(19,35,53,.12)}
body.theme-light .lv .t i{background:#0B8AA3}
body.theme-light .ins-holo::before,body.theme-light .ins-holo::after,
body.theme-light .ins-holo i{border-color:rgba(11,138,163,.7)}

body.theme-light .lr-steps button{
  color:rgba(19,35,53,.55);background:rgba(255,255,255,.72);
  border-color:rgba(19,35,53,.14);
}
body.theme-light .lr-steps button:hover{color:#0E1B2A}
body.theme-light .lr-steps button[data-on="1"]{color:#fff;background:#D89412;border-color:#D89412}
body.theme-light .lr-no{color:#B0740C}
body.theme-light .lr-t small{color:rgba(19,35,53,.5)}
body.theme-light .lr-d{color:rgba(19,35,53,.8)}
body.theme-light .lr-kw span{color:#0B8AA3;border-color:rgba(11,138,163,.35)}
body.theme-light .lr-nav button{color:rgba(19,35,53,.7);border-color:rgba(19,35,53,.16)}
body.theme-light .lr-nav .prog{color:rgba(19,35,53,.45)}
body.theme-light .xsec{border-left-color:rgba(19,35,53,.14)}
body.theme-light .xsec-l{color:rgba(19,35,53,.62)}

body.theme-light .alarm{
  background:rgba(255,246,246,.86);border-color:rgba(192,50,47,.45);
  box-shadow:0 1px 30px rgba(140,30,28,.12);
}
body.theme-light .alarm.gas{background:rgba(242,252,247,.88);border-color:rgba(29,158,106,.45)}
body.theme-light .al-title{color:#B32E2B}
body.theme-light .alarm.gas .al-title{color:#12805A}
body.theme-light .al-sub{color:rgba(19,35,53,.75)}
body.theme-light .al-t{color:#B32E2B}
body.theme-light .alarm.gas .al-t{color:#12805A}
body.theme-light .al-ico{color:#C0322F}
body.theme-light .alarm.gas .al-ico{color:#17976B}
body.theme-light .al-grid span{color:rgba(19,35,53,.45)}
body.theme-light .al-grid b{color:#132335}
body.theme-light .al-bar{background:rgba(192,50,47,.16)}
body.theme-light .vig{box-shadow:inset 0 0 190px 40px rgba(192,50,47,.4)}
body.theme-light .vig.gas{box-shadow:inset 0 0 190px 40px rgba(29,158,106,.32)}

body.theme-light .mini{background:rgba(255,255,255,.72);border-color:rgba(19,35,53,.14)}
body.theme-light .tip{
  background:rgba(255,255,255,.94);border-color:rgba(11,138,163,.5);color:#132335;
  box-shadow:0 2px 12px rgba(19,35,53,.14);
}
body.theme-light .cam{border-color:rgba(19,35,53,.22)}
body.theme-light .campop-in{box-shadow:0 0 0 100vmax rgba(233,239,244,.82)}
body.theme-light .campop-bar .n{color:#132335}
body.theme-light .campop-bar .z{color:rgba(19,35,53,.55)}
body.theme-light .campop-bar .x{color:rgba(19,35,53,.6);border-color:rgba(19,35,53,.18)}

/* 데모 목록으로 돌아가는 링크 */
.scenes a.back{color:rgba(232,230,225,.42);letter-spacing:.16em}
.scenes a.back:hover{color:var(--labs)}