/* 리플라180 거점 세로 화면 — 1200×1920 보드(삼성 SM-T583 세로 실픽셀)를 화면에 맞춰 축소·확대한다.
   색·글꼴은 팝업랩 성과보드 E(골든아워) 그대로. 글꼴은 tools/build_motion_fonts.py 가 이 화면 문구로 서브셋을 만든다 */
@font-face{font-family:'MSerif';src:url('../../fonts/station-serif.woff') format('woff');font-weight:100 900}
@font-face{font-family:'MSans';src:url('../../fonts/station-sans.woff') format('woff');font-weight:100 900}
:root{--ink:#ece6cf;--ink2:#d5dcc4;--ink3:#aab29a;--lime:#cfe3a0;--gold:#ffe08a;--line:rgba(210,228,180,.32);
  --glass:rgba(10,20,14,.62);--bg:#0b1410}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#board{position:absolute;left:50%;top:50%;width:1200px;height:1920px;transform-origin:0 0;background:var(--bg);overflow:hidden}
#gl{position:absolute;left:0;top:0;width:1200px;height:1920px}
#ui{position:absolute;inset:0;font-family:'MSans','Noto Sans KR','Malgun Gothic',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;pointer-events:none}
#ui .serif,#ui .title,#ui .num,#ui .kpi .v,#ui .t1,#ui .banner{font-family:'MSerif','Noto Serif KR','Batang',serif}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa88c;font:30px 'MSans','Noto Sans KR',sans-serif;
  transition:opacity .8s;text-align:center;line-height:1.7;padding:0 80px;background:var(--bg)}

/* 위·아래 그늘 — 사진 원경 위에서 글자가 읽히게 */
.shade-top{position:absolute;left:0;top:0;width:1200px;height:520px;background:linear-gradient(#060b08ee,#060b0899 45%,transparent)}
.shade-bot{position:absolute;left:0;top:1380px;width:1200px;height:540px;background:linear-gradient(transparent,#070d0acc 22%,#070d0af2 50%,#070d0a)}

.head{position:absolute;left:64px;top:64px;right:64px}
.title{margin:0;font-size:62px;font-weight:500;letter-spacing:.02em;color:#f0ead4;text-shadow:0 2px 20px rgba(0,0,0,.6);line-height:1.15}
.sub{margin-top:18px;font-size:28px;color:var(--ink2);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.where{position:absolute;right:40px;top:22px;display:flex;align-items:center;gap:12px;font-size:20px;color:var(--ink3)}
.where b{font-weight:500;color:var(--ink2)}
.live{padding:4px 12px;border-radius:99px;border:1px solid var(--line);color:var(--lime);font-size:18px}
.live.demo{color:var(--gold);border-color:rgba(255,224,138,.4)}
.live.off{color:#ffb38a;border-color:rgba(255,179,138,.45)}

/* 이번 달 숲 게이지 — 왼쪽 위 */
.gauge{position:absolute;left:64px;top:236px;width:360px;height:220px}
.gauge .gl{position:absolute;left:0;top:0;font-size:26px;color:var(--ink2);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.gauge svg{position:absolute;left:0;top:44px;width:150px;height:150px}
.gauge .num{position:absolute;left:170px;top:52px;font-size:96px;line-height:1;color:#eef2dc;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.gauge .num small{font-size:44px;margin-left:2px}
.gauge .num.over{color:var(--gold)}
.gauge .msg{position:absolute;left:172px;top:160px;font-size:21px;color:var(--ink3);white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* 단계·축제 배너 — 가운데 */
.banner{position:absolute;left:50%;top:470px;transform:translate(-50%,8px);opacity:0;transition:opacity .5s,transform .5s;
  padding:16px 34px;border-radius:99px;background:rgba(14,20,12,.78);border:1px solid rgba(255,220,140,.6);color:#f3ecd0;
  font-size:30px;white-space:nowrap;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.banner.on{opacity:1;transform:translate(-50%,0)}
.banner b{color:var(--gold);font-weight:600}
.banner.fest{animation:festPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes festPop{0%{transform:translate(-50%,8px) scale(.6)}100%{transform:translate(-50%,0) scale(1)}}

/* KPI 카드 2×2 — 실물 사진 아이콘(E 와 같은 구성) */
.kpis{position:absolute;left:40px;top:1488px;width:1120px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kpi{position:relative;height:132px;background:var(--glass);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:visible}
.kpi::after{content:'';position:absolute;inset:-1px;border-radius:18px;border:2px solid var(--gold);opacity:0;transition:opacity .4s}
.kpi.hit::after{opacity:.9}
.kpi .ic.photo{position:absolute;left:12px;bottom:10px;width:112px;height:120px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.kpi.hit .ic.photo{animation:icHop .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes icHop{0%{transform:scale(1)}30%{transform:scale(1.14) translateY(-8px)}100%{transform:scale(1)}}
.kpi .lb{position:absolute;left:138px;top:22px;font-size:24px;color:var(--ink2);white-space:nowrap}
.kpi .lb em{font-style:normal;font-size:17px;color:var(--ink3);border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:3px}
.kpi .v{position:absolute;left:138px;top:58px;font-size:50px;font-weight:500;color:#eef0dc;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:26px;margin-left:4px;color:var(--ink2)}
.kpi.hit .v{animation:kpiPop .7s ease-out}
@keyframes kpiPop{0%{transform:scale(1)}35%{transform:scale(1.1)}100%{transform:scale(1)}}
.kpi .delta{position:absolute;right:18px;top:12px;font-style:normal;font-size:28px;font-weight:800;color:var(--gold);opacity:0}
.kpi .delta.go{animation:dltUp 1.5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes dltUp{0%{opacity:0;transform:translateY(14px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}

/* 「올려 주세요」 — 화면 맨 아래, 받침(리더)이 있는 쪽을 가리킨다 */
.cta{position:absolute;left:0;right:0;top:1780px;height:140px;display:flex;align-items:flex-start;justify-content:center;gap:26px;padding-top:4px;box-sizing:border-box}
.cta .ct{text-align:center}
.cta .ct b{display:block;font-size:36px;font-weight:600;color:#f3eed6;letter-spacing:.01em}
.cta .ct span{display:block;margin-top:6px;font-size:22px;color:var(--ink3)}
.cta .arrows{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:60px;height:30px}
.cta .arrows i{position:absolute;left:18px;width:22px;height:22px;border-right:3px solid var(--lime);border-bottom:3px solid var(--lime);transform:rotate(45deg);opacity:0;animation:chev 1.8s infinite}
.cta .arrows i:nth-child(1){top:-14px}
.cta .arrows i:nth-child(2){top:-4px;animation-delay:.2s}
.cta .arrows i:nth-child(3){top:6px;animation-delay:.4s}
@keyframes chev{0%{opacity:0}30%{opacity:.9}70%{opacity:0}100%{opacity:0}}
.cta .state{position:absolute;right:32px;bottom:14px;display:flex;align-items:center;gap:8px;font-size:17px;color:var(--ink3)}
.cta .state i{width:10px;height:10px;border-radius:50%;background:#6c7a66}
.cta .state.ok i{background:#9fe07a;box-shadow:0 0 10px #9fe07a}
.cta .state.warn i{background:#ffb38a}

/* 태깅 결과 — 장면 가운데 아래 */
.toast{position:absolute;left:50%;top:640px;width:860px;transform:translate(-50%,24px) scale(.96);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1);
  padding:30px 40px 30px;border-radius:28px;background:rgba(10,18,12,.8);border:1px solid rgba(255,224,138,.55);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.toast .t1{font-size:58px;color:var(--gold);line-height:1.1}
.toast .t2{margin-top:12px;font-size:36px;color:#f3eed6}
.toast .t3{margin-top:12px;font-size:22px;color:var(--ink3)}
.toast.warn{border-color:rgba(255,179,138,.6)}
.toast.warn .t1{color:#ffc9a8}

/* 생물 이름표(E 와 같은 방식) */
#ui .tag{position:absolute;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s;white-space:nowrap;pointer-events:none;color:#ece6cf;text-shadow:0 1px 8px rgba(0,0,0,.85)}
#ui .tag.on{opacity:1;transform:none}
#ui .tag .ln{position:absolute;left:50%;top:50%;height:1px;transform-origin:0 50%;background:currentColor;opacity:.55}
#ui .tag b{position:relative;display:inline-block;font-weight:600;font-size:25px}
#ui .tag small{display:block;font-size:18px;color:var(--ink3);margin-top:2px}
#ui .tag.hit b{animation:tagPop .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes tagPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
#ui .ripple{position:absolute;width:0;height:0;opacity:0;transition:opacity 1s;pointer-events:none}
#ui .ripple.on{opacity:1}
#ui .ripple i{position:absolute;left:-80px;top:-80px;width:160px;height:160px;border-radius:50%;border:1px solid rgba(230,240,200,.45);animation:rip 4.5s ease-out infinite;opacity:0}
#ui .ripple i:nth-of-type(2){animation-delay:2.25s}
#ui .ripple b{position:absolute;border-radius:50%;border:1px solid rgba(230,240,200,.2);animation:ripB 6s ease-in-out infinite}
#ui .ripple b:nth-child(1){left:-52px;top:-52px;width:104px;height:104px}
#ui .ripple b:nth-child(2){left:-84px;top:-84px;width:168px;height:168px;border-color:rgba(230,240,200,.14);animation-delay:.6s}
#ui .ripple b:nth-child(3),#ui .ripple b:nth-child(4){display:none}
@keyframes ripB{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes rip{0%{transform:scale(.25);opacity:0}15%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
#ui.celebrate .gauge svg{animation:ringPulse 1.2s ease-in-out 3}
@keyframes ringPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* 처음 설정 — 거점(단말) 고르기 */
#setup{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,8,6,.88);z-index:20;font-family:'MSans','Noto Sans KR',sans-serif}
#setup[hidden]{display:none}
#setup .box{width:min(560px,88vw);padding:28px;border-radius:20px;background:#121d16;border:1px solid var(--line);color:var(--ink)}
#setup h2{margin:0 0 8px;font-size:24px}
#setup p{margin:0 0 18px;color:var(--ink3);font-size:15px}
#setup select,#setup input,#setup button{display:block;width:100%;height:52px;border-radius:12px;font:inherit;font-size:17px;box-sizing:border-box}
#setup select[hidden],#setup input[hidden]{display:none}
#setup select,#setup input{background:#0b1410;color:var(--ink);border:1px solid var(--line);padding:0 12px;margin-top:10px}
#setup button{margin-top:12px;background:var(--lime);color:#10200f;border:0;font-weight:700}

/* 시연 조작 — 보드 밖(화면 좌표). ?ctl 또는 데모에서만 보인다 */
#ctl{position:fixed;right:6px;top:21%;display:none;flex-direction:column;gap:6px;align-items:stretch;padding:8px 10px;border-radius:14px;
  background:rgba(10,18,14,.9);border:1px solid rgba(205,225,165,.3);font:600 14px 'MSans','Malgun Gothic',sans-serif;color:#dfe6cf;z-index:10}
#ctl.on{display:flex}
#ctl.dim{opacity:.15;transition:opacity .6s}
#ctl button{white-space:nowrap;min-width:44px;height:38px;padding:0 10px;border-radius:10px;border:1px solid rgba(205,225,165,.35);background:#15241a;color:#e8f0d8;font:inherit;cursor:pointer}
#ctl .fps{max-width:96px;color:#9aa88c;font-size:11px;line-height:1.3;text-align:center}