/* 내 프로필·계정(#/profile · web/shell/profileView.js) — Framer 다크. 흰 알약은 [저장] 하나(framer.css 의 .btn--primary).
 *   2026-09-25 오너 "너무 왼쪽에 치우쳐" → 가운데 정렬 두 열(≥1024: 왼쪽 300 내 카드 · 오른쪽 카드 셋). 다른 허브(.hub-wrap)와 같은 가운데 모음.
 *   카드 = surface-1(framer.css ② "카드는 테두리 대신 표면 단") — 우주 배경 위에서 글이 바닥을 갖는다. 카드 안 개수는 타일이 아니라 숫자 격자(표면이 세 단으로 쌓이지 않게).
 *   입력칸 모양은 framer.css ③ 이 준다(알파 채움이라 카드 위에서도 한 단 위) — 여기서 border·background 를 다시 쓰지 않는다(fieldAffordance 가드). */
body.shell-v2 .profile-wrap { max-width: 1040px; margin: 0 auto; padding: var(--sp-xl) var(--page-gutter) var(--sp-section); }
body.shell-v2 .profile-wrap > .hub-section-head { display: flex; margin-bottom: var(--sp-lg); }
body.shell-v2 .profile-wrap > .hub-section-head .hub-title { margin: 0; }
body.shell-v2 .profile-layout { display: grid; gap: var(--grid-gap); }
body.shell-v2 .profile-main { display: grid; gap: var(--grid-gap); align-content: start; min-width: 0; }
@media (min-width: 1024px) {
  body.shell-v2 .profile-layout { grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-lg); align-items: start; }
  body.shell-v2 .profile-id { position: sticky; top: var(--sp-lg); }
}
@media (max-width: 1023px) {
  body.shell-v2 .profile-wrap { max-width: 640px; }
  body.shell-v2 .profile-main { order: -1; } /* 한 열에선 고치는 칸(이름·소개·설정·데이터)이 먼저 — 내 카드는 아래로 */
  body.shell-v2 .profile-card.profile-id .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 한 열이면 폭이 남아 두 열은 줄만 길어진다 */
}
body.shell-v2 .profile-card { padding: var(--card-pad); border-radius: var(--r-xl); background: var(--surface-1); }
body.shell-v2 .profile-card-title { margin: 0 0 var(--sp-md); font-size: var(--fs-body); letter-spacing: var(--ls-body); font-weight: 600; color: var(--ink); }
/* 카드(surface-1) 위 보조·위험 알약·유령 hover 는 한 단 위로 — 같은 표면이면 사라진다(framer.css ② 와 같은 규칙) */
body.shell-v2 .profile-card .btn--secondary, body.shell-v2 .profile-card .btn--danger, body.shell-v2 .profile-card .btn--ghost:hover { background: var(--surface-2); }
body.shell-v2 .profile-card .btn--danger:hover { background: var(--danger-soft); }

/* 내 카드 — 사진 · 이름 · 이메일 · 역할/가입일 · 만든 것 */
body.shell-v2 .profile-id { display: grid; justify-items: center; text-align: center; }
body.shell-v2 .profile-avatar-row { display: grid; justify-items: center; gap: var(--sp-md); }
body.shell-v2 .profile-avatar {
  display: grid; place-items: center; flex: none; width: 96px; height: 96px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink); font-size: 36px; font-weight: 600;
}
body.shell-v2 .profile-avatar-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--toolbar-gap); }
body.shell-v2 .profile-id-name { margin: var(--sp-lg) 0 0; font-size: var(--fs-tagline); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
body.shell-v2 .profile-id-email { margin: 4px 0 0; font-size: var(--fs-caption); color: var(--ink-48); overflow-wrap: anywhere; }
body.shell-v2 .profile-account { justify-self: stretch; margin-top: var(--sp-lg); padding-top: var(--sp-lg); border-top: 1px solid var(--hairline); text-align: left; }

/* 프로필 폼 */
body.shell-v2 .profile-form { display: grid; gap: var(--sp-md); }
body.shell-v2 .profile-field { display: grid; gap: 6px; }
body.shell-v2 .profile-field-label { font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-field select { justify-self: start; min-width: 200px; }
/* 설정 칸이 둘일 때(시작 화면 + 화면 언어 — 스위치 i18n 켜짐 · spec_i18n W5) */
body.shell-v2 .profile-settings { display: grid; gap: 16px; }
body.shell-v2 .profile-form-foot { display: flex; justify-content: flex-end; }

/* 계정 — 역할·가입일 + 개수 격자(두 열 — 좌우 폭이 바뀌어도 줄이 고르다) */
body.shell-v2 .profile-info { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--sp-lg); margin: 0; }
body.shell-v2 .profile-info dt { font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-info dd { margin: 0; font-size: var(--fs-caption); color: var(--ink); overflow-wrap: anywhere; }
body.shell-v2 .profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-md) var(--sp-lg); margin-top: var(--sp-lg); }
body.shell-v2 .profile-stat { display: grid; gap: 2px; }
body.shell-v2 .profile-stat-n { font-size: var(--fs-tagline); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.shell-v2 .profile-stat-label { font-size: var(--fs-fine); color: var(--ink-48); }

/* 데이터 — 내보내기 · (헤어라인 아래) 삭제 요청 */
body.shell-v2 .profile-data { display: grid; justify-items: start; gap: var(--sp-md); }
body.shell-v2 .profile-data-danger { justify-self: stretch; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
body.shell-v2 .profile-delete { display: grid; gap: var(--sp-md); }
body.shell-v2 .profile-delete-note { margin: 0; font-size: var(--fs-caption); color: var(--ink-80); }
body.shell-v2 .profile-delete textarea { width: 100%; resize: vertical; }
body.shell-v2 .profile-delete-foot { display: flex; justify-content: flex-end; }

/* 상단바 오른쪽 끝 내 아바타(web/shell/profileAvatarButton.js) — 32px 원 · 머리글자는 사진이 뜨면 avatarPhoto.css 가 투명하게 만든다.
 *   2026-09-25 독 부채꼴 다섯째 버블에서 이사(오너). 자리 둘: 프로젝트 셸 상단바 끝(--pshell) · 허브 화면 우상단(--hub).
 *   같은 날 링크 → **계정 메뉴를 여는 버튼**(오너 — 워크스페이스 전환 알약을 걷고 이 메뉴 안으로). 메뉴 모양은 이 파일 맨 아래.
 *   채움은 절대 표면 토큰이 아니라 흰 알파 + 테두리 — 상단바(캔버스)·카드 어느 면 위에서도 한 단 위로 보인다(framer.css 입력 필드와 같은 해법). */
.profile-avatar-btn--hub { display: none; } /* 스코프 밖(사인인 게이트 — shell-v2·shell-chrome 이 빠진다)에서는 서지 않는다 */
body.shell-v2 .profile-avatar-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%; overflow: hidden;
  background-color: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-80); text-decoration: none; font-family: inherit; font-size: var(--fs-fine); font-weight: 600; line-height: 1;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
body.shell-v2 .profile-avatar-btn:hover,
body.shell-v2 .profile-avatar-btn[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); color: var(--ink); }
body.shell-v2 .profile-avatar-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .profile-avatar-btn[aria-current="page"] { border-color: var(--accent); } /* 선택 표시 = 파랑(DESIGN — 링크·포커스·선택 전용) */
body.shell-v2 .profile-avatar-initial { pointer-events: none; }

/* 상단바 잔액 알약(web/shell/creditBalancePill.js · 2026-10-23 슈드파 의견 "상단 바에 상시 노출") — 아바타 왼쪽 · 아바타와 같은 높이·재질.
 *   [ⓒ 7,210] · 줄면 오른쪽 아래로 잠깐 −259 가 떴다 사라진다 · 한도 10% 이하면 숫자가 경고색. 무제한·값 없음이면 hidden. */
.credit-pill--hub { display: none; } /* 스코프 밖(사인인 게이트)에서는 서지 않는다 — 아바타와 같은 규칙 */
body.shell-v2 .credit-pill {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 10px; border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink); font-family: inherit; font-size: var(--fs-caption); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  cursor: pointer; appearance: none; -webkit-appearance: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
body.shell-v2 .credit-pill[hidden] { display: none; }
body.shell-v2 .credit-pill:hover { background-color: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); }
body.shell-v2 .credit-pill:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .credit-pill__ico { flex: none; color: var(--ink-80); }
body.shell-v2 .credit-pill.is-low .credit-pill__n { color: var(--danger); }
body.shell-v2 .credit-pill__delta {
  position: absolute; top: calc(100% + 4px); right: 4px; padding: 2px 6px; border-radius: 6px;
  background: rgba(20, 20, 22, 0.92); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink); font-size: var(--fs-fine); font-weight: 600; pointer-events: none;
  opacity: 0; transform: translateY(-4px);
}
body.shell-v2 .credit-pill__delta.is-on { animation: credit-pill-delta 4s var(--ease) forwards; }
@keyframes credit-pill-delta {
  0% { opacity: 0; transform: translateY(-4px); }
  8%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
body.shell-v2 .pshell-top > .credit-pill--pshell { margin-left: var(--sp-xs); }
/* 허브 — 아바타(오른쪽 --sp-md · 32px)의 왼쪽 8px 에 같은 높이로 띄운다. 아바타가 숨는 화면(지식·프로젝트 Finder·프로젝트 셸)에서는 같이 숨는다 */
body.shell-v2.shell-chrome .credit-pill--hub:not([hidden]) { display: inline-flex; position: fixed; top: calc((var(--top-h) - 32px) / 2); right: calc(var(--sp-md) + 32px + var(--sp-xs)); z-index: 60; }
body.shell-v2.pshell-open .credit-pill--hub:not([hidden]),
body.shell-v2:has(#knowledgeView:not([hidden])) .credit-pill--hub,
body.shell-v2:has(#plansView:not([hidden])) .credit-pill--hub { display: none; }
/* 프로젝트 셸 — 상단바 흐름 안 마지막 칸(피드백 뒤). 모바일 순서는 아래 ≤720 블록 */
body.shell-v2 .pshell-top > .profile-avatar-btn--pshell { margin-left: var(--sp-xs); }
/* 허브 화면 — 공용 상단바가 없어 프로젝트 셸 상단바와 **같은 좌표**(위 12 · 오른쪽 --sp-md)에 띄운다. 트레이·모달(z 900대) 아래 */
body.shell-v2.shell-chrome .profile-avatar-btn--hub { display: inline-flex; position: fixed; top: calc((var(--top-h) - 32px) / 2); right: var(--sp-md); z-index: 60; }
body.shell-v2.pshell-open .profile-avatar-btn--hub { display: none; }
/* 지식 관리 · 프로젝트(Finder)는 화면을 끝까지 쓰는 작업 창이라 아바타를 세우지 않는다(오너 2026-09-25 "화면이 좁아지니 방해돼").
 *   아바타 띠만큼 본문을 내리는 규칙도 이 둘은 빠진다(아래 padding-top 의 :not(:has(...))). */
body.shell-v2:has(#knowledgeView:not([hidden])) .profile-avatar-btn--hub,
body.shell-v2:has(#plansView:not([hidden])) .profile-avatar-btn--hub { display: none; }
/* 허브 화면은 내용이 위 30px 에서 오른쪽 끝까지 닿는다(프로젝트 머리 버튼 · 라이브러리 필터 · 지식 편집 칸 실측) — 화면마다 비우지 않고
 *   허브 본문 전체를 아바타 띠(위 12 + 32 + 여백) 아래로 한 번에 내린다. 결과로 내용 시작이 프로젝트 셸(상단바 56 아래)과 같은 높이가 된다. */
@media (min-width: 811px) {
  body.shell-v2.shell-chrome:not(.pshell-open):not(:has(#knowledgeView:not([hidden]), #plansView:not([hidden]))) .shell-main { padding-top: 24px; }
}

@media (max-width: 810px) {
  /* 허브 모바일 — 사이드바가 56px 상단 바가 된다(chrome-shell.css ②). 아바타는 그 바 안, 햄버거(44px) 바로 왼쪽에 선다.
     바(z 70) 위에 올라야 보이고, 메뉴 시트가 열리면(같은 z 70 · 전체 화면) 시트 위로 뜨지 않게 숨는다. */
  body.shell-v2.shell-chrome .profile-avatar-btn--hub { right: calc(var(--sp-xs) + 44px + var(--sp-xs)); z-index: 71; }
  body.shell-v2.hub-menu-open .profile-avatar-btn--hub { display: none; }
  body.shell-v2.shell-chrome .credit-pill--hub:not([hidden]) { right: calc(var(--sp-xs) + 44px + var(--sp-xs) + 32px + var(--sp-xs)); z-index: 71; }
  body.shell-v2.hub-menu-open .credit-pill--hub:not([hidden]) { display: none; }
  body.shell-v2 .profile-wrap { padding: var(--sp-lg) 16px var(--sp-section); }
  body.shell-v2 .profile-avatar { width: 56px; height: 56px; font-size: 22px; }
  body.shell-v2 .profile-field select { min-width: 0; width: 100%; }
}

@media (max-width: 720px) {
  /* 프로젝트 셸 상단바는 ≤720 에서 order 로 줄을 짠다(chrome-shell.css ③) — 기본 order 0 이면 뒤로 버튼 옆으로 끼어든다. 피드백(3) 뒤 같은 첫 줄 */
  body.shell-v2 .pshell-top > .profile-avatar-btn--pshell { order: 3; margin-left: 6px; }
  /* 좁은 프로젝트 상단바는 제목이 먼저다 — 알약은 동전 아이콘을 빼 폭을 줄이고, ≤480 에서는 숨는다(허브 화면 알약·마이페이지에서 본다). */
  body.shell-v2 .pshell-top > .credit-pill--pshell { order: 3; margin-left: 6px; height: 32px; padding: 0 10px; }
  body.shell-v2 .pshell-top > .credit-pill--pshell .credit-pill__ico { display: none; }
}
@media (max-width: 480px) {
  body.shell-v2 .pshell-top > .credit-pill--pshell { display: none; }
}

/* 계정 메뉴(web/shell/accountMenu.js) — 아바타를 누르면 트리거 아래에 뜬다(오른쪽 끝 맞춤 · ≤480 은 좌우 16 여백의 전폭).
 *   재질(글라스 틴트·블러·광연·그림자)은 liquid-glass-overlays.css 의 G2 메뉴 묶음이 준다 — 여기서는 자리·크기·행만.
 *   모서리 동심: 판 --r-md(10) − 안쪽 여백 4 = 행 --r-sm(6). 행 36 · 글자 14(--fs-caption) · 흰 알약 없음(메뉴는 CTA 가 아니다).
 *   z 901 = 다른 메뉴(.trend-rank-menu)와 같은 층 — 모바일 상단 바(z 70)·그 안 아바타(z 71) 위, 트레이·모달 스크림과 같은 단. */
body.shell-v2 .acct-menu {
  position: fixed; z-index: 901; width: 264px; padding: 4px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-md); color: var(--ink);
  animation: acct-menu-in 140ms var(--ease) backwards; transform-origin: top right;
}
@keyframes acct-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
body.shell-v2 .acct-menu-head { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
body.shell-v2 .acct-menu-anon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; } /* 익명 활동 중 칩 + 별칭(spec_anon_profile §1-3) */
body.shell-v2 .acct-menu-alias { font-size: var(--fs-fine); color: var(--ink-80); overflow-wrap: anywhere; }
body.shell-v2 .acct-menu-name {
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.shell-v2 .acct-menu-email {
  font-size: var(--fs-fine); letter-spacing: var(--ls-fine); color: var(--ink-48);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.shell-v2 .acct-menu-list { display: flex; flex-direction: column; }
body.shell-v2 .acct-menu-list:focus { outline: none; } /* 마우스로 열면 초점이 목록에 온다(accountMenu.js) — 판 전체에 링을 두르지 않는다 */
body.shell-v2 .acct-menu-group { display: flex; flex-direction: column; }
body.shell-v2 .acct-menu-sep { height: 1px; margin: 4px 6px; background: var(--hairline); }
body.shell-v2 .acct-menu-label {
  padding: 6px 10px 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 600; color: var(--ink-48);
}
body.shell-v2 .acct-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-80);
  font-family: inherit; font-size: var(--fs-caption); letter-spacing: var(--ls-caption); font-weight: 500; text-align: left;
  cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
body.shell-v2 .acct-menu-item:hover,
body.shell-v2 .acct-menu-item:focus-visible { background: var(--lg-control-hover); color: var(--ink); outline: none; }
body.shell-v2 .acct-menu-item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-focus); }
body.shell-v2 .acct-menu-item[aria-checked="true"] { color: var(--ink); }
body.shell-v2 .acct-menu-icon { flex: none; margin-inline: 2px; color: var(--ink-48); } /* 16 + 2·2 = 워크스페이스 머리글자 칸(20)과 글자 시작선을 맞춘다 */
body.shell-v2 .acct-menu-item:is(:hover, :focus-visible) .acct-menu-icon { color: var(--ink); }
body.shell-v2 .acct-menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .acct-menu-check { flex: none; color: var(--accent); } /* ✓ = 선택 → 파랑(DESIGN — 링크·포커스·선택 전용) */
body.shell-v2 .acct-ws-mark {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--r-xs);
  background: var(--lg-control-on); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1;
}
@media (pointer: coarse) {
  body.shell-v2 .acct-menu-item { min-height: 44px; }
}
@media (max-width: 480px) {
  body.shell-v2 .acct-menu { transform-origin: top center; }
}
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .acct-menu { animation: none; }
}

/* 익명 활동(spec_anon_profile §1 · 2026-10-12 시안) — 슈드파처럼 정책이 켜진 워크스페이스에서만 선다.
 *   2026-10-16 강제 — 끌 수 없어 스위치가 없다(상태 한 줄 · 안내 · 미리보기 · 새로 받기). 미리보기 아바타 48 은 남이 보는 칩과 같은 시드 색·글리프(avatarPhoto.js). */
body.shell-v2 .profile-id-anon { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-xs); margin: var(--sp-xs) 0 0; }
body.shell-v2 .profile-id-anon[hidden] { display: none; }
body.shell-v2 .profile-anon-chip {
  display: inline-flex; align-items: center; border-radius: var(--r-pill); padding: 2px 10px;
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-fine);
}
body.shell-v2 .profile-id-alias { font-size: var(--fs-caption); color: var(--ink-80); overflow-wrap: anywhere; }
body.shell-v2 .profile-form-lock { margin: 0; font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-form-lock[hidden] { display: none; }
body.shell-v2 .profile-anon { display: grid; gap: var(--sp-md); }
body.shell-v2 .profile-anon-label { margin: 0; font-size: var(--fs-body); color: var(--ink); }
body.shell-v2 .profile-anon-notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-caption); color: var(--ink-80); }
body.shell-v2 .profile-anon-preview { display: flex; align-items: center; gap: var(--sp-md); padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
body.shell-v2 .profile-anon-preview-text { min-width: 0; }
body.shell-v2 .profile-anon-alias { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
body.shell-v2 .profile-anon-ava {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-3); font-size: 24px;
}
body.shell-v2 .profile-anon-hint { margin: 2px 0 0; font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-anon-rotate { display: grid; justify-items: start; gap: 4px; }
body.shell-v2 .profile-anon-rotate[hidden] { display: none; }
/* 남이 보는 화면의 '익명' 태그(멤버 탭 · 팀 모집) — 이름 옆 작은 테두리 알약 */
.anon-tag {
  display: inline-flex; align-items: center; flex: none; margin-left: 6px; padding: 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--surface-3); color: var(--ink-48); font-size: var(--fs-fine); line-height: 1.6; vertical-align: middle;
  width: fit-content; justify-self: start; align-self: center;
}
/* 세로로 쌓이는 자리(협업자 선택의 이름 아래 — 이메일 줄 자리)에선 늘어나지 않고 이름과 같은 시작점 */
.vlab-ps-opt .anon-tag { margin-left: 0; align-self: flex-start; }

/* 크레딧(ui/profileCredits.js · spec_workspace_credits) — 워크스페이스마다 한 줄: 이름 | 큰 숫자, 아래 한도·사용량 | [상세보기]. 펼치면 내역 표. */
body.shell-v2 .profile-credit-list { display: grid; gap: var(--sp-md); margin: 0; padding: 0; list-style: none; }
body.shell-v2 .profile-credit-row { display: grid; gap: 6px; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
body.shell-v2 .profile-credit-row:first-child { padding-top: 0; border-top: 0; }
body.shell-v2 .profile-credit-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); min-width: 0; }
body.shell-v2 .profile-credit-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
body.shell-v2 .profile-credit-name { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
body.shell-v2 .profile-credit-here { flex: none; font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-credit-amount { display: flex; align-items: center; gap: 6px; flex: none; }
body.shell-v2 .profile-credit-coin { flex: none; color: var(--ink-80); }
body.shell-v2 .profile-credit-table th .credit-chip__ico { vertical-align: -2px; }
body.shell-v2 .profile-credit-remaining { font-size: var(--fs-tagline); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.shell-v2 .profile-credit-unit { font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-credit-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
body.shell-v2 .profile-credit-sub { margin: 0; font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .profile-credit-status { margin: 0; font-size: var(--fs-caption); color: var(--ink-48); }
body.shell-v2 .profile-credit-history { display: grid; justify-items: start; gap: var(--sp-sm, 8px); margin-top: 6px; max-height: 420px; overflow: auto; }
body.shell-v2 .profile-credit-history[hidden] { display: none; }
body.shell-v2 .profile-credit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-fine); color: var(--ink-80); }
body.shell-v2 .profile-credit-table th { padding: 6px 8px; text-align: left; font-weight: 500; color: var(--ink-48); border-bottom: 1px solid var(--hairline); white-space: nowrap; position: sticky; top: 0; background: var(--surface-1); }
body.shell-v2 .profile-credit-table td { padding: 6px 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
body.shell-v2 .profile-credit-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.shell-v2 .profile-credit-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
/* 환불 줄(실패한 생성 — 2026-10-16) — 돌려받은 '+160' 은 성공색. */
body.shell-v2 .profile-credit-table tr.is-refund .profile-credit-n { color: var(--positive); }
body.shell-v2 .profile-credit-table th:nth-child(3) { text-align: right; }
body.shell-v2 .profile-credit-detail { color: var(--ink-48); overflow-wrap: anywhere; }