/* ==========================================================================
   stop&loss — 내 계정(account.html) 전용 스타일

   account.html 하나만 이 파일을 싣는다. 모든 클래스가 .acct- 접두사이고, 기존
   공용 클래스(.container · .btn · .input · .field · .toast)는 style.css 것을
   그대로 빌려 쓴다. 여기를 통째로 지워도 다른 페이지는 픽셀 하나 안 바뀌고,
   내 계정 화면도 style.css 기본 모습으로 물러날 뿐이다.

   ── 새 색 · 새 글꼴을 만들지 않는다 ──
   이 파일에 등장하는 색은 전부 style.css 의 토큰이거나, 히어로 렌즈 색분산의
   두 색(청록 #3de9ff · 적 #ff2d5c)을 알파만 낮춰 쓴 것이다. 글꼴도 --font 와
   --font-mono 둘뿐이다. 값을 직접 적고 싶어지면 먼저 토큰에 있는지 볼 것.

   ── 폭은 .container 하나가 정한다 (중요) ──
   본문에 따로 max-width 를 걸지 않는다. 이 문서에서 폭을 정하는 다른 요소가
   둘(헤더 · 푸터)이고 그 둘이 .container(1140px)를 쓰기 때문이다. 본문만 넓히면
   헤더 아래에서 한 번 넓어졌다가 푸터에서 다시 좁아지는 계단이 생긴다 —
   요금제 페이지에서 똑같은 이유로 한 번 고친 문제다(pricing.css 2절 주석).

   ── 히어로 띠는 없다 (되살리지 말 것) ──
   예전에는 맨 위에 배경 글로우 · 큰 제목 · 신원 카드가 한 판을 이루고 있었다.
   그 판이 아래 1절의 배경 필드를 가려서, 이 화면의 인상을 만드는 것이 정작
   안 보였다. 지금은 제목 한 줄(.acct-top)만 남기고 그 자리를 배경에 내준다.

   ── 구조 ──
     .acct-field   화면 전체에 고정된 배경 필드. 마우스를 따라 반응한다
     .acct-top     제목 한 줄
     .acct-grid    12칼럼. 1024px 미만은 6칼럼, 768px 미만은 1열
     .acct-card    카드 공통. 커서 쪽으로 옅게 밝아지는 것 말고는 움직이지 않는다
     .acct-empty   '준비 중' 빈 상태. 점선 테두리가 '아직 없음'을 뜻한다
     .sk-*         스켈레톤. 값이 들어올 자리를 미리 잡아 화면이 튀지 않게 한다
   ========================================================================== */

/* ---------- 1. 배경 필드 (마우스 반응) ---------- */

/*
 * 화면 전체에 고정으로 깔린다. 본문(.acct-main)과 푸터가 z-index 1 로 그 위에 서고,
 * 헤더는 원래 50 이라 건드릴 필요가 없다.
 *
 * 성능 규칙 — 이 절에서 매 프레임 바뀌는 것은 transform 과 opacity 뿐이다.
 *   filter: blur() 를 쓰지 않는다. 큰 요소에 걸면 프레임마다 다시 그린다.
 *   width · height · left · top 을 애니메이션하지 않는다. 레이아웃이 다시 잡힌다.
 *   마스크의 좌표를 커서로 움직이지 않는다. 마스크가 바뀌면 그 겹을 다시 칠한다
 *   (자주 묻는 질문의 렌즈는 마스크를 움직이지만, 저쪽은 겹이 하나뿐이다).
 * 그래서 저사양 PC 에서도 합성 단계에서 끝난다.
 */
.acct-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* 격자 한 칸. static/account-field.js 의 CELL 과 반드시 같은 값이어야 한다 —
     어긋나면 칸 하이라이트가 격자에서 비껴 앉는다. */
  --acct-cell: 44px;
}

.acct-field > span {
  position: absolute;
  display: block;
}

/* 바닥 잔광. 마우스와 무관하게 언제나 있다 — 스크립트가 없거나 터치 기기여도
   화면이 검정 한 장으로 남지 않는다. 두 색은 히어로 렌즈 색분산 계열이다. */
.acct-field-base {
  inset: 0;
  background:
    radial-gradient(720px 460px at 6% -12%, rgba(61, 233, 255, .10), transparent 62%),
    radial-gradient(680px 440px at 98% 108%, rgba(180, 140, 255, .09), transparent 66%);
}

/*
 * 격자. 이 화면의 질감이다.
 *
 * 자주 묻는 질문은 점, 공지사항은 가로 스캔라인을 쓴다. 세 화면이 같은 바탕을
 * 깔면 배경만 보고는 어느 페이지인지 알 수 없다.
 *
 * inset 을 음수로 두는 이유: 시차로 최대 ±6px 움직이므로 그만큼 넉넉해야
 * 가장자리에 빈 줄이 생기지 않는다.
 */
.acct-field-grid {
  inset: -20px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: var(--acct-cell) var(--acct-cell);
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 18%, rgba(0, 0, 0, .34) 58%, transparent 86%);
  mask-image: radial-gradient(130% 110% at 50% 0%, #000 18%, rgba(0, 0, 0, .34) 58%, transparent 86%);
  will-change: transform;
}

/*
 * 커서를 따라오는 잔광. 감속이 있어 손보다 한 박자 늦게 도착한다.
 *
 * 크기를 고정하고 margin 으로 중심을 맞춘다 — translate3d 하나로 옮기기 위해서다.
 * transform: translate(-50%,-50%) 를 곁들이면 좌표 계산이 두 벌이 된다.
 */
.acct-field-glow {
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  background: radial-gradient(circle,
    rgba(61, 233, 255, .13), rgba(180, 140, 255, .06) 44%, transparent 70%);
  opacity: 0;
  transition: opacity .45s ease;
  will-change: transform, opacity;
}

/*
 * 십자 조준선. 화면을 가로지르는 긴 선이 아니라 커서 둘레의 짧은 두 도막이다.
 *
 * 긴 선으로 두면 커서에서 먼 쪽이 가장 밝은 구간과 같은 밝기라 '조준'이 아니라
 * '표의 눈금'으로 읽힌다. 길이 300px 은 account-field.js 의 REACH(150) × 2 이고,
 * 한쪽만 바꾸면 십자의 중심이 칸에서 벗어난다.
 */
.acct-field-col,
.acct-field-row {
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform, opacity;
}

.acct-field-col {
  width: 1px;
  height: 300px;
  background: linear-gradient(to bottom,
    transparent, rgba(61, 233, 255, .55) 42%, rgba(61, 233, 255, .55) 58%, transparent);
}

.acct-field-row {
  width: 300px;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(61, 233, 255, .55) 42%, rgba(61, 233, 255, .55) 58%, transparent);
}

/*
 * 지나온 칸. 커서가 격자 한 칸을 넘을 때마다 그 칸이 켜졌다가 잦아든다.
 *
 * 여섯 개를 돌려 쓴다(account-field.js 의 풀). 매번 만들면 그 순간 레이아웃이
 * 다시 잡히고, 지우지 않으면 문서가 무한히 늘어난다.
 * opacity 는 스크립트가 직접 쓴다 — 여기에 transition 을 걸면 매 칸마다
 * 전환이 새로 시작해 잔상이 뚝뚝 끊긴다.
 */
.acct-field-cell {
  left: 0;
  top: 0;
  width: var(--acct-cell);
  height: var(--acct-cell);
  background: rgba(61, 233, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(61, 233, 255, .26);
  opacity: 0;
  will-change: transform, opacity;
}

/* 마우스가 화면 안에 있을 때만 켠다. 터치 기기에서는 account-field.js 가 아예
   붙지 않으므로 이 클래스가 달리는 일이 없고, 네 겹은 투명하게 남는다. */
.acct-field.is-live .acct-field-glow,
.acct-field.is-live .acct-field-col,
.acct-field.is-live .acct-field-row { opacity: 1; }

/* ---------- 2. 본문 · 제목 ---------- */

/* 배경 필드 위에 세운다. 헤더는 style.css 가 z-index 50 을 이미 갖고 있다. */
.acct-main,
body[data-page="account"] .site-footer {
  position: relative;
  z-index: 1;
}

/* 위 여백이 넉넉한 것은 실수가 아니다. 카드가 시작되기 전의 이 띠가 배경 필드를
   온전히 보여주는 유일한 자리다 — 줄이면 효과가 가장자리 여백에만 남는다. */
.acct-main { padding: 34px 0 72px; }

.acct-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 20px;
}

.acct-h1 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.03em;
  color: #fff;
}

/*
 * 제목 옆 한 줄 설명.
 *
 * 폭 상한을 두지 않는다. 예전에는 52ch(≈395px)였는데 문장이 520px 남짓이라,
 * 데스크톱에서 제목 오른쪽이 통째로 비어 있는데도 'PC에 설치된 / Aegis에서
 * 열립니다' 로 꺾여 있었다. 이 줄은 읽는 본문이 아니라 제목에 딸린 한 줄이라
 * 줄 길이를 재는 대상이 아니다 — ch 상한은 카드 안의 긴 글에만 건다.
 *
 * 폭이 정말 모자라면 .acct-top 의 flex-wrap 이 이 문단을 통째로 아랫줄로 내리고,
 * 그때는 화면 폭을 다 쓰므로 한 줄이 그대로 유지된다(대략 560px까지).
 */
.acct-h1-sub {
  min-width: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ---------- 3. 배지 ---------- */

/* style.css 의 .tag 와 값이 비슷하지만 이름을 따로 둔다. 저쪽은 사이트 공용이라
   여기서 크기를 바꾸면 전략 카드와 관리자 화면까지 함께 움직인다. */
.acct-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.acct-tag-admin { background: rgba(61, 233, 255, .14); color: var(--primary); }
.acct-tag-user  { background: rgba(255, 255, 255, .08); color: var(--text-soft); }
.acct-tag-ok    { background: rgba(61, 220, 151, .14); color: var(--success); }
.acct-tag-warn  { background: rgba(255, 196, 77, .14); color: var(--warn); }
.acct-tag-danger{ background: rgba(255, 92, 122, .14); color: var(--danger); }

/*
 * '준비 중'. 점선이 '아직 정해지지 않음'을 뜻한다 — 요금제 페이지의 선택 풀 칩
 * (.pr-chip.is-pick)과 같은 문법이라 사이트 안에서 처음 보는 물건이 아니다.
 * 채워진 배지로 두면 상태값(사용 중 · 정상)과 구분이 안 된다.
 */
.acct-tag-soon {
  border: 1px dashed rgba(255, 255, 255, .26);
  color: var(--muted);
  background: transparent;
}

/* ---------- 4. 본문 격자 ---------- */

/*
 * 12칼럼. 좁은 화면에서는 1열이고, 768px 부터 6칼럼, 1024px 부터 12칼럼이 된다.
 * 카드마다 span 을 따로 주는 대신 아래 .acct-col-* 로 묶어 둔다 — 카드를 하나
 * 옮길 때 클래스 하나만 바꾸면 되고, 그리드 정의는 손대지 않는다.
 */
.acct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ---------- 5. 카드 ---------- */

.acct-card,
.acct-actions {
  position: relative;
  /* 아래 두 겹(::before · ::after)이 z-index -1 로 카드 배경 위 · 내용 아래에
     그려지도록 이 요소에서 쌓임 맥락을 끊는다. 없으면 두 겹이 페이지 배경
     뒤로 내려가 아무것도 안 보인다. */
  isolation: isolate;
  /* 카드 안 커서 좌표. static/account-field.js 가 CSSOM 으로 넣는다 —
     이 사이트의 CSP 는 인라인 style '속성'을 막지만 CSSOM 지정은 막지 않는다.
     기본값이 가운데라, 스크립트가 없으면 호버 시 카드 한가운데가 은은히 밝아진다. */
  --acct-cx: 50%;
  --acct-cy: 50%;
}

/* 커서 쪽이 옅게 밝아진다. 카드를 떠오르게 하지 않는 이유: 이 화면은 훑는 곳이
   아니라 값을 확인하는 곳이라, 카드가 움직이면 읽고 있던 줄이 흔들린다. */
.acct-card::before,
.acct-actions::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--acct-cx) var(--acct-cy),
    rgba(61, 233, 255, .10), transparent 64%);
  opacity: 0;
  transition: opacity .28s ease;
}

.acct-card:hover::before,
.acct-card:focus-within::before,
.acct-actions:hover::before,
.acct-actions:focus-within::before { opacity: 1; }

/*
 * 테두리 빛. padding + mask-composite 는 '테두리만 칠하는' 표준 수법이다
 * (faq.css · pricing.css 와 같은 문법).
 *
 * @supports 로 감싸는 이유가 중요하다 — mask-composite 를 모르는 브라우저에서는
 * 이 겹이 카드 전체를 청록으로 덮어 글자를 못 읽게 만든다. 모르면 아예 그리지
 * 않는 편이 맞다(안쪽 잔광은 그대로 남으므로 반응이 통째로 사라지지도 않는다).
 */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .acct-card::after,
  .acct-actions::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--acct-cx) var(--acct-cy),
      rgba(61, 233, 255, .75), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .28s ease;
  }

  .acct-card:hover::after,
  .acct-card:focus-within::after,
  .acct-actions:hover::after,
  .acct-actions:focus-within::after { opacity: 1; }
}

.acct-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--ease);
}

.acct-card:hover,
.acct-card:focus-within { border-color: rgba(255, 255, 255, .22); }

.acct-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.acct-card-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.5;
}

.acct-card-desc {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.acct-card-desc b { color: var(--text-soft); font-weight: 600; }

/* 카드 맨 아래에 붙는 버튼 줄. margin-top:auto 가 카드 키를 서로 맞춰 준다. */
.acct-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

/* ---------- 6. 신원 블록 ---------- */

/*
 * 예전에는 히어로 오른쪽의 유리 카드였다. 히어로를 걷어내면서 '계정 정보' 카드
 * 안으로 들어왔다 — 원래 아이디 · 이름 · 권한이라는 같은 것을 두 곳에서 말하고
 * 있었으므로, 한 곳에 두는 편이 맞다.
 */
.acct-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* 이니셜 아바타. 사진을 쓰지 않는 이유는 저장할 곳이 없어서이기도 하지만,
   이 사이트의 CSP 가 외부 이미지를 막기 때문이기도 하다(img-src 'self'). */
.acct-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(61, 233, 255, .22), rgba(180, 140, 255, .22));
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.acct-identity-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.acct-identity-name {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  /* 이름이 길어도 카드를 뚫고 나가지 않게 한 줄로 자른다. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 아이디는 고정폭이다. 이름(가변폭 한글)과 글꼴이 같으면 어느 쪽이 로그인에
   쓰는 값인지 한눈에 안 잡힌다. */
.acct-identity-id {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-identity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 0 0 auto;
}

/* ---------- 7. 정의 목록 (계정 정보) ---------- */

.acct-dl {
  display: grid;
  gap: 0;
}

.acct-dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.acct-dl > div:first-child { padding-top: 0; }
.acct-dl > div:last-child { padding-bottom: 0; border-bottom: 0; }

.acct-dl dt {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

.acct-dl dd {
  min-width: 0;
  margin: 0;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

/* 아이디 · 날짜처럼 자릿수가 의미를 갖는 값. */
.acct-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* 값 옆에 붙는 작은 설명. '이 값은 왜 이런가'를 그 자리에서 말한다. */
.acct-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
}

.acct-hint a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.acct-hint a:hover { color: #fff; }

/* ---------- 8. 빈 상태 · 오류 · 스켈레톤 ---------- */

/*
 * 점선 + 옅은 판. 카드 안에서 '여기에 들어올 것이 있는데 아직 없다'를 말한다.
 * 실선으로 두면 그 자체가 완성된 내용처럼 보이고, 아무것도 안 그리면 카드가
 * 그냥 비어 보인다.
 */
.acct-empty {
  display: grid;
  gap: 8px;
  padding: 18px 16px;
  background: var(--bg-alt);
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: var(--radius-md);
}

.acct-empty-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 700;
}

.acct-empty-text {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.acct-empty-text b { color: var(--text-soft); font-weight: 600; }

.acct-empty-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.acct-empty-text a:hover { color: #fff; }

.acct-error {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px solid rgba(255, 92, 122, .3);
  border-radius: var(--radius-lg);
  text-align: center;
}

.acct-error-title {
  color: var(--text);
  font-size: 15.5px;
  font-weight: 700;
}

.acct-error-text {
  max-width: 460px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

.acct-error .btn { margin-top: 6px; }

/*
 * 스켈레톤 — 값이 들어올 자리를 미리 잡는다. 이게 없으면 응답이 도착하는 순간
 * 카드 키가 갑자기 자라 화면이 아래로 밀린다(읽고 있던 줄을 놓치게 된다).
 */
.sk {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, #23232e 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: acct-shimmer 1.4s ease-in-out infinite;
  /* 안에 든 글자는 자리만 잡고 보이지 않는다(스크린 리더에는 aria-busy 로 알린다). */
  color: transparent;
  user-select: none;
}

.sk-line { width: 96px; height: 12px; vertical-align: middle; }
.sk-wide { width: 150px; }
.sk-avatar { width: 42px; height: 42px; border-radius: 50%; }
.sk-block { display: block; width: 100%; height: 64px; border-radius: var(--radius-md); }

@keyframes acct-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 9. 요금제 카드 ---------- */

.acct-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.acct-plan-name {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.acct-plan-price {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* 권한 수 두 칸. 자동매매와 재정거래는 층이 다른 값이라 한 줄에 이어 붙이지 않는다. */
.acct-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.acct-meter {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.acct-meter-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.acct-meter-value {
  margin-top: 2px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.acct-meter-value small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* 남은 기간 막대. 값이 없으면 이 블록 자체를 그리지 않는다 — 0% 막대를 보여주면
   '기간이 다 됐다'는 거짓이 된다. */
.acct-progress { display: grid; gap: 6px; }

.acct-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.acct-progress-meta b {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.acct-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 9999px;
  overflow: hidden;
}

.acct-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width var(--ease-spring);
}

/* 만료가 가까우면 색으로 먼저 알린다. 숫자를 읽지 않아도 눈에 걸려야 한다. */
.acct-progress-fill.is-soon { background: linear-gradient(90deg, var(--warn), #ff9d4d); }
.acct-progress-fill.is-over { background: linear-gradient(90deg, var(--danger), #ff2d5c); }

/* ---------- 10. 작은 버튼 ---------- */

/*
 * 이 화면의 버튼은 사각 틀 하나다. 알약(.btn)은 폼을 제출하는 '비밀번호 변경'
 * 한 곳에만 남는다 — 이 페이지에서 값을 실제로 바꾸는 유일한 조작이라, 알약이
 * 하나뿐이어야 그것이 주 행동이라는 뜻이 산다.
 *
 * 예전 규칙은 '주 행동은 알약'이었다. 그 결과 한 줄에 사각 틀과 알약이 섞여
 * 서고 키도 34px 과 40px 로 어긋났다(구독 카드의 플랜 변경, 액션 바의 로그아웃).
 * 화면에서 가장 먼저 눈에 걸린 것이 그 어긋남이었다. 지금은 줄 안의 무게를
 * 모양이 아니라 밝기로 나눈다 — 아래 .is-strong.
 */
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.acct-btn:hover {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: #1d1d28;
}

.acct-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 그 줄에서 가장 자주 누르는 것(로그아웃 · 플랜 변경). 모양과 키는 그대로 두고
   테두리와 글자만 한 단계 밝힌다 — 모양을 바꾸는 순간 줄이 다시 흐트러진다. */
.acct-btn.is-strong {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

/* 새 색을 만들지 않는다. 사이트에서 '한 단계 더 밝은 유리'는 언제나 이 값이다
   (style.css .btn-ghost:hover · admin.css .admin-home:hover). */
.acct-btn.is-strong:hover {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .1);
}

.acct-btn.is-danger { color: #ffb3c2; border-color: rgba(255, 92, 122, .38); }

.acct-btn.is-danger:hover {
  border-color: var(--danger);
  color: #fff;
  background: rgba(255, 92, 122, .12);
}

/* ---------- 11. 보안 카드 ---------- */

/*
 * 폼 하나뿐이다. 예전에는 오른쪽에 로그인 기록 표가 있었지만, 서버가 기기
 * 정보를 저장하지 않아 영영 '준비 중'이라 통째로 지웠다.
 *
 * 넓은 화면에서는 세 칸으로 편다(아래 12절). 전폭 카드 안에서 폼만 좁게 두면
 * 오른쪽 절반이 통째로 빈다 — 관리자 콘솔에서 같은 이유로 한 번 고친 자리다.
 */
.acct-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 20px;
  align-items: start;
}

/* 버튼은 필드와 나란히 서면 안 된다. 언제나 제 줄을 통째로 차지한다. */
.acct-form .btn { grid-column: 1 / -1; justify-self: start; min-width: 200px; }

/* 사이트 공통 .input 위에 포커스 색만 덧칠한다 — 로그인 카드와 같은 규칙. */
.acct-form .input {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.acct-form .input:focus {
  border-color: rgba(61, 233, 255, .6);
  background: rgba(61, 233, 255, .04);
  box-shadow: 0 0 0 3px rgba(61, 233, 255, .12);
}

.acct-form .input.is-invalid { border-color: var(--danger); }

/* 조건을 만족한 칸은 초록 테두리로 그 자리에서 알린다. 제출한 뒤에야 알려주면
   같은 값을 몇 번씩 고쳐 넣게 된다. */
.acct-form .input.is-valid { border-color: rgba(61, 220, 151, .55); }

/* 다크 배경의 autofill 흰 배경 보정. 로그인 카드와 같은 값이다. */
.acct-form .input:-webkit-autofill,
.acct-form .input:-webkit-autofill:hover,
.acct-form .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #101019 inset;
  box-shadow: 0 0 0 1000px #101019 inset;
  transition: background-color 999999s ease-out;
}

/* ---------- 11-b. 비밀번호 강도 ---------- */

.acct-strength { display: grid; gap: 7px; }

/* 칸 넷. 하나짜리 막대로 두면 '얼마나 남았나'가 안 보인다. */
.acct-strength-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.acct-strength-bar {
  height: 4px;
  background: rgba(255, 255, 255, .1);
  border-radius: 9999px;
  transition: background var(--ease);
}

.acct-strength-bar.is-on-weak   { background: var(--danger); }
.acct-strength-bar.is-on-fair   { background: var(--warn); }
.acct-strength-bar.is-on-good   { background: #7be0ff; }
.acct-strength-bar.is-on-strong { background: var(--success); }

.acct-strength-label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.acct-strength-label b { color: var(--text-soft); font-weight: 700; }

/* 규칙 목록. 통과 여부를 색이 아니라 기호(✓ · ·)로도 말한다 —
   색만으로 구분하면 색각 이상이 있는 사람은 어느 줄이 통과인지 모른다. */
.acct-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
}

.acct-rule {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.acct-rule::before {
  content: '·';
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.acct-rule.is-ok { color: var(--success); }

.acct-rule.is-ok::before {
  content: '✓';
  background: rgba(61, 220, 151, .16);
  color: var(--success);
  font-size: 9px;
}

/* ---------- 12. 하단 액션 바 ---------- */

/*
 * 두 줄이다. 윗줄은 평상시 조작(로그아웃), 아랫줄은 되돌릴 수 없는 조작(탈퇴)이다.
 *
 * 한 줄에 나란히 두면 탈퇴가 로그아웃 옆 8px 자리에 앉아 스크롤 한 번에
 * 잘못 눌린다. 관리자 콘솔에서 계정 삭제를 상세 맨 아래에 따로 세운 것과 같은
 * 이유다(connections.css .conn-danger). 한 줄로 되돌리지 말 것.
 *
 * 윗줄에 있던 '관리자 콘솔 열기' 는 뺐다. 콘솔 입구는 상단 메뉴 한 곳뿐이다.
 */
.acct-actions {
  display: grid;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--ease);
}

.acct-actions:hover,
.acct-actions:focus-within { border-color: rgba(255, 255, 255, .22); }

/* 설명(왼쪽)과 버튼(오른쪽). 폭이 모자라면 버튼 묶음만 아래로 접힌다 —
   버튼이 낱개로 흩어지지 않게 묶음 단위로 감싼 것이 .acct-actions-btns 다. */
.acct-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.acct-actions-copy,
.acct-danger-copy {
  min-width: 0;
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.acct-actions-copy b { color: var(--text-soft); font-weight: 600; }

.acct-actions-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/*
 * 되돌릴 수 없는 조작.
 *
 * 붉은 테는 장식이 아니라 '여기부터는 성격이 다르다'는 경계 표시다. 판으로
 * 가르지 않으면, 문장을 읽지 않고 버튼만 보는 사람에게 위 줄과 같은 무게로 읽힌다.
 */
.acct-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  background: rgba(255, 92, 122, .05);
  border: 1px solid rgba(255, 92, 122, .26);
  border-radius: var(--radius-md);
}

.acct-danger-copy b { color: var(--danger); font-weight: 700; }

/* ---------- 13. 확인 모달 ---------- */

/*
 * <dialog> 를 쓰는 이유: ESC 닫기 · 포커스 가두기 · 배경 클릭 차단을 브라우저가
 * 공짜로 해 준다. div 로 만들면 그 셋을 직접 구현해야 하고, 대개 하나를 빠뜨린다.
 * 지원하지 않는 브라우저에서는 account.js 가 confirm() 으로 물러난다.
 */
.acct-modal {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.acct-modal::backdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(3px);
}

.acct-modal-inner { padding: 22px; }

.acct-modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.acct-modal-body {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.acct-modal-body b { color: var(--text-soft); font-weight: 600; }

.acct-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ---------- 14. 반응형 ---------- */

@media (min-width: 560px) {
  .acct-main { padding-top: 40px; }
  .acct-card { padding: 22px; }
  /* 카드와 좌우 여백을 맞춘다. 어긋나면 위 카드의 글자와 액션 바의 글자가 서로
     다른 세로선에서 시작해, 눈으로는 '바가 살짝 밀려 있다'로만 보인다. */
  .acct-actions { padding: 18px 22px; }
}

/*
 * 6칼럼. 카드 두 장이 나란히 서기 시작하는 폭이다.
 *
 * 네 클래스를 전부 적는다. 하나라도 빠지면 그 클래스를 단 카드가 span 1 로
 * 떨어져 6칼럼 중 한 칸(약 120px)으로 눌린다 — 실제로 .acct-col-narrow 를
 * 빠뜨려 768~1023px 에서 그렇게 나갔던 자리다. 아래 1024px 블록과 짝이므로
 * 클래스를 늘릴 때는 두 곳을 함께 늘려야 한다.
 *
 * 이 구간에서만 wide 와 narrow 가 같은 폭(3)이다. 카드가 둘뿐이라 7:5 로
 * 나누면 좁은 쪽이 태블릿에서 읽기 어려워지고, 한쪽만 전폭으로 두면 옆이
 * 통째로 빈다. 이름은 데스크톱 기준으로 붙어 있다.
 */
@media (min-width: 768px) {
  .acct-main { padding: 44px 0 88px; }
  .acct-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .acct-col-wide { grid-column: span 3; }
  .acct-col-narrow { grid-column: span 3; }
  .acct-col-full { grid-column: span 6; }

  /* 현재 · 새 · 확인 세 칸. 강도 게이지가 붙은 가운데 칸만 길어지는데,
     align-items: start 라 나머지 두 칸은 그냥 먼저 끝난다. */
  .acct-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .acct-h1 { font-size: 25px; }
}

/*
 * 12칼럼. 여기서부터 카드 폭을 5:7 로 엇갈리게 줘서 화면이 좌우로 반듯하게
 * 잘리지 않게 한다. 6:6 으로만 두면 세로선 하나가 페이지를 위아래로 관통해
 * 두 개의 좁은 페이지처럼 보인다.
 */
@media (min-width: 1024px) {
  .acct-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .acct-col-wide { grid-column: span 7; }
  .acct-col-narrow { grid-column: span 5; }
  .acct-col-full { grid-column: span 12; }

  .acct-card { padding: 24px; }
  .acct-actions { padding: 20px 24px; }
  .acct-form { gap: 16px 28px; }
}

/* ---------- 15. 접근성: 모션 최소화 ---------- */

/*
 * 배경 필드는 여기서 끄지 않는다.
 *
 * 성능을 위해 창 애니메이션을 꺼 둔 Windows PC 는 브라우저가 모든 사이트에
 * reduce 를 보고한다. 그 신호로 마우스 효과를 지우면 정작 주 사용자만 밋밋한
 * 화면을 보게 된다 — 메인 히어로 셰이더 · 로그인 유체 · 요금제 프리즘과 같은
 * 규칙이다. 커서를 따라가는 것은 CSS 전환이 아니라 좌표 갱신이라, 아래에서
 * 전환 시간을 지워도 필드는 그대로 따라온다(켜지고 꺼질 때만 즉시 바뀐다).
 *
 * 내용을 모션 뒤에 숨기지 않는 것이 이 사이트의 원칙이라, 어떤 설정에서도
 * 카드와 값은 그대로 보인다. 여기서는 무한 반복하는 스켈레톤만 끈다.
 */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .acct-progress-fill { transition: none; }
  .acct-card::before,
  .acct-card::after,
  .acct-actions::before,
  .acct-actions::after { transition: none; }
}