/* ════════════════════════════════════════
   shell.css — 어드민 레이아웃: 레일 · 탑바 · 스테이지
════════════════════════════════════════ */
#app{display:none;min-height:100vh}
#app.on{display:flex}

/* ── 사이드 레일 ── */
.rail{
  width:248px;flex-shrink:0;height:100vh;position:sticky;top:0;
  display:flex;flex-direction:column;
  background:var(--bg-2);border-right:1px solid var(--line);
  padding:20px 14px;z-index:60;
}
.rail-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px}
.rb-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 22px var(--glow);
}
.rb-text{display:flex;flex-direction:column;line-height:1.15}
.rb-text b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.04em}
.rb-text i{font-style:normal;font-size:9px;letter-spacing:.28em;color:var(--sub)}

.rail-new{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;border-radius:var(--r-md);margin-bottom:18px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 12px 28px -12px var(--glow);transition:transform .2s var(--ease),box-shadow .2s;
}
.rail-new:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px var(--glow)}
.rn-plus{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.2)}
.rn-text{display:flex;flex-direction:column;line-height:1.2}
.rn-text b{font-size:14px;font-weight:700}
.rn-text i{font-style:normal;font-size:10.5px;opacity:.85}

.rail-nav{flex:1;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.rail-cap{font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--sub);padding:14px 12px 6px}
.rail-link{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:var(--txt-2);font-size:13.5px;font-weight:500;position:relative;transition:.18s var(--ease);
}
.rail-link:hover{background:var(--surf);color:var(--txt)}
.rail-link.active{background:var(--surf-2);color:var(--txt)}
.rail-link.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:9px;background:linear-gradient(var(--brand),var(--brand-2))}
.rl-ico{font-size:16px;width:20px;text-align:center}
.rl-lbl{flex:1}
.rl-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--brand);color:#fff}
.rl-badge.p{background:var(--danger)}

.rail-foot{display:flex;align-items:center;gap:11px;padding:12px 10px 4px;margin-top:8px;border-top:1px solid var(--line)}
.rf-av{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand-3),var(--brand))}
.rf-id{display:flex;flex-direction:column;line-height:1.3}
.rf-id b{font-size:13px;font-weight:600}
.rf-id i{font-style:normal;font-size:11px;color:var(--sub);display:flex;align-items:center;gap:6px}
.rf-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s;z-index:55}
.nav-scrim.on{opacity:1;visibility:visible}

/* ── 스테이지 ── */
.stage{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}

.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:14px 26px;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
}
.tb-burger{display:none;font-size:20px;color:var(--txt)}
.tb-home{display:flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:12px;font-size:13px;font-weight:600;color:var(--txt-2);background:var(--surf);border:1px solid var(--line);transition:.18s var(--ease);flex-shrink:0}
.tb-home:hover{color:var(--txt);border-color:var(--line-2);transform:translateY(-1px)}
.tb-search{
  flex:1;max-width:440px;display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:99px;background:var(--surf);border:1px solid var(--line);
}
.tb-search span{font-size:13px;opacity:.6}
.tb-search input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:13.5px}
.tb-search input::placeholder{color:var(--sub)}
.tb-tools{display:flex;align-items:center;gap:10px;margin-left:auto}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:99px;background:var(--surf);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--txt-2)}
.lang-cv{font-size:9px;opacity:.6}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;width:190px;
  background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:7px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.22s var(--ease);z-index:50;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:13px;color:var(--txt-2);font-weight:500}
.lang-menu a:hover{background:var(--surf-2);color:var(--txt)}

.tb-theme,.tb-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:16px;background:var(--surf);border:1px solid var(--line);position:relative;transition:.18s}
.tb-theme:hover,.tb-ico:hover{border-color:var(--line-2)}
.tb-dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
.tb-clock{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--txt-2);padding:0 6px;letter-spacing:.04em}

.view{flex:1;padding:30px 32px 96px}