/* robothub — 귀여운 3층 로봇 현황판. 빌드 도구 없음. */
:root{
  --bg1:#fdf3f8; --bg2:#eef4ff; --bg3:#f3fbf7;
  --panel:#ffffff; --ink:#1e2330; --muted:#7a839a; --line:#e6e9f2;
  --lg:#a50034;                       /* LG 레드 */
  --repair:#ff9d5c; --repair-bg:#fff4ea; --repair-line:#ffd9bb;
  --train:#7cd4b4;  --train-bg:#effbf5; --train-line:#c7eeda;
  --exp:#8fb6ff;    --exp-bg:#eef4ff;  --exp-line:#d3e1ff;
  --floor:#ffffff;
  --shadow:0 2px 6px rgba(30,35,60,.05), 0 14px 34px rgba(30,35,60,.09);
  --tag:#ffffff; --tag-ink:#1e2330;
  --body:#ffffff; --body-line:#d7dcea; --metal:#eef1f8; --screen:#242a3d; --eye:#8ad9ff;
  --display:'Jua', 'Apple SD Gothic Neo', 'Pretendard', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#1b1724; --bg2:#161b26; --bg3:#151f1c;
    --panel:#1e2330; --ink:#eceef5; --muted:#98a1b8; --line:#2d3444;
    --repair-bg:#2e2118; --repair-line:#4a3527;
    --train-bg:#16271f; --train-line:#274538;
    --exp-bg:#1a2233; --exp-line:#2c3a55;
    --floor:#191e2a;
    --shadow:0 2px 6px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.35);
    --tag:#2a3142; --tag-ink:#f2f4fa;
    --body:#e8ecf6; --body-line:#aeb6c9; --metal:#cfd6e6;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100%; color:var(--ink);
  background:
    radial-gradient(1100px 520px at 8% -8%, var(--bg1), transparent 60%),
    radial-gradient(900px 460px at 92% 0%, var(--bg3), transparent 55%),
    var(--bg2);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
       "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1240px; margin:0 auto; padding:22px 20px 40px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.2px}

/* ── 머리말 ─────────────────────────────────────────────────────────── */
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.title{display:flex; align-items:center; gap:12px}
.mascot{font-size:34px; display:inline-block; animation:bob 2.6s ease-in-out infinite}
h1{margin:0; font-size:29px; letter-spacing:.2px; font-family:var(--display); font-weight:400}
h1::after{content:"🩵"; font-size:15px; margin-left:6px; vertical-align:6px}
.sub{margin:2px 0 0; color:var(--muted); font-size:13.5px}
.counts{display:flex; gap:8px; flex-wrap:wrap}
.count{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  box-shadow:var(--shadow); font-size:13.5px; font-family:var(--display); display:flex; align-items:center; gap:6px}
.count b{font-size:15px}

/* ── 도면 ───────────────────────────────────────────────────────────── */
.floor{
  background:var(--floor); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow);
  padding:14px; display:flex; gap:12px; min-height:520px;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:22px 22px; background-position:-1px -1px;
  color:rgba(120,132,160,.13);
}
.zone{position:relative; border-radius:20px; border:2px dashed var(--line); overflow:hidden; color:var(--ink)}
.zone.repair{background:var(--repair-bg); border-color:var(--repair-line)}
.zone.training{background:var(--train-bg); border-color:var(--train-line)}
.zone.exp{background:var(--exp-bg); border-color:var(--exp-line)}
.zone-head{position:absolute; top:10px; left:12px; z-index:60; pointer-events:none}
.zone-name{font-family:var(--display); font-size:15.5px; letter-spacing:-.2px; display:flex; align-items:center; gap:6px}
.zone-sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.zone-count{position:absolute; top:9px; right:12px; z-index:60; font-size:14px; font-family:var(--display);
  color:var(--ink); background:var(--panel); border:1.5px solid var(--line); border-radius:999px;
  padding:3px 12px; box-shadow:0 2px 8px rgba(30,35,60,.10)}

/* 구역 안의 소구역 (가정 모사 환경 / 테네시 옆 …) */
.area{position:absolute; border-radius:16px; border:1.5px dashed rgba(125,138,168,.35);
  background:rgba(255,255,255,.42)}
@media (prefers-color-scheme: dark){ .area{background:rgba(255,255,255,.04)} }
.area-name{position:absolute; bottom:6px; left:10px; font-size:11.5px; font-weight:700; color:var(--muted);
  letter-spacing:-.2px; pointer-events:none; display:flex; align-items:center; gap:5px}
.area-n{font-family:var(--display); font-size:12px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.deco{position:absolute; font-size:22px; opacity:.75; pointer-events:none; user-select:none}

/* ── 로봇 ───────────────────────────────────────────────────────────── */
.bot{position:absolute; width:96px; display:flex; flex-direction:column; align-items:center;
  cursor:pointer; will-change:transform; touch-action:manipulation}
.bot:focus-visible{outline:none}
.bot:focus-visible .tag{box-shadow:0 0 0 3px rgba(124,108,240,.55)}

/* 머리 위에 떠 있는 이름표 — 이 화면의 주인공 */
.tag{position:relative; z-index:3; background:var(--tag); color:var(--tag-ink);
  border:1.5px solid var(--line); border-radius:999px; padding:3px 10px 3px 8px;
  font-size:14px; font-family:var(--display); letter-spacing:.2px; white-space:nowrap;
  box-shadow:0 4px 12px rgba(30,35,60,.16); display:flex; align-items:center; gap:5px;
  animation:float 3.2s ease-in-out infinite; transform-origin:50% 100%}
.tag::after{content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px;
  margin-left:-4.5px; background:var(--tag); border-right:1.5px solid var(--line);
  border-bottom:1.5px solid var(--line); transform:rotate(45deg); border-radius:0 0 3px 0}
.tag .dot{width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}
.tag .st{font-size:11px}
.bot:hover .tag{transform:scale(1.08)}

.flip{transform:scaleX(var(--dir,1)); transform-origin:50% 100%}
.bob{animation:bob 2.4s ease-in-out infinite; animation-delay:var(--d,0s)}
.bot svg{display:block; width:88px; height:118px; overflow:visible}
.bot:hover .bob{animation-duration:1.1s}

/* 걷는(구르는) 중 */
.bot.moving .bob{animation:roll 1s ease-in-out infinite}
/* 수리중 — 움직이지 않는다 */
.bot.broken .bob{animation:none}
.bot.broken .flip{transform:none}
.bot.broken svg{filter:saturate(.35)}
.bot.broken .tag{animation:none}
.wrench{position:absolute; right:-6px; top:52px; font-size:20px; animation:spin 3.4s linear infinite}
.zzz{position:absolute; left:-4px; top:26px; font-size:14px; opacity:.75; animation:float 2.8s ease-in-out infinite}

/* 말풍선 */
.say{position:absolute; bottom:calc(100% + 4px); left:50%; transform:translate(-50%,6px) scale(.9);
  background:var(--tag); color:var(--tag-ink); border:1.5px solid var(--line); border-radius:14px;
  padding:5px 11px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .28s ease, transform .28s ease; z-index:5}
.say.on{opacity:1; transform:translate(-50%,0) scale(1)}

@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes roll{0%,100%{transform:translateY(0) rotate(-1.6deg)} 50%{transform:translateY(-3px) rotate(1.6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)}}
@keyframes swingL{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(9deg)}}
@keyframes swingR{0%,100%{transform:rotate(7deg)} 50%{transform:rotate(-9deg)}}
.eyes{animation:blink 5s infinite; animation-delay:var(--bd,0s); transform-box:fill-box; transform-origin:50% 50%}
.arm-l{animation:swingL 2.6s ease-in-out infinite; animation-delay:var(--d,0s); transform-box:view-box}
.arm-r{animation:swingR 2.6s ease-in-out infinite; animation-delay:var(--d,0s); transform-box:view-box}
.bot.broken .arm-l,.bot.broken .arm-r,.bot.broken .eyes{animation:none}
@media (prefers-reduced-motion: reduce){
  .bob,.tag,.mascot,.arm-l,.arm-r,.eyes,.wrench,.zzz{animation:none !important}
}

/* ── 범례 ───────────────────────────────────────────────────────────── */
.floorfoot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:12px 2px 18px}
.legend{display:flex; gap:8px; flex-wrap:wrap}
.leg{display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 7px; font-size:12.5px; font-weight:650; box-shadow:var(--shadow)}
.leg svg{width:22px; height:26px; display:block}
.tip{color:var(--muted); font-size:12.5px}

/* ── 카드 목록 ──────────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(238px,1fr)); gap:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:13px 14px;
  box-shadow:var(--shadow); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; text-align:left}
.card:hover{transform:translateY(-3px)}
.card.broken{background:linear-gradient(180deg,var(--repair-bg),var(--panel) 62%)}
.card h3{margin:0 0 2px; font-size:18px; font-family:var(--display); font-weight:400; display:flex; align-items:center; gap:7px}
.card .row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px}
.chip{font-size:11.5px; font-weight:750; border-radius:999px; padding:2px 9px; border:1px solid var(--line);
  background:var(--panel); white-space:nowrap}
.chip.team{color:#fff; border:none}
.pill{font-size:11.5px; font-weight:750; border-radius:999px; padding:2px 9px; border:1px solid var(--line)}
.pill.running{background:#e8f9ef; color:#12734a; border-color:#bfe9d1}
.pill.idle{background:#eef1f8; color:#5a637a; border-color:#dbe0ee}
.pill.repair{background:#fff1e4; color:#a2531a; border-color:#ffd6b3}
@media (prefers-color-scheme: dark){
  .pill.running{background:#12331f; color:#7fe3ab; border-color:#1e4c30}
  .pill.idle{background:#242b3a; color:#aab3c8; border-color:#333c4f}
  .pill.repair{background:#3a2617; color:#ffbe84; border-color:#553a24}
}
.card .place{color:var(--muted); font-size:12.5px; margin-top:3px}
.card .note{margin-top:8px; font-size:12.5px; background:rgba(125,138,168,.09); border-radius:10px; padding:6px 9px}
.card .upd{color:var(--muted); font-size:11.5px; margin-top:8px}

.foot{display:flex; align-items:center; justify-content:space-between; margin-top:20px; color:var(--muted); font-size:12.5px}
.ghost{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font:inherit; font-size:12.5px; font-weight:650; color:var(--ink); cursor:pointer}
.ghost:hover{border-color:var(--muted)}

/* ── 상세 패널 ──────────────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(20,24,36,.32); backdrop-filter:blur(2px); z-index:80}
.panel{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--panel); z-index:90;
  box-shadow:-18px 0 44px rgba(20,24,36,.22); padding:22px 22px 30px; overflow:auto;
  border-radius:22px 0 0 22px; animation:slide .22s ease}
@keyframes slide{from{transform:translateX(24px); opacity:.6} to{transform:none; opacity:1}}
.panel .x{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; font-size:14px}
.p-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:6px}
.p-avatar{flex:none; width:74px}
.p-avatar svg{width:74px; height:100px; display:block}
.panel h2{margin:2px 0 6px; font-size:25px; font-family:var(--display); font-weight:400}
.p-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.p-place{color:var(--muted); font-size:13px; margin-top:5px}
.lbl{display:block; margin:18px 0 7px; font-size:12.5px; font-weight:750; color:var(--muted)}
.hint{font-weight:500}
.seg{display:flex; gap:7px}
.wrap-seg{flex-wrap:wrap}
.opt{flex:1; min-width:96px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:14px; padding:9px 8px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px}
.opt:hover{border-color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--lg); background:rgba(165,0,52,.07); color:var(--lg)}
@media (prefers-color-scheme: dark){ .opt[aria-pressed="true"]{color:#ff86ab; border-color:#ff86ab; background:rgba(255,134,171,.1)} }
.opt svg{width:20px; height:24px}
select,input[type=text]{width:100%; border:1.5px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:14px; padding:10px 12px; font:inherit; font-size:14px}
select:focus,input:focus{outline:none; border-color:var(--lg)}
.p-actions{display:flex; align-items:center; gap:12px; margin-top:22px}
.primary{background:var(--lg); color:#fff; border:none; border-radius:14px; padding:11px 22px;
  font:inherit; font-weight:750; cursor:pointer}
.primary:disabled{opacity:.5; cursor:default}
.p-updated{color:var(--muted); font-size:12px}
.p-err{color:#c22; font-size:13px; margin-top:12px}

@media (max-width:860px){
  .floor{flex-direction:column; min-height:0}
  .zone{min-height:300px}
  .panel{border-radius:22px 22px 0 0; top:auto; height:86vh; width:100%}
}

/* ── 보기 전용 상세 (현황판) ────────────────────────────────────────────── */
.dim{color:var(--muted)}
.p-rows{display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin:20px 0 0; align-items:baseline}
.p-rows dt{font-size:12.5px; font-weight:750; color:var(--muted); white-space:nowrap}
.p-rows dd{margin:0; font-size:14px}
.p-rows .gcell{display:flex; align-items:center; gap:8px}
.p-rows .gcell svg{width:22px; height:26px; flex:none}
.p-admin{display:block; margin-top:24px; text-align:center; text-decoration:none;
  background:var(--panel); border:1.5px dashed var(--line); border-radius:14px; padding:12px;
  font-size:13.5px; font-weight:700; color:var(--ink)}
.p-admin:hover{border-color:var(--lg); color:var(--lg)}
.foot-btns{display:flex; gap:8px; align-items:center}
.foot-btns a{text-decoration:none}

/* ── 관리자 페이지 ──────────────────────────────────────────────────────── */
.login{max-width:420px; margin:40px auto; background:var(--panel); border:1px solid var(--line);
  border-radius:22px; padding:26px 24px 28px; box-shadow:var(--shadow)}
.login h2{margin:0 0 6px; font-size:22px; font-family:var(--display); font-weight:400}
.login .lbl{margin-top:16px}

.admin-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.admin-bar .spacer{flex:1}
.admin-bar a.ghost{text-decoration:none}
.who{font-size:13px; font-weight:700; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; box-shadow:var(--shadow)}
.byline{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); font-weight:700}
.byline input{width:150px; padding:6px 11px; font-size:13px; border-radius:999px}

.table-wrap{overflow-x:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow)}
.grid{border-collapse:collapse; width:100%; min-width:940px; font-size:13.5px}
.grid th, .grid td{padding:11px 12px; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line)}
.grid thead th{font-size:12px; color:var(--muted); font-weight:750; letter-spacing:.2px;
  background:rgba(125,138,168,.07); white-space:nowrap}
.grid thead th:first-child{border-radius:20px 0 0 0}
.grid thead th:last-child{border-radius:0 20px 0 0}
.grid tbody tr:last-child th, .grid tbody tr:last-child td{border-bottom:none}
.grid tbody th{font-weight:400}
.grid .rname{font-family:var(--display); font-size:16px}
.grid .place{font-size:11.5px; margin-top:1px}
.grid select, .grid input[type=text]{padding:7px 10px; font-size:13px; border-radius:12px; min-width:120px}
.grid td:nth-child(6) input{min-width:180px; width:100%}
.grid .upd{font-size:11.5px; white-space:nowrap}
.grid tr.dirty{background:rgba(165,0,52,.05)}
.grid tr.dirty .rname::after{content:"● 안 저장됨"; font-family:inherit; font-size:10.5px;
  color:var(--lg); margin-left:7px; vertical-align:2px; font-weight:750}
@media (prefers-color-scheme: dark){
  .grid tr.dirty{background:rgba(255,134,171,.08)}
  .grid tr.dirty .rname::after{color:#ff86ab}
}
.admin-actions{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap}