/* ═══════════════════════════════════════════════════════════════════════════
   회원 앱 전용 스타일

   theme.css 다음에 읽혀서 같은 클래스는 여기가 이긴다 (.page·.appbar·
   .tabbar·.has-tabbar·.hero-label).

   원래 index.html 의 <style> 안에 있었는데, grep 에 안 걸려서 theme.css 만
   고치고 "왜 안 바뀌지" 를 세 번 반복했다(.hero·.stat·.listing). 스타일이
   .css 파일에 있어야 찾을 수 있다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   회원 앱 — 새 비주얼 컨셉 "포켓" (라이트 모드)

   기존은 "각진 화이트 + 헤어라인 + 네이비" 엔터프라이즈였다. 정보 밀도는
   높지만 차갑고, 지갑이라기보다 관리 콘솔로 읽혔다. 컨셉을 정반대로 바꾼다:

     · **따뜻한 크림 배경** — 순백 대신 살짝 노란기가 도는 바탕
     · **크게 둥근 카드 + 부드러운 그림자** — 선으로 나누지 않고 면으로 띄운다
     · **파스텔 강조** — 딥 그린(브랜드) + 살구/민트/라벤더 파스텔
     · **더 큰 라운드·여백·타이포** — 손에 잡히는 물건처럼

   이 파일은 theme.css 다음에 로드되므로 같은 토큰을 여기서 덮으면 회원 앱만
   바뀐다. 어드민·파트너 콘솔은 theme.css 원본을 그대로 쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 브랜드를 네이비 → 딥 그린으로. 돈·성장·안정을 동시에 말하는 색이고,
     기존 네이비 콘솔과 시각적으로 확실히 갈린다. */
  --brand-900: #123b2e;
  --brand-800: #17513c;
  --brand-700: #1d6b4e;
  --brand-600: #248a63;
  --brand-500: #2ea679;
  --brand-300: #7fd0af;
  --brand-100: #d3f0e2;
  --brand-50: #eafaf2;

  /* 파스텔 팔레트 — 카드 아이콘·태그에 쓴다 */
  --peach-100: #ffe8d6;
  --peach-500: #f2915a;
  --mint-100: #d6f2ea;
  --mint-500: #35b79a;
  --lav-100: #e7e3fb;
  --lav-500: #8b7fe0;
  --sun-100: #fdeec2;
  --sun-500: #e0a92e;

  /* 크림 바탕 — 순백이 아니라 아주 옅은 웜 그레이 */
  --cream: #f6f4ef;
  --cream-deep: #efece4;
  --card: #ffffff;

  /* ── 시맨틱 토큰 덮어쓰기 ─────────────────────────────────────────────── */
  --bg: var(--cream);
  --bg-sunken: var(--cream-deep);
  --bg-elevated: var(--card);
  --border: #ece8e0;
  --border-strong: #ddd8cd;
  --text: #23201b;
  --text-secondary: #6a6459;
  --text-tertiary: #938c7e;
  --text-disabled: #b8b1a3;

  /* 강조·링크·주 버튼을 브랜드 그린으로 */
  --primary: var(--brand-700);
  --link: var(--brand-700);
  --accent-50: var(--brand-50);
  --accent-100: var(--brand-100);
  --accent-500: var(--brand-600);
  --accent-600: var(--brand-700);
  --accent-700: var(--brand-800);
  --navy-50: var(--brand-50);
  --navy-100: var(--brand-100);
  --navy-200: var(--brand-300);
  --navy-600: var(--brand-600);
  --navy-700: var(--brand-700);
  --navy-800: var(--brand-800);
  --navy-900: var(--brand-900);
  --navy-950: #0c2a20;
  --blue-50: var(--brand-50);
  --blue-500: var(--brand-600);
  --blue-600: var(--brand-700);
  --blue-700: var(--brand-800);
  --ink-900: var(--brand-900);

  /* 성공/초록도 브랜드와 같은 계열로 통일 (초록 두 종류가 싸우지 않게) */
  --green-50: var(--brand-50);
  --green-500: var(--brand-600);
  --green-600: var(--brand-700);

  /* 네비 면(사이드바) — 딥 그린 */
  --nav-bg: var(--brand-900);
  --nav-fg: #e7f3ec;
  --nav-fg-dim: #8fb8a5;
  --nav-border: rgba(255, 255, 255, 0.1);
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-active: rgba(255, 255, 255, 0.14);

  /* 크게 둥글린다 — 이 컨셉의 핵심이다 */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* 부드러운 그림자를 되살린다 — 카드를 면으로 띄운다 */
  --shadow-sm: 0 1px 2px rgba(35, 32, 27, 0.04), 0 4px 14px rgba(35, 32, 27, 0.05);
  --shadow-md: 0 6px 22px rgba(35, 32, 27, 0.09);
  --shadow-lg: 0 12px 36px rgba(35, 32, 27, 0.12);
}

/* 카드는 헤어라인이 아니라 그림자로 뜬다 */
.card,
.wallet-card,
.hm-card,
.form-page .card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* 버튼 — 더 둥글고 통통하게 */
.btn {
  border-radius: var(--radius);
  font-weight: 650;
}
.btn-lg {
  border-radius: var(--radius-lg);
}
.btn-primary {
  background: var(--brand-700);
  border-color: var(--brand-700);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-800);
  border-color: var(--brand-800);
}

/* 입력칸도 둥글게 */
.input,
.select,
.textarea,
.amount-field {
  border-radius: var(--radius);
}

/* 칩·배지도 컨셉에 맞춰 통통하게 */
.chip {
  border-radius: var(--radius-full);
}
.badge {
  border-radius: var(--radius-full);
  font-weight: 650;
}

/* 앱바·모바일바를 크림 위에 얹어 배경과 이어지게 */
.mobile-bar,
.appbar {
  background: var(--bg);
  border-bottom-color: var(--border);
}

/* 아이콘 배지(알림·활동)를 파스텔 원형으로 */
.icon-badge,
.ledger-ico {
  border-radius: 50%;
}


/* 유저 앱 — 모바일 우선, 1024px 이상에서 데스크톱 골격으로 전환 */
body {
  background: var(--bg);
}
#root {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
}
.page {
  padding: 0 20px 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   셸 — 좌측 사이드바 + 작업 영역 (데스크탑)

   상단 알약 탭을 버렸다. 항목이 늘면 가로로 밀리고, 그룹("거래"/"자산"/
   "계정")을 나눌 자리가 없고, 항목마다 한 줄 설명을 붙일 수도 없다.
   어드민·파트너 콘솔이 이미 사이드바라 세 앱이 같은 골격을 갖는다.

   모바일은 하단 탭을 유지한다. 좁은 화면에서 사이드바는 화면을 덮는
   서랍이 되고, 엄지가 닿는 곳은 아래다.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  #root { max-width: none; }

  /* 네비게이션 면 전체가 브랜드 색이다. 강조색을 버튼에만 조금씩 뿌리는
     것보다 큰 면 하나를 칠하는 편이 정체성이 훨씬 강하게 남는다. */
  .sidenav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 236px;
    display: flex;
    flex-direction: column;
    padding: 20px 12px 12px;
    background: var(--nav-bg);
    color: var(--nav-fg);
    overflow-y: auto;
  }
  /* 회원 앱 본문 래퍼.
     `.shell` 을 쓰면 안 된다 — theme.css 의 `.shell` 은 어드민·파트너
     콘솔용이라 `display:flex` 다. 그걸 물려받으면 .page 가 플렉스 항목이
     되어 내용 크기로 줄고, 화면 좌우가 크게 남는다(실제로 그랬다). */
  .app-main { margin-left: 236px; }

  .page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 32px 64px;
  }
  .page-wide { max-width: 1360px; }

  /* 데스크톱에서는 하단 탭바와 모바일 앱바를 감춘다 */
  .tabbar,
  .appbar { display: none; }
  .has-tabbar { padding-bottom: 64px; }
}

/* ── 모바일: 같은 사이드바를 서랍으로 쓴다 ─────────────────────────────
   내비 목록을 따로 만들지 않는다. 두 벌이 되면 항목을 추가할 때 한쪽만
   고치게 되고, 화면 크기에 따라 메뉴가 달라진다. */
@media (max-width: 1023px) {
  .sidenav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: 276px;
    max-width: 84vw;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 12px;
    background: var(--nav-bg);
    color: var(--nav-fg);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .sidenav.open { transform: translateX(0); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(7, 21, 40, 0.45);
  }
  /* 서랍이 열린 동안 뒤 화면이 같이 스크롤되면, 닫고 나서 엉뚱한 위치에
     가 있다 */
  body.nav-locked { overflow: hidden; }
}

/* ── 모바일 상단 바 ─────────────────────────────────────────────────── */
.mobile-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 54px;
  padding: 0 6px 0 4px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}
.mobile-bar-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.mobile-bar-btn {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.mobile-bar-btn:active { background: var(--grey-100); }
.mobile-bar .bell { flex: none; }

.sidenav-brand {
  display: block;
  padding: 4px 10px 18px;
}

.sidenav-groups { flex: 1; }
.sidenav-group + .sidenav-group {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.sidenav-group + .sidenav-group { border-top-color: var(--nav-border); }
.sidenav-group-label {
  padding: 0 10px;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-fg-dim);
}

.sidenav-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--nav-fg);
}
.sidenav-item .icon {
  flex: none;
  margin-top: 1px;
  color: var(--nav-fg-dim);
}
.sidenav-item:hover { background: var(--nav-hover); }
/* 현재 위치는 밝기로 표시한다. 어두운 면 위에서는 배경을 밝히는 것이
   테두리나 색상 변화보다 훨씬 확실하게 읽힌다. */
.sidenav-item.active {
  background: var(--nav-active);
}
.sidenav-item.active .icon { color: #fff; }
.sidenav-item.active .sidenav-item-label { font-weight: 650; color: #fff; }

.sidenav-item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sidenav-item-label {
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.35;
}
.sidenav-item-desc {
  font-size: 11px;
  color: var(--nav-fg-dim);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 안 읽은 알림 점 */
.sidenav-dot {
  position: absolute;
  right: 10px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-500);
}

.sidenav-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--nav-border);
}
.sidenav-foot .btn-text { color: var(--nav-fg-dim); }
.sidenav-foot .btn-text:hover { color: #fff; background: var(--nav-hover); }
.sidenav-user {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sidenav-user-name {
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 홈 상단 잔액 카드 */
.hero {
  /* 잉크 단색 — theme.css 의 .balance-card 와 같은 이유다.
     그라데이션 색면이 화면에서 제일 크면 버튼이 안 보인다. */
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
/* 오른쪽 위 옅은 원 — 넓은 단색 면이 밋밋해 보이지 않게 */
.hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -52px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}
.hero > * {
  position: relative;
}
.hero-label {
  font-size: 13px;
  opacity: 0.82;
  margin-bottom: 6px;
}
.hero-amount {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.hero-sub {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 6px;
}
.hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.hero-btn {
  flex: 1;
  height: 42px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center;
  transition: background-color 0.15s;
}
.hero-btn:hover {
  background: rgba(255, 255, 255, 0.26);
}
.hero-btn:active {
  transform: scale(0.97);
}
@media (max-width: 360px) {
  .hero {
    padding: 18px;
  }
  .hero-amount {
    font-size: 27px;
  }
}

.fixed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 700;
}

/* 판매글 카드 */
/* 판매글 카드 — 세로로 쌓는다 (금액 / 판매자 / 조건·액션) */
.listing {
  display: block;
  padding: 16px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.listing:active {
  transform: scale(0.99);
}
.listing:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow);
}
.listing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.listing-seller {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--grey-100);
}
.listing-seller .row-item-title,
.listing-seller .row-item-sub {
  display: block;
}
.listing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--grey-100);
}
.trust {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* 배분 미리보기 */
.alloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--grey-50);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

/*
   로그인 — 서비스의 첫인상이다.

   흰 배경에 입력 두 개만 떠 있으면 "공사 중인 사이트" 로 읽힌다. 위쪽에
   브랜드 네이비를 깔고 폼을 카드로 띄워, 앱 안의 잔액 카드와 같은 언어를
   쓰게 한다 — 로그인부터 지갑까지 같은 브랜드로 이어진다.
*/
.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  background:
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-800) 42%, transparent 42.01%),
    var(--bg-sunken);
}
.auth-wrap .brand { color: #fff; }
.auth-wrap .brand .logo-word { color: #fff; }
.auth-wrap .brand .logo-sub { color: var(--navy-200); }

.auth-wrap > form,
.auth-wrap > .auth-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 10px 34px rgba(11, 31, 56, 0.16);
}
/* 폼 아래 보조 링크(회원가입)는 카드 밖 어두운 배경 위에 놓일 수 있어
   카드에 함께 담는다 */
.auth-wrap .row { margin-top: 14px; }
.brand {
  text-align: center;
  margin-bottom: 36px;
}
.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--blue-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   워크스페이스 배치

   이전에는 "좌: 잔액·입력 카드 / 우: 좁은 목록" 이었다. 화면에서 가장 큰
   면적을 요약이 차지하고, 정작 고르는 대상인 판매글이 구석에 밀려 있었다.

   뒤집었다:
    · 잔액은 페이지 헤더의 한 줄로 — 확인용 숫자지 조작 대상이 아니다
    · 좌측은 좁은 **조작 레일**(금액·정렬) — 카드 테두리 없이 규칙선만
    · 우측이 페이지 폭을 그대로 쓰는 시장

   금액 입력도 하나로 합쳤다. 예전엔 "빠른 구매 수량"과 "금액 필터"가 따로
   있었는데 사용자가 넣는 값은 같다. 하나를 넣으면 목록이 걸러지고, 그대로
   매칭까지 갈 수 있다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2단 워크스페이스 ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .workspace {
    display: grid;
    /* 레일은 조작만 담으므로 좁게 고정한다. 넓히면 시장이 좁아진다. */
    grid-template-columns: 244px minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
  }
  .rail {
    position: sticky;
    top: 88px;
  }
}

/* ── 조작 레일 ──────────────────────────────────────────────────────────── */
/* 지갑의 잔액 카드와 아래 버튼 무리 사이. 붙어 있으면 버튼이 카드의 일부로
   읽혀서, 카드가 끝났다는 것을 여백이 말해줘야 한다. */
.rail-hero { margin-bottom: var(--sp-6); }

.rail-group + .rail-group {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.rail-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}
.rail-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
/* 레일은 좁아서 상자 높이를 줄인다. 글꼴만 줄이고 높이를 두면 위아래
   여백이 과해 입력이 비어 보인다. */
.rail .input-amount-wrap { height: 52px; }
.rail .input-amount { font-size: 21px; }
.rail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-3) 0 var(--sp-4);
}
.rail-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-3);
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.rail-clear {
  margin-top: var(--sp-2);
  padding-left: 0;
}

/* 정렬 목록 — 세그먼트 버튼 대신 세로 목록. 각 항목이 왜 그 순서인지
   한 줄로 설명할 자리가 생긴다. */
.rail-list {
  display: flex;
  flex-direction: column;
}
.rail-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-2) var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
}
.rail-item:hover { background: var(--grey-50); }
.rail-item.active {
  border-left-color: var(--ink-900);
  background: var(--grey-50);
}
.rail-item-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.rail-item.active .rail-item-label { color: var(--text); }
.rail-item-desc {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* ── 시장 상단 바 ───────────────────────────────────────────────────────── */
.market-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: 0;
  border-bottom: 1px solid var(--grey-300);
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.market-count b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.market-filter-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
}
.market-hint { color: var(--grey-400); }

@media (max-width: 1023px) {
  .rail-group:first-child { margin-bottom: var(--sp-6); }
  .workspace > * + * { margin-top: var(--sp-6); }
  .market-bar { margin-top: var(--sp-2); }
}


/* 레일 안의 최근 거래.

   .row-item 은 "아이콘 + 본문 + 배지" 를 한 줄에 놓는 공용 행인데, 레일 폭
   (244px)에서는 세 조각이 다 들어가지 않아 글자가 끊겨 줄바꿈됐다.
   레일에서는 배지를 본문 아래로 내려 2줄로 쌓는다. */
.rail-group .row-item {
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.rail-group .row-item .row-item-body { min-width: 0; }
.rail-group .row-item .row-item-sub {
  display: block;
  margin-top: 1px;
}
.rail-group .row-item .badge {
  margin-left: auto;
  flex: none;
}

/* 칩 3개가 244px 안에 한 줄로 들어가야 한다. 두 줄이 되면 레일이 세로로
   늘어나 아래 정렬 목록이 접힌다. */
.rail-chips .chip {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  font-size: 12px;
  justify-content: center;
}

/* 레일 안의 큰 숫자 — 카드 없이도 잔액이 제일 먼저 읽혀야 한다 */
.rail-figure {
  font-size: 30px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.8px;
}
.rail-figure-sub {
  margin-top: var(--sp-1);
  font-size: 13px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.rail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── 원장 목록 ──────────────────────────────────────────────────────────
   "종류 / 시각 / 금액" 세 칸 고정 그리드다. 이전에는 flex 로 시각과 금액이
   붙어 있어 행마다 금액 위치가 달랐다 — 세로로 안 맞으면 훑어볼 수 없다. */
.ledger { border-bottom: 1px solid var(--grey-300); }
.ledger-row {
  display: grid;
  /* 아이콘 · 제목/시각 · 금액 */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px var(--sp-3);
  margin: 0 calc(var(--sp-3) * -1);
  border-bottom: 1px solid var(--border);
}
.ledger-row:hover { background: var(--grey-50); }

/* 종류 아이콘. 들어온 돈만 초록 배경 — 전부 칠하면 입금이 안 보인다 */
.ledger-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-100);
  color: var(--grey-600);
  flex: none;
}
.ledger-ico.is-in {
  background: var(--green-50);
  color: var(--green-600);
}

.ledger-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ledger-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ledger-amount {
  text-align: right;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   홈 — 진행 중 거래 · 조작 바
   ═══════════════════════════════════════════════════════════════════════════ */

/* 진행 중인 거래 띠.

   입금 타이머가 30분이라, 다른 화면을 보다 놓치면 거래가 만료되고 에스크로가
   판매자에게 돌아간다. 홈 맨 위에 두는 이유다. 없으면 아무것도 그리지 않는다
   — 빈 상자가 상시 자리를 차지하면 진짜 있을 때의 주의도가 떨어진다. */
.live-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.live-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.live-item:hover { background: var(--grey-50); border-color: var(--grey-400); }
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  flex: none;
}
.live-body { display: flex; flex-direction: column; gap: 1px; }
.live-title {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.live-role {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 550;
  color: var(--text-tertiary);
}
.live-sub { font-size: 11.5px; color: var(--text-tertiary); }

/* 조작 바 — 금액 입력 + 칩 + 실행이 한 줄 */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.toolbar-buy {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.toolbar-amount {
  width: 230px;
  height: 44px;
}
.toolbar-amount .input-amount { font-size: 18px; }
.toolbar-chips { display: flex; gap: 6px; }
.toolbar-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

@media (max-width: 720px) {
  /* 좁은 화면에서는 금액 입력이 한 줄을 다 쓴다 — 옆에 칩이 붙으면
     둘 다 눌리지 않을 만큼 좁아진다 */
  .toolbar-buy { width: 100%; }
  .toolbar-amount { width: 100%; }
  .toolbar-chips { width: 100%; }
  .toolbar-chips .chip { flex: 1; justify-content: center; }
  .toolbar-buy > .btn-primary { width: 100%; }
  .toolbar-meta { width: 100%; }
}

/* ── 설정 화면 ──────────────────────────────────────────────────────────
   설정은 항목의 나열이지 독립된 덩어리의 모음이 아니다. 카드로 감싸면
   항목 사이 간격이 카드 여백에 먹혀 어디까지가 한 묶음인지 흐려진다. */
.settings { max-width: 680px; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.check-row:last-of-type { border-bottom: none; }
.check-row .icon { flex: none; margin-top: 1px; }
.check-text { display: flex; flex-direction: column; gap: 2px; }
.check-label { font-size: 14px; font-weight: 550; }
.check-desc { font-size: 12.5px; color: var(--text-tertiary); }

.section-note {
  margin-top: var(--sp-2);
  font-size: 13px;
  font-weight: 550;
}


/* 사이드바 안의 로고·아바타는 어두운 면 위에 놓인다 */
.sidenav .logo-word { color: #fff; }
.sidenav .logo-mark { color: var(--navy-200); }
@media (max-width: 720px) {
  /* 좁은 화면에서는 정렬 칩과 건수만 남긴다. 안내 문구까지 넣으면 남는
     폭이 없어 세 줄로 찌그러지고, 정작 정렬 칩을 가린다. */
  .market-hint { display: none; }
  .market-bar { gap: var(--sp-2); }
  .market-bar .segmented { flex: 1; min-width: 0; }
}

/* 데스크탑에는 모바일 바가 없다 (사이드바가 항상 보인다).

   이 규칙은 `.mobile-bar { display: flex }` **뒤에** 있어야 한다 — 특이도가
   같아서 순서로 갈린다. 앞에 뒀더니 데스크탑에도 햄버거가 떴다. */
@media (min-width: 1024px) {
  .mobile-bar,
  .nav-backdrop { display: none; }
  .sidenav { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   지갑 홈

   첫 화면의 주인공은 잔액이다. 실제 사용 빈도가 잔액 확인 > 결제 > 구매
   순인데, 예전 홈은 판매글 표였다 — 가장 덜 하는 일이 첫 화면을 차지했다.
   시장은 사라지지 않고 "충전" 뒤로 들어간다.
   ═══════════════════════════════════════════════════════════════════════════ */

.wallet-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-950) 100%);
  color: var(--nav-fg);
  border-radius: 16px;
  padding: 24px 22px 8px;
  margin-bottom: var(--sp-5);
}
/* 브랜드 마크의 원호를 카드 배경에 크게 깔아둔다 — 로고를 또 박는 대신
   형태만 빌린다. 은은해야 하므로 4% 만 보이게 한다. */
.wallet-hero::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border: 26px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}
.wallet-hero-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--nav-fg-dim);
  margin-bottom: var(--sp-2);
}
.wallet-hero-amount {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1.1;
  color: #fff;
}
.wallet-hero-amount .amount-unit { color: var(--navy-200); }
.wallet-hero-krw {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--nav-fg-dim);
  font-variant-numeric: tabular-nums;
}
.wallet-hero-locked {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--navy-200);
}

/* 주 동작 넷. 잔액 바로 아래에 붙여 "이 돈으로 무엇을 하는가" 가 한눈에
   들어오게 한다. */
.wallet-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--nav-border);
}
.wallet-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px 14px;
  border-radius: var(--radius-sm);
  color: var(--nav-fg);
  font-size: 12.5px;
  font-weight: 550;
}
.wallet-action:hover { background: var(--nav-hover); }
.wallet-action:active { background: var(--nav-active); }

/* ── 홈 상단 2열 ──────────────────────────────────────────────────────────
   데스크탑에서 잔액 카드 혼자 왼쪽에 서 있으면 오른쪽 절반이 통째로 빈다.
   최근 활동을 옆에 세워 첫 화면에서 "잔액 + 방금 무슨 일이 있었나" 가
   한눈에 들어오게 한다. 모바일에서는 원래대로 세로로 쌓인다. */
.home-top { display: block; }
/* 모바일에서는 세로로 쌓인다 — 카드와 목록 사이 간격을 되살린다 */
.home-top > .home-top-side { margin-top: var(--sp-6); }
@media (min-width: 1024px) {
  .home-top {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: start;
  }
  /* 카드와 진행 중 거래는 왼쪽 열에 쌓인다 */
  .home-top > .wallet-hero,
  .home-top > .live-strip { grid-column: 1; }
  /* 최근 활동이 오른쪽 열 전체를 차지한다 */
  .home-top > .home-top-side {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin-top: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   헤더 알림 패널

   종을 누르면 그 자리에서 최근 알림을 본다. 예전에는 알림 페이지로 이동해야
   했는데, 확인 하나 하려고 보던 화면을 떠나야 했다 — 거래 중이면 특히 곤란하다.
   ═══════════════════════════════════════════════════════════════════════════ */

.notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.notif-pop {
  position: fixed;
  z-index: 71;
  top: 60px;
  right: 12px;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 480px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.notif-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.notif-pop-title { font-size: 14px; font-weight: 650; }
.notif-pop-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3);
}
.notif-pop-empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}
.notif-pop-foot {
  display: block;
  padding: var(--sp-3);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--link);
  border-top: 1px solid var(--border);
}
.notif-pop-foot:hover { background: var(--grey-50); }

@media (min-width: 1024px) {
  /* 데스크탑에서는 사이드바 알림 항목 옆에서 열린다 */
  .notif-pop { top: 20px; left: 248px; right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   거래 카드

   왼쪽 색 레일이 상태다 — 배지 글자를 읽기 전에 색으로 먼저 잡힌다.
   진행 중 거래의 남은 시간은 배지보다 눈에 띄어야 한다. 입금 타이머가
   30분이라 이 숫자를 놓치면 에스크로가 판매자에게 돌아간다.
   ═══════════════════════════════════════════════════════════════════════════ */
.trade-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trade-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 14px 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
  overflow: hidden;
}
.trade-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 10px rgba(11, 31, 56, 0.06);
}
.trade-card:active { transform: translateY(1px); }

/* 상태 레일 — 배지 색과 같은 계열. **진행 중에만** 칠한다.
   종결 카드까지 회색 레일을 두면 목록 전체 왼쪽에 회색 세로줄이
   잔상처럼 남는다 — 레일은 "지금 신경 쓸 것" 의 표시여야 한다. */
.trade-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
}
.trade-card.rail-blue::before { background: var(--accent-500); }
.trade-card.rail-yellow::before { background: var(--yellow-500); }
.trade-card.rail-green::before { background: var(--green-500); }
.trade-card.rail-red::before { background: var(--red-500); }

.trade-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.trade-card-ico.is-buy { background: var(--accent-50); color: var(--accent-600); }
.trade-card-ico.is-sell { background: var(--grey-100); color: var(--grey-600); }

.trade-card-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.trade-card-title { font-size: 16px; font-weight: 700; }
.trade-card-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trade-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.trade-card-due {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.trade-card-due.is-soon { color: var(--red-500); }
.trade-card-due.is-over { color: var(--red-500); }
.trade-card-chev { color: var(--grey-400); flex: none; }

/* 빠른 구매 — 시장 사정 요약. 입력 전에 "얼마까지 바로 되는지" 를 알려준다 */
.buy-context {
  margin: var(--sp-4) 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.buy-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
}
.buy-context-row + .buy-context-row { border-top: 1px solid var(--border); }
.buy-context-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-secondary);
}
.buy-context-k svg { color: var(--grey-500); }
.buy-context-v {
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 지갑 카드 하단의 2분할 — 사용 가능 / 잠금. 표 대신 카드 안에서 끝낸다 */
.wallet-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--nav-border);
}
.wallet-split-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 4px 14px;
}
.wallet-split-cell + .wallet-split-cell {
  border-left: 1px solid var(--nav-border);
  padding-left: var(--sp-4);
}
.wallet-split-k {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--nav-fg-dim);
}
.wallet-split-v {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.wallet-split-v.is-locked { color: var(--yellow-500); }

/* 결제 대상 확인 카드 — 돈이 가는 곳이므로 힌트가 아니라 확답이어야 한다 */
.merchant-confirm {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--green-500);
  border-radius: 10px;
  background: var(--green-50);
}
.merchant-confirm-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.merchant-confirm-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.merchant-confirm-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.merchant-confirm-sub { font-size: 12px; color: var(--green-600); }
.merchant-confirm-check { margin-left: auto; color: var(--green-600); flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   홈 — 할 일 중심 (task-driven)

   예전 홈은 "잔액 + 판매글 표" 로, 정보는 다 있었지만 **무엇을 해야 하는지**는
   사용자가 스스로 판단해야 했다. 이 화면은 순서를 뒤집는다:
   지금 처리할 것 → 잔액 → 자주 하는 동작 → 최근 활동.
   할 일이 없으면 그 블록 자체가 사라져 화면이 조용해진다.
   ═══════════════════════════════════════════════════════════════════════════ */

.hm { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }

/* ── 지금 할 일 ─────────────────────────────────────────────────────────── */
.hm-todos { display: flex; flex-direction: column; gap: 8px; }
.hm-todos-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; }
.hm-todos-title { font-size: 13px; font-weight: 700; color: var(--grey-800); }
.hm-todos-count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--navy-800);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.todo {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.todo:active { transform: scale(0.995); }
/* 내 차례 — 파랑. 기다리는 중 — 회색. 위험 — 빨강. 색이 곧 우선순위다. */
.todo-act { border-color: var(--navy-200); background: var(--navy-50); }
.todo-danger { border-color: var(--red-200); background: var(--red-50); }
.todo-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex: none;
  background: var(--grey-100);
  color: var(--grey-600);
}
.todo-act .todo-ico { background: var(--navy-100); color: var(--navy-700); }
.todo-danger .todo-ico { background: var(--red-100); color: var(--red-600); }
.todo-body { flex: 1; min-width: 0; }
.todo-title {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--grey-900);
  line-height: 1.35;
}
.todo-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--grey-500);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.todo-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.todo-time {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-700);
}
.todo-danger .todo-time { color: var(--red-600); }
.todo .todo-act {
  font-size: 12px;
  font-weight: 650;
  color: var(--navy-700);
  background: none;
  border: 0;
  padding: 0;
}
.todo-danger .todo-act { color: var(--red-600); }
.todo-wait .todo-act { color: var(--grey-500); }

/* ── 잔액 ──────────────────────────────────────────────────────────────── */
.hm-balance {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--navy-700), var(--navy-950));
  color: #fff;
}
.hm-balance::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -80px;
  width: 220px;
  height: 220px;
  border: 28px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}
.hm-balance.is-muted { opacity: 0.62; }
.hm-balance-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--navy-100);
  margin-bottom: 6px;
}
.hm-balance-amount {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.05;
}
.hm-balance-amount .amount-unit { color: var(--navy-200); font-size: 0.5em; }
.hm-balance-sub {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--navy-100);
  font-variant-numeric: tabular-nums;
}
.hm-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

/* ── 바로 하기 ─────────────────────────────────────────────────────────── */
.hm-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hm-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.06s;
}
.hm-act:active { transform: scale(0.97); }
.hm-act[disabled] { opacity: 0.42; cursor: not-allowed; }
.hm-act-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grey-100);
  color: var(--grey-700);
  margin-bottom: 2px;
}
/* 결제는 가장 자주 하는 일이라 색으로 구분한다 */
.hm-act-primary { border-color: var(--navy-200); background: var(--navy-50); }
.hm-act-primary .hm-act-ico { background: var(--navy-800); color: #fff; }
.hm-act-label { font-size: 12.5px; font-weight: 650; color: var(--grey-900); }
.hm-act-sub { font-size: 10.5px; color: var(--grey-500); }

/* ── 최근 활동 · 가이드 유도 ────────────────────────────────────────────── */
.hm-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elevated);
  padding: 4px 14px 6px;
}
.hm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 6px;
}
.hm-card-title { font-size: 13.5px; font-weight: 650; color: var(--grey-900); }

.hm-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px dashed var(--navy-200);
  background: var(--navy-50);
}
.hm-guide-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--navy-700);
  flex: none;
}
.hm-guide-body { flex: 1; min-width: 0; font-size: 12.5px; color: var(--grey-600); }
.hm-guide-body b { display: block; font-size: 14px; color: var(--grey-900); margin-bottom: 1px; }
.hm-guide .chevron { color: var(--navy-400, var(--grey-400)); flex: none; }

@media (min-width: 1024px) {
  .hm { max-width: 620px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   하단 탭 — 가운데 결제를 띄운다

   실제 사용 빈도는 결제가 압도적인데 다섯 칸 중 평범한 한 칸이었다.
   엄지가 가장 닿기 쉬운 가운데에 크게 둔다.
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-raised { position: relative; }
.tab-raised .tab-ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 31, 56, 0.28);
  border: 3px solid var(--bg-elevated);
  transition: transform 0.1s;
}
.tab-raised:active .tab-ico { transform: scale(0.94); }
.tab-raised .tab-label { margin-top: 1px; font-weight: 650; color: var(--navy-800); }
/* 띄운 탭에는 알약 배경을 깔지 않는다 — 원과 겹쳐 지저분해진다 */
.tab-raised.active::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   사용 가이드
   ═══════════════════════════════════════════════════════════════════════════ */
.gd { padding-bottom: 20px; }
.gd-hero { padding: 6px 2px 18px; }
.gd-hero-title { font-size: 24px; font-weight: 700; letter-spacing: -0.6px; color: var(--grey-900); }
.gd-hero-sub { margin-top: 6px; font-size: 13.5px; color: var(--grey-500); line-height: 1.5; }

/* 목차 — 가로 스크롤 칩. 긴 문서에서 원하는 곳으로 바로 간다 */
.gd-nav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 14px;
  scrollbar-width: none;
}
.gd-nav::-webkit-scrollbar { display: none; }
.gd-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey-600);
  white-space: nowrap;
}
.gd-nav-item .icon { color: var(--grey-400); }
.gd-nav-item.active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.gd-nav-item.active .icon { color: #fff; }

.gd-sec {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elevated);
  margin-bottom: 10px;
  overflow: hidden;
}
.gd-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
}
.gd-sec-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--navy-50);
  color: var(--navy-700);
  flex: none;
}
.gd-sec-title { font-size: 15px; font-weight: 680; color: var(--grey-900); }
/* 선택한 절만 펼친다 — 전부 펼치면 스크롤이 끝없다 */
.gd-sec-body { display: none; padding: 0 16px 18px; }
.gd-sec.is-open .gd-sec-body { display: block; }
.gd-sec.is-open { border-color: var(--navy-200); }

.gd-p { font-size: 13.5px; line-height: 1.65; color: var(--grey-700); margin: 0 0 12px; }
.gd-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--grey-50);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--grey-600);
}

/* 핵심 사실 3줄 */
.gd-facts { display: flex; flex-direction: column; gap: 1px; margin: 0 0 14px; background: var(--border); border-radius: 10px; overflow: hidden; }
.gd-fact { display: flex; justify-content: space-between; gap: 10px; padding: 10px 13px; background: var(--bg-elevated); font-size: 12.5px; }
.gd-fact b { color: var(--grey-700); font-weight: 600; }
.gd-fact span { color: var(--grey-900); font-weight: 650; text-align: right; }

/* 단계 — 번호가 흐름을 만든다 */
.gd-step { display: flex; gap: 11px; padding: 10px 0; }
.gd-step + .gd-step { border-top: 1px solid var(--grey-100); }
.gd-step-n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
  margin-top: 1px;
}
.gd-step-title { font-size: 13.5px; font-weight: 650; color: var(--grey-900); }
.gd-step-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--grey-600); }

/* 안전 수칙 — 규칙 하나가 한 덩어리 */
.gd-rule {
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--grey-600);
}
.gd-rule b { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--grey-900); }
.gd-rule-danger { border-color: var(--red-200); background: var(--red-50); }
.gd-rule-danger b { color: var(--red-600); }

/* 문제 해결 Q/A */
.gd-qa { padding: 12px 0; }
.gd-qa + .gd-qa { border-top: 1px solid var(--grey-100); }
.gd-qa b { display: block; font-size: 13.5px; font-weight: 650; color: var(--grey-900); margin-bottom: 4px; }
.gd-qa span { display: block; font-size: 12.5px; line-height: 1.6; color: var(--grey-600); }

.gd-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   새 컨셉 "포켓" — 홈 컴포넌트 상세

   위 토큰만 덮어도 전체 톤은 바뀌지만, 홈의 잔액·타일·탭은 컨셉을 가장 강하게
   보여주는 자리라 개별로 다듬는다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 잔액 카드 — 딥 그린 그라데이션 + 큰 라운드 + 떠 있는 그림자 */
.hm-balance {
  background: linear-gradient(150deg, var(--brand-700) 0%, var(--brand-900) 100%);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  padding: 22px 22px 24px;
}
.hm-balance::before {
  border-color: rgba(255, 255, 255, 0.06);
}
.hm-balance-label { color: var(--brand-100); }
.hm-balance-amount .amount-unit { color: var(--brand-300); }
.hm-balance-sub { color: var(--brand-100); }

/* 바로 하기 타일 — 각 동작이 자기 파스텔 색을 갖는다.
   똑같은 회색 타일 넷보다, 색이 다르면 손이 기억한다. */
.hm-acts { gap: 10px; }
.hm-act {
  border: none;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 15px 6px 13px;
}
.hm-act-ico {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}
.hm-act:nth-child(1) .hm-act-ico { background: var(--brand-700); color: #fff; }
.hm-act:nth-child(2) .hm-act-ico { background: var(--peach-100); color: var(--peach-500); }
.hm-act:nth-child(3) .hm-act-ico { background: var(--lav-100); color: var(--lav-500); }
.hm-act:nth-child(4) .hm-act-ico { background: var(--mint-100); color: var(--mint-500); }
.hm-act-primary { background: var(--card); }
.hm-act-label { font-size: 13px; }

/* 할 일 카드 — 라운드 키우고 그림자로 띄운다 */
.todo {
  border: none;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.todo-act { background: var(--brand-50); box-shadow: none; border: 1.5px solid var(--brand-100); }
.todo-danger { background: #fef4f2; box-shadow: none; border: 1.5px solid var(--red-100); }
.todo-ico { border-radius: 14px; }
.todo-act .todo-ico { background: var(--brand-100); color: var(--brand-700); }
.todo-time, .todo .todo-act { color: var(--brand-700); }
.hm-todos-count { background: var(--brand-700); }

/* 활동 카드·가이드 유도 */
.hm-card { border-radius: 20px; box-shadow: var(--shadow-sm); border: none; }
.hm-guide {
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--sun-100), var(--peach-100));
  box-shadow: var(--shadow-sm);
}
.hm-guide-ico { background: #fff; color: var(--peach-500); }
.hm-guide .chevron { color: var(--peach-500); }

/* 하단 탭 — 크림 위에 얹고, 띄운 결제 버튼을 그린으로 */
.tabbar {
  background: var(--card);
  border-top: none;
  box-shadow: 0 -2px 20px rgba(35, 32, 27, 0.06);
}
.tab.active { color: var(--brand-700); }
.tab.active::before { background: var(--brand-50); }
.tab-raised .tab-ico {
  background: linear-gradient(145deg, var(--brand-600), var(--brand-800));
  box-shadow: 0 6px 18px rgba(17, 148, 166, 0.4);
  border-color: var(--card);
}
.tab-raised .tab-label { color: var(--brand-700); }

/* 활동 내역 아이콘 — 파스텔 원형 */
.ledger-ico { background: var(--cream-deep); color: var(--text-secondary); }
.ledger-ico.is-in { background: var(--brand-100); color: var(--brand-700); }

/* 로그인/가입 히어로 배경도 그린으로 */
.auth-wrap {
  background:
    linear-gradient(180deg, var(--brand-900) 0%, var(--brand-700) 42%, transparent 42.01%),
    var(--bg);
}
.auth-wrap > form,
.auth-wrap > .auth-card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* 가이드 히어로·섹션도 컨셉에 맞춘다 */
.gd-sec { border: none; box-shadow: var(--shadow-sm); border-radius: 20px; }
.gd-sec.is-open { border: none; box-shadow: var(--shadow-md); }
.gd-sec-ico { background: var(--brand-50); color: var(--brand-700); border-radius: 13px; }
.gd-nav-item.active { background: var(--brand-700); border-color: var(--brand-700); }
.gd-step-n { background: var(--brand-700); }

/* 마켓/판매글 카드도 그림자 카드로 */
.market-row {
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  border-radius: 18px !important;
}

/* 알림 — 새 컨셉에서 왼쪽 인셋 막대가 큰 라운드와 어긋나 삐죽 나온다.
   막대 대신 파스텔 배경 + 안 읽음 점으로 바꾼다. */
.notif { margin: 0; padding: 14px; border-radius: 16px; }
.notif + .notif { margin-top: 8px; }
.notif-unread {
  background: var(--brand-50);
  box-shadow: none;
  position: relative;
}
.notif-unread:hover { background: var(--brand-100); }
.notif-unread .notif-title { color: var(--brand-800); }
/* 안 읽음 점 — 오른쪽 위 */
.notif-unread::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-600);
}
.notif[role='link']:hover { background: var(--cream-deep); }

/* 아이콘 배지 톤도 파스텔로 (알림·거래 카드) */
.icon-badge { background: var(--cream-deep); color: var(--text-secondary); }
.icon-badge-green, .icon-badge-blue { background: var(--brand-100); color: var(--brand-700); }
.icon-badge-red { background: #fdecea; color: var(--red-600); }
.icon-badge-yellow { background: var(--sun-100); color: var(--sun-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   벤토 그리드 홈 — 레이아웃 자체를 바꾼다

   세로로 균일한 카드를 쌓던 구조를 버렸다. 4열 격자에 크기가 다른 타일을
   박는다: 잔액은 2×2 로 크게, 결제는 세로로 길게, 나머지는 작은 정사각.
   크기 차이가 곧 위계고, 한 화면에 많은 것이 들어오면서도 스크롤이 준다.
   ═══════════════════════════════════════════════════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 6px 0 16px;
}

/* 인사 헤더 — 상단바 대신 이름을 부른다 */
.bento-hi {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 2px;
}
.bento-hi-name { font-size: 21px; font-weight: 750; letter-spacing: -0.5px; color: var(--text); }
.bento-hi-sub { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
.bento-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  flex: none;
}
.bento-bell .bell-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--peach-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--card);
}

/* 모든 타일의 공통 — 크게 둥근 카드 + 부드러운 그림자 */
.bt {
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  background: var(--card);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.bt:active { transform: scale(0.985); transition: transform 0.08s; }

/* ── 잔액 — 2×2 대형 타일 ─────────────────────────────────────────────── */
.bt-balance {
  grid-column: span 4;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  min-height: 168px;
  background: linear-gradient(150deg, var(--brand-700) 0%, var(--brand-900) 100%);
  color: #fff;
}
.bt-balance::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  border: 30px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.bt-balance.is-muted { opacity: 0.6; }
.bt-balance-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.bt-balance-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--brand-100); }
.bt-balance-go { color: var(--brand-300); }
.bt-balance-amount {
  margin-top: auto;
  padding-top: 18px;
  font-size: 42px;
  font-weight: 750;
  letter-spacing: -1.6px;
  line-height: 1;
  position: relative;
}
.bt-balance-amount .amount-unit { font-size: 0.42em; color: var(--brand-300); }
.bt-balance-krw { margin-top: 6px; font-size: 14px; color: var(--brand-100); font-variant-numeric: tabular-nums; position: relative; }
.bt-balance-lock {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  color: #fff;
  position: relative;
  width: fit-content;
}
.bt-balance-lock.is-quiet { background: transparent; padding: 0; color: var(--brand-100); }

/* ── 액션 타일 ─────────────────────────────────────────────────────────── */
.bt-act {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  text-align: left;
  min-height: 96px;
  cursor: pointer;
  border: none;
}
.bt-act[disabled] { opacity: 0.4; cursor: not-allowed; }
.bt-act-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
.bt-act-label { display: block; font-size: 15px; font-weight: 700; }
.bt-act-sub { display: block; font-size: 11.5px; margin-top: 1px; opacity: 0.7; }

/* 결제 — 세로로 긴 강조 타일 (2행). 색으로도 구분한다 */
.bt-pay {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  color: #fff;
  min-height: 200px;
}
.bt-pay .bt-act-ico { background: rgba(255, 255, 255, 0.2); color: #fff; width: 52px; height: 52px; }
.bt-pay .bt-act-label { font-size: 19px; }
.bt-pay .bt-act-sub { opacity: 0.85; font-size: 13px; }

/* 충전·보내기 — 결제 오른쪽에 세로로 쌓인다 (각 2열) */
.bt-charge, .bt-send { grid-column: span 2; }
/* 팔기 — 가로 전체 타일. 격자 아래를 꽉 채워 빈칸을 없앤다 */
.bt-sell {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 14px 16px;
}
.bt-sell .bt-act-text { flex: 1; }
.bt-charge .bt-act-ico { background: var(--peach-100); color: var(--peach-500); }
.bt-send .bt-act-ico { background: var(--lav-100); color: var(--lav-500); }
.bt-sell .bt-act-ico { background: var(--sun-100); color: var(--sun-500); }
.bt-act:not(.bt-pay) .bt-act-label { color: var(--text); }
.bt-act:not(.bt-pay) .bt-act-sub { color: var(--text-tertiary); opacity: 1; }

/* ── 할 일 — 가로 전체 ─────────────────────────────────────────────────── */
.bt-todos {
  grid-column: 1 / -1;
  padding: 14px 16px 6px;
  background: var(--card);
}
.bt-todos-head { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.bt-todos-n {
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand-700); color: #fff;
  font-size: 11px; font-weight: 700;
}
.bt-todo {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.bt-todo + .bt-todo { border-top: 1px solid var(--border); }
.bt-todo-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--cream-deep); color: var(--text-secondary);
}
.bt-todo-act .bt-todo-ico { background: var(--brand-100); color: var(--brand-700); }
.bt-todo-danger .bt-todo-ico { background: #fdecea; color: var(--red-600); }
.bt-todo-body { flex: 1; min-width: 0; }
.bt-todo-title { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
.bt-todo-desc {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 1px; font-size: 12px; color: var(--text-tertiary);
}
.bt-todo-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.bt-todo-time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-700); }
.bt-todo-danger .bt-todo-time { color: var(--red-600); }
.bt-todo-cta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 650; color: var(--brand-700); }
.bt-todo-danger .bt-todo-cta { color: var(--red-600); }

/* ── 최근 활동 / 가이드 — 가로 전체 ────────────────────────────────────── */
.bt-recent { grid-column: 1 / -1; padding: 6px 16px 8px; }
.bt-recent-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; }
.bt-recent-title { font-size: 14px; font-weight: 700; color: var(--text); }

.bt-guide {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 20px;
  background: linear-gradient(135deg, var(--sun-100), var(--peach-100));
}
.bt-guide-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: #fff; color: var(--peach-500); margin-bottom: 8px;
}
.bt-guide-title { font-size: 15px; font-weight: 700; color: var(--text); }
.bt-guide-sub { font-size: 12.5px; color: var(--text-secondary); }

@media (min-width: 1024px) {
  .bento { max-width: 640px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Web3 지갑 룩 (라이트 모드)

   레퍼런스는 Rainbow·Phantom·Zerion 같은 지갑 앱의 **라이트 테마**다.
   특징이 뚜렷하다:

     · 흰 바탕이 아니라 **메시 그라데이션**(옅은 보라·시안·핑크가 번진 면)
     · 그 위에 **반투명 글래스 카드** (blur + 얇은 흰 테두리)
     · 잔액은 **그라데이션 텍스트**로 크게
     · 동작은 **알약 버튼 줄** (Send/Receive/Swap)
     · 하단은 **플로팅 독** — 화면에 붙지 않고 떠 있다

   데스크탑에서는 12열로 펼쳐 좌우 여백을 실제 정보로 채운다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 클라우드 틸 팔레트 — 코인 심볼(청록 원판 + 흰 구름)이 축이다 */
  --w3-violet: #12a9bc;
  --w3-violet-d: #0d8496;
  --w3-cyan: #4fd3de;
  --w3-pink: #ff8a76;
  --w3-grad: linear-gradient(135deg, #12a9bc 0%, #2cb4c4 50%, #4fd3de 100%);
  --w3-grad-soft: linear-gradient(135deg, rgba(17, 148, 166, 0.14), rgba(79, 211, 222, 0.14));
  --w3-glass: #ffffff;
  --w3-glass-line: rgba(19, 43, 49, 0.07);
  --w3-ink: #121517;
  --w3-dim: #4d5c61;
}

/* 배경 — 메시 그라데이션. 흰 바탕과 결정적으로 갈리는 지점이다 */
body {
  /* 은행앱의 배경은 조용하다 — 메시를 걷어내고 옅은 틸 한 겹만 남긴다.
     콘텐츠(흰 카드·잉크 숫자)가 주인공이고 배경은 온도만 만든다. */
  background:
    radial-gradient(1100px 460px at 50% -8%, rgba(17, 148, 166, 0.10), transparent 65%),
    #f2f7f8;
  background-attachment: fixed;
}
#root { background: transparent; max-width: none; }

/* 회원 앱 전역 톤을 Web3 로 */
.app-main { color: var(--w3-ink); }
/* 상단 바(스티키)와 첫 콘텐츠 사이 숨 쉴 간격 — 없으면 제목이 바에 붙어
   잘려 보인다 */
.page { padding: 12px 18px 96px; }

/*
 * 상단 바가 없는 화면 — 제목이 화면 맨 위에 바로 온다.
 *
 * 12px 은 스티키 바가 있던 시절의 값이라, 바를 걷어낸 뒤로는 제목이 상태
 * 표시줄에 거의 붙었다. 노치·상태바 높이(safe-area)를 더해 띄운다.
 */
.page-topless { padding-top: calc(22px + env(safe-area-inset-top, 0px)); }

/* 카드 — 흰 면 + 헤어라인 + 낮은 그림자. 은행앱의 기본 표면이다.
   (블러 유리는 걷어냈다 — 배경이 조용해지면 유리는 흐림값만 남는다) */
.glass {
  background: var(--w3-glass);
  border: 1px solid var(--w3-glass-line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(10, 46, 54, 0.04), 0 8px 24px rgba(10, 46, 54, 0.05);
}

/* ── 레이아웃 ─────────────────────────────────────────────────────────── */
.w3 { position: relative; padding-top: 10px; }
.w3-mesh { display: none; }

.w3-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* 계정 칩 — 지갑 앱의 주소 칩 자리 */
.w3-acct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: var(--w3-glass);
  border: 1px solid var(--w3-glass-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 16px rgba(10, 46, 54, 0.06);
}
.w3-acct-name { font-size: 14px; font-weight: 700; color: var(--w3-ink); }
.w3-acct-tag {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(17, 148, 166, 0.12); color: var(--w3-violet-d);
}
.w3-bell {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--w3-glass);
  border: 1px solid var(--w3-glass-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--w3-ink);
  box-shadow: 0 4px 16px rgba(10, 46, 54, 0.06);
}
.w3-bell .bell-dot {
  position: absolute; top: 7px; right: 7px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--w3-pink); color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid #fff;
}

/* ── 잔액 히어로 ──────────────────────────────────────────────────────── */
.w3-hero { padding: 22px 22px 18px; margin-bottom: 14px; }
.w3-hero-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--w3-dim);
}
.w3-chain {
  margin-left: auto; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: var(--w3-grad-soft); color: var(--w3-violet-d);
}
/* 그라데이션 텍스트 — 지갑 앱 잔액의 시그니처 */
.w3-hero-amount {
  margin-top: 10px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--w3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.w3-hero-krw {
  margin-top: 8px; font-size: 14px; color: var(--w3-dim);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.w3-lock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 138, 118, 0.16); color: #d6455d; font-size: 11.5px; font-weight: 650;
}

/* 동작 알약 줄 */
.w3-ops { display: flex; gap: 8px; margin-top: 20px; }
.w3-op {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(17, 148, 166, 0.14);
  color: var(--w3-ink);
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.15s;
}
.w3-op:active { transform: scale(0.96); }
.w3-op[disabled] { opacity: 0.4; cursor: not-allowed; }
.w3-op-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 14px;
  background: var(--w3-grad-soft); color: var(--w3-violet-d);
}
.w3-op-label { font-size: 12px; }
.w3-op.is-primary {
  background: var(--w3-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(17, 148, 166, 0.34);
}
.w3-op.is-primary .w3-op-ico { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
.w3-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 8px;
}
.w3-sec-title { font-size: 14px; font-weight: 750; color: var(--w3-ink); }
.w3-sec-more {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12.5px; font-weight: 650; color: var(--w3-violet-d);
}
.w3-pill {
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--w3-grad); color: #fff; font-size: 11px; font-weight: 800;
}

/* ── 자산 목록 ────────────────────────────────────────────────────────── */
.w3-assets { margin-bottom: 14px; padding-bottom: 8px; }
.w3-asset {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 16px;
}
.w3-asset-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--w3-grad); color: #fff;
  box-shadow: 0 6px 18px rgba(17, 148, 166, 0.3);
}
.w3-asset-body { flex: 1; min-width: 0; }
.w3-asset-name { display: block; font-size: 15px; font-weight: 700; color: var(--w3-ink); }
.w3-asset-sub { display: block; font-size: 12px; color: var(--w3-dim); margin-top: 1px; }
.w3-asset-val { text-align: right; }
.w3-asset-amt { display: block; font-size: 15px; font-weight: 750; color: var(--w3-ink); font-variant-numeric: tabular-nums; }
.w3-asset-krw { display: block; font-size: 12px; color: var(--w3-dim); font-variant-numeric: tabular-nums; }

/* ── 진행 중 (할 일) ──────────────────────────────────────────────────── */
.w3-todos { margin-bottom: 14px; padding-bottom: 6px; }
.w3-todo {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 18px;
  border: none; background: none; text-align: left; cursor: pointer;
}
.w3-todo + .w3-todo { border-top: 1px solid rgba(17, 148, 166, 0.1); }
.w3-todo-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  background: rgba(17, 148, 166, 0.1); color: var(--w3-violet-d);
}
.w3-todo-act .w3-todo-ico { background: var(--w3-grad); color: #fff; }
.w3-todo-danger .w3-todo-ico { background: rgba(255, 138, 118, 0.2); color: #d6455d; }
.w3-todo-body { flex: 1; min-width: 0; }
.w3-todo-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--w3-ink); }
.w3-todo-desc {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 1px; font-size: 11.5px; color: var(--w3-dim);
}
.w3-todo-time { font-size: 12px; font-weight: 800; color: var(--w3-violet-d); font-variant-numeric: tabular-nums; flex: none; }
.w3-todo-danger .w3-todo-time { color: #d6455d; }
.w3-todo-go { color: var(--w3-dim); flex: none; }

/* ── 활동 피드 ────────────────────────────────────────────────────────── */
.w3-feed { padding-bottom: 10px; }
.w3-feed .ledger { padding: 0 18px; }
.w3-feed .ledger-row { border-color: rgba(17, 148, 166, 0.1); }
.w3-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 20px 26px;
}
.w3-empty-ico {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--w3-grad); color: #fff; margin-bottom: 10px;
  box-shadow: 0 8px 22px rgba(17, 148, 166, 0.3);
}
.w3-empty-t { font-size: 14.5px; font-weight: 700; color: var(--w3-ink); }
.w3-empty-s { font-size: 12.5px; color: var(--w3-dim); margin-top: 3px; }

/* ── 하단 독 — 붙지 않고 떠 있다 ───────────────────────────────────────── */
.tabbar {
  left: 14px; right: 14px; bottom: 14px;
  height: 62px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--w3-glass-line);
  box-shadow: 0 12px 34px rgba(10, 46, 54, 0.14);
  padding-bottom: 0;
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.tab { color: var(--w3-dim); }
.tab.active { color: var(--w3-violet-d); }
.tab.active::before { background: rgba(17, 148, 166, 0.12); }
.tab-raised .tab-ico {
  background: var(--w3-grad);
  box-shadow: 0 8px 20px rgba(17, 148, 166, 0.45);
  border-color: rgba(255, 255, 255, 0.9);
}
.tab-raised .tab-label { color: var(--w3-violet-d); }

/* ── 데스크탑 — 12열로 펼쳐 좌우 여백을 쓴다 ───────────────────────────── */
@media (min-width: 1024px) {
  .page,
  .page-wide { max-width: none; padding: 26px 40px 48px; }
  .app-main { margin-left: 236px; }

  .w3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    align-items: start;
    max-width: 1560px;
    margin: 0 auto;
  }
  .w3-top { grid-column: 1 / -1; margin-bottom: 0; }
  /* 좌 7열: 잔액 + 자산 / 우 5열: 진행 중 + 활동 */
  .w3-main { grid-column: span 7; }
  .w3-side { grid-column: span 5; position: sticky; top: 26px; }

  .w3-hero { padding: 30px 30px 24px; }
  .w3-hero-amount { font-size: 56px; letter-spacing: -2.6px; }
  .w3-ops { gap: 12px; margin-top: 26px; }
  .w3-op { padding: 16px 8px 14px; border-radius: 20px; }
  .w3-op-ico { width: 46px; height: 46px; }
  .w3-op-label { font-size: 13.5px; }

  /* 넓은 화면에서는 독을 쓰지 않는다 — 사이드바가 있다 */
  .tabbar { display: none !important; }
}

/* 사이드바도 글래스 + 그라데이션 브랜드로 */
@media (min-width: 1024px) {
  .sidenav {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-right: 1px solid var(--w3-glass-line);
    color: var(--w3-ink);
  }
  .sidenav-brand .logo-word { color: var(--w3-ink); }
  .sidenav-group-label { color: var(--w3-dim); }
  .sidenav-item { color: var(--w3-ink); }
  .sidenav-item .icon { color: var(--w3-dim); }
  .sidenav-item:hover { background: rgba(17, 148, 166, 0.08); }
  .sidenav-item.active { background: var(--w3-grad); color: #fff; }
  .sidenav-item.active .icon,
  .sidenav-item.active .sidenav-item-label { color: #fff; }
  .sidenav-item.active .sidenav-item-desc { color: rgba(255, 255, 255, 0.8); }
  .sidenav-item-desc { color: var(--w3-dim); }
  .sidenav-group + .sidenav-group { border-top-color: rgba(17, 148, 166, 0.12); }
  .sidenav-foot { border-top-color: rgba(17, 148, 166, 0.12); }
  .sidenav-foot .btn-text { color: var(--w3-dim); }
  .sidenav-user-name { color: var(--w3-ink); }
}

/* ── 자주 결제한 곳 — 지갑 앱의 즐겨찾는 주소 ─────────────────────────── */
.w3-quick { margin-bottom: 14px; padding-bottom: 16px; }
.w3-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 4px 18px 0; }
.w3-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(17, 148, 166, 0.14);
  transition: border-color 0.12s;
}
.w3-chip:hover { border-color: rgba(17, 148, 166, 0.4); }
.w3-chip-ico {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 11px; flex: none;
  background: var(--w3-grad-soft); color: var(--w3-violet-d);
}
.w3-chip-body { min-width: 0; }
.w3-chip-name {
  display: block; font-size: 13px; font-weight: 700; color: var(--w3-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.w3-chip-sub { display: block; font-size: 11px; color: var(--w3-dim); }

/* ── 마켓 요약 ────────────────────────────────────────────────────────── */
.w3-market { margin-top: 14px; padding-bottom: 16px; }
.w3-market-body { padding: 4px 18px 0; }
.w3-mstat {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0;
}
.w3-mstat + .w3-mstat { border-top: 1px solid rgba(17, 148, 166, 0.1); }
.w3-mstat-k { font-size: 12.5px; color: var(--w3-dim); }
.w3-mstat-v {
  font-size: 17px; font-weight: 750; color: var(--w3-ink);
  font-variant-numeric: tabular-nums;
}
.w3-mstat-v em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--w3-dim); margin-left: 3px; }
.w3-mnote {
  margin-top: 10px; padding: 9px 11px; border-radius: 12px;
  background: var(--w3-grad-soft); color: var(--w3-violet-d);
  font-size: 11.5px; font-weight: 650; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Web3 룩 — 전역 컴포넌트

   홈만 바꾸면 다른 화면으로 넘어가는 순간 다른 앱이 된다. 모든 뷰가 쓰는
   기본 부품(카드·버튼·입력·모달·배너·앱바·탭)을 여기서 한 번에 Web3 로
   맞춘다. 페이지별 손질은 그 다음이다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 토큰 재정의 — 이후 모든 var() 참조가 Web3 값을 받는다 */
:root {
  /* 브랜드 원본까지 덮는다. 시맨틱 토큰만 바꾸면 --brand-* 를 직접 쓰는 곳
     (탭바 알약·띄운 결제 버튼·잔액 카드)만 옛 딥그린으로 남아 화면이 두 색으로
     갈린다. 성공색(--green-*)은 아래에서 따로 초록으로 되돌려 의미를 지킨다. */
  --brand-900: #0f3a43;
  --brand-800: #0b6b7b;
  --brand-700: var(--w3-violet-d);
  --brand-600: var(--w3-violet);
  --brand-500: var(--w3-violet);
  --brand-300: #93dde6;
  --brand-100: rgba(17, 148, 166, 0.16);
  --brand-50: rgba(17, 148, 166, 0.09);
  /* 파스텔 액센트도 Web3 계열(바이올렛→블루→시안)로 맞춘다. 민트·피치를 남기면
     홈의 아이콘 네 개만 다른 세계에서 온 것처럼 보인다. */
  --peach-100: rgba(77, 139, 250, 0.14);
  --peach-500: #3f7ae8;
  --mint-100: rgba(79, 211, 222, 0.16);
  --mint-500: #14a4b4;
  --lav-100: rgba(17, 148, 166, 0.15);
  --lav-500: var(--w3-violet-d);
  --sun-100: rgba(240, 177, 42, 0.16);
  --sun-500: #c8890c;
  --bg: transparent;
  --bg-elevated: #ffffff;
  --bg-sunken: rgba(17, 148, 166, 0.06);
  --border: rgba(17, 148, 166, 0.14);
  --border-strong: rgba(17, 148, 166, 0.26);
  --text: var(--w3-ink);
  --text-secondary: #38454a;
  --text-tertiary: #5b696e;
  --text-disabled: #8fa0a6;
  --primary: var(--w3-violet-d);
  --link: var(--w3-violet-d);
  --accent-50: rgba(17, 148, 166, 0.1);
  --accent-100: rgba(17, 148, 166, 0.16);
  --accent-500: var(--w3-violet);
  --accent-600: var(--w3-violet-d);
  --accent-700: #0c7d8e;
  --navy-50: rgba(17, 148, 166, 0.1);
  --navy-100: rgba(17, 148, 166, 0.16);
  --navy-200: rgba(17, 148, 166, 0.3);
  --navy-600: var(--w3-violet);
  --navy-700: var(--w3-violet-d);
  --navy-800: var(--w3-violet-d);
  --navy-900: #0f3a43;
  --navy-950: #0b2f37;
  --blue-50: rgba(17, 148, 166, 0.1);
  --blue-100: rgba(17, 148, 166, 0.18);
  --blue-500: var(--w3-violet);
  --blue-600: var(--w3-violet-d);
  --blue-700: #0c7d8e;
  --blue-800: #0b6b7b;
  --ink-900: var(--w3-ink);
  --grey-0: #ffffff;
  --grey-50: rgba(17, 148, 166, 0.05);
  --grey-100: rgba(17, 148, 166, 0.09);
  --grey-200: rgba(17, 148, 166, 0.14);
  --grey-300: rgba(17, 148, 166, 0.22);
  --grey-400: #8fa0a6;
  --grey-500: #4d5c61;
  --grey-600: #38454a;
  --grey-700: #2f4a52;
  --grey-800: #1c3940;
  --grey-900: var(--w3-ink);
  --green-50: rgba(20, 184, 138, 0.12);
  --green-500: #0ea877;
  --green-600: #0b8c63;
  --red-50: rgba(244, 63, 122, 0.09);
  --red-100: rgba(244, 63, 122, 0.16);
  --red-200: rgba(244, 63, 122, 0.3);
  --red-500: #e5445c;
  --red-600: #d6455d;
  --yellow-50: rgba(240, 177, 42, 0.13);
  --yellow-500: #d9930d;
  --yellow-700: #a56f08;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow-sm: 0 6px 22px rgba(10, 46, 54, 0.07);
  --shadow-md: 0 10px 34px rgba(10, 46, 54, 0.1);
  --shadow-lg: 0 18px 50px rgba(10, 46, 54, 0.16);
}

/* 카드 전부 글래스 */
.card,
.hm-card,
.wallet-card,
.card-flat {
  background: var(--w3-glass);
  border: 1px solid var(--w3-glass-line);
  box-shadow: var(--shadow-sm);
}
.card-flat { box-shadow: none; background: rgba(17, 148, 166, 0.06); border-color: transparent; }

/* 주 버튼 — 단색 틸. 은행앱의 CTA 는 그라데이션이 아니라 확신 있는 한 색이다.
   그라데이션은 잔액 히어로와 브랜드 마크에만 남긴다. */
.btn-primary {
  background: #0da2b6;
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 162, 182, 0.28);
}
.btn-primary:hover:not(:disabled) { background: #0c93a5; filter: none; }
.btn-primary:disabled { background: #bcd6da; box-shadow: none; }
.btn-secondary {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-strong);
  color: var(--w3-ink);
}
.btn-buy { background: var(--w3-grad); border: none; color: #fff; }

/* 입력 — 흰 유리 위 부드러운 포커스 링 */
.input, .select, .textarea {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--border);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--w3-violet);
  box-shadow: 0 0 0 4px rgba(17, 148, 166, 0.15);
}
.amount-field {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--border);
}
.amount-field:focus-within {
  border-color: var(--w3-violet);
  box-shadow: 0 0 0 4px rgba(17, 148, 166, 0.15);
}

/* 서브 페이지 앱바 — 글래스로 떠 있는 바 */
.appbar {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--w3-glass-line);
}
.mobile-bar {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--w3-glass-line);
}

/* 모달·토스트 */
.modal {
  background: #ffffff;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--w3-glass-line);
  box-shadow: var(--shadow-lg);
}
.modal-backdrop { background: rgba(19, 43, 49, 0.4); }
.toast {
  background: rgba(19, 43, 49, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}

/* 고객센터 FAB — 그라데이션 */
.support-fab {
  background: var(--w3-grad) !important;
  box-shadow: 0 10px 26px rgba(17, 148, 166, 0.4) !important;
}

/* 로그인·가입 — 메시 배경 그대로 쓰고 글래스 카드만 띄운다 */
.auth-wrap {
  background: transparent;
}
.auth-wrap .brand,
.auth-wrap .brand .logo-word { color: var(--w3-ink); }
.auth-wrap .brand .logo-sub { color: var(--w3-dim); }
.auth-wrap .brand .logo-mark, .auth-wrap .brand svg { color: var(--w3-violet-d); }
.auth-wrap > form,
.auth-wrap > .auth-card {
  background: var(--w3-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--w3-glass-line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
}

/* 판매글(마켓) 행 — 글래스 카드 */
.market-row {
  background: var(--w3-glass) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--w3-glass-line) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 20px !important;
}

/* 지갑 히어로(지갑 페이지) — 홈과 같은 그라데이션 텍스트 언어 */
.wallet-hero, .rail-hero {
  background: var(--w3-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--w3-glass-line);
  border-radius: 24px;
  color: var(--w3-ink);
}
.wallet-hero::before { display: none; }
.wallet-hero-label, .wallet-hero-krw { color: var(--w3-dim); }
.wallet-hero-amount {
  background: var(--w3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wallet-hero-amount .amount-unit { color: var(--w3-dim); }
.wallet-split-k { color: var(--w3-dim); }
.wallet-split-v { color: var(--w3-ink); }
.wallet-hero .wallet-split { border-color: rgba(17, 148, 166, 0.14); }
.wallet-hero-locked { background: rgba(17, 148, 166, 0.1); color: var(--w3-violet-d); }

/* 스텝퍼(거래 진행) — 그라데이션 점 */
.step.done .step-dot, .step.current .step-dot { background: var(--w3-grad); border-color: transparent; }
.step.current .step-label { color: var(--w3-violet-d); }

/* 뱃지 톤 정리 */
.badge { border-radius: 999px; font-weight: 700; }

/* 데스크탑 폼 화면 — 가운데 좁힘 대신 2열(폼+맥락)로 쓰는 화면이 많아
   기본 폭만 살짝 넓힌다 */
@media (min-width: 1024px) {
  .form-page { max-width: 560px; margin: 0 auto; }
}

/* ── 폼 2열 (데스크탑) ─────────────────────────────────────────────────────
   폼 하나를 가운데 세우면 넓은 화면의 좌우가 통째로 빈다. 왼쪽은 폼,
   오른쪽은 그 화면의 맥락(판매자 목록·안내)을 둔다. 모바일에서는 세로로 쌓인다. */
.form-split > .form-page { max-width: 100%; }
.form-aside { margin-top: 28px; }
.form-aside-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.form-aside-title { font-size: 15px; font-weight: 750; color: var(--w3-ink); }
.form-aside-sub { font-size: 12px; color: var(--w3-dim); }

@media (min-width: 1024px) {
  .form-split {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    max-width: 1360px;
    margin: 0 auto;
  }
  .form-split > .form-page { margin: 0; max-width: 460px; }
  .form-aside { margin-top: 0; position: sticky; top: 26px; }
  .form-aside .market { max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 4px; }
}

/* 결제 안내 흐름 (데스크탑 오른쪽 열) */
.pay-flow { display: flex; flex-direction: column; gap: 14px; }
.pay-flow-step { display: flex; gap: 11px; font-size: 12.5px; line-height: 1.55; color: var(--w3-dim); }
.pay-flow-step b { color: var(--w3-ink); font-size: 13.5px; }
.pay-flow-n {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--w3-grad); color: #fff; font-size: 12px; font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   가이드 v2 — 여정 히어로 + 제자리 아코디언

   예전 가이드는 접힌 헤더 목록이라 내용이 하나도 안 보였고, 칩을 누르면
   페이지 전체가 다시 불렸다. 이제 ① 세 걸음 여정을 그림으로 먼저 보여주고
   ② 절은 그 자리에서 펼쳐지며 ③ 한 번에 하나만 열린다.
   ═══════════════════════════════════════════════════════════════════════════ */
.gd2 { padding-top: 6px; }

.gd2-hero {
  background: var(--w3-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--w3-glass-line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 20px 18px 16px;
  margin-bottom: 14px;
}
.gd2-hero-sub { font-size: 22px; font-weight: 800; color: var(--w3-ink); margin-bottom: 14px; }

/* 여정 — 세 걸음이 화살표로 이어진다 */
.gd2-journey { display: flex; align-items: stretch; gap: 6px; }
.gd2-jstep {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 6px 11px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: transform 0.08s, border-color 0.12s;
}
.gd2-jstep:hover { border-color: var(--w3-violet); }
.gd2-jstep:active { transform: scale(0.96); }
.gd2-jico {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--w3-grad); color: #fff;
  box-shadow: 0 6px 16px rgba(17, 148, 166, 0.3);
  margin-bottom: 3px;
}
.gd2-jt { font-size: 14px; font-weight: 750; color: var(--w3-ink); }
.gd2-jd { font-size: 11px; color: var(--w3-dim); }
.gd2-jarrow { align-self: center; color: var(--w3-dim); flex: none; }
.gd2-hero-note {
  margin-top: 12px; padding: 9px 12px; border-radius: 12px;
  background: var(--w3-grad-soft); color: var(--w3-violet-d);
  font-size: 12px; font-weight: 650; text-align: center;
}

/* 목차 칩 */
.gd2-nav { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.gd2-nav::-webkit-scrollbar { display: none; }
.gd2-nav-item {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.75);
  font-size: 12.5px; font-weight: 650; color: var(--w3-dim);
  white-space: nowrap; cursor: pointer;
}
.gd2-nav-item:hover { border-color: var(--w3-violet); color: var(--w3-violet-d); }
.gd2-nav-item .icon { color: var(--w3-violet); }

/* 아코디언 절 */
.gd2-sec {
  background: var(--w3-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--w3-glass-line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.gd2-sec[open] { border-color: rgba(17, 148, 166, 0.35); }
.gd2-sum {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.gd2-sum::-webkit-details-marker { display: none; }
.gd2-sum-n {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--w3-grad); color: #fff;
  font-size: 14px; font-weight: 800;
}
.gd2-sum-t { flex: 1; font-size: 15.5px; font-weight: 750; color: var(--w3-ink); }
.gd2-chev { color: var(--w3-dim); transition: transform 0.18s; }
.gd2-sec[open] .gd2-chev { transform: rotate(180deg); }
.gd2-body { padding: 2px 18px 18px; }

/* 본문 요소 — 예전 gd-* 스타일이 초록(포켓) 잔재라 여기서 Web3 로 덮는다 */
.gd-p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 12px; }
.gd-note {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 14px;
  background: var(--w3-grad-soft); font-size: 12.5px; line-height: 1.6; color: var(--w3-violet-d);
}
.gd-facts { border-radius: 14px; background: transparent; gap: 0; margin: 0 0 14px; border: 1px solid var(--border); overflow: hidden; }
.gd-fact { background: rgba(255, 255, 255, 0.6); font-size: 13px; padding: 11px 14px; }
.gd-fact + .gd-fact { border-top: 1px solid var(--border); }
.gd-fact b { color: var(--w3-dim); font-weight: 600; }
.gd-fact span { color: var(--w3-ink); font-weight: 700; }

/* 단계 — 연결선이 있는 타임라인. 흐름이라는 것이 형태로 보인다 */
.gd-step { position: relative; display: flex; gap: 13px; padding: 10px 0; }
.gd-step + .gd-step { border-top: none; }
.gd-step::before {
  content: '';
  position: absolute; left: 13px; top: 40px; bottom: -10px;
  width: 2px; background: rgba(17, 148, 166, 0.18);
}
.gd-step:last-of-type::before { display: none; }
.gd-step-n {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--w3-grad); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(17, 148, 166, 0.3);
  position: relative; z-index: 1;
}
.gd-step-title { font-size: 14.5px; font-weight: 750; color: var(--w3-ink); }
.gd-step-desc { margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

.gd-rule { border-radius: 16px; background: rgba(255, 255, 255, 0.6); font-size: 13px; }
.gd-rule b { font-size: 14px; }
.gd-rule-danger { background: rgba(244, 63, 122, 0.08); border-color: rgba(244, 63, 122, 0.25); }
.gd-qa b { font-size: 14px; }
.gd-qa span { font-size: 13px; }
.gd-qa + .gd-qa { border-top: 1px solid var(--border); }

.gd2-foot { padding: 8px 0 20px; }
.gd2-legal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: var(--w3-dim); }

/* 데스크탑 — 가이드도 2열: 왼쪽 본문, 오른쪽 sticky 목차 */
@media (min-width: 1024px) {
  .gd2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
  }
  .gd2-hero { grid-column: 1 / -1; padding: 26px 26px 20px; }
  .gd2-journey { max-width: 640px; }
  .gd2-nav {
    grid-column: 2; grid-row: 3 / span 20;
    position: sticky; top: 26px;
    flex-direction: column; overflow: visible; gap: 6px;
  }
  .gd2-nav-item { justify-content: flex-start; }
  .gd2-sec, .gd2-foot { grid-column: 1; }
  .gd2-body { padding: 2px 22px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   내 정보 — 프로필 히어로 + 글래스 카드
   ═══════════════════════════════════════════════════════════════════════════ */
.me { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.me-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: var(--w3-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--w3-glass-line);
  box-shadow: var(--shadow-sm);
}
.me-avatar {
  display: grid; place-items: center; flex: none;
  width: 60px; height: 60px; border-radius: 22px;
  background: var(--w3-grad); color: #fff;
  font-size: 26px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(17, 148, 166, 0.35);
}
.me-hero-body { flex: 1; min-width: 0; }
.me-hero-name { font-size: 20px; font-weight: 800; color: var(--w3-ink); letter-spacing: -0.4px; }
.me-hero-sub { font-size: 13px; color: var(--w3-dim); margin-top: 1px; }
.me-hero-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; max-width: 45%; }
.me-tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(17, 148, 166, 0.12); color: var(--w3-violet-d); white-space: nowrap;
}
.me-tag.is-ok { background: rgba(20, 184, 138, 0.14); color: #0b8c63; }
.me-tag.is-wait { background: rgba(240, 177, 42, 0.16); color: #a56f08; }
.me-tag.is-danger { background: rgba(244, 63, 122, 0.14); color: #d6455d; }

.me-card { padding: 6px 18px 10px; }
.me-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 6px; font-size: 14.5px; font-weight: 750; color: var(--w3-ink);
}
.me-card-hint { font-size: 11.5px; font-weight: 500; color: var(--w3-dim); }
.me-card-desc { font-size: 12.5px; color: var(--w3-dim); padding-bottom: 6px; margin-top: -2px; }

@media (min-width: 1024px) {
  .me {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    align-items: start;
  }
  .me-hero { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   로그인 · 가입 — Web3 고도화

   가입은 3단계로 나눈다. 한 화면에 열두 칸이 늘어서면 스크롤 중간에서
   "얼마나 남았는지" 를 알 수 없다.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-wrap { padding: 40px 22px 48px; }
.auth-wrap .brand { margin-bottom: 26px; }
.auth-wrap .logo-hero .logo-mark {
  filter: drop-shadow(0 10px 24px rgba(17, 148, 166, 0.4));
}
.auth-wrap .logo-word { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; }
.auth-wrap .logo-sub { font-size: 12.5px; margin-top: 3px; }
.auth-wrap > form { padding: 26px 22px 24px; }

/* 로그인 — 입력칸을 크게, 버튼도 크게 */
.auth-wrap .input { height: 52px; font-size: 16px; }
.auth-wrap .btn-lg { height: 54px; font-size: 16px; }

/* 4단계가 되며 좁은 화면에서는 넘친다 — 지금 단계만 이름을 보여주고
   나머지는 번호만 남긴다. 어디쯤인지는 번호와 색으로 충분히 읽힌다. */
@media (max-width: 430px) {
  .sgn-step:not(.is-now) .sgn-step-t { display: none; }
}

/* 단계 도입 문장 — 왜 이 정보를 받는지 한 줄로 말해준다 */
.sgn-panel-intro {
  font-size: 13.5px; color: var(--w3-dim); line-height: 1.55;
  padding: 2px 2px 4px;
}
/* 주의 문구 — 오류는 아니지만 알고 지나가야 하는 것 */
.t-warning { color: var(--yellow-700); }

/* 스텝 인디케이터 */
.sgn-steps {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px; padding: 0 4px;
}
.sgn-step { display: flex; align-items: center; gap: 7px; flex: none; }
.sgn-step-n {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(17, 148, 166, 0.13); color: var(--w3-violet-d);
  font-size: 12px; font-weight: 800;
  transition: background 0.2s, color 0.2s;
}
.sgn-step-t { font-size: 12px; font-weight: 650; color: var(--w3-dim); white-space: nowrap; }
.sgn-step.is-now .sgn-step-n { background: var(--w3-grad); color: #fff; box-shadow: 0 4px 12px rgba(124,92,252,0.35); }
.sgn-step.is-now .sgn-step-t { color: var(--w3-ink); }
.sgn-step.is-done .sgn-step-n { background: rgba(20, 184, 138, 0.16); color: #0b8c63; }
.sgn-step-line { flex: 1; height: 2px; border-radius: 2px; background: rgba(17, 148, 166, 0.14); }

/* 패널 — 한 번에 하나만 */
.sgn-panel { display: none; }
.sgn-panel.is-on { display: block; animation: sgn-in 0.22s ease; }
@keyframes sgn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sgn-nav { display: flex; gap: 10px; margin-top: 22px; }
.sgn-nav .grow { flex: 1; }

/* 단계로 나눴으므로 fieldset 자체의 시각적 잠금 표시는 뺀다 */
.auth-signup .signup-rest { opacity: 1; }
.auth-signup .signup-rest[disabled] { opacity: 1; }

@media (min-width: 1024px) {
  .auth-wrap { max-width: 460px; }
  .sgn-step-t { font-size: 12.5px; }
}
@media (max-width: 380px) {
  /* 좁은 화면에서는 단계 이름을 감추고 번호만 — 줄바꿈으로 두 줄이 되는 것보다 낫다 */
  .sgn-step-t { display: none; }
}

/* 가입 폼 — 힌트와 다음 라벨이 붙어 보이던 간격 보정 */
.auth-signup .field { margin-bottom: 18px; }
.auth-signup .field:last-of-type { margin-bottom: 0; }
.auth-signup .field-hint { display: block; margin-top: 6px; line-height: 1.5; }
.auth-signup .field-label { margin-bottom: 7px; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   평점 배지 — 숫자 + 5칸 게이지

   숫자만 있으면 "2.6" 이 좋은 건지 나쁜 건지 알 수 없다. 게이지로 위치를
   보이고 구간마다 색을 달리한다. 별점이 아니라 거래 행동에서 계산한
   값이라(§3.9) 별 모양은 쓰지 않는다 — 사용자가 남긴 점수로 오해한다.
   ═══════════════════════════════════════════════════════════════════════════ */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rating-num { font-size: 12px; font-weight: 800; letter-spacing: -0.2px; }
.rating-bars { display: inline-flex; gap: 2px; align-items: center; }
.rating-bars i {
  width: 3px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.22;
}
.rating-bars i.on { opacity: 1; }

/* 구간 색 — 좋다/보통/주의 */
.rating.is-high { background: rgba(20, 184, 138, 0.14); color: #0b8c63; }
.rating.is-mid { background: rgba(17, 148, 166, 0.13); color: var(--w3-violet-d); }
.rating.is-low { background: rgba(240, 177, 42, 0.18); color: #a56f08; }

/* 예전 칩 스타일은 남겨두되 새 배지에 밀리지 않게 정리 */
.seller-rating { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   데스크탑 상단 여백 — 화면 꼭대기에 붙어 시작하던 것을 띄운다
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .page,
  .page-wide { padding-top: 56px; }
  /* 사이드바도 같은 눈높이에서 시작해야 좌우가 어긋나 보이지 않는다 */
  .sidenav { padding-top: 40px; }
  /* sticky 요소들의 기준선도 함께 내린다 */
  .w3-side,
  .form-aside,
  .gd2-nav { top: 56px; }
}

/* 내 정보 — 아바타를 뺀 뒤의 히어로 여백 */
.me-hero { padding: 22px 22px 20px; }
.me-hero-name { font-size: 22px; }

/* ── 판매글 카드 (모바일) — 지표 줄이 잘려 완료율이 안 보이던 문제 ────────
   한 줄에 밀어넣는 대신, 평점을 이름 옆으로 올리고 나머지 지표는 아래
   한 줄에 둔다. 잘림 마스크도 걷어낸다 — 정보가 잘리는 것보다 두 줄이 낫다. */
@media (max-width: 860px) {
  .market-seller { flex-direction: column; align-items: flex-start; gap: 5px; }
  .market-name { display: inline-flex; align-items: center; gap: 7px; }
  .market-meta {
    white-space: normal;
    -webkit-mask-image: none;
    mask-image: none;
    flex-wrap: wrap;
    row-gap: 3px;
  }
  /* 평점은 이름 줄로 올린다 */
  .market-meta .rating { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   핀테크 디테일 — 은행앱 수준의 마감

   컨셉(메시 그라데이션·글래스)은 그대로 두고 만듦새를 올린다. 은행앱이
   좋게 느껴지는 이유는 색이 아니라 손맛이다: 누르면 즉시 반응하고, 숫자는
   자로 잰 듯 정렬되고, 표면의 위계(떠 있는 것/가라앉은 것)가 일관된다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 프레스 피드백 — 누를 수 있는 모든 것이 눌린 티를 낸다 ─────────── */
.btn {
  transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease,
    background-color 0.15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn-primary:active:not(:disabled) { box-shadow: 0 3px 10px rgba(17, 148, 166, 0.28); }

.w3-todo, .w3-asset, .w3-chip, .ledger-row, .market-item, .trade-card, .tab {
  transition: background-color 0.12s ease, transform 0.1s ease;
}
.w3-todo:active, .w3-chip:active, .market-item:active { background: rgba(17, 148, 166, 0.06); }
.trade-card:active { transform: scale(0.99); }
.ledger-row { border-radius: 12px; }
.ledger-row:active { background: rgba(17, 148, 166, 0.05); }

/* 키보드 포커스 — 마우스 클릭에는 안 뜨고 탭 이동에만 뜬다 */
:focus-visible {
  outline: 2.5px solid var(--w3-violet);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── 2. 숫자 마감 — 금액은 어디서나 같은 자·같은 정렬 ─────────────────── */
.amount, .w3-asset-amt, .w3-asset-krw, .ledger-amount, .w3-hero-krw,
.w3-todo-time, .stat-value, .market-amt {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
/* 잔액 히어로 옆의 단위 — 은행앱의 "원"처럼 숫자보다 한 발 물러선다 */
.w3-hero-unit {
  font-size: 0.42em;
  font-weight: 750;
  letter-spacing: 0;
  margin-left: 6px;
  background: var(--w3-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.75;
}

/* ── 3. 표면 위계 — 유리 위 하이라이트 한 줄이 "떠 있음"을 만든다 ─────── */
.glass, .card, .wallet-card {
  box-shadow: 0 1px 2px rgba(10, 46, 54, 0.04), 0 8px 24px rgba(10, 46, 54, 0.05);
}
.w3-hero {
  box-shadow: 0 1px 2px rgba(10, 46, 54, 0.04), 0 14px 36px rgba(17, 148, 166, 0.12);
}

/* 구분선은 색이 아니라 밝기로 — 보라끼 있는 헤어라인은 잉크 헤어라인보다
   지저분해 보인다. 목록 안 구분선을 잉크 5% 로 통일한다. */
.w3-todo + .w3-todo, .w3-feed .ledger-row, .ledger .ledger-row {
  border-color: rgba(19, 43, 49, 0.055);
}

/* ── 4. 독·앱바 — 이동면은 더 또렷하게 ────────────────────────────────── */
.tabbar {
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 12px 34px rgba(10, 46, 54, 0.16);
}
.tab-raised .tab-ico { transition: transform 0.12s ease, box-shadow 0.15s ease; }
.tab-raised:active .tab-ico {
  transform: scale(0.92);
  box-shadow: 0 3px 10px rgba(17, 148, 166, 0.3);
}

/* ── 5. 입력 — 라벨·칸·힌트의 리듬을 은행앱처럼 촘촘하게 ──────────────── */
.field-label { font-size: 13px; font-weight: 700; color: var(--w3-ink); }
.field-hint { font-size: 12px; line-height: 1.5; }
.input, .select, .textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; }

/* 빈 상태·로딩의 톤도 낮춘다 — 내용이 없다는 사실이 소리를 지를 필요는 없다 */
.w3-empty-t { font-weight: 650; }

/* ── 모바일 서랍 — 흰 면. 라이트 은행앱에 다크 패널은 이전 컨셉 잔재다 ── */
@media (max-width: 1023px) {
  .sidenav {
    background: #ffffff;
    color: var(--w3-ink);
    box-shadow: 8px 0 40px rgba(10, 46, 54, 0.14);
  }
  .sidenav .logo-word { color: var(--w3-ink); }
  .sidenav-group-label { color: var(--w3-dim); }
  .sidenav-item { color: var(--w3-ink); }
  .sidenav-item .icon { color: var(--w3-dim); }
  .sidenav-item:active { background: rgba(17, 148, 166, 0.08); }
  .sidenav-item.active { background: rgba(17, 148, 166, 0.1); color: var(--w3-violet-d); }
  .sidenav-item.active .icon, .sidenav-item.active .sidenav-item-label { color: var(--w3-violet-d); }
  .sidenav-item-desc { color: var(--w3-dim); }
  .sidenav-item.active .sidenav-item-desc { color: var(--w3-dim); }
  .sidenav-group + .sidenav-group { border-top-color: rgba(19, 43, 49, 0.08); }
  .sidenav-foot { border-top-color: rgba(19, 43, 49, 0.08); }
  .sidenav-foot .btn-text, .sidenav-user-name { color: var(--w3-ink); }
}

/* 우측 열 참고 문장 */
.form-aside-note {
  font-size: 12.5px; line-height: 1.6; color: var(--w3-dim);
  padding: 10px 12px; border-radius: 12px;
  background: rgba(17, 148, 166, 0.06);
}

/* ── 가이드 화면 캡처 — 폰 프레임 느낌으로 오른쪽에 띄운다 ─────────────── */
.gd-shot {
  margin: 4px 0 14px;
  text-align: center;
}
.gd-shot img {
  width: 100%;
  max-width: 240px;
  border-radius: 22px;
  border: 1px solid rgba(19, 43, 49, 0.1);
  box-shadow: 0 10px 30px rgba(10, 46, 54, 0.12);
}
.gd-shot figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--w3-dim);
  line-height: 1.5;
}
/* 넓은 화면에서는 글 옆에 붙인다 — 캡처가 본문을 아래로 밀면 글이 끊긴다 */
@media (min-width: 760px) {
  .gd-shot {
    float: right;
    width: 240px;
    margin: 0 0 12px 20px;
  }
  /* float 해제 — 다음 섹션이 캡처 옆으로 감기지 않게 */
  .gd2-sec, .gd-step { clear: none; }
  .gd2-sec::after { content: ''; display: block; clear: both; }
}

/* 내 정보 — 도움 카드 행 */
.me-help-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 2px;
  border: none; background: none; text-align: left; cursor: pointer;
  color: var(--w3-ink);
}
.me-help-row + .me-help-row { border-top: 1px solid rgba(19, 43, 49, 0.06); }
.me-help-row:active { background: rgba(17, 148, 166, 0.06); }
.me-help-ico {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(17, 148, 166, 0.1); color: var(--w3-violet-d);
}
.me-help-row > .icon:last-child { color: var(--w3-dim); flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   트러스트 월렛 라이트 — 최종 레이어

   레퍼런스는 Trust Wallet 라이트 모드다 (공식 리뉴얼 발표의 홈·백업·토큰
   관리 화면). 문법이 앞의 "클라우드 틸"과 세 가지가 다르다:

     · 배경이 **순백**이다. 틴트도 라디얼도 없다 — 콘텐츠가 유일한 색이다
     · **그림자·그라데이션이 없다.** 위계는 회색 면(#f2f4f7)과 잉크 대비로만
     · 동작은 **회색 원판**(원형 아이콘 + 작은 라벨), 강조 하나만 브랜드색
     · 카드는 속삭이는 중성 헤어라인 하나 — 떠 있지 않고 놓여 있다

   브랜드색은 틸을 유지한다(트러스트의 파랑 자리에 우리 틸). 그라데이션은
   --w3-grad 를 단색으로 재정의해 한 번에 걷어낸다 — 브랜드 마크(SVG)만
   그라데이션을 유지한다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 단일 액센트 — 그라데이션 변수 자체를 단색으로. 이 두 줄이 앱 전체의
     그라데이션(아이콘·점·필·사이드바 active)을 한 번에 평평하게 만든다 */
  --w3-grad: linear-gradient(0deg, #0da2b6, #0da2b6);
  --w3-grad-soft: linear-gradient(0deg, rgba(13, 162, 182, 0.1), rgba(13, 162, 182, 0.1));

  /* 트러스트 월렛의 회색 — 파랑기 없는 중성 회색 면 */
  --tw-fill: #f2f4f7;
  --tw-fill-deep: #e8ebef;
  --tw-line: rgba(16, 22, 26, 0.07);

  /* 테두리·가라앉은 면을 틸 틴트 → 중성으로 */
  --border: rgba(16, 22, 26, 0.09);
  --border-strong: rgba(16, 22, 26, 0.16);
  --bg-sunken: var(--tw-fill);
  --grey-50: #f7f8fa;
  --grey-100: var(--tw-fill);
  --grey-200: var(--tw-fill-deep);
  --grey-300: #d5dade;

  /* 그림자를 사실상 끈다 — 모달·서랍만 아래에서 따로 살린다 */
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(16, 22, 26, 0.08);
  --shadow-lg: 0 16px 44px rgba(16, 22, 26, 0.14);
}

/* ── 배경: 순백. 틸 라디얼을 걷는다 ─────────────────────────────────────── */
body { background: #ffffff; }

/* ── 표면: 흰 면 + 속삭이는 헤어라인, 그림자 없음 ───────────────────────── */
.glass, .card, .hm-card, .wallet-card,
.gd2-hero, .gd2-sec, .me-hero, .market-row,
.wallet-hero, .rail-hero {
  background: #ffffff;
  border: 1px solid var(--tw-line);
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.glass { border-radius: 24px; }
.w3-hero { box-shadow: none !important; }
.market-row { border: 1px solid var(--tw-line) !important; box-shadow: none !important; }

/* ── 잔액: 그라데이션 텍스트 → 근검정 잉크. 트러스트의 시그니처다 ───────── */
.w3-hero-amount,
.wallet-hero-amount {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--w3-ink);
  -webkit-text-fill-color: var(--w3-ink);
  font-weight: 800;
}
.w3-hero-unit {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--w3-dim);
  -webkit-text-fill-color: var(--w3-dim);
  opacity: 1;
  font-weight: 700;
}
.wallet-hero-amount .amount-unit { color: var(--w3-dim); }

/* ── 동작 줄: 알약 타일 → 회색 원판 + 작은 라벨 ─────────────────────────
   트러스트 홈의 Send/Receive/Buy/Sell 문법. 강조 동작(결제) 하나만 틸 원판. */
.w3-ops { gap: 4px; margin-top: 22px; }
.w3-op {
  background: none;
  border: none;
  padding: 4px 2px 2px;
  gap: 8px;
  border-radius: 14px;
}
.w3-op-ico {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tw-fill);
  color: var(--w3-ink);
  transition: background-color 0.12s ease, transform 0.1s ease;
}
.w3-op:hover .w3-op-ico { background: var(--tw-fill-deep); }
.w3-op:active { transform: none; }
.w3-op:active .w3-op-ico { transform: scale(0.94); }
.w3-op-label { font-size: 12.5px; font-weight: 650; color: var(--w3-ink); }
.w3-op.is-primary {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--w3-ink);
}
.w3-op.is-primary .w3-op-ico { background: #0da2b6; color: #fff; }
.w3-op.is-primary:hover .w3-op-ico { background: #0c93a5; }

/* ── 상단 칩·벨: 유리 → 납작한 회색 ────────────────────────────────────── */
.w3-acct,
.w3-bell {
  background: var(--tw-fill);
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.w3-acct-tag { background: rgba(13, 162, 182, 0.12); }

/* ── 자산·할 일·아이콘: 평평하게 ───────────────────────────────────────── */
.w3-asset-ico { box-shadow: none; }
.w3-empty-ico { box-shadow: none; }
.gd2-jico, .gd-step-n { box-shadow: none; }
.me-avatar { box-shadow: none; }
.w3-todo + .w3-todo,
.w3-feed .ledger-row,
.ledger .ledger-row,
.w3-mstat + .w3-mstat { border-color: var(--tw-line); }

/* ── 버튼: 광 없는 단색. 보조는 회색 면 + 틸 굵은 글자 (트러스트 백업 화면) ─ */
.btn-primary {
  box-shadow: none;
  border-radius: 16px;
}
.btn-primary:active:not(:disabled) { box-shadow: none; }
.btn-secondary {
  background: var(--tw-fill);
  border: none;
  color: #0c93a5;
  font-weight: 700;
}
.btn-secondary:hover:not(:disabled) { background: var(--tw-fill-deep); }
.btn-buy { background: #0da2b6; }

/* ── 입력: 회색 면, 테두리 없음. 포커스에만 흰 면 + 틸 링 ───────────────── */
.input, .select, .textarea, .amount-field {
  background: var(--tw-fill);
  border-color: transparent;
}
.input:focus, .select:focus, .textarea:focus {
  background: #ffffff;
  border-color: #0da2b6;
  box-shadow: 0 0 0 3px rgba(13, 162, 182, 0.15);
}
.amount-field:focus-within {
  background: #ffffff;
  border-color: #0da2b6;
  box-shadow: 0 0 0 3px rgba(13, 162, 182, 0.15);
}

/* ── 칩(카테고리·빠른 금액): 회색 알약, 활성은 잉크 ────────────────────── */
.chip {
  background: var(--tw-fill);
  border: none;
  color: var(--w3-ink);
  font-weight: 650;
}
.chip:hover { background: var(--tw-fill-deep); }
.chip.active {
  background: var(--w3-ink);
  color: #fff;
}
.chip-quiet { background: transparent; color: var(--w3-dim); }
.gd2-nav-item, .gd2-jstep {
  background: var(--tw-fill);
  border: none;
}
.gd2-nav-item:hover { background: var(--tw-fill-deep); color: var(--w3-ink); }
.gd2-jstep:hover { background: var(--tw-fill-deep); }

/* ── 앱바·모바일바: 불투명 흰 면 + 중성 헤어라인 (블러 제거) ────────────── */
.appbar, .mobile-bar {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--tw-line);
}

/* ── 하단 탭: 떠 있는 독 → 붙어 있는 플랫 바 (트러스트 하단 내비) ────────
   가운데 결제만 틸 원판으로 띄운다 — "가장 자주 하는 일이 가장 잘 보인다"
   원칙은 유지한다. */
.tabbar {
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin-bottom: 0;
  border-radius: 0;
  background: #ffffff;
  border: none;
  border-top: 1px solid var(--tw-line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tab.active::before { background: transparent; }
.tab.active { color: #0c93a5; }
.tab-raised .tab-ico {
  background: #0da2b6;
  box-shadow: 0 6px 16px rgba(13, 162, 182, 0.3);
}
.has-tabbar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ── 사이드바(데스크탑): 유리 → 플랫 화이트. 활성은 옅은 틸 면 + 틸 글자 ── */
@media (min-width: 1024px) {
  .sidenav {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 1px solid var(--tw-line);
  }
  .sidenav-item.active {
    background: rgba(13, 162, 182, 0.1);
    color: #0c93a5;
  }
  .sidenav-item.active .icon,
  .sidenav-item.active .sidenav-item-label { color: #0c93a5; }
  .sidenav-item.active .sidenav-item-desc { color: var(--w3-dim); }
  .sidenav-group + .sidenav-group { border-top-color: var(--tw-line); }
  .sidenav-foot { border-top-color: var(--tw-line); }
}
/* 모바일 서랍은 이미 흰 면 — 활성만 같은 문법으로 */
@media (max-width: 1023px) {
  .sidenav { box-shadow: var(--shadow-lg); }
}

/* ── 로그인·가입: 카드 대신 순백 위 콘텐츠 (트러스트 백업 화면 문법) ─────── */
.auth-wrap > form,
.auth-wrap > .auth-card {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--tw-line);
  box-shadow: none;
}
.auth-wrap .logo-hero .logo-mark { filter: none; }
.sgn-step.is-now .sgn-step-n { box-shadow: none; }

/* ── 모달·FAB·기타 광택 제거 ───────────────────────────────────────────── */
.modal {
  border: 1px solid var(--tw-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-lg);
}
.support-fab {
  background: #0da2b6 !important;
  box-shadow: 0 8px 20px rgba(13, 162, 182, 0.28) !important;
}
.w3-mnote, .gd2-hero-note, .gd-note { background: rgba(13, 162, 182, 0.08); }
.form-aside-note { background: var(--tw-fill); color: var(--w3-dim); }
.gd-facts { border-color: var(--tw-line); }
.gd-fact { background: #fff; }
.gd-fact + .gd-fact { border-top-color: var(--tw-line); }
.gd-rule { background: var(--tw-fill); }
.gd-shot img { box-shadow: none; border-color: var(--tw-line); }

/* ── 섹션 제목: 트러스트처럼 조금 더 굵고 크게 ─────────────────────────── */
.w3-sec-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }

/* ── 프레스 배경도 중성으로 ────────────────────────────────────────────── */
.w3-todo:active, .w3-chip:active, .market-item:active,
.ledger-row:active, .me-help-row:active { background: var(--tw-fill); }
.w3-chip { background: var(--tw-fill); border: none; }
.w3-chip:hover { background: var(--tw-fill-deep); border-color: transparent; }
.w3-chip-ico { background: rgba(13, 162, 182, 0.1); }

/* ── 지갑 히어로 내부 구분선도 중성으로 ─────────────────────────────────── */
.wallet-hero .wallet-split { border-color: var(--tw-line); }

/* ── 모바일 홈: 카드조차 걷어낸다 — 트러스트 홈은 순백 위에 콘텐츠뿐이다.
   섹션 구분은 제목과 간격이 한다. 데스크탑(2열 그리드)은 헤어라인 카드를
   유지한다 — 나란한 열은 모서리가 있어야 어디까지가 한 덩어리인지 보인다. */
@media (max-width: 1023px) {
  .w3 .glass {
    background: transparent;
    border: none;
  }
  .w3-hero { padding: 14px 10px 6px; }
  .w3-sec-head { padding: 18px 10px 10px; }
  .w3-assets .w3-asset { padding: 10px 10px 14px; }
  .w3-todos .w3-todo { padding: 11px 10px; }
  .w3-feed .ledger { padding: 0 10px; }
  .w3-chips { padding: 4px 10px 0; }
  .w3-market-body { padding: 4px 10px 0; }
  .w3-empty { padding: 14px 8px 20px; }
  /* 잔액을 더 크게 — 카드가 사라진 자리를 숫자가 채운다 */
  .w3-hero-amount { font-size: 47px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PWA 설치 게이트 (.pwg) — 휴대폰 브라우저에서 앱 대신 뜨는 설치 안내

   그림은 이미지 파일이 아니라 **UI 목업 마크업**이다 — 실제 브라우저의 그
   자리(공유 버튼·메뉴)를 같은 모양으로 그려서 "어디를 누르는지" 를 보여준다.
   OS 가 업데이트돼 생김새가 바뀌면 여기만 고치면 된다.
   ═══════════════════════════════════════════════════════════════════════════ */
.pwg {
  max-width: 430px;
  margin: 0 auto;
  padding: 48px 22px 40px;
  text-align: center;
}
.pwg-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.pwg-brand .logo-text { display: none; }
.pwg-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--w3-ink); }
.pwg-sub { margin-top: 6px; font-size: 14px; color: var(--w3-dim); }

.pwg-benefits {
  margin: 20px 0 22px;
  padding: 4px 16px;
  border-radius: 18px;
  background: var(--tw-fill);
  text-align: left;
}
.pwg-benefit {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0;
  font-size: 13.5px; color: var(--w3-ink);
}
.pwg-benefit + .pwg-benefit { border-top: 1px solid rgba(16, 22, 26, 0.06); }
.pwg-benefit .icon { color: #0c93a5; flex: none; }

.pwg-how { text-align: left; }
.pwg-note {
  font-size: 13.5px; line-height: 1.6; color: var(--w3-ink);
  padding: 12px 14px; border-radius: 14px;
  background: rgba(13, 162, 182, 0.08);
  margin-bottom: 14px;
}
.pwg-hint { margin-top: 10px; font-size: 12.5px; color: var(--w3-dim); text-align: center; }

/* 단계 */
.pwg-steps { display: flex; flex-direction: column; gap: 14px; }
.pwg-step { display: flex; gap: 11px; }
.pwg-n {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #0da2b6; color: #fff; font-size: 13px; font-weight: 800;
}
.pwg-step-body { flex: 1; min-width: 0; }
.pwg-step-t { font-size: 14px; line-height: 1.5; color: var(--w3-ink); padding-top: 3px; }
.pwg-step-t b { color: #0c93a5; }

/* 브라우저 UI 목업 */
.pwg-mock {
  margin-top: 9px;
  border: 1px solid var(--tw-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.pwg-hot { position: relative; color: #0c93a5 !important; }
.pwg-hot::after {
  content: '';
  position: absolute; inset: -7px;
  border: 2px solid #0da2b6; border-radius: 12px;
  pointer-events: none;
}
.pwg-hot-t { color: #0c93a5; font-weight: 800; }

/* Safari 하단 바 목업 */
.pwg-mock-safari {
  display: flex; align-items: center; justify-content: space-around;
  padding: 13px 10px;
  color: #9aa4a9;
}
.pwg-mock-safari .pwg-share { display: grid; place-items: center; }

/* 주소창 + 메뉴(⋮) 목업 */
.pwg-mock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.pwg-url {
  flex: 1;
  padding: 7px 12px; border-radius: 999px;
  background: var(--tw-fill);
  font-size: 12.5px; color: var(--w3-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.pwg-dots { font-size: 19px; font-weight: 800; padding: 0 6px; color: #4d5c61; }

/* 공유 시트·메뉴 목업 */
.pwg-mock-menu { padding: 4px 0; }
.pwg-menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 15px;
  font-size: 13.5px; color: #9aa4a9;
}
.pwg-menu-row.pwg-hot { color: var(--w3-ink) !important; font-weight: 700; }
.pwg-menu-row.pwg-hot::after { inset: 2px 6px; }
.pwg-menu-row + .pwg-menu-row { border-top: 1px solid rgba(16, 22, 26, 0.05); }
.pwg-plussq {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.6px solid currentColor;
}

/* 추가 확인 다이얼로그 목업 */
.pwg-dlg-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 15px;
  font-size: 13px; color: #9aa4a9;
  border-bottom: 1px solid rgba(16, 22, 26, 0.05);
}
.pwg-dlg-bar b { color: var(--w3-ink); font-size: 13.5px; }
.pwg-dlg-app {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
}
.pwg-dlg-ico { color: #0da2b6; flex: none; }
.pwg-dlg-app b { display: block; font-size: 14px; color: var(--w3-ink); }
.pwg-dlg-app span { display: block; font-size: 11.5px; color: var(--w3-dim); }

/* 설치 완료 */
.pwg-done { text-align: center; padding: 8px 0 4px; }
.pwg-done-ico {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(20, 184, 138, 0.14); color: #0b8c63;
  margin-bottom: 10px;
}
.pwg-done-t { font-size: 18px; font-weight: 800; color: var(--w3-ink); }
.pwg-done-s { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--w3-dim); }


/* 공유 시트의 동그라미 동작 줄 목업 (아이폰 4단계의 "더 보기") */
.pwg-mock-acts {
  display: flex; justify-content: space-around; align-items: flex-start;
  padding: 14px 10px 12px;
}
.pwg-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: #9aa4a9;
}
.pwg-act-hot { color: var(--w3-ink); font-weight: 700; }
.pwg-act-c {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tw-fill); color: #6b767b;
}
.pwg-act-c.pwg-hot::after { border-radius: 50%; inset: -5px; }
.pwg-act-c.pwg-hot { color: #0c93a5 !important; }

/* ── 결제 QR 다리 화면 — 카메라 스캔이 브라우저로 열렸을 때 (pwg 레이아웃 재사용) ── */
.pay-handoff-merchant {
  margin: 4px 0 18px;
  padding: 14px 16px;
  text-align: center;
}
.pay-handoff-biz { font-size: 17px; font-weight: 800; color: var(--w3-ink); }
.pay-handoff-amt { margin-top: 4px; font-size: 24px; font-weight: 800; color: #0c93a5; letter-spacing: -0.5px; }
.pay-handoff-code { margin-top: 6px; font-size: 12.5px; color: var(--w3-dim); }
.pay-handoff-code b { color: var(--w3-ink); }
.pay-handoff .btn-text { display: block; margin-left: auto; margin-right: auto; color: var(--w3-dim); }
.pay-handoff .pwg-note a { color: inherit; }

/* ── 고객센터 FAB — 탭바(1023px까지 표시)와 겹치지 않게 ──────────────────
   theme.css 는 720px 까지만 올려두는데, 회원 앱의 하단 탭바는 1023px 까지
   있다. 721~1023px(태블릿·가로 모드)에서 FAB 가 탭바 위에 얹히던 문제. */
@media (max-width: 1023px) {
  .support-fab {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    right: 14px;
  }
  .support-panel {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 푸시 필수 안내 카드 (홈 상단) — 켤 때까지 사라지지 않는다 ──────────── */
.push-nudge {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(13, 162, 182, 0.08);
  border: 1px solid rgba(13, 162, 182, 0.22);
  margin-bottom: 14px;
}
.push-nudge[hidden] { display: none; }
.push-nudge-ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(13, 162, 182, 0.14); color: #0c93a5;
}
.push-nudge-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-nudge-body b { font-size: 14px; color: var(--w3-ink); }
.push-nudge-body span { font-size: 12px; line-height: 1.45; color: var(--w3-dim); }
.push-nudge-btn { flex: none; border-radius: 999px; padding: 9px 16px; font-size: 13px; height: auto; }
@media (min-width: 1024px) {
  .push-nudge { grid-column: 1 / -1; margin-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   다크 모드 (회원 앱 전용)

   트러스트 월렛 다크 문법: 근흑 배경, 한 단계 밝은 카드, 흰 잉크, 중성
   회색 면, 액센트(틸)는 그대로. 적용은 `html.dark` 클래스 하나다 —
   시스템 설정을 따를지, 수동 선택을 따를지는 JS(applyTheme)가 판단해서
   클래스를 켜고 끈다. CSS 를 미디어쿼리와 수동 셀렉터 두 벌로 쓰면
   같은 블록이 통째로 중복된다.

   admin·partner 콘솔은 이 파일을 로드하지 않으므로 영향이 없다.
   ═══════════════════════════════════════════════════════════════════════════ */
:root.dark {
  --w3-ink: #edf3f4;
  --w3-dim: #90a0a6;
  --w3-glass: #13191d;
  --w3-glass-line: rgba(255, 255, 255, 0.07);
  --tw-fill: #1d252a;
  --tw-fill-deep: #262f35;
  --tw-line: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --bg-elevated: #161d22;
  --bg-sunken: #1d252a;
  --text: #edf3f4;
  --text-secondary: #b7c2c6;
  --text-tertiary: #90a0a6;
  --text-disabled: #5c6a70;
  --grey-0: #13191d;
  --grey-50: #171e23;
  --grey-100: #1d252a;
  --grey-200: #262f35;
  --grey-300: #333f46;
  --grey-400: #6b7a80;
  --grey-500: #90a0a6;
  --grey-600: #b7c2c6;
  --grey-700: #cdd6d9;
  --grey-800: #dfe6e8;
  --grey-900: #edf3f4;
  --ink-900: #edf3f4;
}
.dark body { background: #0d1215; }

/* 표면 — 흰 리터럴을 쓰던 자리들 */
.dark .glass, .dark .card, .dark .hm-card, .dark .wallet-card,
.dark .gd2-hero, .dark .gd2-sec, .dark .me-hero,
.dark .wallet-hero, .dark .rail-hero {
  background: #13191d;
  border-color: var(--tw-line);
}
.dark .market-row { background: #13191d !important; border-color: var(--tw-line) !important; }
.dark .appbar, .dark .mobile-bar { background: #0d1215; border-bottom-color: var(--tw-line); }
.dark .tabbar { background: #10161a; border-top-color: var(--tw-line); }
.dark .modal { background: #161d22; border-color: var(--tw-line); }
.dark .auth-wrap > form, .dark .auth-wrap > .auth-card { background: #13191d; border-color: var(--tw-line); }

/* 입력 — 어두운 면, 포커스 시 더 어두운 바탕 + 틸 링 그대로 */
.dark .input:focus, .dark .select:focus, .dark .textarea:focus { background: #0d1215; }
.dark .amount-field:focus-within { background: #0d1215; }

/* 사이드바(서랍·데스크탑) */
.dark .sidenav { background: #10161a; color: var(--w3-ink); }
@media (max-width: 1023px) {
  .dark .sidenav { box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5); }
}
@media (min-width: 1024px) {
  .dark .sidenav { border-right-color: var(--tw-line); }
}

/* 칩 — 활성을 반전 알약으로 (어두운 바탕 위 흰 알약) */
.dark .chip.active { background: #edf3f4; color: #10151a; }

/* 게이트·목업 */
.dark .pwg-mock { background: #13191d; }
.dark .pwg-url { background: var(--tw-fill); }
.dark .gd-fact { background: #13191d; }
.dark .gd-shot img { border-color: var(--tw-line); }

/* 프레스 배경 */
.dark .w3-todo:active, .dark .w3-chip:active, .dark .market-item:active,
.dark .ledger-row:active, .dark .me-help-row:active { background: var(--tw-fill); }

/*
 * 어두운 면에서는 칩 배경만으로 경계가 안 잡힌다 — 바탕과 명도 차이가
 * 작아 블록이 어디서 끝나는지 안 보인다. 헤어라인을 하나 얹는다.
 */
.dark .w3-chip { border: 1px solid var(--tw-line); }

/* 배지·틴트 — 틸 틴트는 어두운 바탕에서 살짝 올린다 */
.dark .w3-mnote, .dark .gd2-hero-note, .dark .gd-note,
.dark .push-nudge { background: rgba(18, 169, 188, 0.12); }
.dark .w3-acct-tag { background: rgba(18, 169, 188, 0.2); color: #4fd3de; }
.dark .form-aside-note { background: var(--tw-fill); }

/* 테마 선택 세그먼트 (내 정보) */
.theme-seg { display: flex; gap: 8px; padding: 4px 0 14px; }
.theme-seg .chip { flex: 1; text-align: center; justify-content: center; padding: 10px 0; }

/* 다크 모바일 홈도 라이트와 같이 플랫이다 — 다크 표면 규칙이 모바일 플랫
   규칙을 덮어 "여백 없는 카드" 가 되던 것을 되돌린다 (트러스트 다크 홈도
   카드 없이 순흑 위 콘텐츠다) */
@media (max-width: 1023px) {
  .dark .w3 .glass {
    background: transparent;
    border: none;
  }
}

/* ── 전수 점검 보정 ──────────────────────────────────────────────────────── */
/* 비활성 주 버튼 — 물 빠진 하늘색 대신 회색 면. "지금은 안 됨" 은 색이 아니라
   무채색이 말한다 (트러스트의 비활성도 회색이다) */
.btn-primary:disabled {
  background: var(--tw-fill-deep);
  color: var(--text-disabled);
  box-shadow: none;
}

/* 알림 제목 — 틸 글자를 잉크로. 안 읽음은 점과 틴트 배경이 이미 말해주는데
   제목까지 브랜드색이면 전부 링크처럼 보인다 */
.notif-title,
.notif-unread .notif-title { color: var(--w3-ink); }

/* 긴 알림 — 두 줄로 접고 펼치기 버튼으로 전문을 본다 (§141).
   예전에는 문구를 60자에서 잘라 "…" 로 끝냈다. 공지 전문을 읽을 길이 없었다.
   줄바꿈이 있는 공지는 줄바꿈 그대로 보여준다 */
.notif-title { white-space: pre-line; overflow-wrap: anywhere; }
.notif-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.notif-clamp.notif-open {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.notif-more {
  margin-left: 6px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--brand-600, var(--blue-600));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.notif-more:hover { text-decoration: underline; }
.dark .notif-unread { background: rgba(18, 169, 188, 0.1); }
.dark .notif-unread:hover { background: rgba(18, 169, 188, 0.16); }

/* ── 당겨서 새로고침 표시기 ─────────────────────────────────────────────── */
/*
 * 당겨도 화면이 밀리지 않게.
 *
 * 세로는 원래 contain 이었는데(당겨서 새로고침이 브라우저 기본 동작을
 * 먹지 않게), **가로가 빠져 있었다** — 모바일에서 좌우로 쓸면 화면 전체가
 * 고무줄처럼 딸려 나갔다. 앱처럼 쓰는 화면에서 그건 고장으로 읽힌다.
 *
 * `overflow-x: clip` 을 함께 건다. contain 은 "넘침이 없을 때" 만 밀림을
 * 막아주는데, 아이콘 버튼의 광학 정렬용 음수 여백 때문에 2px 이 실제로
 * 넘쳐서 가로 스크롤이 살아 있었다. hidden 이 아니라 clip 인 이유는
 * hidden 이 스크롤 컨테이너를 만들어 sticky 상단바를 깨뜨리기 때문이다.
 */
body {
  overscroll-behavior: none;
  overflow-x: clip;
}
#root { overflow-x: clip; }

/* 모바일 상단바 — 종 버튼의 음수 여백이 바깥으로 새지 않게 가둔다 */
.mobile-bar { overflow-x: clip; }
.mobile-bar .bell,
.appbar .bell { margin-right: 0; }

/*
 * 제목 상단바에 알림 종이 붙는 경우 — 제목이 남은 폭을 차지하고 종은 끝에.
 * 종이 없으면 예전처럼 뒤로+제목만 놓인다.
 */
.appbar { overflow-x: clip; }
.appbar .appbar-title { flex: 1; min-width: 0; }
.appbar .bell { flex: none; }
.ptr {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--tw-line);
  box-shadow: 0 6px 18px rgba(16, 22, 26, 0.12);
  opacity: 0;
}
.ptr .spinner { border-top-color: #0da2b6; }
.ptr-armed { border-color: #0da2b6; }
.dark .ptr { background: #1d252a; }

/* ── 결제 성공 — 체크 아이콘 뒤로 틸 링이 한 번 퍼진다 ─────────────────── */
.receipt-pulse { position: relative; }
.receipt-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(13, 162, 182, 0.55);
  animation: receipt-ring 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s both;
  pointer-events: none;
}
@keyframes receipt-ring {
  from { transform: scale(0.7); opacity: 1; }
  to { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .receipt-pulse::after { animation: none; opacity: 0; }
}

/* ── 푸시 카테고리 (내 정보) — 부모 토글 아래 들여쓴 하위 스위치 ─────────── */
.push-cats { border-top: 1px solid var(--tw-line); }
.switch-row-sub { padding-left: 14px; }
.switch-row-sub .switch-label { font-size: 13.5px; }
.switch-row-sub .switch-desc { font-size: 11.5px; }

/* ── 앱 잠금 화면 — 전부 덮는 오버레이 ─────────────────────────────────── */
.app-lock {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: #ffffff;
  padding: 24px;
}
.dark .app-lock { background: #0d1215; }
.app-lock-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(320px, 100%);
  text-align: center;
}
.app-lock-body .logo-text { display: none; }
.app-lock-t { font-size: 17px; font-weight: 750; color: var(--w3-ink); margin-bottom: 6px; }
.app-lock-alt {
  border: none; background: none; cursor: pointer;
  font-size: 12.5px; color: var(--w3-dim);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   결제 확인 시트 — 마지막 방어선. 금액이 화면에서 가장 크다
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  text-align: center;
}
.pay-sheet-store {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: var(--tw-fill, #f2f4f7);
  border-radius: 999px;
  padding: 8px 16px;
}
.pay-sheet-amount {
  margin-top: 10px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--text);
}
.pay-sheet-unit {
  font-size: 20px;
  font-weight: 700;
  margin-left: 4px;
  color: var(--text-tertiary);
}
.pay-sheet-krw {
  font-size: 14px;
  color: var(--text-secondary);
}
.pay-sheet-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--yellow-700, #a16207);
  background: var(--yellow-50, #fefce8);
  border-radius: 999px;
  padding: 6px 12px;
}
.dark .pay-sheet-warn {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   금액 키패드 — 모바일 결제 화면 전용
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.pay-keypad button {
  height: 48px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.08s;
}
.pay-keypad button:active {
  background: var(--tw-fill, #f2f4f7);
}
@media (min-width: 1024px) {
  /* 데스크탑은 실물 키보드가 있다 */
  .pay-keypad { display: none; }
}

/*
 * 결제 독 — 키패드 + 결제 버튼을 한 덩어리로 화면 아래 고정.
 *
 * 탭바 위에 얹고, 본문은 이 높이만큼 아래 여백을 갖는다. 그래야 마지막
 * 내용까지 스크롤로 닿는다.
 */
@media (max-width: 1023px) {
  .pay-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 41;
    padding: 8px 18px 10px;
    /*
     * 불투명해야 한다. 예전에는 var(--bg) 였는데 w3 테마가 --bg 를
     * transparent 로 덮어써서(메시 그라데이션 배경) 독이 투명해졌고,
     * 본문의 금액 상자·경고문이 키패드 숫자 사이로 비쳐 보였다.
     * 탭바와 같은 글래스로 확실히 가린다.
     */
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--tw-line, rgba(16, 22, 26, 0.07));
  }
  .dark .pay-dock { background: rgba(16, 22, 26, 0.96); }
  .pay-dock .pay-keypad { margin-top: 6px; margin-bottom: 8px; }
  .pay-dock .amount-chips { margin: 0; }
  /* 독 높이(빠른 금액 + 키패드 4줄 + 버튼)만큼 본문을 띄운다 */
  .form-page.has-pay-dock { padding-bottom: 330px; }
  /* 고객센터 FAB 이 독의 결제하기 버튼을 가린다 — 독이 있는 화면에서는
     숨긴다. (:has 미지원 구형 브라우저는 예전처럼 겹칠 뿐 동작은 한다) */
  body:has(.pay-dock) .support-fab { display: none; }
}
@media (min-width: 1024px) {
  /* 데스크탑은 키패드가 없으므로 독도 평범한 블록이다 */
  .pay-dock { margin-top: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   승인 대기 카드 — 절차가 어디까지 왔는지 (§3.9)
   ═══════════════════════════════════════════════════════════════════════════ */
.approve-card {
  background: var(--tw-fill, #f2f4f7);
  border-radius: var(--radius-lg, 16px);
  padding: 18px 16px 16px;
  margin-bottom: 16px;
}
.approve-steps {
  display: flex;
  align-items: flex-start;
}
.approve-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  text-align: center;
}
.approve-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-elevated, #fff);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  color: #fff;
}
.approve-step.is-done .approve-dot {
  background: var(--brand, #0da2b6);
  border-color: var(--brand, #0da2b6);
}
.approve-step.is-now .approve-dot {
  border-color: var(--brand, #0da2b6);
}
.approve-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, #0da2b6);
  animation: approve-pulse 1.6s ease-in-out infinite;
}
@keyframes approve-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.55); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .approve-pulse { animation: none; }
}
.approve-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 10px;
}
.approve-line.is-done { background: var(--brand, #0da2b6); }
.approve-step-label {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-secondary);
  line-height: 1.3;
  word-break: keep-all;
}
.approve-step.is-now .approve-step-label { color: var(--text); }
.approve-desc {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QR 스캔 오버레이
   ═══════════════════════════════════════════════════════════════════════════ */
.code-row {
  display: flex;
  gap: 8px;
}
.code-row .input { flex: 1; min-width: 0; }
.code-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 14px;
}
.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #000;
  display: grid;
  place-items: center;
}
.scan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scan-frame {
  position: relative;
  width: min(64vw, 300px);
  aspect-ratio: 1;
  border-radius: 24px;
  /* 주변을 어둡게 눌러 네모만 밝게 — 어디를 비추라는 건지 즉시 보인다 */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  outline: 2.5px solid rgba(255, 255, 255, 0.9);
  outline-offset: -1px;
}
.scan-hint {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.scan-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   로그인 다듬기 — 순백 위에 마크·타이포·여백만으로

   트러스트 월렛 라이트 문법 그대로다. 소개 문구도 패널도 없다 — 이 화면의
   품질은 브랜드 마크의 존재감과 입력 필드의 촉감이 만든다.
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-wrap {
  background: var(--bg);
}
.auth-wrap .brand { color: inherit; margin-bottom: 34px; }
.auth-wrap .brand .logo-word {
  color: var(--text);
  font-size: 27px;
  letter-spacing: -0.6px;
}
.auth-wrap .brand .logo-sub {
  color: var(--text-tertiary);
  font-size: 13.5px;
  margin-top: 2px;
}
/* 입력 — 회색면, 커지고 부드럽게. 포커스에 흰 면 + 틸 링 (컨셉 규칙) */
.auth-wrap .input {
  height: 52px;
  font-size: 16px;
  border-radius: 14px;
}
.auth-wrap .btn-lg {
  height: 52px;
  font-size: 16px;
  border-radius: 14px;
}
/* 등장 — 살짝 떠오른다. 움직임 최소화 설정이면 없음 */
@media (prefers-reduced-motion: no-preference) {
  .auth-wrap .brand,
  .auth-wrap form,
  .auth-wrap .row {
    animation: auth-rise 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .auth-wrap form { animation-delay: 0.05s; }
  .auth-wrap .row { animation-delay: 0.1s; }
}
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   월렛 다듬기 — 눈 토글 · 오늘 변화 · 날짜 머리글 · 필터 접기
   ═══════════════════════════════════════════════════════════════════════════ */
/* 잔액 숨김 토글 — 라벨 줄 오른쪽 끝 */
.bal-eye {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}
.bal-eye:active { background: var(--tw-fill, #f2f4f7); color: var(--text); }
.w3-hero-label, .wallet-hero-label { display: flex; align-items: center; gap: 6px; }

/* 오늘 변화 — 잔액 아래 한 줄. 순증은 틸, 순감은 잉크(빨강은 위험 신호에 아낀다) */
.w3-today {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.w3-today.is-up .w3-today-net { color: var(--brand, #0da2b6); }
.w3-today-sep { color: var(--text-disabled); }

/* 내역 날짜 머리글 */
.ledger-day {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
  padding: 16px 0 6px;
}
.ledger-day:first-child { padding-top: 4px; }

/* 내역 필터 버튼 — 회색 알약, 필터가 걸려 있으면 틸 */
.ledger-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: var(--tw-fill, #f2f4f7);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.ledger-filter-btn.is-active {
  background: var(--brand-50, #e6f6f8);
  color: var(--brand, #0da2b6);
}
.ledger-filters { margin-bottom: 4px; }

/* 지갑 히어로 안의 동작 원판 — 홈과 같은 밀도로 */
.wallet-hero .w3-ops { margin-top: 18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   A·C·D — 내역 상세 · 고정 · 기기 목록 · 첫 실행
   ═══════════════════════════════════════════════════════════════════════════ */

/* 내역 행이 버튼이 됐다 — 기본 버튼 모양을 지우고 누르는 느낌만 남긴다 */
button.ledger-row {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.ledger-row:active { background: var(--tw-fill, #f2f4f7); }

/* 내역 상세 시트 */
.ledger-sheet { text-align: center; }
.ledger-sheet-ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tw-fill, #f2f4f7);
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.ledger-sheet-ico.is-in { color: var(--brand, #0da2b6); }
.ledger-sheet-amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 18px;
}
.ledger-sheet-rows {
  text-align: left;
  background: var(--tw-fill, #f2f4f7);
  border-radius: 14px;
  padding: 4px 14px;
}
.ledger-sheet-rows .kv { border-bottom: 1px solid var(--tw-line, rgba(16,22,26,0.07)); }
.ledger-sheet-rows .kv:last-child { border-bottom: none; }

/*
 * 자주 결제한 곳 — 별표 고정.
 *
 * 칩 모서리에 띄우지 않는다. 떠 있는 배지는 카드 밖으로 삐져나온 것처럼
 * 보이고 누를 곳도 애매하다. 칩 안에 **정식 슬롯**을 두고 링크와 나란히
 * 세운다 — 왼쪽은 결제로 가는 링크, 오른쪽은 고정 버튼이다.
 */
.w3-chip { position: relative; }
.w3-chip-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
/* 부제도 한 줄로 — 별표가 자리를 차지하면서 "마지막 / ₩1,200" 로 접혔다 */
.w3-chip-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-btn {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: -4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  /*
   * disabled 색은 어두운 면 위에서 칩 배경과 붙어 별이 아예 안 보였다
   * (#5c6a70 on #262f35 ≈ 1.9:1). tertiary 는 두 모드 모두에서 읽힌다.
   */
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
}
.pin-btn:active { background: var(--tw-fill-deep, #e9edf2); }
.pin-btn.is-on { color: #f5a524; }
.pin-btn.is-on .icon { fill: currentColor; }

/* 로그인된 기기 */
.me-sub-head {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--text-tertiary);
  margin: 18px 0 6px;
}
.sess-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tw-line, rgba(16,22,26,0.07));
}
.sess-row:last-child { border-bottom: none; }
.sess-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tw-fill, #f2f4f7);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sess-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sess-name { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.sess-now {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand-50, #e6f6f8);
  color: var(--brand, #0da2b6);
}
.sess-sub { font-size: 12px; color: var(--text-tertiary); }

/* 첫 실행 안내 */
.firstrun-title { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.firstrun-sub { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; margin-bottom: 18px; }
.firstrun-steps { display: flex; flex-direction: column; gap: 14px; }
.firstrun-step { display: flex; align-items: flex-start; gap: 10px; }
.firstrun-n {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand, #0da2b6);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  display: grid;
  place-items: center;
}
.firstrun-ico { flex-shrink: 0; color: var(--brand, #0da2b6); margin-top: 1px; }
.firstrun-body { display: flex; flex-direction: column; gap: 2px; }
.firstrun-t { font-size: 14.5px; font-weight: 700; }
.firstrun-d { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }


/* ═══════════════════════════════════════════════════════════════════════════
   탭 화면의 제목 옆 알림 종

   공용 상단바(햄버거·로고·종)를 걷어냈다. 화면마다 로고가 반복되면 정작
   "지금 어느 화면인지" 가 제목이 아니라 브랜드에 밀린다. 메뉴는 하단 탭이
   대신하고, 알림만 각 화면의 제목 옆으로 옮긴다.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-bell {
  width: 38px;
  height: 38px;
  margin-right: -6px;
  flex: none;
}
.form-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.form-head-row .t-h1 { min-width: 0; }
/*
 * 내 정보 히어로의 종 — 맨 오른쪽 끝으로.
 *
 * DOM 순서상 이름과 상태 태그 사이에 들어가는데, 그대로 두면 종이 문장
 * 한가운데 낀 것처럼 읽힌다. 시각 순서만 뒤로 보낸다.
 */
.me-hero { position: relative; }
.me-hero .page-bell {
  order: 9;
  align-self: center;
  margin-left: auto;
  margin-right: 0;
}
.me-hero .me-hero-tags { margin-left: auto; }

@media (min-width: 1024px) {
  /* 데스크탑에는 사이드바가 있어 종이 두 번 나온다 */
  .page-bell { display: none; }
}

/* 제목 옆 액션 묶음 — 필터 버튼과 종이 나란히 */
.page-head-side { display: flex; align-items: center; gap: 6px; }

/* 결제 경고 — 상자 대신 한 줄. 금액 바로 아래에 붙는다 */
.pay-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--yellow-700, #a16207);
}
.dark .pay-warn { color: #fbbf24; }

/*
 * 고정 CTA 아래 여백 — 폼 옆 열(.form-aside)이 모바일에서 폼 **아래로**
 * 내려올 때의 이야기다.
 *
 * 여백이 .form-page 에만 걸려 있어서 두 가지가 동시에 어긋났다:
 *   · 폼과 아래 목록 사이에 148px 짜리 빈 구멍이 생기고
 *   · 정작 마지막 요소(목록 제목)는 고정 버튼 뒤에 깔렸다
 * 여백을 실제 마지막 블록으로 옮긴다.
 */
@media (max-width: 1023px) {
  .has-tabbar .form-page:has(+ .form-aside) { padding-bottom: 8px; }
  .has-tabbar .form-aside { padding-bottom: 148px; }
}


/* ── 1원 인증 검증번호 칸 (§142) ────────────────────────────────────────────
   위의 계좌 입력칸과 똑같이 생기면 다음 단계가 열린 줄 모른다. 테두리 색과
   단계 표시로 "지금 할 일" 을 드러내고, 번호는 크게 받는다 */
.vcode {
  margin-top: 16px;
  padding: 16px;
  border: 2px solid var(--brand-500, var(--blue-500));
  border-radius: 16px;
  background: var(--brand-50, var(--blue-50));
}
.vcode-step {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-600, var(--blue-600));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.vcode-input {
  height: 56px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
  background: var(--bg, #fff);
}
.vcode-input::placeholder {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
}
.dark .vcode { background: rgba(18, 169, 188, 0.08); }


/* 내 판매글 — 시장 목록에서 눈에 띄게, 살 수 없다는 것이 보이게 (§147) */
.market-row-mine { background: var(--brand-50, var(--blue-50)); }
.dark .market-row-mine { background: rgba(18, 169, 188, 0.08); }