:root {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-text: #1f2933;
  --color-muted: #556070;
  --color-border: #dde1e7;
  --color-line: #e6e9ee;
  /* ovenmedia.com 색: 머리글은 남색 배경(--bg-body) */
  --color-header: #0a1122;
  --color-header-line: #212a3e;
  --color-bar: #2a78d6;
  --color-bar-peak: #184f95;
  /* OvenMedia 로고 색: 탭·상자의 강조(고른 탭, 정산 값 타일, 피크 안내)에 쓴다. 차트 막대는 파랑 그대로 */
  --color-brand: #2c4164;       /* 로고 글자의 짙은 청회색 */
  --color-brand-line: #c9d0df;  /* 로고 오소리 등의 은회색 */
  --color-brand-soft: #eef1f6;  /* 은회색을 옅게 한 바탕 */
  --color-brand-tint: #dfe4ec;  /* 건수 배지 바탕 */
  --color-bar-hover: #5598e7;
  /* 정산 상태 알약: 로고 색 (진행 중은 옅은 은회색, 확정은 한 단계 짙은 바탕. 아이콘(시계·체크)으로도 구분) */
  --color-finalized-bg: #dfe4ec;
  --color-finalized-text: #2c4164;
  --color-pending-bg: #eef1f6;
  --color-pending-text: #2c4164;
  /* Server ID, Machine ID 값에만 쓰는 고정폭 글꼴 */
  /* 글자 크기 단계: 화면의 모든 글자는 이 7단계 중 하나 (굵기는 400 보통, 600 제목·강조, 700 정산 값만) */
  --fs-caption: 11px;  /* 대문자 이름표, 차트 눈금 */
  --fs-small: 12px;    /* 표, 보조 설명, 배지 */
  --fs-ui: 13px;       /* 탭, 버튼, 선택 상자, 안내 문장 */
  --fs-body: 14px;     /* 본문 */
  --fs-title: 16px;    /* 구역 제목 (차트·묶음 제목, 정산 기간, 팝업 제목) */
  --fs-heading: 18px;  /* 화면 제목 (고객명, 라이선스 키) */
  --fs-display: 22px;  /* 큰 값 (로그인 제목, 상세 팝업 IP) */
  /* 줄 높이: 제목은 촘촘하게, 본문은 넉넉하게 */
  --lh-tight: 1.25;
  --lh-body: 1.45;
  /* 여백 단계 (4의 배수) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Header */
/* ovenmedia.com 머리글처럼 아래 선 없이 남색 배경만 */
.header {
  /* 스크롤해도 화면 맨 위에 고정 (팝업 배경(.modal-backdrop, z-index 50)보다는 아래) */
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-header);
}

/* 로고와 포털 이름 */
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ovenmedia.com 머리글처럼 기본 로고 위에 밝은 로고를 대각선으로 겹치고 조금 밝게 */
.header-logo {
  position: relative;
  display: block;
  height: 18px;
}

.header-logo img {
  display: block;
  height: 100%;
  filter: brightness(1.25);
}

.header-logo .header-logo-light {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(-60deg, transparent 0%, white 100%);
  mask-image: linear-gradient(-60deg, transparent 0%, white 100%);
}

/* 로고와 라벨 사이 세로선: 로고 높이에 맞춘 짧은 선 */
.header-brand .header-title {
  padding: 3px 0 3px 12px;
  border-left: 1px solid var(--color-brand);
}

/* 화면 폭을 제한하지 않는다 (콘솔의 container-fluid처럼 창 폭 전체) */
/* 높이를 고정하고 모든 항목을 세로 가운데에 맞춘다 */
.header-inner {
  min-height: 44px;
  padding: 6px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 포털 이름: 로고 옆의 작은 대문자 라벨, 로고 오소리 등의 은회색 */
.header-title {
  color: var(--color-brand-line);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 왼쪽: 로고·라벨과 그 뒤의 메뉴 링크 */
.header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.header-right,
.header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.header-user {
  color: #8a9ab8;
  font-size: var(--fs-small);
}

/* 메뉴 링크: 밑줄 없는 밝은 은회색 글자(로고 밝은 색), 마우스를 올리면 흰색 */
.header-link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: #d8dee8;
  font: inherit;
  font-size: var(--fs-ui);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

.header-link:hover {
  color: #ffffff;
}

/* 오른쪽 계정 메뉴의 버튼(Change password, Sign out)은 테두리 있는 알약 모양 */
/* 글자는 LICENSE PORTAL 라벨처럼 작은 대문자 */
.header-right .header-link {
  padding: 3px 10px;
  border: 1px solid var(--color-brand);
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-right .header-link:hover {
  border-color: var(--color-brand-line);
}

/* 로그인 화면: 머리글 없이 포털 기본 배경 위에 흰 패널 하나 (포털 본문처럼 밝은 색)
   (왼쪽 칸: 연한 하늘빛 바탕에 로고와 LICENSE PORTAL 라벨, 오른쪽 칸: 로그인 폼. 좁은 화면에서는 폼만) */
body.auth-page {
  min-height: 100vh;
  /* 위쪽에 로고 청회색이 아주 옅게 번지는 밝은 바탕 */
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(44, 65, 100, 0.07), transparent 70%),
    var(--color-bg);
}

body.auth-page .header {
  display: none;
}

body.auth-page .main {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* 패널: 두 칸이 같은 높이 */
.auth-shell {
  display: grid;
  grid-template-columns: 320px 380px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: var(--color-surface);
  /* 가까운 얕은 그림자와 멀리 퍼지는 옅은 그림자를 겹쳐 떠 있는 느낌 */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -8px rgba(15, 23, 42, 0.12),
    0 32px 64px -24px rgba(44, 65, 100, 0.14);
}

/* 왼쪽 칸: 로고 은회색의 옅은 바탕, 로고와 라벨을 가운데에 */
.auth-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  border-right: 1px solid var(--color-brand-tint);
  /* 가운데가 옅게 밝은 은회색 바탕 */
  background:
    radial-gradient(240px 180px at 50% 50%, rgba(201, 208, 223, 0.45), transparent 70%),
    var(--color-brand-soft);
}

/* 로고 폭(높이 20px일 때 약 240px)이 칸 안쪽 폭(256px)에 들어가게 */
.auth-hero-logo {
  height: 20px;
}

/* 밝은 바탕에서는 밝게 하지 않은 원래 로고 색 */
.auth-hero .header-logo img,
.auth-brand .header-logo img {
  filter: none;
}

/* 오른쪽 칸: 흰 바탕 로그인 폼 */
.auth-shell .auth-card {
  width: 100%;
  max-width: none;
  margin: 0;
  /* 사방 같은 36px. 칸 사이 간격은 각 요소의 아래 여백으로 (제목·설명이 없는 고객 로그인도 같은 규칙) */
  padding: 36px;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 관리자 로그인 제목과 설명: 제목 아래 6px, 설명 아래 24px */
.auth-shell .auth-title {
  margin-bottom: 6px;
  font-size: var(--fs-display);
  letter-spacing: -0.01em;
}

.auth-shell .auth-card > .muted {
  margin: 0 0 24px;
  font-size: var(--fs-ui);
}

/* 폼 위 안내(로그아웃됨 등): 폼과 20px */
.auth-shell .auth-card > .form-notice {
  margin-bottom: 20px;
}

/* 폼: 입력칸 사이는 16px */
.auth-shell .auth-form {
  gap: 16px;
  margin-top: 0;
}

/* 오류 줄: 입력칸과 20px 떼고 안쪽도 조금 넉넉하게 */
.auth-shell .auth-form > .form-error {
  margin-top: 4px;
  padding: 10px 14px;
}

/* 입력칸 이름: 작고 짙은 글자 */
.auth-shell .field {
  gap: 8px;
}

/* 입력칸 이름: LICENSE PORTAL 라벨처럼 작은 대문자 */
.auth-shell .field label {
  color: #334155;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 입력칸: 옅은 회색 바탕, 누르면 흰 바탕에 청회색 테두리와 번짐 */
.auth-shell .field input {
  height: 40px;
  border-color: #dbe2ea;
  border-radius: 8px;
  background: #f8fafc;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.auth-shell .field input:hover {
  border-color: #c3ccd8;
}

/* 자동 채움 방지로 잠깐 읽기 전용인 칸도 일반 입력칸처럼 보이게 */
.auth-shell .field input[readonly] {
  background: #f8fafc;
  cursor: text;
}

.auth-shell .field input:focus {
  border-color: var(--color-brand);
  outline: none;
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(44, 65, 100, 0.14);
}

/* 브라우저 자동 완성의 노란 바탕 대신 흰 바탕 */
.auth-shell .field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: var(--color-text);
}

/* 로그인 버튼: 위에서 아래로 살짝 짙어지는 로고 청회색, 마우스를 올리면 조금 떠오른다 */
/* 버튼은 위 요소와 24px (입력칸 사이보다 조금 더 떼어 동작 영역으로) */
.auth-shell .btn-primary {
  height: 40px;
  margin-top: 8px;
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #3d5784, var(--color-brand));
  box-shadow: 0 1px 2px rgba(44, 65, 100, 0.25), 0 6px 14px -6px rgba(44, 65, 100, 0.55);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.auth-shell .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #3d5784, var(--color-brand));
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(44, 65, 100, 0.25), 0 10px 20px -8px rgba(44, 65, 100, 0.6);
}

.auth-shell .btn-primary:active:not(:disabled) {
  transform: none;
}

/* 폼 맨 위 로고와 라벨: 좁은 화면에서만 (넓은 화면은 왼쪽 칸에 있다) */
.auth-brand {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

.auth-logo {
  height: 20px;
}

/* 포털 머리글의 LICENSE PORTAL 라벨 모양, 밝은 바탕에서는 로고 청회색 */
.auth-brand-label {
  color: var(--color-brand);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-footer {
  margin: 0;
  color: #8a94a3;
  font-size: var(--fs-small);
}

/* 좁은 화면: 왼쪽 칸을 숨기고 폼만, 폼 위에 로고 */
@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: minmax(0, 380px);
  }

  .auth-hero {
    display: none;
  }

  .auth-brand {
    display: flex;
  }
}

/* Sign-in and password forms */
.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 24px auto 0;
  padding: 28px;
  gap: 12px;
}

.auth-title {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--fs-display);
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field label {
  font-size: var(--fs-body);
  font-weight: 600;
}

.field input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid #b9c0ca;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.field input:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.header-link:focus-visible,
.link-button:focus-visible {
  outline: 2px solid var(--color-bar);
  outline-offset: 2px;
}

.field-hint {
  font-size: var(--fs-ui);
  color: var(--color-muted);
}

/* 안내와 오류 줄: 모두 로고 색 (청회색 왼쪽 막대, 은회색 바탕, 청회색 글자) */
.form-error,
.form-notice {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--color-brand);
  border-radius: 6px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--fs-ui);
}

.form-actions {
  display: flex;
  gap: 8px;
}

.btn-primary,
.btn-secondary {
  height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* 주 버튼 (비밀번호 변경 등): 로고 청회색 */
.btn-primary {
  border: 1px solid var(--color-brand);
  background: var(--color-brand);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  border-color: #3d5784;
  background: #3d5784;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-secondary {
  border: 1px solid #b9c0ca;
  background: var(--color-surface);
  color: var(--color-text);
}

/* Administrator */
/* 링크(Server ID, 관리자 고객명·정산 기간 등): 제목과 같은 로고 청회색, 마우스를 올리면 조금 밝게 */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-brand);
  font: inherit;
  cursor: pointer;
}

.link-button:hover {
  color: #4a6694;
}

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.customer-list {
  padding: 0;
  overflow-x: auto;
}

.customer-table {
  min-width: 640px;
}

.customer-table th:first-child,
.customer-table td:first-child {
  padding-left: 20px;
}

.customer-table .action-cell {
  padding-right: 20px;
  text-align: right;
}

/* 고객 목록 줄: 위아래 여유를 두고 세로 가운데, 마우스를 올리면 은회색 바탕 */
.customer-table td {
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: middle;
}

.customer-table tbody tr:hover td {
  background: var(--color-brand-soft);
}

/* 고객명 링크: 굵게, 밑줄은 마우스를 올릴 때만 */
.customer-table .customer-link {
  min-height: 0;
  font-weight: 600;
  text-decoration: none;
}

.customer-table .customer-link:hover {
  text-decoration: underline;
}

/* 작은 상태 알약: 로고 색 (chip-muted는 회색) */
.chip {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--color-brand-line);
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 18px;
}

.chip.chip-muted {
  border-color: var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
}

/* 알약 뒤의 보조 설명 */
.cell-note {
  margin-left: 8px;
  font-size: var(--fs-small);
}

/* 작은 버튼: 로고 색 테두리와 글자, 마우스를 올리면 은회색 바탕 */
.btn-small {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--color-brand-line);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-brand);
  font: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
  white-space: nowrap;
}

.btn-small:hover:not(:disabled) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.btn-small:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 관리자 License Usage History 팝업 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  background: rgba(27, 31, 36, 0.45);
  overflow-y: auto;
}

.modal {
  width: min(1200px, 100%);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.modal.modal-small {
  width: min(440px, 100%);
}

.modal.modal-medium {
  width: min(600px, 100%);
}

/* 행 상세 팝업 */
.modal-body.detail-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 22px;
  outline: none;
}

/* 머리: 작은 REMOTE IP 이름, 큰 IP, 버전·x264·상태 꼬리표 */
.detail-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-hero-label,
.detail-section-title {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-ip {
  color: var(--color-brand);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.25;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.detail-tag b {
  color: var(--color-text);
  font-weight: 600;
}

/* 기동 실패 표시: 안내·오류 줄과 같은 로고 색 */
.detail-tag-failed {
  border-color: var(--color-brand-line);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-weight: 600;
}

/* 피크 안내: 정산 값 타일(.stat.billed)과 같은 로고 색 강조 */
.detail-callout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--color-brand-line);
  border-left: 3px solid var(--color-brand);
  border-radius: 6px;
  background: var(--color-brand-soft);
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.detail-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.detail-value {
  font-size: var(--fs-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.detail-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: var(--fs-small);
}

.detail-sub b {
  color: var(--color-text);
  font-weight: 600;
}

/* 타임라인: 왼쪽 점과 세로선으로 시각을 위에서 아래로 잇는다 */
.detail-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-timeline li {
  position: relative;
  padding: 0 0 14px 22px;
}

.detail-timeline li:last-child {
  padding-bottom: 0;
}

.detail-timeline li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-bar);
  border-radius: 50%;
  background: var(--color-surface);
}

.detail-timeline li::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: var(--color-border);
}

.detail-timeline li:last-child::after {
  display: none;
}

/* 마지막 점(마지막 하트비트)은 채운 점 */
.detail-timeline li:last-child::before {
  background: var(--color-bar);
}

/* ID 상자: 회색 바탕, 긴 값은 줄바꿈, 오른쪽에 복사 버튼 */
.detail-id {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  font-size: var(--fs-ui);
}

.detail-id:last-child {
  margin-bottom: 0;
}

.detail-id span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* 복사 버튼: 테두리 없는 작은 아이콘, 마우스를 올리면 옅은 바탕색 */
.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--color-muted);
  vertical-align: middle;
  cursor: pointer;
}

.copy-button:hover {
  background: var(--color-line);
  color: var(--color-text);
}

.copy-button.copied {
  color: var(--color-finalized-text);
}

/* 복사 버튼 안내: 버튼 바로 아래의 흰 말풍선 (물음표 설명 창과 같은 모양) */
.copy-tip {
  position: absolute;
  z-index: 60;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  color: var(--color-text);
  font-size: var(--fs-small);
  white-space: nowrap;
  pointer-events: none;
}

/* 표 안의 Server ID 짧은 값: GitHub 짧은 SHA처럼 굵게 */
.data-table td.mono .cell-link {
  font-weight: 600;
}

/* 표 안의 ID 값 (Server ID, 링크도 이 글꼴을 물려받는다) */
.data-table td.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.detail-copy {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.detail-copy:hover {
  border-color: var(--color-bar);
  color: var(--color-bar-peak);
}

/* 표 안의 Remote IP 링크: 표 줄 높이를 늘리지 않고, 마우스를 올리면 밑줄 */
.data-table .cell-link {
  display: inline;
  min-height: 0;
  text-decoration: none;
}

.data-table .cell-link:hover {
  text-decoration: underline;
}

/* 팝업 안 기동 실패 안내와 표 */
.modal-body > .data-note {
  margin-bottom: 10px;
}

/* 팝업 안 폼 (비밀번호 변경): 버튼 줄 위에 조금 여백 */
.modal-body .auth-form {
  margin-top: 12px;
}

.modal-body .form-actions {
  margin-top: 4px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.modal-head h2 {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--fs-title);
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-bg);
}

.modal-body {
  padding: 12px 20px 20px;
  overflow-x: auto;
}

/* 기간마다 tbody 하나: 기간 사이에만 선을 긋는다 */
.server-table.usage-period-table td {
  padding: 6px 12px;
  border-top: 0;
  vertical-align: middle;
}

.usage-period-table tbody {
  border-top: 1px solid var(--color-border);
}

.usage-period-table tbody tr:first-child td {
  padding-top: 10px;
}

.usage-period-table tbody tr:last-child td {
  padding-bottom: 10px;
}

/* 정산 기간 링크: 고객명 링크처럼 굵게, 밑줄은 마우스를 올릴 때만 */
.usage-period-table .period-cell .link-button {
  min-height: 0;
  font-weight: 600;
  text-decoration: none;
}

.usage-period-table .period-cell .link-button:hover {
  text-decoration: underline;
}

/* License / Usage 칸이 남는 폭을 맡고, 모자라면 키를 줄바꿈한다 (가로 스크롤 없음) */
.server-table.usage-period-table td.license-usage-cell {
  width: 100%;
  white-space: normal;
}

.usage-license {
  display: flex;
  align-items: center;
  gap: 8px;
}

.usage-license + .usage-license {
  margin-top: 4px;
}

.billing-badge.compact {
  min-width: 76px;
  padding: 1px 6px;
}

.billing-badge.compact b {
  font-size: var(--fs-caption);
}

.usage-key {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-small);
}

.usage-license .expired-badge {
  padding: 1px 6px;
  font-size: var(--fs-caption);
}

/* 상태 배지는 정산 유형 배지와 같은 너비로 맞춘다 */
.status-pill.compact {
  flex-shrink: 0;
  justify-content: center;
  min-width: 76px;
  padding: 2px 8px;
  font-size: var(--fs-small);
}

/* Layout */
/* 머리글과 첫 카드 사이 여백은 좌우 여백과 같은 24px */
.main {
  padding: 24px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.status {
  color: var(--color-muted);
}

.month-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 정산 기간 카드의 고객명 */
.period-card .customer-name {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* 고객명과 기간 경계는 같은 글자 크기 (16px) */
.customer-name {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--fs-heading);
  line-height: var(--lh-tight);
  font-weight: 600;
}

.period-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.period-control label {
  font-size: var(--fs-ui);
  color: var(--color-muted);
}

/* 브라우저 기본 화살표 대신 CSS로 그린 화살표 (CSP가 data: 이미지를 막으므로 이미지를 쓰지 않는다) */
.select-wrap {
  position: relative;
  display: inline-block;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.period-control select {
  appearance: none;
  height: 30px;
  min-width: 200px;
  padding: 0 32px 0 10px;
  border: 1px solid #b9c0ca;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
}

.period-control select:focus-visible {
  outline: 2px solid var(--color-bar);
  outline-offset: 2px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 첫 줄은 기간 선택 상자(30px) 높이라 고객명 위아래에 여유가 있다. 줄 사이 8px이면 고객명 글자와 둘째 줄 사이가
   라이선스 키와 그 아래 줄 사이(.license-key-stack, 12px)와 같아진다 */
.period-card {
  gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* 카드의 각 줄: 왼쪽 내용과 오른쪽 끝 요소(기간 선택, 확정 상태)를 세로 가운데로 (좁으면 오른쪽 요소가 다음 줄로) */
.period-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  line-height: var(--lh-tight);
}

/* 크기가 다른 글자(고객명·기간·시간대·라이선스 구성)는 아랫선을 맞춘다 */
/* 정산 기간 카드 둘째 줄: 기간 경계와 라이선스 구성, 모두 12px (라이선스 키 아래 줄과 같은 크기) */
.period-texts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-size: var(--fs-small);
}

.period-texts > .muted {
  font-size: var(--fs-small);
}

/* 첫 줄 오른쪽 끝: 확정 상태 배지와 기간 선택을 나란히 */
.period-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-left: auto;
}

/* 기간 경계: 라이선스 키(.license-key)와 같은 18px */
/* 기간 경계: 라이선스 키 아래 줄(.license-meta)과 같은 12px, 굵기는 보통 */
.period-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: var(--fs-small);
  font-weight: 400;
}

/* 확정 상태 배지 안의 마지막 업데이트 시각 */
.status-pill b {
  font-weight: 600;
}

/* 시간대: 옆의 라이선스 구성(.muted)과 같은 13px 보통 굵기 */
/* 기간 경계만 한 단계 크게 (13px): 고객이 먼저 확인하는 값 */
.period-range {
  font-size: var(--fs-ui);
}

.period-zone {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}

.muted {
  font-size: var(--fs-ui);
  color: var(--color-muted);
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-ui);
  font-weight: 400;
  line-height: 16px;
}

/* 아이콘은 글자 가운데에 맞춘다 */
.status-pill svg {
  flex: none;
}

.status-pill.finalized {
  background: var(--color-finalized-bg);
  color: var(--color-finalized-text);
}

.status-pill.pending {
  background: var(--color-pending-bg);
  color: var(--color-pending-text);
}

/* License card */
.license-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 라이선스 키와 그 뒤의 정산 유형·만료 라벨 */
/* 이름 줄: 배지 + 키 묶음 (늘 한 줄, 키가 길면 키가 줄바꿈). 배지는 키 묶음과 같은 높이. 아래 구분선으로 요약 영역과 나눈다 */
.license-key-row {
  display: flex;
  align-items: stretch;
  gap: 6px 12px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

/* 키와 그 아래 허용 수·만료일 줄을 위아래로 붙인 묶음 */
.license-key-stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-width: 0;
}

/* 키 아래 줄 맨 앞의 정산 유형: 본문 색 (굵게 하지 않는다) */
.license-type {
  color: var(--color-text);
}

.license-meta {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.3;
}

/* 만료된 라이선스 */
.expired-badge {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-brand-line);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 정산 유형 배지: 글자 폭만큼만, 정산 값 타일·고른 탭과 같은 왼쪽 강조선 (월: 파랑, 일: 보라) */
/* 정산 유형 배지 (관리자 License Usage History 팝업의 .compact에서 쓴다) */
.billing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  padding: 3px 9px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 6px;
}

/* 정산 유형 배지: 로고 색. MONTHLY는 은회색 바탕에 짙은 강조선, DAILY는 흰 바탕에 옅은 강조선 */
.billing-badge.monthly {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-line);
  border-left-color: var(--color-brand);
  color: var(--color-brand);
}

.billing-badge.daily {
  background: var(--color-surface);
  border-color: var(--color-brand-line);
  border-left-color: #8a9ab8;
  color: #4a5e7a;
}

/* 글자는 타일 이름(.stat-label)처럼 작은 대문자 */
.billing-badge b {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.billing-badge:focus-visible {
  outline: 2px solid var(--color-bar);
  outline-offset: 2px;
}

/* 라벨에 마우스를 올리거나 포커스하면 data-tooltip 설명을 위에 띄운다 */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-header);
  color: #ffffff;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}

/* 물음표 버튼: 글자와 같은 줄, 글자 높이 가운데. 누르면 설명 창(.help-popup)이 뜬다 */
.help-icon {
  display: inline-block;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  line-height: 0;
  vertical-align: -2px;
  color: var(--color-muted);
  cursor: pointer;
}

.help-icon[aria-expanded="true"] {
  color: var(--color-bar);
}

/* 팝업(.modal-backdrop, z-index 50) 안의 물음표에서도 보이게 팝업보다 위 */
.help-popup {
  position: absolute;
  z-index: 60;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.help-popup b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

.help-popup p {
  margin: 0;
  color: var(--color-muted);
}

.help-icon:hover,
.help-icon:focus-visible {
  color: var(--color-bar);
}

.help-icon:focus-visible {
  outline: 2px solid var(--color-bar);
  outline-offset: 1px;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

/* 라이선스 키: 고객명과 같은 로고 청회색 제목 */
.license-key {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-tight);
  word-break: break-all;
}

/* 라이선스 머리의 기간 요약: OvenMediaEngine instances 그룹과 x264 add-on 그룹을 반반으로, 가운데 세로선 */
.stat-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-4);
}

.stat-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding-right: var(--space-5);
}

.stat-group + .stat-group {
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-line);
}

/* x264가 없으면 OvenMediaEngine instances 그룹이 전체 폭 (타일도 전체 폭을 나눠 채운다) */
.stat-group:only-child {
  grid-column: 1 / -1;
  padding-right: 0;
}

/* 섹션 제목: 차트 제목(.chart-head h3), 탭(.tab)과 같은 15px / 600 */
/* 제목 글자는 모두 로고 청회색: 고객명·라이선스 키·구역 제목·차트 제목·팝업 제목·로그인 제목·상세 팝업 IP */
.stat-group-title {
  color: var(--color-brand);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* 항목은 모니터링 화면의 KPI 타일처럼 작은 카드로: 그룹 폭을 같은 폭으로 나눠 채우고, 좁으면 다음 줄로 */
.stat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-bg);
}

/* 정산에 쓰는 값의 타일: 로고 색의 옅은 은회색 바탕과 왼쪽 강조선 */
.stat.billed {
  border-color: var(--color-brand-line);
  border-left: 3px solid var(--color-brand);
  background: var(--color-brand-soft);
}

.stat-label {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 값: 타일마다 같은 높이에서 아래에 맞춰, 큰 값과 작은 값의 아랫선이 맞는다.
   보조 설명(at …)이 타일 폭에 안 들어가면 다음 줄로 */
.stat-value {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  min-height: 30px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 정산에 쓰는 값: 로고 색, 크고 굵게 */
.stat-value.billed {
  color: var(--color-brand);
  font-size: 24px;
  font-weight: 700;
}

.stat-unit {
  color: var(--color-muted);
  font-size: var(--fs-ui);
  font-weight: 400;
}

/* 값 뒤에 같은 줄로 붙는 보조 설명 (정산 값의 색·굵기를 따르지 않는다) */
.stat-sub {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  font-weight: 400;
  white-space: nowrap;
}

.empty-state {
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--fs-body);
}

/* 라이선스 차트와 x264 차트를 한 줄에 반씩 */
.chart-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

/* 제목 줄이 두 줄로 꺾여도 두 차트의 높이가 맞도록 차트를 아래쪽에 붙인다 */
.chart-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

/* 차트 제목 줄: 제목과 기간 요약 */
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.chart-head h3 {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* 라이선스 카드: 왼쪽 절반(요약과 차트), 오른쪽 절반(서버 표 탭) */
.license-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

.license-main,
.license-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* 왼쪽 칸이 좁아 두 차트를 위아래로 */
.license-main .chart-row {
  grid-template-columns: minmax(0, 1fr);
}

/* 오른쪽 칸 맨 위에서는 구분선과 위 여백이 필요 없다 */
.license-side .tabs {
  border-top: 0;
}

.license-side .tab-list {
  margin-top: 0;
}

/* 넓은 화면: 오른쪽 칸은 왼쪽 칸(요약과 차트) 높이에 맞추고, 표가 남은 높이를 채운다 (표 안에서 스크롤)
   탭을 칸 안에 띄워 두어 표 길이가 줄 높이를 늘리지 않게 한다 */
@media (min-width: 1101px) {
  .license-layout {
    align-items: stretch;
  }

  .license-side {
    position: relative;
  }

  .license-side > .tabs {
    position: absolute;
    inset: 0;
  }

  .license-side .tab-panel:not([hidden]) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .license-side .tab-panel > .data-box {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
  }
}

/* 서버 표 탭: 현재 동작 중인 서버, 피크 순간 서버, 그날의 모든 서버 */
.tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
}

/* 폴더형 탭: 탭마다 테두리, 고른 탭은 흰 바탕으로 아래 패널 테두리와 이어진다. 탭은 늘 한 줄 (폭이 모자라면 탭 안에서 이름을 줄바꿈) */
.tab-list {
  display: flex;
  gap: 4px;
  margin-top: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.tab {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: -1px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px 8px 0 0;
  background: var(--color-bg);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  cursor: pointer;
}

.tab:hover {
  color: var(--color-text);
}

/* 고른 탭: 정산 값 타일(.stat.billed)과 같은 로고 색 왼쪽 강조선 */
.tab[aria-selected="true"] {
  border-bottom-color: var(--color-surface);
  border-left: 3px solid var(--color-brand);
  background: var(--color-surface);
  color: var(--color-brand);
}

/* 탭 이름 옆의 건수 */
.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-line);
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .tab-count {
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

.tab:focus-visible {
  outline: 2px solid var(--color-bar);
  outline-offset: 1px;
}

/* 차트를 눌러 열린 탭: 하늘빛으로 한 번 깜박였다가 원래대로, 건수 배지는 살짝 커졌다 돌아온다 */
.tab.tab-flash {
  animation: tab-flash 0.8s ease-out;
}

/* 이미 열린 탭에서 날을 바꿀 때는 건수 배지만 */
.tab.tab-flash .tab-count,
.tab-count.count-pop {
  animation: tab-count-pop 0.5s ease-out;
}

@keyframes tab-flash {
  0% { background: var(--color-brand-tint); box-shadow: 0 0 0 3px rgba(44, 65, 100, 0.22); }
  100% { background: var(--color-surface); box-shadow: 0 0 0 0 rgba(44, 65, 100, 0); }
}

@keyframes tab-count-pop {
  50% { transform: scale(1.25); }
}

/* 움직임 줄이기 설정이면 애니메이션 없이 */
@media (prefers-reduced-motion: reduce) {
  .tab.tab-flash,
  .tab.tab-flash .tab-count,
  .tab-count.count-pop {
    animation: none;
  }
}

/* 탭 아래 패널: 고른 탭과 이어지는 테두리 상자. 안쪽 여백 없이 표를 테두리에 붙이고,
   요약 줄·안내 문장·접기 버튼은 구분선으로 나눈 띠로 둔다 */
.tab-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.tab-panel > p,
.tab-panel > .data-note {
  margin: 0;
  padding: 10px 12px;
}

.tab-panel > .data-box {
  border: 0;
  border-radius: 0;
}

/* 요약 줄 오른쪽의 기동 실패 팝업 버튼: 작은 알약, 마우스를 올리면 파랗게 */
.tab-panel > .chart-head .failed-open {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.tab-panel > .chart-head .failed-open:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.tab-panel[hidden] {
  display: none;
}

/* 패널 위: 요약 줄(기준 시각·건수)은 제목과 같은 로고 청회색 굵게, 설명은 바로 아래에 붙여 한 덩어리로 */
.tab-panel > .chart-head .muted {
  color: var(--color-brand);
  font-size: var(--fs-ui);
  font-weight: 600;
}


/* 요약 줄 오른쪽: 기준 시각·날짜 (보통 굵기, 회색) */
.tab-panel > .chart-head .head-right {
  margin-left: auto;
  color: var(--color-muted);
  font-weight: 400;
}

/* 탭 이름이 표 제목을 대신하므로 패널에서는 요약 줄만 보인다 (아래 구분선으로 표와 나눈다) */
.tab-panel > .chart-head {
  justify-content: flex-start;
  padding: 10px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--color-line);
}

.tab-panel > .chart-head h3 {
  display: none;
}

/* 원본 값 표: 스크롤 없이 카드 폭에 맞추고, 행은 한 줄로 두고 긴 값은 말줄임 (전체 값은 마우스를 올리면 보인다) */
/* 표가 길면 표 안에서 세로로 스크롤한다 (가로 스크롤은 없음, 열 제목은 위에 고정) */
.data-box {
  max-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

/* 넓은 표(실행 기록): 말줄임·줄바꿈 없이 값을 모두 보이고 가로 스크롤 */
.data-box.data-box-wide {
  overflow-x: auto;
}

/* run history 타임라인 열: 제목 아래 0~24시 눈금, 칸마다 그날 막대에 떠 있던 구간 */
.data-table .timeline-col {
  width: 158px;
  min-width: 158px;
}

/* 제목 칸: 눈금과 물음표를 한 줄에. 눈금이 아래 막대와 같은 폭이 되도록 물음표는 칸 오른쪽 여백에 띄운다
   (제목 칸은 sticky라 absolute의 기준이 된다) */
.timeline-col .extra-head {
  display: flex;
  align-items: center;
}

.timeline-col .extra-head .help-icon {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
}

.timeline-scale {
  position: relative;
  flex: 1 1 auto;
  height: 16px;
  margin: 0 6px;
  font-size: var(--fs-caption);
  line-height: 16px;
}

.timeline-scale span {
  position: absolute;
  transform: translateX(-50%);
}

/* 양 끝 눈금(0, 24)은 막대 안쪽으로 붙여 물음표와 겹치지 않게 */
.timeline-scale span:first-child {
  transform: none;
}

.timeline-scale span:last-child {
  transform: translateX(-100%);
}

/* 막대 바탕: 6시간마다 옅은 세로선 */
.timeline-track {
  position: relative;
  height: 10px;
  margin: 4px 6px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent calc(25% - 0.5px), var(--color-border) calc(25% - 0.5px), var(--color-border) calc(25% + 0.5px), transparent calc(25% + 0.5px),
      transparent calc(50% - 0.5px), var(--color-border) calc(50% - 0.5px), var(--color-border) calc(50% + 0.5px), transparent calc(50% + 0.5px),
      transparent calc(75% - 0.5px), var(--color-border) calc(75% - 0.5px), var(--color-border) calc(75% + 0.5px), transparent calc(75% + 0.5px)),
    var(--color-line);
}

.timeline-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--color-bar);
}

/* 그날 밖으로 이어지는 쪽 끝은 각지게 */
.timeline-bar.open-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.timeline-bar.open-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.data-box-wide .data-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.data-box-wide .data-table th,
.data-box-wide .data-table td {
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  overflow-wrap: normal;
}

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 8px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-weight: 400;
  text-align: left;
  vertical-align: bottom;
  /* 열 제목은 늘 한 줄 (칸보다 길면 말줄임, 전체 이름은 마우스를 올리면 보인다) */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.data-table td {
  padding: 3px 8px;
  border-top: 1px solid var(--color-line);
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* 행이 없을 때 첫 행의 안내 */
.data-table td.empty-row {
  padding: 10px 8px;
  color: var(--color-muted);
  text-align: center;
}

/* 시각 열: 'Oct 22, 2026 21:25:06'이 잘리지 않는 폭으로 고정 */
.data-table th.time-col {
  width: 150px;
}

/* 숫자 열: 오른쪽 정렬 */
.data-table .number {
  text-align: right;
}

/* 첫 열과 마지막 열의 바깥 여백을 패널 요약 줄(좌우 12px)과 맞춘다 */
.data-table th:first-child,
.data-table td:first-child {
  padding-left: 12px;
}

/* running now, at peak 표: 열 폭을 내용에 맞춰 나누고 남는 폭은 고르게 퍼뜨린다 (제목·값 모두 한 줄).
   칸이 정말 모자라면 표 안에서 가로로 스크롤한다 */
.data-box:not(.data-box-wide) {
  overflow-x: auto;
}

.data-box:not(.data-box-wide) .data-table {
  table-layout: auto;
}

.data-box:not(.data-box-wide) .data-table td {
  overflow: visible;
  text-overflow: clip;
}

/* 열은 내용 폭만 쓰고 열 사이는 일정한 간격, 남는 폭은 맨 오른쪽 빈 열(.filler)이 받는다 */
.data-table th:not(.filler),
.data-table td:not(.filler):not(.empty-row) {
  width: 1%;
  padding-right: 32px;
}

/* 타임라인 열이 있는 run history 표: 패널 폭 안에 들어가도록 열 간격을 좁힌다 */
.data-table:has(.timeline-col) th:not(.filler),
.data-table:has(.timeline-col) td:not(.filler):not(.empty-row) {
  padding-right: 16px;
}

.data-table .filler {
  width: auto;
  padding: 0;
}

.data-note {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-muted);
}

/* Chart */
.chart {
  position: relative;
  padding-top: 14px;
}

.chart-plot {
  position: relative;
  height: 100px;
  margin-left: 40px;
}

/* x264 차트가 없을 때 하나뿐인 차트: 두 차트를 쌓은 높이와 비슷하게 */
.chart-tall .chart-plot {
  height: 271px;
}

.chart-tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--color-line);
}

.chart-tick span {
  position: absolute;
  right: 100%;
  top: -9px;
  margin-right: 8px;
  font-size: var(--fs-small);
  line-height: 16px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.chart-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.bar-col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}

.bar-col:disabled {
  cursor: default;
}

.bar {
  display: block;
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background: var(--color-bar);
}

.bar.peak {
  background: var(--color-bar-peak);
}

.bar-col:hover .bar,
.bar-col:focus-visible .bar {
  background: var(--color-bar-hover);
}

/* 기간 최대값 가로선: 막대 위, 툴팁 아래 */
.chart-peak-line {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--color-bar-peak);
  pointer-events: none;
}

/* 축 눈금 글자와 같은 크기·굵기 */
.chart-peak-line span {
  position: absolute;
  right: 0;
  bottom: 3px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-bar-peak);
  font-size: var(--fs-small);
  line-height: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 사용이 없는 기간: 차트 영역 가운데 안내 */
.chart-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--fs-ui);
  pointer-events: none;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  padding: 5px 8px;
  background: var(--color-surface);
  border: 1px solid #cfd5dd;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  white-space: nowrap;
  pointer-events: none;
}

.chart-tooltip b {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
}

.chart-tooltip span {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.chart-x {
  display: flex;
  gap: 2px;
  margin-left: 40px;
  padding-top: 4px;
}

/* 날짜 칸: 막대 폭과 같고, 글자(배지)는 칸보다 넓어도 가운데에 둔다 */
.chart-x span {
  display: flex;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 5px;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 16px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  /* 'Oct 1'처럼 달 이름이 붙은 날짜는 막대 폭보다 넓어도 한 줄로 */
  white-space: nowrap;
}

/* 고른 날의 날짜: 진한 파랑 알약 배지에 흰 글자 */
.chart-x span.selected b {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bar-peak);
  color: #ffffff;
  font-weight: 600;
}

.server-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}

.server-table th {
  position: sticky;
  top: 0;
  padding: 6px 12px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-weight: 400;
  text-align: left;
}

.server-table td {
  padding: 4px 12px;
  border-top: 1px solid var(--color-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.server-table .number {
  text-align: right;
}

/* 맨 아래 안내 (시간대) */
.page-note {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--fs-ui);
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .license-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .license-side .tabs {
    border-top: 1px solid var(--color-line);
  }

  .license-side .tab-list {
    margin-top: 12px;
  }
}

@media (max-width: 720px) {
  .chart-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 좁은 화면: 두 그룹을 위아래로, 세로선 대신 가로선 */
  .stat-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-group + .stat-group {
    margin-top: 12px;
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    border-left: 0;
  }
}

@media (max-width: 600px) {
  .main {
    padding: 16px 16px 40px;
  }

  .card {
    padding: 16px;
  }

  /* 좁은 화면 머리글: 로고·라벨을 조금 작게, 넘치면 다음 줄로 (화면보다 넓어져 가로 스크롤이 생기지 않게) */
  .header-inner {
    padding: 8px 16px;
    gap: 6px 12px;
  }

  .header-left {
    gap: 4px 16px;
    min-width: 0;
  }

  .header-brand {
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
  }

  .header-logo {
    height: 15px;
  }

  .header-brand .header-title {
    padding-left: 8px;
    letter-spacing: 0.1em;
  }

  .header-right {
    gap: 6px 12px;
    min-width: 0;
  }

  /* 상태 알약: 글자 묶음이 칸처럼 나뉘지 않고 한 문장으로 줄바꿈되게 (아이콘은 글자 줄에 맞춘다) */
  .status-pill {
    display: inline-block;
    border-radius: 12px;
  }

  .status-pill svg {
    margin-right: 6px;
    vertical-align: -3px;
  }
}