/* moons.css v1.2.1 — 좁은 폰: '☰ 메뉴' 단추가 꺾이지 않게(nowrap), 420px 아래는 ☰ 만 · 위 막대 간격을 줄인다
 * v1.2.0 — moons 관리 웹 공통 디자인 (moonsubuntu-ui-reorg, 2026-09-25)
 * 모든 관리 화면은 moons_ui.page() 로 감싸고 이 파일 하나만 불러온다.
 * 색·크기는 목업 "디자인 기준" 판의 값이다. 모듈 전용 CSS(fm-, bk-, rs-)는 아래 변수만 쓴다. */
:root{
  color-scheme:dark;
  --bg:#111213;--card:#1a1b1e;--top:#151619;--side:#141518;
  --line:#2f3136;--line-soft:#25272b;--btn-line:#3a3d43;
  --text:#ececec;--text-2:#b9bcc2;--desc:#9a9ca3;--dim:#8d9097;
  --accent:#8fd0ff;--nav-on-bg:#16263a;--nav-on-text:#cfe8ff;
  --pri-bg:#1f4a6b;--pri-line:#2e5570;--pri-text:#fff;
  --dgr-bg:#5a2222;--dgr-line:#7a3434;--dgr-text:#ffd0d0;
  --ok:#8be08b;--ok-line:#2f5f2f;--ok-bg:#142014;
  --warn:#ffd27a;--warn-line:#6a5a2a;--warn-bg:#241f12;
  --bad:#ff9a9a;--bad-line:#6a3030;--bad-bg:#261515;
  --run:#9bd6ff;--run-line:#2e5570;--run-bg:#132230;
  --idle:#bbb;--idle-line:#444;--idle-bg:#1a1a1a;
  --top-h:60px;--side-w:232px;--nav-h:34px;--btn-h:40px;
  --r-card:14px;--r-btn:9px;--r-nav:8px;
  --fs-title:24px;--fs-card:17px;--fs-body:14px;--fs-desc:12.5px;
  --font:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --mono:ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.5}
a{color:var(--accent)}
code,pre,.mono{font-family:var(--mono)}

/* ---- 위 막대 ---- */
.m-top{position:sticky;top:0;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--top);border-bottom:1px solid var(--line)}
.m-logo{color:var(--text);font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap}
.m-logo span{color:var(--accent)}
.m-menubtn{display:none;white-space:nowrap;flex:none}
.m-top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.m-acct{position:relative}
.m-acct summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--btn-line);border-radius:var(--r-btn);color:var(--text-2);user-select:none;white-space:nowrap}
.m-acct summary::-webkit-details-marker{display:none}
.m-acct-panel{position:absolute;right:0;top:44px;min-width:200px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.m-acct-head{padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;color:var(--text-2)}
.m-acct-panel a{display:block;padding:9px 10px;border-radius:var(--r-nav);color:var(--text);text-decoration:none}
.m-acct-panel a:hover{background:#23252a}

/* ---- 몸통: 왼쪽 메뉴 + 본문 ---- */
.m-body{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:calc(100vh - var(--top-h))}
.m-side{position:sticky;top:var(--top-h);align-self:start;height:calc(100vh - var(--top-h));overflow-y:auto;padding:14px 10px 30px;background:var(--side);border-right:1px solid var(--line);scrollbar-width:none}
/* 세로 스크롤바는 숨긴다. 창이 아주 낮으면 휠·터치로 넘길 수 있다 */
.m-side::-webkit-scrollbar{display:none}
.m-grp{margin:0 0 12px}
/* 홈 · 앱 · 관리 세 덩어리 사이는 크게 나눈다 */
.m-grp+.m-grp{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* 묶음 제목은 소제목보다 작고 흐리게 */
.m-grp-t{padding:2px 10px 6px;color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.6px}
/* 관리 소제목: 눌러서 펼친다(<details>). 소제목끼리는 옅은 선과 여백으로 나눈다 */
.m-sec{margin:0;padding:6px 0;border-top:1px solid var(--line-soft)}
.m-sec:first-of-type{border-top:0}
.m-sec>summary{list-style:none;display:flex;align-items:center;height:var(--nav-h);padding:0 10px;border-radius:var(--r-nav);color:var(--text);font-weight:700;cursor:pointer;user-select:none}
.m-sec>summary::-webkit-details-marker{display:none}
.m-sec>summary::after{content:"▸";margin-left:auto;color:var(--dim);font-size:12px}
.m-sec[open]>summary::after{content:"▾"}
.m-sec>summary:hover{background:#1d1f23;color:var(--accent)}
.m-sec-items{padding-left:12px}
.m-sec-link{color:var(--text);font-weight:700}
.m-nav{display:flex;align-items:center;gap:6px;height:var(--nav-h);padding:0 10px;border-radius:var(--r-nav);color:var(--text-2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-nav:hover{background:#1d1f23;color:var(--text)}
.m-nav.on{background:var(--nav-on-bg);color:var(--nav-on-text);font-weight:700}
.m-nav .m-ext{margin-left:auto;color:var(--dim);font-size:11px}
.m-main{min-width:0;padding:22px 28px 60px;max-width:1240px}

/* ---- 제목 줄 ---- */
.m-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.m-crumbs{color:var(--dim);font-size:var(--fs-desc);margin-bottom:4px}
.m-crumbs a{color:var(--dim);text-decoration:none}
.m-crumbs a:hover{color:var(--accent)}
.m-title{margin:0;font-size:var(--fs-title);line-height:1.3}
.m-desc{margin-top:4px;color:var(--desc);font-size:var(--fs-desc)}
.m-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.m-actions form{margin:0}

/* ---- 공통 요소 (예전 BASE_CSS 가 주던 클래스 포함) ---- */
h1,h2{margin-top:0}
h2{font-size:var(--fs-card)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;margin:16px 0}
.muted{color:var(--desc)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
button,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--btn-h);padding:0 16px;margin:6px 8px 6px 0;border-radius:var(--r-btn);border:1px solid var(--btn-line);background:#24262a;color:var(--text);font:inherit;text-decoration:none;cursor:pointer}
button:hover,a.btn:hover{background:#2c2f34}
button:disabled{opacity:.55;cursor:default}
.primary,a.btn.primary{background:var(--pri-bg);border-color:var(--pri-line);color:var(--pri-text)}
.primary:hover,a.btn.primary:hover{background:#255a82}
.danger,a.btn.danger{background:var(--dgr-bg);border-color:var(--dgr-line);color:var(--dgr-text)}
.danger:hover,a.btn.danger:hover{background:#6a2828}
pre{white-space:pre-wrap;background:#0b0b0c;border:1px solid var(--line-soft);border-radius:10px;padding:14px;overflow:auto}
input[type=password],input[type=text],select{padding:10px;width:min(380px,94%);border-radius:8px;border:1px solid #4a4d53;background:#111213;color:var(--text);font:inherit}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 7px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
th{color:var(--desc);font-weight:600}
.role{display:inline-block;padding:3px 8px;border:1px solid #555;border-radius:999px;color:var(--text-2);font-size:13px}
.perm-yes{color:var(--ok)}.perm-no{color:#999}.perm-deny{color:var(--bad)}
.btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:none;animation:spin .8s linear infinite}
.is-loading .btn-spinner{display:inline-block}.is-loading{opacity:.85;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* 칩: 정상 / 주의 / 문제 / 진행 / 대기 */
a.chip{text-decoration:none}
.chip,.bk-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--idle-line);color:var(--idle);background:var(--idle-bg);white-space:nowrap}
.c-ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.c-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.c-bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.c-run{color:var(--run);border-color:var(--run-line);background:var(--run-bg)}
.c-idle{color:var(--idle);border-color:var(--idle-line);background:var(--idle-bg)}

/* 알림 상자 */
.okbox,.warnbox,.badbox{border-radius:10px;padding:10px 14px;margin:8px 0;font-size:14px;line-height:1.55}
.okbox{border:1px solid var(--ok-line);background:var(--ok-bg)}
.warnbox{border:1px solid var(--warn-line);background:var(--warn-bg)}
.badbox{border:1px solid var(--bad-line);background:var(--bad-bg)}

/* 모달 */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999}
.modal-box{width:min(460px,92vw);background:var(--card);border:1px solid #44474d;border-radius:var(--r-card);padding:24px}

/* 타일 (홈·전원 화면) */
.m-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.m-tile{display:block;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);color:var(--text);text-decoration:none}
.m-tile:hover{border-color:#44474d;background:#1f2024}
.m-tile b{display:block;font-size:var(--fs-card);margin-bottom:4px}
.m-tile span{display:block;color:var(--desc);font-size:var(--fs-desc);line-height:1.45}
.m-tile.danger{background:#221a1a;border-color:var(--dgr-line)}
.m-tile.danger b{color:var(--bad)}
.m-glance{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);margin:0 0 18px}
.m-glance .k{color:var(--dim);font-size:var(--fs-desc);margin-right:4px}
/* 홈의 서버 상태 영역(예전 한눈에): 제목 줄 옆에 마지막 백업·보안 두 칸 */
.m-home-state{margin-top:26px}
.m-home-head{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin:0 0 8px}
.m-home-head h2{margin:0}
.m-home-head .m-glance{margin:0;padding:0;border:0;background:none}

/* 로그인처럼 메뉴가 없는 화면 */
.m-bare{max-width:460px;margin:60px auto;padding:0 16px}

/* ---- 좁은 화면: 왼쪽 메뉴는 '메뉴' 단추로 여는 판 ---- */
@media(max-width:900px){
  .m-menubtn{display:inline-flex;min-height:36px;margin:0;padding:0 12px}
  .m-top{padding:0 12px}
  .m-body{display:block}
  .m-side{display:none;position:fixed;top:var(--top-h);left:0;bottom:auto;width:min(var(--side-w),86vw);height:calc(100vh - var(--top-h));z-index:40;box-shadow:12px 0 30px rgba(0,0,0,.5)}
  body.m-nav-open .m-side{display:block}
  .m-main{padding:16px 14px 50px}
  .m-acct summary .m-acct-name{display:none}
}
@media(max-width:420px){
  .m-menubtn-t{display:none}
  .m-top{gap:8px;padding:0 10px}
  .m-top-right{gap:6px}
  .m-logo{font-size:16px}
  .m-acct summary{padding:0 9px}
}
@media(max-width:340px){.m-logo{font-size:14px}}