/* =====================================================================
   마이페이지 · 크레딧 관리 탭 (#my-wallet)
   ---------------------------------------------------------------------
   [2026-11-02 A2 · 사장님 시안 «바뀐 코드 기준 (A + 한눈에 비교)»]
     01 잔액         크레딧 · 별사탕 · AI 에너지 카드(넓으면 한 줄에 셋). 별사탕은 '바꾸기까지' 막대·소멸 예정,
                     AI 에너지는 구독 지급분 막대·충전 단추.
     02 오늘의 보상  흰 카드 한 줄 — 안내 · 최근 7일 원 · 출석 단추
     03 별사탕 전환  바꿀 수 있을 때만 나온다(입력·전환)
     04 한눈에 비교  셋이 무엇이고 어떻게 받고 어디에 쓰고 언제까지인지 — 표
     05 이용 내역    한 표(전체 · 크레딧 · 별사탕 · AI 에너지). 좁은 화면에서는 줄마다 두 줄짜리 카드.
   (그 전: 2026-10-07 A안 «두 카드 + 단계형», 2026-10-21 맨 위 진한 보라 출석 띠)
   규칙
     · 크레딧 = 보라, 별사탕 = 호박색. 행동 단추(출석·전환)는 보라 하나.
     · 카드에 왼쪽 색 띠를 쓰지 않는다. 기본 카드에는 그림자가 없다(1px 테두리만).
     · 글자: 사장님은 작은 글자를 싫어하신다. 시안보다 키웠다 —
       본문 15px 이상, 보조 14px 이상, 가장 작은 글자도 13px(표 머리·요일·딱지).
       굵기는 100 단위, 자간은 -0.06/-0.04/-0.03/-0.02em 만 (typography-scale-test.js).
   그리는 곳: assets/js/learning-portal.js 의 renderPlan()
   ===================================================================== */

#my-wallet{
  --w-violet:#6C5CE7;
  --w-violet-strong:#5A4BD4;
  --w-violet-deep:#4C3FD6;
  --w-violet-soft:#F0EDFF;
  --w-violet-line:#D5D0FF;
  --w-credit:#4338CA;
  --w-candy:#B45309;
  --w-candy-strong:#92400E;
  --w-candy-soft:#FFF3D6;
  --w-candy-wash:#FFF7ED;
  --w-candy-line:#F2E0BC;
  --w-ink:#182235;
  --w-body:#344054;
  --w-cell:#2B3245;
  --w-muted:#667085;
  --w-sub:#6B7280;
  --w-label:#7A8291;
  --w-line:#ECECF3;
  --w-line-soft:#F1F2F7;
  --w-num:"Space Grotesk","Pretendard",sans-serif;
  word-break:keep-all;
  letter-spacing:-.02em;
}
#my-wallet .w-host{container:wallet / inline-size;min-width:0;}
#my-wallet .w-host,
#my-wallet .w-wallet{display:grid;gap:14px;min-width:0;}
#my-wallet .w-loading{margin:0;padding:24px;color:var(--w-muted);font-size:15px;}
#my-wallet [hidden]{display:none!important;}
#my-wallet .w-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
#my-wallet p{margin:0;}
#my-wallet .w-n{font-family:var(--w-num);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;color:var(--w-ink);}
#my-wallet .w-n.credit{color:var(--w-credit);}
#my-wallet .w-n.candy{color:var(--w-candy-strong);}
#my-wallet .w-n.violet{color:var(--w-violet-strong);}
#my-wallet .unit{color:var(--w-sub);font-family:"Pretendard",sans-serif;font-weight:700;letter-spacing:-.02em;}
#my-wallet .w-k{display:block;color:var(--w-label);font-size:14px;font-weight:700;}
#my-wallet .w-help{color:var(--w-label);font-size:14px;font-weight:600;}

/* ── 카드 ──────────────────────────────────────────────────────────── */
#my-wallet .w-sec,
#my-wallet .w-asset{
  min-width:0;
  margin:0;
  border:1px solid var(--w-line);
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}
#my-wallet .w-sec{padding:22px 24px;}
#my-wallet .w-h2{
  margin:0!important;
  color:var(--w-ink)!important;
  font-size:18px!important;
  font-weight:700!important;
  letter-spacing:-.03em;
  line-height:1.35;
}

/* ── 단추 ──────────────────────────────────────────────────────────── */
#my-wallet .w-btn-primary,
#my-wallet .w-btn-sm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:11px;
  font-family:inherit;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
#my-wallet .w-btn-primary{
  min-height:48px;
  min-width:172px;
  padding:0 20px;
  border:1px solid var(--w-violet);
  background:var(--w-violet);
  color:#fff;
  font-size:16px!important;
}
#my-wallet .w-btn-primary:hover{background:var(--w-violet-strong);border-color:var(--w-violet-strong);}
#my-wallet .w-btn-sm{
  min-height:44px;
  padding:0 16px;
  border:1px solid #E2E5EE;
  background:#fff;
  color:#4B5563;
  font-size:15px!important;
}
#my-wallet .w-btn-sm:hover{background:#FBFAFF;border-color:#C9C2F0;color:var(--w-violet-strong);}
#my-wallet .w-btn-primary:disabled,
#my-wallet .w-btn-sm:disabled{background:#F4F5F8;border-color:#E7E9F1;color:#8D95A5;cursor:default;}
#my-wallet .w-btn-primary.is-done:disabled{background:#fff;border-color:#E2E5EE;color:var(--w-sub);}
#my-wallet .w-textbtn{
  border:0;
  background:none;
  padding:4px 0;
  color:var(--w-violet-strong);
  font-family:inherit;
  font-size:15px!important;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
#my-wallet .w-textbtn:hover{text-decoration:underline;}
/* 공용 규칙이 단추·입력칸 글자 굵기를 400 으로 묶어, 여기서 정한 굵기가 먹지 않았다. */
#my-wallet .w-btn-primary,#my-wallet .w-btn-sm,#my-wallet .w-textbtn,#my-wallet .w-filter,#my-wallet .w-field{font-weight:700!important;}
#my-wallet button:focus-visible,
#my-wallet a:focus-visible{outline:3px solid rgba(91,75,232,.32);outline-offset:2px;border-radius:8px;}

/* ── 배지 ──────────────────────────────────────────────────────────── */
#my-wallet .w-badge{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  border:1px solid;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
  vertical-align:middle;
}
#my-wallet .w-badge.violet{background:var(--w-violet-soft);border-color:var(--w-violet-line);color:var(--w-violet-strong);}
#my-wallet .w-badge.mint{background:#EDF7F2;border-color:#CBE8D9;color:#157F4A;}
#my-wallet .w-badge.wait{background:#F4F5F8;border-color:var(--w-line);color:var(--w-sub);}

/* =========================================================================
   01 잔액 — 카드 두 장
   ========================================================================= */
#my-wallet .w-asset{display:flex;flex-direction:column;gap:12px;padding:20px 22px;}
#my-wallet .w-asset-top{display:flex;align-items:center;gap:14px;}
#my-wallet .w-tile{
  flex:none;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:14px;
  background:#F4F5F8;
}
#my-wallet .w-tile.credit{background:var(--w-violet-soft);}
#my-wallet .w-tile.candy{background:var(--w-candy-wash);}
#my-wallet .w-tile img{width:36px;height:36px;object-fit:contain;display:block;}
#my-wallet .w-asset-copy{min-width:0;}
#my-wallet .w-asset-label{display:block;margin-bottom:6px;color:var(--w-sub);font-size:15px;font-weight:700;}
#my-wallet .w-asset-value{display:flex;align-items:baseline;gap:5px;white-space:nowrap;}
#my-wallet .w-asset-value .w-n{font-size:40px;}
#my-wallet .w-asset-value .unit{font-size:17px;color:#4B5563;}
#my-wallet .w-asset-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-top:auto;               /* 두 카드 높이가 달라도 아래 줄을 맞춘다 */
  padding-top:12px;
  border-top:1px solid var(--w-line-soft);
}
#my-wallet .w-asset-note{min-width:0;color:var(--w-muted);font-size:15px;line-height:1.5;}
#my-wallet .w-asset-note .w-badge{margin-right:4px;}

/* 소멸 예정 — 별사탕 잔액 바로 아래 호박색 줄 */
#my-wallet .w-expiry-host:empty{display:none;}
#my-wallet .w-expiry{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 13px;
  border:1px solid var(--w-candy-line);
  border-radius:10px;
  background:var(--w-candy-wash);
  color:var(--w-candy);
  font-size:15px;
  font-weight:600;
  line-height:1.5;
}
#my-wallet .w-expiry .ico{flex:none;}
#my-wallet .w-expiry .txt{min-width:0;}
#my-wallet .w-expiry b{font-family:var(--w-num);font-weight:700;}
#my-wallet .w-expiry em{font-style:normal;font-weight:700;}
#my-wallet .w-expiry.soon{border-color:#E9B872;background:#FFF1DC;color:var(--w-candy-strong);}
#my-wallet .w-expiry-rule{
  padding:12px 14px;
  border-radius:10px;
  background:#FAFAFC;
  color:var(--w-body);
  font-size:15px;
  line-height:1.6;
}
#my-wallet .w-expiry-rule a{color:var(--w-violet-strong);font-weight:700;}

/* =========================================================================
   02 오늘의 보상
   ========================================================================= */
#my-wallet .w-attend{display:flex;flex-direction:column;gap:18px;}
#my-wallet .w-checkin{display:flex;align-items:center;flex-wrap:wrap;gap:16px;}
#my-wallet .w-attend-mark{
  flex:none;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--w-violet);
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:1;
}
#my-wallet .w-checkin.is-done .w-attend-mark{background:#16A34A;}
#my-wallet .w-attend-copy{flex:1 1 300px;min-width:0;}
#my-wallet .w-attend-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:0!important;
  color:var(--w-ink)!important;
  font-size:21px!important;
  font-weight:700!important;
  letter-spacing:-.03em;
  line-height:1.35;
}
#my-wallet .w-attend-desc{margin-top:6px;color:var(--w-muted);font-size:15px;line-height:1.55;}
#my-wallet .w-attend-action{flex:none;}
#my-wallet .w-note{color:var(--w-muted);font-size:15px;}

#my-wallet .w-week-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px;}
#my-wallet .w-week-head .w-h2{font-size:16px!important;}
#my-wallet .w-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;}
#my-wallet .w-day{display:flex;flex-direction:column;align-items:center;gap:7px;}
#my-wallet .w-day-orb{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:2px solid transparent;
  border-radius:50%;
  background:#F4F5F8;
  color:#A0A7B5;
  font-size:16px;
  font-weight:700;
  box-sizing:border-box;
}
#my-wallet .w-day.done .w-day-orb{background:#DCF7EC;color:#157F4A;}
#my-wallet .w-day.today .w-day-orb{background:#fff;border-color:var(--w-violet);color:var(--w-violet-strong);box-shadow:0 0 0 3px rgba(108,92,231,.12);}
#my-wallet .w-day.today.done .w-day-orb{border-color:#16A34A;color:#157F4A;box-shadow:0 0 0 3px rgba(22,163,74,.12);}
#my-wallet .w-day-label{color:#8D95A5;font-size:14px;font-weight:600;}
#my-wallet .w-day.done .w-day-label{color:#4B5563;}
#my-wallet .w-day.today .w-day-label{color:var(--w-violet-strong);font-weight:700;}

/* =========================================================================
   03 별사탕 → 크레딧
   ========================================================================= */
#my-wallet .w-convert-card{display:flex;flex-direction:column;gap:16px;scroll-margin-top:16px;}
#my-wallet .w-rules{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:-6px;}
#my-wallet .w-rule{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 13px;
  border:1px solid var(--w-line);
  border-radius:10px;
  background:#FAFAFC;
  color:var(--w-body);
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
}
#my-wallet .w-rule b{color:var(--w-violet-strong);font-weight:700;}
#my-wallet .w-rule em{color:#98A2B3;font-style:normal;font-weight:700;}
#my-wallet .w-rules-note{color:var(--w-label);font-size:14px;font-weight:600;}

/* 못 바꿀 때 — 입력칸 없이 '얼마나 모였나' 만 */
#my-wallet .w-short-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;}
#my-wallet .w-short-held,
#my-wallet .w-short-need p{display:flex;align-items:baseline;gap:6px;margin-top:6px;white-space:nowrap;}
#my-wallet .w-short-held .w-n{font-size:34px;}
#my-wallet .w-short-held .unit{font-size:17px;}
#my-wallet .w-short-min{margin-left:6px;color:var(--w-label);font-size:17px;font-weight:700;}
#my-wallet .w-short-need{text-align:right;}
#my-wallet .w-short-need p{justify-content:flex-end;}
#my-wallet .w-short-need .w-n{font-size:28px;}
#my-wallet .w-short-need .unit{font-size:16px;}
#my-wallet .w-short-bar{display:flex;flex-direction:column;gap:8px;}
#my-wallet .w-bar{height:12px;border-radius:999px;background:#EFF1F6;overflow:hidden;}
#my-wallet .w-bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#E5A33C,#D4871B);transition:width .4s ease;}
#my-wallet .w-bar-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--w-sub);font-size:15px;font-weight:700;}
#my-wallet .w-bar-meta b{color:var(--w-ink);font-family:var(--w-num);font-weight:700;}
#my-wallet .w-hint{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:13px 16px;
  border:1px solid #EAE6FB;
  border-radius:12px;
  background:var(--w-violet-soft);
  color:var(--w-violet-deep);
  font-size:15px;
  font-weight:700;
  line-height:1.55;
}
#my-wallet .w-hint .ico{flex:none;}
#my-wallet .w-hint b{font-weight:800;}

/* 바꿀 수 있을 때 — 내는 별사탕 → 받는 크레딧, 그리고 입력 */
/* [2026-10-21] 예전 이름 .w-now — 마이페이지 '지금 할 일' 띠(.my-now.w-now, mypage-now.css)와 이름이 겹쳐
   띠까지 연회색으로 칠했다. 전환 칸의 '내는 별사탕 → 받는 크레딧' 상자는 .w-swap 으로 부른다. */
#my-wallet .w-swap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border:1px solid var(--w-line-soft);
  border-radius:14px;
  background:#FBFBFE;
}
#my-wallet .w-swap-cell{display:flex;flex-direction:column;gap:6px;min-width:0;}
#my-wallet .w-swap-v{display:flex;align-items:baseline;gap:5px;white-space:nowrap;}
#my-wallet .w-swap-v .w-n{font-size:30px;}
#my-wallet .w-swap-v .unit{font-size:16px;}
#my-wallet .w-swap-sub{color:var(--w-label);font-size:14px;font-weight:600;}
#my-wallet .w-swap-arrow{color:#B4BAC6;font-size:22px;font-weight:700;}
#my-wallet .w-convert{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 14px;}
#my-wallet .w-convert-field{display:flex;flex-direction:column;gap:7px;}
#my-wallet .w-stepper{display:flex;align-items:center;gap:8px;}
#my-wallet .w-stepper .unit{font-size:16px;}
#my-wallet .w-field{
  width:150px;
  min-height:48px;
  padding:0 14px;
  border:1px solid #E2E5EE;
  border-radius:11px;
  background:#fff;
  color:var(--w-ink);
  font-family:var(--w-num);
  font-size:18px!important;     /* 공용 규칙이 입력칸 글자를 1rem!important 로 묶는다. 16px 밑이면 아이폰이 확대한다 */
  font-weight:700;
  letter-spacing:-.03em;
  text-align:right;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box;
  transition:border-color .14s ease,box-shadow .14s ease;
}
#my-wallet .w-field:focus{outline:none;border-color:var(--w-violet);box-shadow:0 0 0 3px rgba(91,75,232,.18);}
#my-wallet .w-field.invalid{border-color:#E3B4AE;}
#my-wallet .w-convert .w-help{padding-bottom:13px;}
#my-wallet .w-field-msg{display:flex;align-items:flex-start;gap:6px;color:var(--w-muted);font-size:15px;font-weight:700;line-height:1.5;}
#my-wallet .w-field-msg .mk{flex:none;font-style:normal;}
#my-wallet .w-field-msg.ok{color:#157F4A;}
#my-wallet .w-field-msg.warn{color:var(--w-candy);}
#my-wallet .w-field-msg.err{color:#B42318;}

/* 출석·전환이 끝난 뒤 안내 (learning-portal.js 가 wallet-msg 로 적는다) */
#my-wallet .wallet-msg{margin-top:6px;color:var(--w-muted);font-size:15px;font-weight:700;line-height:1.5;}
#my-wallet .wallet-msg:empty{display:none;}
#my-wallet .wallet-msg.success{color:#157F4A;}
#my-wallet .wallet-msg.error{color:#B42318;}

/* =========================================================================
   04 이용 내역
   ========================================================================= */
#my-wallet .w-ledger{padding:20px 24px 18px;}
#my-wallet .w-ledger-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-bottom:6px;}
#my-wallet .w-filters{display:flex;flex-wrap:wrap;gap:6px;}
#my-wallet .w-filter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:0 15px;
  border:1px solid #E2E8F0;
  border-radius:10px;
  background:#fff;
  color:#475569;
  font-family:inherit;
  font-size:15px!important;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
#my-wallet .w-filter b{font-family:var(--w-num);font-weight:700;font-variant-numeric:tabular-nums;}
#my-wallet .w-filter:hover{background:#F7F8FB;}
#my-wallet .w-filter.on{border-color:var(--w-violet);background:var(--w-violet);color:#fff;}
#my-wallet .w-filter.on b{color:rgba(255,255,255,.85);}
/* 넓은 표는 이 안에서만 옆으로 민다 (화면 전체가 옆으로 밀리지 않게) */
#my-wallet .w-table-scroll{overflow-x:auto;}
#my-wallet .w-table{width:100%;border-collapse:collapse;}
#my-wallet .w-table th,
#my-wallet .w-table td{text-align:left;vertical-align:middle;border-bottom:1px solid var(--w-line-soft);}
#my-wallet .w-table thead th{padding:12px 8px 10px;color:var(--w-label);font-size:14px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
#my-wallet .w-table tbody td{padding:14px 8px;color:var(--w-cell);font-size:16px;}
#my-wallet .w-table th:first-child,#my-wallet .w-table td:first-child{padding-left:0;}
#my-wallet .w-table th:last-child,#my-wallet .w-table td:last-child{padding-right:0;}
#my-wallet .w-table tbody tr:last-child td{border-bottom:0;}
#my-wallet .w-table tbody tr:hover td{background:#FBFBFE;}
#my-wallet .w-table .c-when{width:160px;}
#my-wallet .w-table .c-kind{width:92px;}
#my-wallet .w-table .c-delta{width:100px;}
#my-wallet .w-table .c-bal{width:96px;}
#my-wallet .w-table td.when{color:var(--w-sub);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;}
#my-wallet .w-table td.what{font-weight:500;}
#my-wallet .w-table .w-num{text-align:right!important;white-space:nowrap;}
#my-wallet .w-table td.w-num{font-family:var(--w-num);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
#my-wallet .w-table td.w-num .unit{margin-left:1px;color:inherit;font-size:14px;}
#my-wallet .w-table td.plus{color:#157F4A;}
#my-wallet .w-table td.minus{color:#B42318;}
#my-wallet .w-table td.zero{color:var(--w-label);}
#my-wallet .w-table td.bal{color:var(--w-cell);}
#my-wallet .w-bal-k{display:none;}
#my-wallet .w-kind{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 11px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
#my-wallet .w-kind.coin{background:var(--w-candy-soft);color:var(--w-candy);}
#my-wallet .w-kind.credit{background:var(--w-violet-soft);color:var(--w-credit);}
#my-wallet .w-empty{display:grid;gap:6px;padding:36px 12px;color:var(--w-muted);text-align:center;}
#my-wallet .w-empty b{color:var(--w-body);font-size:16px;font-weight:700;}
#my-wallet .w-empty span{font-size:15px;line-height:1.5;}
#my-wallet .w-ledger-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:4px;
  padding-top:16px;
  border-top:1px solid var(--w-line-soft);
}
#my-wallet .w-ledger-count{color:var(--w-label);font-size:14px;font-weight:600;white-space:nowrap;}

#my-wallet .w-foot{margin:2px 0 0;padding:6px 4px;color:var(--w-label);font-size:14px;text-align:center;}
#my-wallet .w-foot a{color:var(--w-violet-strong);font-weight:700;text-decoration:underline;}

/* =========================================================================
   01-2 AI 에너지 — 잔액 카드 아래 한 장. 크레딧과 헷갈리지 않게 숫자만 보라로, 배경은 그대로.
   ========================================================================= */
#my-wallet .w-energy{display:flex;flex-direction:column;gap:14px;}
#my-wallet .w-energy-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;}
#my-wallet .w-n.energy{color:var(--w-violet-strong);}
#my-wallet .w-energy-head .w-asset-note{text-align:right;}
#my-wallet .w-energy-costs{padding-top:12px;border-top:1px solid var(--w-line-soft);}
#my-wallet .w-energy-costs ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
#my-wallet .w-energy-costs li{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid var(--w-line);border-radius:999px;
  font-size:14px;color:var(--w-sub);white-space:nowrap;
}
#my-wallet .w-energy-costs li b{color:var(--w-ink);font-variant-numeric:tabular-nums;}
/* [2026-11-02] 충전 단추 줄 — 잔액 카드 아래 줄(w-asset-foot)과 같은 모양 */
#my-wallet .w-energy-charge{margin-top:0;}
#my-wallet .w-energy-packs{display:flex;flex-wrap:wrap;gap:8px;}

/* =========================================================================
   00 지갑 안의 세 가지 — 크레딧 · 별사탕 · AI 에너지가 각각 무엇인지. 배경은 그대로, 칸마다 왼쪽 테두리 색만.
   ========================================================================= */
#my-wallet .w-guide{display:flex;flex-direction:column;gap:12px;}
#my-wallet .w-guide-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
#my-wallet .w-guide-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border:1px solid var(--w-line);border-left-width:3px;border-radius:12px;background:#fff;
}
#my-wallet .w-guide-item.credit{border-left-color:var(--w-credit);}
#my-wallet .w-guide-item.candy{border-left-color:var(--w-candy);}
#my-wallet .w-guide-item.energy{border-left-color:var(--w-violet-strong);}
#my-wallet .w-guide-tile{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#F4F5F8;}
#my-wallet .w-guide-tile img{width:24px;height:24px;object-fit:contain;display:block;}
#my-wallet .w-guide-ai{font-size:13px;font-weight:800;color:var(--w-violet-strong);letter-spacing:-.02em;}
#my-wallet .w-guide-copy{min-width:0;}
#my-wallet .w-guide-name{display:block;font-size:16px;color:var(--w-ink);}
#my-wallet .w-guide-what{margin:3px 0 8px;font-size:14px;color:var(--w-sub);line-height:1.5;}
#my-wallet .w-guide-copy dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 8px;font-size:13.5px;line-height:1.5;}
#my-wallet .w-guide-copy dt{color:var(--w-muted);font-weight:700;white-space:nowrap;}
#my-wallet .w-guide-copy dd{margin:0;color:var(--w-sub);word-break:keep-all;}

/* =========================================================================
   [2026-11-02] A2 시안 — 카드·막대·표. 시안 값을 그대로 옮겼다(카드 둥글기 20 · 숫자 48px · 막대 8px).
   크레딧 = 보라, 별사탕 = 호박색, AI 에너지 = 청록. 배경을 통째로 칠하지 않고 아이콘 바탕·막대·딱지에만 색.
   ========================================================================= */
#my-wallet{
  --w-energy:#0F766E;
  --w-energy-strong:#0F5F58;
  --w-energy-soft:#E3F4F1;
  --w-a2-line:#E4E6EE;
  --w-a2-cell:#EEF0F4;
  --w-a2-sub:#4A4F5A;
}
#my-wallet .w-wallet{gap:20px;}
#my-wallet .w-sec,
#my-wallet .w-asset{border-color:var(--w-a2-line);border-radius:20px;}
#my-wallet .w-sec{padding:24px;}

/* ① 잔액 카드 */
#my-wallet .w-assets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
#my-wallet .w-asset{display:flex;flex-direction:column;gap:18px;padding:24px;}
#my-wallet .w-asset-head{display:flex;align-items:center;gap:10px;}
#my-wallet .w-asset .w-tile{width:40px;height:40px;border-radius:12px;}
#my-wallet .w-asset .w-tile img{width:26px;height:26px;}
#my-wallet .w-tile.candy{background:var(--w-candy-soft);}
#my-wallet .w-tile.energy{background:var(--w-energy-soft);color:var(--w-energy);}
#my-wallet .w-asset-label{margin:0!important;color:var(--w-ink)!important;font-size:17px!important;font-weight:700!important;line-height:1.35;}
#my-wallet .w-asset-value{display:flex;align-items:baseline;gap:6px;white-space:nowrap;}
#my-wallet .w-asset-value .w-n{font-size:48px;}
#my-wallet .w-asset-value .unit{font-size:16px;color:var(--w-a2-sub);}
#my-wallet .w-asset-note{color:var(--w-cell);font-size:14px;line-height:1.5;}
#my-wallet .w-asset-note .w-n{font-size:15px;}
#my-wallet .w-asset-meter{display:flex;flex-direction:column;gap:8px;}
#my-wallet .w-meter-row{display:flex;justify-content:space-between;gap:12px;color:var(--w-cell);font-size:14px;}
#my-wallet .w-meter-row .w-n{font-size:15px;}
#my-wallet .w-bar{height:8px;border-radius:99px;background:#EDEFF4;overflow:hidden;}
#my-wallet .w-bar i{display:block;height:100%;border-radius:99px;background:var(--w-violet);}
#my-wallet .w-bar.candy i{background:#D97706;}
#my-wallet .w-bar.energy i{background:var(--w-energy);}
#my-wallet .w-asset .w-expiry{padding:0;border:0;background:none;color:var(--w-candy-strong);font-size:14px;font-weight:700;}
#my-wallet .w-asset-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;}
#my-wallet .w-asset-actions > .w-btn:first-child{flex:1 1 auto;}
#my-wallet .w-asset .wallet-msg{margin-top:-8px;}

/* 단추 — 시안의 채운 단추(main) · 테두리 단추(line) */
#my-wallet .w-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:12px;
  font-family:inherit;font-size:15px!important;font-weight:700!important;
  white-space:nowrap;text-decoration:none;cursor:pointer;box-sizing:border-box;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease;
}
#my-wallet .w-btn.main{border:1px solid var(--w-violet-strong);background:var(--w-violet-strong);color:#fff;}
#my-wallet .w-btn.main:hover{background:var(--w-violet-deep);border-color:var(--w-violet-deep);color:#fff;}
#my-wallet .w-btn.line{border:1px solid #CFD2DC;background:#fff;color:var(--w-ink);}
#my-wallet .w-btn.line:hover{border-color:#C9C2F0;background:#FBFAFF;color:var(--w-violet-strong);}
#my-wallet .w-btn:disabled{border-color:#E7E9F1;background:#F4F5F8;color:#6B7080;cursor:default;}

/* ② 오늘의 보상 — 흰 카드 한 줄 */
#my-wallet .w-reward .w-checkin{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;}
#my-wallet .w-reward .w-attend-copy{flex:1 1 280px;display:flex;flex-direction:column;gap:4px;min-width:0;}
#my-wallet .w-kicker{color:var(--w-violet-strong);font-size:14px;font-weight:700;}
#my-wallet .w-reward .w-attend-title{margin:0;color:var(--w-ink);font-size:21px;font-weight:900;line-height:1.35;}
#my-wallet .w-reward .w-attend-title .w-badge{margin-left:8px;vertical-align:middle;}
#my-wallet .w-reward .w-attend-desc{color:var(--w-a2-sub);font-size:15px;line-height:1.55;}
#my-wallet .w-reward .w-days{flex:1 1 340px;gap:6px;}
#my-wallet .w-reward .w-day{gap:6px;}
#my-wallet .w-reward .w-day-orb{width:38px;height:38px;border:0;background:#EDEFF4;color:transparent;font-weight:900;box-shadow:none;}
#my-wallet .w-reward .w-day.done .w-day-orb{background:var(--w-violet-strong);color:#fff;}
#my-wallet .w-reward .w-day.today .w-day-orb{border:2px dashed var(--w-violet-strong);background:#fff;color:var(--w-violet-strong);box-shadow:none;}
#my-wallet .w-reward .w-day.today.done .w-day-orb{border:0;background:var(--w-violet-strong);color:#fff;}
#my-wallet .w-reward .w-day-label{color:var(--w-a2-sub);font-size:13px;font-weight:500;}
#my-wallet .w-reward .w-day.today .w-day-label{color:var(--w-ink);font-weight:700;}
#my-wallet .w-reward .w-btn-primary{border-color:var(--w-violet-strong);background:var(--w-violet-strong);padding:0 24px;}

/* ④ 한눈에 비교 */
#my-wallet .w-compare{display:flex;flex-direction:column;gap:10px;}
#my-wallet .w-compare-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
#my-wallet .w-compare-head .w-h2{font-size:22px!important;}
#my-wallet .w-compare-head .w-help{font-size:17px;}
/* [2026-11-02] 사장님: 한눈에 비교 표 글자를 모두 20% 키움(15→18 · 14→17 · 13→16 · 제목 18→22). 아이콘·칸 너비도 같은 비율로. */
#my-wallet .w-mx{width:100%;border-collapse:collapse;table-layout:fixed;font-size:18px;}
#my-wallet .w-mx.cols-3{min-width:864px;}
#my-wallet .w-mx.cols-2{min-width:672px;}
#my-wallet .w-mx th,
#my-wallet .w-mx td{padding:16px 14px;border-bottom:1px solid var(--w-a2-cell);text-align:left;vertical-align:top;line-height:1.6;color:var(--w-ink);}
#my-wallet .w-mx thead th{font-size:18px;font-weight:900;border-bottom:2px solid var(--w-ink);}
#my-wallet .w-mx .w-mx-k{width:144px;}
#my-wallet .w-mx-name{display:inline-flex;align-items:center;gap:8px;}
#my-wallet .w-mx-ico{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;}
#my-wallet .w-mx-ico img,
#my-wallet .w-mx-ico svg{width:26px;height:26px;object-fit:contain;}
#my-wallet .w-mx-ico.energy{color:var(--w-energy);}
#my-wallet .w-mx tbody th{width:144px;color:var(--w-a2-sub);font-size:17px;font-weight:700;}
#my-wallet .w-mx tbody tr:last-child th,
#my-wallet .w-mx tbody tr:last-child td{border-bottom:0;}
#my-wallet .w-mx small{display:block;margin-top:4px;color:var(--w-a2-sub);font-size:16px;}
#my-wallet .w-mx-line{display:block;}
#my-wallet .w-mx-line small{margin-top:0;}

/* ⑤ 이용 내역 — AI 에너지 딱지 */
#my-wallet .w-kind.energy{background:var(--w-energy-soft);color:var(--w-energy-strong);}
#my-wallet .w-filter.on{background:var(--w-ink);border-color:var(--w-ink);color:#fff;}

/* =========================================================================
   좁은 화면 — 지갑 상자 폭(컨테이너)을 기준으로 바꾼다.
   ========================================================================= */
@container wallet (max-width: 760px){
  #my-wallet .w-assets{grid-template-columns:minmax(0,1fr);}
  #my-wallet .w-guide-list{grid-template-columns:minmax(0,1fr);}
}
@container wallet (max-width: 600px){
  #my-wallet .w-sec{padding:18px 16px;}
  #my-wallet .w-asset{padding:18px 16px;}
  #my-wallet .w-energy-head .w-asset-note{text-align:left;}
  #my-wallet .w-asset-value .w-n{font-size:36px;}
  #my-wallet .w-checkin{gap:14px;}
  #my-wallet .w-attend-mark{width:46px;height:46px;font-size:21px;align-self:flex-start;}
  #my-wallet .w-attend-copy{flex:1 1 200px;}
  #my-wallet .w-attend-action,
  #my-wallet .w-attend-action .w-btn-primary{width:100%;}
  #my-wallet .w-attend-title{font-size:20px!important;}
  #my-wallet .w-days{gap:4px;}
  #my-wallet .w-day-orb{width:36px;height:36px;}
  #my-wallet .w-rule{white-space:normal;}
  #my-wallet .w-swap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:14px 16px;}
  #my-wallet .w-swap-arrow{display:none;}
  #my-wallet .w-swap-v .w-n{font-size:28px;}
  #my-wallet .w-convert-field{flex:1 1 100%;}
  #my-wallet .w-field{flex:1 1 auto;width:auto;min-width:0;}
  #my-wallet .w-convert .w-btn-primary{flex:1 1 100%;}
  #my-wallet .w-convert .w-help{padding-bottom:0;}
  #my-wallet .w-ledger{padding:18px 16px 16px;}

  /* 이용 내역 표 → 줄마다 두 줄짜리 카드
       [구분] 내용 ............ +1개
       2026.09.23 16:02 ...... 잔액 167 */
  #my-wallet .w-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  /* 공용 mobile-responsive.css 가 휴대폰에서 모든 표를 min-width:460px!important 로 묶는다.
     카드로 세운 이 표는 그 폭이 필요 없다(그대로 두면 변동·잔액이 오른쪽 밖으로 잘린다). */
  #my-wallet .w-table,
  #my-wallet .w-table tbody{display:block;min-width:0!important;}
  #my-wallet .w-table tbody tr{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"kind what delta" "when when bal";
    align-items:center;
    gap:6px 10px;
    padding:13px 0;
    border-bottom:1px solid var(--w-line-soft);
  }
  #my-wallet .w-table.no-bal tbody tr{grid-template-areas:"kind what delta" "when when when";}
  #my-wallet .w-table tbody tr:last-child{border-bottom:0;}
  #my-wallet .w-table tbody td{display:block;padding:0!important;border:0;background:none!important;}
  #my-wallet .w-table td.kind{grid-area:kind;}
  #my-wallet .w-table td.what{grid-area:what;min-width:0;}
  #my-wallet .w-table td.delta{grid-area:delta;}
  #my-wallet .w-table td.when{grid-area:when;font-size:14px;}
  #my-wallet .w-table td.bal{grid-area:bal;color:var(--w-sub);font-size:14px;}
  #my-wallet .w-bal-k{display:inline;font-family:"Pretendard",sans-serif;font-weight:600;}
}

@media (prefers-reduced-motion: reduce){
  #my-wallet *{transition:none!important;animation:none!important;}
}

/* [2026-10-27] 충전하기가 링크(<a>)가 되었다 — 밑줄 없이 단추처럼 */
#my-wallet a.w-btn-sm{text-decoration:none;}
#my-wallet a.w-note-link{color:inherit;text-decoration:underline;text-underline-offset:2px;}