/* 실시간 분석 콘솔.
 *
 * 딥그린 바탕에 아이보리 글자, 강조는 샴페인 브론즈. 해커 터미널이나
 * 카지노 화면처럼 보이지 않게 하는 것이 핵심이라, 형광 초록·검정 바탕·
 * 깜빡이는 커서를 쓰지 않는다. 연구소의 계기판에 가깝게 둔다.
 *
 * PC와 모바일이 같은 마크업을 쓴다. 차이는 크기와 로그 높이뿐이다. */

.cmd {
  background: linear-gradient(168deg, #06291b 0%, #083420 58%, #0b3d27 100%);
  color: var(--ivory);
  border: 1px solid rgba(180, 154, 104, 0.45);
  border-radius: var(--radius);
  padding: 22px 24px 18px;
}

.cmd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(222, 208, 176, 0.24);
}
.cmd-round {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--bronze-pale);
  letter-spacing: 0.01em;
}
.cmd-status {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: rgba(248, 245, 239, 0.75);
}
.cmd-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cmd-status.live { color: var(--bronze-pale); }
.cmd-status.done { color: #8fd0a8; }
.cmd-status.failed { color: #e79a90; }
.cmd-status.offline { color: #e7c78d; }
.cmd-status.wait { color: rgba(248, 245, 239, 0.6); }

.cmd-stage {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.3;
  margin-top: 16px;
}
.cmd-detail {
  font-size: 15px;
  color: rgba(248, 245, 239, 0.7);
  margin-top: 4px;
  min-height: 1.4em;
}

.cmd-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "bar pct" "track track";
  gap: 6px 14px;
  align-items: center;
  margin-top: 18px;
}
.cmd-bar {
  grid-area: bar;
  font-family: ui-monospace, "Menlo", "Consolas", monospace;
  font-size: 15px;
  letter-spacing: -0.5px;
  color: var(--bronze);
  overflow: hidden;
  white-space: nowrap;
}
.cmd-pct {
  grid-area: pct;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--bronze-pale);
  line-height: 1;
}
.cmd-track {
  grid-area: track;
  height: 4px;
  background: rgba(248, 245, 239, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.cmd-track span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--bronze-deep), var(--bronze-pale));
  transition: width 400ms ease;
}

.cmd-steps {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(248, 245, 239, 0.6);
}

.cmd-log {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(222, 208, 176, 0.2);
  max-height: 300px;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.85;
  scrollbar-width: thin;
}
.cmd-log li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 1px 0;
  color: rgba(248, 245, 239, 0.86);
}
.cmd-log .t { color: rgba(248, 245, 239, 0.42); font-variant-numeric: tabular-nums; }
.cmd-log .m { min-width: 0; }
.cmd-log .f {
  grid-column: 2;
  font-size: 13.5px;
  color: var(--bronze-pale);
  padding-bottom: 2px;
}
.cmd-log .l-enter .m { color: #fff; }
.cmd-log .l-done .m { color: rgba(248, 245, 239, 0.68); }
.cmd-log .l-start .m,
.cmd-log .l-complete .m { color: var(--bronze-pale); font-weight: 600; }
.cmd-log .l-fail .m { color: #e79a90; }

.cmd.compact { padding: 18px 18px 14px; }
.cmd.compact .cmd-stage { font-size: 21px; margin-top: 12px; }
.cmd.compact .cmd-pct { font-size: 23px; }
.cmd.compact .cmd-log { max-height: 190px; }

.is-done .cmd { border-color: rgba(143, 208, 168, 0.5); }
.is-failed .cmd { border-color: rgba(231, 154, 144, 0.5); }

@media (max-width: 480px) {
  .cmd { padding: 18px 16px 14px; }
  .cmd-stage { font-size: 22px; }
  .cmd-bar { font-size: 12px; }
  .cmd-pct { font-size: 24px; }
  .cmd-log { max-height: 240px; font-size: 14px; }
  .cmd-log li { grid-template-columns: 56px minmax(0, 1fr); }
}