/* ══════════════════════════════════════════════════════════
   Junserver — 네오브루탈리즘 / 크림 & 테라코타
   두꺼운 테두리 · 하드 섀도 · 굵은 타이포.
   원색을 피하고 채도를 낮춰 오래 봐도 피로하지 않게 맞췄다.
   ══════════════════════════════════════════════════════════ */
:root {
  --ink:      #26201A;   /* 테두리 · 본문 */
  --paper:    #E5DBC8;   /* 배경 */
  --card:     #FBF7EF;   /* 카드 */
  --tile:     #EDE5D6;   /* 카드 안 요소 */
  --hl:       #E7C9A9;   /* 강조 블록 (접속 주소 등) */
  --ok:       #5C8A72;   /* 정상 */
  --ok2:      #4A7460;   /* 정상 - 깜빡임 대비색 */
  --warn:     #D9A05B;   /* 경고 */
  --danger:   #C4685A;   /* 위험 · 종료 */
  --on-dark:  #FBF7EF;   /* 진한 배경 위 글자 */
  --bw:       4px;       /* 테두리 두께 */
  --sh:       7px;       /* 하드 섀도 오프셋 */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  padding: env(safe-area-inset-top) 16px calc(28px + env(safe-area-inset-bottom));
  max-width: 520px;
  margin-inline: auto;
}

h1 {
  font-size: 27px; font-weight: 900; letter-spacing: -1.2px;
  text-transform: uppercase; line-height: 1;
}

.card {
  background: var(--card);
  border: var(--bw) solid var(--ink);
  padding: 18px;
  box-shadow: var(--sh) var(--sh) 0 var(--ink);
}

.btn {
  display: block; width: 100%; padding: 17px;
  border: var(--bw) solid var(--ink); background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 17px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px;
  box-shadow: var(--sh) var(--sh) 0 var(--ink); cursor: pointer;
}
/* 누르면 섀도 자리로 밀려 들어간다. 브루탈리즘의 촉감. */
.btn:active { transform: translate(var(--sh), var(--sh)); box-shadow: none; }
.btn.go     { background: var(--ok); color: var(--on-dark); }
.btn.stop   { background: var(--danger); color: var(--on-dark); }
.btn:disabled { opacity: .45; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.hide { display: none !important; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric {
  text-align: center; padding: 11px 4px;
  background: var(--tile); border: 3px solid var(--ink);
}
.metric b { display: block; font-size: 18px; font-weight: 900; }
.metric span { font-size: 10px; opacity: .6; }

.rowline { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }

.gauge { height: 16px; background: var(--tile); border: 3px solid var(--ink); margin-top: 12px; }
.gauge i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .45s steps(12); }
.gauge i.warn { background: var(--warn); }
.gauge i.over { background: var(--danger); }

.linkrow {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; font-size: 16px; font-weight: 700;
}
.linkrow .chev { margin-left: auto; font-size: 22px; }

.badge {
  background: var(--warn); border: 2px solid var(--ink);
  padding: 2px 8px; font-size: 10px; font-weight: 900; text-transform: uppercase;
}

input[type=password], input[type=text] {
  width: 100%; padding: 13px; font-size: 16px; font-family: ui-monospace, monospace;
  background: var(--tile); border: 3px solid var(--ink); color: var(--ink);
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--card); border: 3px solid var(--ink);
  padding: 12px 18px; font-size: 14px; font-weight: 700;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  max-width: 88%; text-align: center; z-index: 90;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--danger); border-color: var(--ink); color: var(--on-dark); }