:root {
  color-scheme: light;
  font-family: "Avenir Next", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1e2723;
  background: #e7e6df;
  font-synthesis: none;
  --ink: #1e2723;
  --paper: #f8f7f1;
  --line: #c9cbc4;
  --muted: #68716c;
  --green: #17745f;
  --orange: #d94f28;
  --red: #9e2929;
  --blue: #275d83;
  --dark: #171d1a;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(rgba(30, 39, 35, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 39, 35, .035) 1px, transparent 1px),
    #e7e6df;
  background-size: 28px 28px;
}

button, input, a { font: inherit; }
[hidden] { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  min-height: 62px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  border-bottom: 1px solid #111;
  background: rgba(248, 247, 241, .97);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-family: Georgia, serif;
  font-size: 1rem;
}

.topbar-status { display: flex; align-items: center; gap: 9px; font-size: .72rem; }
.status-dot { width: 9px; height: 9px; border: 2px solid #919894; border-radius: 50%; }
.status-dot.ready { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 4px rgba(23, 116, 95, .13); }
.status-dot.warning { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 4px rgba(217, 79, 40, .12); }
.status-dot.error { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 4px rgba(158, 41, 41, .12); }

nav { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
nav a { flex: none; padding: 7px 5px; color: var(--muted); font-size: .74rem; font-weight: 800; text-decoration: none; }

.button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: white;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}
.button:disabled { cursor: wait; opacity: .55; }
.button.warning {
  border-color: #a85f0b;
  background: #fff4da;
  color: #7e4200;
}
.button.danger {
  border-color: var(--red);
  background: var(--red);
  color: white;
}
.button.warning:hover, .button.warning:focus-visible { background: #ffe8b3; }
.button.danger:hover, .button.danger:focus-visible { background: #7f1f1f; }

main { width: min(1720px, calc(100% - 28px)); margin: 14px auto 40px; }

.alert-banner {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border: 1px solid var(--red);
  background: #fff2ef;
  color: var(--red);
}
.alert-banner strong { flex: none; font-size: .74rem; letter-spacing: .06em; }
.alert-banner span { font-size: .72rem; line-height: 1.45; }

.bootstrap-mode-bar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  background: var(--dark);
  color: #edf4ef;
}
.bootstrap-mode-heading { display: flex; align-items: baseline; gap: 12px; }
.bootstrap-mode-heading span {
  color: #94a39b;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.bootstrap-mode-heading strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .94rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bootstrap-mode-heading strong.mode-zl { color: #6bd2aa; }
.bootstrap-mode-heading strong.mode-booting { color: #77b9e8; }
.bootstrap-mode-heading strong.mode-off { color: #ffaaa0; }
.bootstrap-mode-heading strong.mode-none { color: #f0c67a; }
.bootstrap-mode-bar small { color: #b7c4bd; font-size: .66rem; line-height: 1.4; }
.bootstrap-mode-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.bootstrap-mode-options span {
  padding: 3px 7px;
  border: 1px solid #49564f;
  border-radius: 999px;
  color: #87958e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  font-weight: 900;
}
.bootstrap-mode-options span.active {
  border-color: #edf4ef;
  background: #edf4ef;
  color: var(--dark);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--ink);
  background: var(--paper);
}

.summary-grid article {
  min-width: 0;
  min-height: 88px;
  padding: 13px 14px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.summary-grid article:nth-child(5n) { border-right: 0; }
.summary-grid article:nth-last-child(-n + 5) { border-bottom: 0; }
.summary-grid article.wide { grid-column: span 1; }
.summary-grid span, .eyebrow {
  display: block;
  color: var(--muted);
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.summary-grid strong {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-grid small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-section, .panel { min-width: 0; border: 1px solid var(--line); background: var(--paper); }
.service-section { margin-top: 12px; }
.service-section > header, .panel-header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.service-section h1, .panel h1 { margin: 3px 0 0; font-size: .94rem; }

.badge {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .61rem;
  font-weight: 900;
}
.badge.ready { border-color: rgba(23, 116, 95, .4); background: rgba(23, 116, 95, .08); color: var(--green); }
.badge.error { border-color: rgba(158, 41, 41, .4); background: rgba(158, 41, 41, .08); color: var(--red); }
.badge.running { border-color: rgba(39, 93, 131, .4); background: rgba(39, 93, 131, .08); color: var(--blue); }

.service-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.service-card {
  min-width: 0;
  min-height: 94px;
  padding: 12px;
  border-right: 1px solid var(--line);
}
.service-card:last-child { border-right: 0; }
.service-card .service-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-card .service-light { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #9ca29f; }
.service-card.ready .service-light { background: var(--green); box-shadow: 0 0 0 4px rgba(23, 116, 95, .1); }
.service-card.running .service-light { background: var(--blue); box-shadow: 0 0 0 4px rgba(39, 93, 131, .1); }
.service-card.error { background: #fff4f1; }
.service-card.error .service-light { background: var(--red); box-shadow: 0 0 0 4px rgba(158, 41, 41, .1); }
.service-card strong { display: block; margin-top: 9px; overflow: hidden; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.service-card code { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.service-card small { display: block; margin-top: 5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .61rem; }

.workspace {
  display: grid;
  grid-template-columns: minmax(420px, .88fr) minmax(620px, 1.12fr);
  gap: 12px;
  margin-top: 12px;
}

.panel-actions { display: flex; align-items: center; gap: 10px; }
.panel-actions label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .65rem; font-weight: 800; }
.panel-actions input { accent-color: var(--green); }

.log-panel { display: grid; grid-template-rows: auto minmax(520px, 1fr) auto; overflow: hidden; background: var(--dark); color: #e5eee8; }
.log-panel .panel-header { border-color: #39443f; }
.log-panel .eyebrow { color: #85958d; }
.boot-log {
  height: clamp(520px, 62vh, 760px);
  overflow: auto;
  padding: 10px 0;
  scrollbar-color: #56635c #202723;
}
.log-line {
  padding: 2px 14px;
  color: #bcd3c7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .63rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.log-line:nth-child(even) { background: rgba(255, 255, 255, .018); }
.log-line.warn { color: #f0c67a; }
.log-line.error { background: rgba(211, 72, 72, .11); color: #ffaaa0; }
.log-line.success { color: #78d5b5; }
.log-line.system { color: #9cb5d5; }
.log-panel footer {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  border-top: 1px solid #39443f;
  color: #85958d;
  font-size: .59rem;
}
.empty { margin: 0; padding: 20px; color: var(--muted); font-size: .7rem; }

.map-panel { overflow: hidden; }
.map-viewport { position: relative; border-bottom: 1px solid var(--line); background: #333a36; }
.map-stage {
  width: 100%;
  height: clamp(470px, 56vh, 700px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #68716c #252c28;
}
.map-canvas-wrap {
  position: relative;
  display: grid;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  place-items: center;
}
#map-canvas { display: block; max-width: none; max-height: none; image-rendering: pixelated; cursor: grab; touch-action: none; user-select: none; }
#map-canvas.dragging { cursor: grabbing; }
#map-placeholder { position: absolute; inset: 0; display: grid; margin: 0; place-items: center; color: #dfe5e1; pointer-events: none; font-size: .72rem; }
.map-zoom-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  min-height: 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(248, 247, 241, .5);
  background: rgba(23, 29, 26, .9);
  color: #f8f7f1;
}
.map-zoom-controls button {
  min-width: 31px;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgba(248, 247, 241, .25);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .71rem;
  font-weight: 900;
}
.map-zoom-controls button:hover, .map-zoom-controls button:focus-visible { background: rgba(248, 247, 241, .16); outline: none; }
.map-zoom-controls button:disabled { cursor: default; opacity: .4; }
.map-zoom-controls output { min-width: 48px; padding: 0 7px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .61rem; font-weight: 900; }
.map-legend {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 11px;
  padding: 7px 9px;
  border: 1px solid rgba(248, 247, 241, .45);
  background: rgba(23, 29, 26, .84);
  color: #f8f7f1;
  pointer-events: none;
  font-size: .6rem;
  font-weight: 900;
}
.map-legend span { display: inline-flex; align-items: center; gap: 5px; transition: opacity 150ms ease; }
.map-legend span.unavailable { opacity: .35; }
.map-legend i { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.map-legend .live { color: #62aee1; background: #62aee1; box-shadow: 0 0 0 3px rgba(98, 174, 225, .23); }
.map-legend .vps { color: #f07753; border-style: dashed; }
.map-legend .ros { color: #5cc49e; background: #5cc49e; }

.map-meta { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.map-meta > div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.map-meta > div:nth-child(4n) { border-right: 0; }
.map-meta dt { margin-bottom: 4px; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .08em; }
.map-meta dd { margin: 0; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.read-only-note { margin: 0; padding: 10px 13px; color: var(--muted); font-size: .65rem; }

@media (max-width: 1240px) {
  .topbar { grid-template-columns: 1fr 1fr; }
  .topbar-status { justify-content: flex-end; }
  nav { grid-column: 1 / -1; justify-content: center; padding-top: 7px; border-top: 1px solid var(--line); }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-grid article:nth-child(5n) { border-right: 1px solid var(--ink); }
  .summary-grid article:nth-child(3n) { border-right: 0; }
  .summary-grid article:nth-last-child(-n + 5) { border-bottom: 1px solid var(--ink); }
  .summary-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card { border-bottom: 1px solid var(--line); }
  .service-card:nth-child(3n) { border-right: 0; }
  .service-card:nth-last-child(-n + 3) { border-bottom: 0; }
  .workspace { grid-template-columns: 1fr; }
  .log-panel { grid-template-rows: auto auto auto; }
  .boot-log { height: 470px; }
}

@media (max-width: 720px) {
  main { width: calc(100% - 16px); margin-top: 8px; }
  .topbar { position: static; grid-template-columns: 1fr; padding: 10px 12px; }
  .topbar-status { justify-content: flex-start; }
  nav { grid-column: auto; flex-wrap: wrap; justify-content: flex-start; overflow-x: visible; }
  .bootstrap-mode-bar { grid-template-columns: 1fr; gap: 7px; }
  .bootstrap-mode-options { justify-content: flex-start; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-grid article:nth-child(3n) { border-right: 1px solid var(--ink); }
  .summary-grid article:nth-child(even) { border-right: 0; }
  .summary-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .service-card:nth-child(even) { border-right: 0; }
  .service-card:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .service-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .map-stage { height: 430px; }
  .map-legend { top: 47px; left: 8px; right: auto; }
  .map-meta { grid-template-columns: repeat(2, 1fr); }
  .map-meta > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .map-meta > div:nth-child(even) { border-right: 0; }
}

@media (max-width: 460px) {
  .summary-grid, .service-grid, .map-meta { grid-template-columns: 1fr; }
  .summary-grid article, .summary-grid article:nth-child(3n), .summary-grid article:nth-child(even),
  .service-card, .service-card:nth-child(3n), .service-card:nth-child(even),
  .map-meta > div, .map-meta > div:nth-child(4n), .map-meta > div:nth-child(even) {
    border-right: 0;
  }
  .summary-grid article:not(:last-child), .service-card:not(:last-child), .map-meta > div:not(:last-child) { border-bottom: 1px solid var(--line); }
  .log-panel footer { align-items: flex-start; flex-direction: column; }
}