/*
 * 입출금만의 조각 — 잔액 히어로, 금액 칸, 보너스 카드, 주소 상자.
 * 카드·탭·띠·목록 같은 공용은 `ui.css`(`.ps-*`)에 있습니다.
 *
 * 첫 판(2026-09-04 낮)에서 받은 지적 셋을 여기서 고칩니다:
 *   - 안내사항을 접어 두었더니 안 보였다 → 옆 기둥의 **보이는 카드**로(뷰).
 *   - 보너스 안내 문장과 카드들이 너무 붙어 있었다 → 간격 두 배.
 *   - 빨간 띠가 카드 안 맨 위에 끼어 어색했다 → 제목 아래, 카드 **밖**(뷰).
 */

/* ── 잔액 히어로 ───────────────────────────────────────────── */

/*
 * 잔액 자리. 오른쪽 위에서 번지던 파란 빛을 없앴습니다 — 숫자를 크게
 * 하는 것으로 충분하고, 빛까지 얹으면 광고 배너처럼 읽힙니다.
 */
[data-skin="poseidon"] .money-hero {
  padding: 22px 24px 18px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.015);
  border-bottom: 1px solid var(--p-line);
}
[data-skin="poseidon"] .money-hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
[data-skin="poseidon"] .money-hero__label {
  font-size: 12px;
  color: var(--p-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-skin="poseidon"] .money-hero__value {
  color: var(--p-money);
  margin-top: 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
[data-skin="poseidon"] .money-hero__value--dim {
  color: var(--p-muted);
  font-size: 18px;
  font-weight: 600;
}
[data-skin="poseidon"] .money-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--p-muted);
}
[data-skin="poseidon"] .money-hero__meta i {
  margin-right: 5px;
  color: var(--p-accent);
}

/* ── 금액 칸 ───────────────────────────────────────────────── */

[data-skin="poseidon"] .money-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 58px;
  border-radius: 7px;
  background: var(--p-bg-deep);
  border: 1px solid var(--p-line-strong);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
[data-skin="poseidon"] .money-amount:focus-within {
  border-color: var(--p-accent);
}
[data-skin="poseidon"] .money-amount__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: 0;
  color: var(--p-text);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}
[data-skin="poseidon"] .money-amount__input::placeholder {
  color: rgb(var(--t-veil-rgb, 255 255 255) / 0.18);
}
[data-skin="poseidon"] .money-amount__input:disabled {
  color: var(--p-muted);
}
[data-skin="poseidon"] .money-amount__unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--p-muted);
}
/*
 * 금액 칸과 그 밑 금액 칩 사이.
 *
 * `.money-pair` 도 같이 적어야 합니다. 인접 선택자라 **바로 앞 형제**만
 * 봅니다 — 테더 폼은 금액이 두 칸(USDT · 원)이라 칩 앞에 오는 것이
 * `.money-amount` 가 아니라 그 둘을 감싼 `.money-pair` 이고, 그래서 테더
 * 쪽만 간격이 0 이었습니다 (2026-09-05 사용자 지적: "금액부분이 너무
 * 붙어있어 간격이 입금쪽은 안그런데" — 갈린 것은 입금·출금이 아니라
 * 일반·테더였습니다).
 */
[data-skin="poseidon"] .money-amount + .ps-chips,
[data-skin="poseidon"] .money-pair + .ps-chips {
  margin-top: 14px;
}
[data-skin="poseidon"] .ps-chips + .ps-hint {
  margin-top: 12px;
}

[data-skin="poseidon"] .money-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
[data-skin="poseidon"] .money-pair .money-amount {
  min-width: 0;
}
[data-skin="poseidon"] .money-pair__eq {
  color: var(--p-muted);
}

/* 합계 줄 (테더) */
[data-skin="poseidon"] .money-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--p-line);
  color: var(--p-muted);
  font-size: 13px;
}
[data-skin="poseidon"] .money-total strong {
  color: var(--p-money);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 주소 상자 (테더) */
[data-skin="poseidon"] .money-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 7px;
  background: var(--p-bg-deep);
  border: 1px dashed rgb(var(--p-accent-rgb) / 0.45);
}
[data-skin="poseidon"] .money-address--pending {
  border-style: solid;
  border-color: var(--p-line);
  color: var(--p-muted);
}
[data-skin="poseidon"] .money-address code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  word-break: break-all;
  color: var(--p-text);
}

/*
 * 카지노 머니 되찾기 — 공용 `VendorRecallControl` 은 모든 스킨이 같이 쓰고
 * 자기 색(주황)을 인라인으로 씁니다. 그 거절 문장은 그 안에서 찍히므로
 * 뷰는 건드리지 않고, 포세이돈에서만 **모양**을 우리 단추에 맞춥니다.
 * 인라인 스타일 위라서 `!important` 가 필요합니다 — 이 한 곳만.
 */
[data-skin="poseidon"] [data-vendor-recall-control] {
  gap: 10px !important;
}
[data-skin="poseidon"] [data-vendor-recall-control] > div {
  font-size: 13px !important;
  color: var(--p-muted) !important;
}
[data-skin="poseidon"] [data-vendor-recall-control] > div strong {
  font-size: 15px !important;
  color: var(--p-text) !important;
  font-variant-numeric: tabular-nums;
}
[data-skin="poseidon"] [data-vendor-recall-control] button {
  min-height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: var(--p-accent-deep) !important;
  color: #fff !important;
  font-size: 14px !important;
}
[data-skin="poseidon"] [data-vendor-recall-control] button:disabled {
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.04) !important;
  border-color: var(--p-line-strong) !important;
  color: var(--p-muted) !important;
  box-shadow: none;
}
[data-skin="poseidon"] [data-vendor-recall-control] p {
  font-size: 12.5px !important;
}

/* 신청 단추 — 카드 안 여백 */
[data-skin="poseidon"] .money-submit {
  padding: 20px 24px 24px;
}

/* ── 보너스 카드 ───────────────────────────────────────────── */

[data-skin="poseidon"] .money-bonus > .ps-hint {
  margin-bottom: 16px;
}
[data-skin="poseidon"] .money-bonus__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
[data-skin="poseidon"] .money-bonus__card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-skin="poseidon"] .money-bonus__card label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  padding: 16px 40px 14px 16px;
  border-radius: 7px;
  background: var(--p-bg-deep);
  border: 1px solid var(--p-line-strong);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), transform 120ms var(--ease);
}
[data-skin="poseidon"] .money-bonus__card label:hover {
  border-color: rgb(var(--p-accent-rgb) / 0.5);
}
[data-skin="poseidon"] .money-bonus__card input:checked + label {
  border-color: var(--p-accent);
  background: rgb(var(--p-accent-rgb) / 0.1);
}
[data-skin="poseidon"] .money-bonus__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}
[data-skin="poseidon"] .money-bonus__rate {
  font-size: 12px;
  color: var(--p-muted);
  line-height: 1.5;
}
[data-skin="poseidon"] .money-bonus__tick {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 16px;
  color: var(--p-accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}
[data-skin="poseidon"] .money-bonus__card input:checked + label .money-bonus__tick {
  opacity: 1;
  transform: scale(1);
}
[data-skin="poseidon"] .money-bonus__detail {
  margin-top: 16px;
}
[data-skin="poseidon"] .money-bonus__detail dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
[data-skin="poseidon"] .money-bonus__detail dl > div {
  padding: 12px 14px;
  border-radius: 6px;
  background: rgb(var(--t-veil-rgb, 255 255 255) / 0.03);
  border: 1px solid var(--p-line);
}
[data-skin="poseidon"] .money-bonus__detail dt {
  font-size: 12px;
  color: var(--p-muted);
}
[data-skin="poseidon"] .money-bonus__detail dd {
  color: var(--p-money);
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-skin="poseidon"] .money-bonus__summary {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 7px;
  background: rgba(61, 220, 151, 0.07);
  border: 1px solid rgba(61, 220, 151, 0.22);
}
[data-skin="poseidon"] .money-bonus__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--p-muted);
  padding: 4px 0;
}
[data-skin="poseidon"] .money-bonus__line--total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(61, 220, 151, 0.3);
  color: var(--p-text);
}
[data-skin="poseidon"] .money-bonus__line--total strong {
  color: var(--p-money);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* 내역 줄의 금액 옆 표시 */
[data-skin="poseidon"] .money-row__bonus {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  margin-right: 6px;
  border-radius: 6px;
  background: rgba(61, 220, 151, 0.14);
  color: var(--p-ink-ok);
  vertical-align: middle;
}
[data-skin="poseidon"] .money-row__usdt {
  margin-left: 6px;
  font-size: 12px;
  color: var(--p-muted);
  font-weight: 500;
}

/* ── 폰 ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  [data-skin="poseidon"] .money-hero__value {
    font-size: 28px;
  }
  [data-skin="poseidon"] .money-hero--split,
  [data-skin="poseidon"] .money-pair {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  [data-skin="poseidon"] .money-pair__eq {
    transform: rotate(90deg);
    justify-self: center;
  }
  [data-skin="poseidon"] .money-hero,
  [data-skin="poseidon"] .money-total,
  [data-skin="poseidon"] .money-submit {
    padding-left: 16px;
    padding-right: 16px;
  }
}