@charset "utf-8";
/* ============================================================
   서버 관리 화면 (/setting) 레이아웃 전용

   색·버튼·패널·표는 전부 app.css 의 사이트 공통 컴포넌트를 그대로 쓴다.
   (.panel / .btn / .copybox / .note / .dl / table.spec)
   여기서는 **배치만** 다르게 한다. 사이드바를 버리고 한 화면에 상태를 모은다.

   현장에서 송출 직전에 확인하는 건 세 가지다.
   지금 붙는가 · 얼마 남았는가 · 주소가 뭔가.
   그래서 이 셋을 상단 상태 바에 고정하고, 접속 주소를 가장 큰 자리에 둔다.
   ============================================================ */

/* ── 상태 바 : 사이트 헤더 바로 아래에 붙는다 ────────────── */
.cstatus {
  position: sticky; top: var(--header-h); z-index: 70;
  background: #fff; border-bottom: 1px solid var(--line-2);
}
/* 관리 화면처럼 아래에 섹션 탭이 따라붙는 경우엔 고정하지 않는다 (둘이 겹친다) */
.cstatus--static { position: static; }
.cstatus__in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cstatus__name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.cstatus__meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
.cstatus__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 상태. 아이콘이 색과 모양을 함께 갖는다.
   네 상태를 작은 크기에서도 구분하려면 색만으로는 부족해서(회색 두 개가 겹친다)
   실루엣을 다르게 준다: 체크 · 일시정지 · 느낌표 · 빗금. */
.cstate { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--ink); }
.cstate svg { flex: none; display: block; }
.cstate--on   svg { stroke: var(--ok); }
.cstate--off  svg { stroke: var(--muted-2); }
.cstate--none svg { stroke: #cfd2d6; }
.cstate--none { color: var(--muted); }
.cstate--err  svg { stroke: var(--danger); }
.cstate--err  { color: var(--danger); }

/* 남은 기간 · 잔여 트래픽 */
.cstat { display: flex; align-items: baseline; gap: 7px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.cstat__k { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cstat__v { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cstat__v.is-warn { color: var(--warn); }
.cstat__v.is-err  { color: var(--danger); }

/* ── 본문 배치 ───────────────────────────────────────────── */
.cwrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 20px 72px; display: grid; gap: 18px; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ccol { display: grid; gap: 18px; align-content: start; }
.cwrap .panel { margin-bottom: 0; }

/* 접속 주소는 이 화면의 주인공. 조금 크게 */
.copybox--hero code { padding: 16px; font-size: 14px; }

/* ── 사용량 게이지 ──────────────────────────────────────── */
.cgauge { display: flex; align-items: center; gap: 22px; }
.cgauge__ring {
  --p: 0;
  --col: var(--brand);
  flex: none; width: 118px; height: 118px; border-radius: 50%;
  background: conic-gradient(var(--col) calc(var(--p) * 1%), var(--tint-2) 0);
  display: grid; place-items: center; position: relative;
}
.cgauge__ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #fff; }
.cgauge__num { position: relative; z-index: 1; text-align: center; line-height: 1.12; }
.cgauge__num b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
.cgauge__num span { font-size: 11px; color: var(--muted-2); }
.cgauge__side { flex: 1; min-width: 0; }
.cgauge__side .dl { grid-template-columns: auto 1fr; row-gap: 10px; font-size: 14px; }
.cgauge__side .dl dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── 제어 버튼 ──────────────────────────────────────────── */
.cactions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cact {
  display: grid; gap: 5px; padding: 15px 16px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: #fff;
  color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.cact:hover { border-color: var(--brand); background: var(--brand-softer); }
.cact[disabled] { opacity: .45; pointer-events: none; }
.cact b { font-size: 15px; font-weight: 700; }
.cact span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cact--danger:hover { border-color: #ffcfc9; background: #fef6f5; }

/* ── 접근 키 입력 ───────────────────────────────────────── */
.cgate { min-height: 62vh; display: grid; place-items: center; padding: 48px 20px; background: var(--tint); }
.cgate__box { width: 100%; max-width: 420px; background: #fff; border-radius: var(--r-lg); padding: 34px 30px; }
.cgate__box h1 { font-size: 23px; text-align: center; }
.cgate__box > p { margin: 10px 0 24px; font-size: 14px; color: var(--muted); text-align: center; line-height: 1.65; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cgrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cstatus { position: static; }
  .cstatus__right { margin-left: 0; width: 100%; }
  /* 좁은 화면에서는 왼쪽 구분선을 지우고 두 지표를 나란히 둔다 */
  .cstat { padding-left: 0; border-left: 0; }
  .cstat + .cstat { padding-left: 16px; border-left: 1px solid var(--line-2); }
  .cstatus__right .btn { flex: 1 1 auto; }
  .cwrap { padding: 16px 16px 56px; gap: 14px; }
  .cgrid, .ccol { gap: 14px; }
  .cactions { grid-template-columns: 1fr; }
  .cgauge { flex-direction: column; align-items: stretch; gap: 16px; }
  .cgauge__ring { margin: 0 auto; }
}

/* ── 장비 카드 ──────────────────────────────────────────── */
/* 장비 하나 = VLESS 코드 하나. 남은 시간이 제일 먼저 보여야 한다. */
#device-list { display: grid; gap: 14px; }
.dev { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 18px; background: #fff; }
.dev__top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.dev__name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dev__time { margin-left: auto; text-align: right; }
.dev__time b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.dev__time b.is-warn { color: var(--warn); }
.dev__time b.is-err  { color: var(--danger); }
.dev__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 8px; }
.dev__meta b { display: block; font-size: 15px; font-weight: 700; }
.dev .meter { margin-top: 4px; }

/* ── 대화상자 ───────────────────────────────────────────── */
.dlg { border: 0; border-radius: var(--r-lg); padding: 28px; max-width: 420px; width: calc(100% - 32px); }
.dlg::backdrop { background: rgba(0, 0, 0, .45); }
.dlg h3 { font-size: 19px; }

@media (max-width: 760px) {
  .dev__top { flex-direction: column; gap: 8px; }
  .dev__time { margin-left: 0; text-align: left; }
}