/* ==========================================================================
   pay.sw4u.kr — 입금 허브 관리자 app.css
   시안 v1 · web-designer · 2026-10-02
   의존: /assets/tokens.css (<html data-brand="sw4u" data-theme="light|dark">)
   규칙: 색·폰트·간격·반경·그림자·모션은 tokens.css 변수만 쓴다.
         아래 0절의 --pay-* / --tone-* 는 "기존 토큰의 조합 별칭"이며 새 값이 아니다.
   ========================================================================== */

/* ── 0. 화면 별칭 (토큰 조합만) ─────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* 면: 밝은 스킨은 회색 바닥 + 흰 카드로 깊이를 만든다 */
    --pay-page: var(--color-surface);
    --pay-card: var(--color-bg);
    --pay-inset: var(--color-surface);          /* 원문·표 머리 등 안쪽 면 */

    /* 상호작용 색: sw4u 라이트 primary(#0ea5e9)는 흰 글자 2.8:1 → active 단계 사용 */
    --pay-link: var(--color-primary-soft-fg);
    --pay-focus: var(--color-primary-active);
    --pay-btn-bg: var(--color-primary-active);
    --pay-btn-bg-hover: color-mix(in srgb, var(--color-primary-active) 80%, var(--gray-900));
    --pay-btn-fg: var(--color-primary-fg);
    --pay-danger-fg: var(--color-danger-fg);

    /* 입력 테두리: 비텍스트 대비 3:1 확보 (border-strong 은 1.5:1) */
    --pay-field-border: var(--color-fg-muted);

    /* 모달·드로어 뒤 막 */
    --pay-backdrop: color-mix(in srgb, var(--gray-900) 55%, transparent);

    /* 크기 (간격 토큰 조합) */
    --pay-tap: calc(var(--space-10) + var(--space-1));   /* 44 — 터치 최소 */
    --pay-ctl-sm: var(--space-8);                         /* 32 — 표 안 작은 버튼 */
    --pay-sidebar: calc(var(--space-16) * 4);             /* 256 */
    --pay-aside: calc(var(--space-16) * 6);               /* 384 — 상세 배정 패널 */

    /* 상태 글자색: soft 배경 위 4.5:1 이상 */
    --tone-success-fg: var(--color-success-active);
    --tone-warn-fg: var(--color-warn-active);
    --tone-danger-fg: var(--color-danger-active);
    --tone-info-fg: var(--color-info-active);
}

[data-theme="dark"] {
    color-scheme: dark;

    --pay-page: var(--color-bg);
    --pay-card: var(--color-surface);
    --pay-inset: var(--color-bg);

    --pay-link: var(--color-primary);
    --pay-focus: var(--color-primary);
    --pay-btn-bg: var(--color-primary);
    --pay-btn-bg-hover: var(--color-primary-hover);
    /* 다크에서 tokens 의 danger-fg 는 흰색 그대로 → 밝아진 빨강 위 2.8:1. 잉크로 교체 */
    --pay-danger-fg: var(--color-bg);

    --pay-field-border: var(--color-fg-subtle);
    --pay-backdrop: color-mix(in srgb, var(--color-bg) 78%, transparent);

    /* 다크의 *-active 는 덮어써지지 않아 어두운 배경에서 사라진다 → base 단계 사용 */
    --tone-success-fg: var(--color-success);
    --tone-warn-fg: var(--color-warn);
    --tone-danger-fg: var(--color-danger);
    --tone-info-fg: var(--color-info);
}

/* ── 1. 베이스 ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--header-height-mobile) + var(--space-4)); }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pay-page);
    overflow-wrap: break-word;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
h1, h2, h3, h4 { font-weight: var(--fw-semibold); color: var(--color-fg); }

a { color: var(--pay-link); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* tokens.css 의 :focus-visible(--color-primary)은 sw4u 라이트에서 3:1 미달 → 재정의 */
:focus-visible { outline: 2px solid var(--pay-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }

[hidden] { display: none !important; }

/* ── 2. 유틸리티 ────────────────────────────────────────────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(-1 * var(--space-16));
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--pay-btn-bg);
    color: var(--pay-btn-fg);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.icon {
    display: inline-block;
    width: 1.25em; height: 1.25em;
    flex-shrink: 0;
    vertical-align: -0.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; vertical-align: -0.125em; }

.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.amount { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; }
.muted { color: var(--color-fg-muted); }
.nowrap { white-space: nowrap; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }

@media (max-width: 639px) {
    .hide-mobile { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── 3. 앱 셸 ───────────────────────────────────────────────────────────── */
.shell { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }

/* 상단 바: 반투명 + 블러. 스크롤 중에도 현재 맥락이 보이게 */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--header-height-mobile);
    padding: 0 var(--space-3);
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
    background: color-mix(in srgb, var(--pay-card) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(var(--space-2));
    backdrop-filter: saturate(1.4) blur(var(--space-2));
    border-bottom: 1px solid var(--color-border);
}
@supports not (backdrop-filter: blur(var(--space-2))) {
    .topbar { background: var(--pay-card); }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
    color: var(--color-fg);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: var(--letter-tight);
    text-decoration: none;
    white-space: nowrap;
}
.brand__mark {
    display: inline-grid;
    place-items: center;
    width: var(--space-8); height: var(--space-8);
    border-radius: var(--radius-md);
    background: var(--gradient-hero);
    color: var(--color-on-dark);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.brand--center { justify-content: center; margin: 0 auto; }

.topbar__actions { display: flex; align-items: center; gap: var(--space-1); }
.topbar__actions form { display: contents; }

/* 스킨 버튼: 현재 상태의 반대 아이콘을 보여준다 */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (min-width: 1024px) {
    .topbar { height: var(--header-height); padding: 0 var(--space-6); }
    /* 뒤에 오는 .btn { display: inline-flex } 에 덮이지 않도록 우선순위를 올린다 */
    .topbar .topbar__menu { display: none; }
}

.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .layout { grid-template-columns: var(--pay-sidebar) minmax(0, 1fr); }
}

/* 내비: 모바일은 왼쪽 드로어, 데스크톱은 고정 사이드바 */
.nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-modal);
    width: min(85vw, var(--pay-sidebar));
    padding: var(--space-4) var(--space-3);
    padding-top: max(var(--space-4), env(safe-area-inset-top));
    overflow-y: auto;
    background: var(--pay-card);
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0s linear var(--duration-slow);
}
.nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
}
.nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding: 0 var(--space-2);
}
.nav__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg-muted); }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--pay-tap);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.nav__link .icon { color: var(--color-fg-muted); }
.nav__link:hover { background: var(--color-surface-2); }
.nav__link[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font-weight: var(--fw-semibold);
}
.nav__link[aria-current="page"] .icon { color: inherit; }
.nav__count { margin-left: auto; }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--pay-backdrop);
    animation: pay-fade var(--duration-base) var(--ease-out);
}

@media (min-width: 1024px) {
    .nav {
        position: sticky;
        top: var(--header-height);
        z-index: var(--z-base);
        width: auto;
        height: calc(100dvh - var(--header-height));
        padding: var(--space-6) var(--space-4);
        transform: none;
        visibility: visible;
        box-shadow: none;
        transition: none;
    }
    .nav__head { display: none; }
    .nav-scrim { display: none !important; }
}

.main {
    min-width: 0;
    padding: var(--space-4) var(--space-4) var(--space-16);
    padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
}
.main:focus { outline: none; }
.main__inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
@media (min-width: 768px) { .main { padding: var(--space-6) var(--space-6) var(--space-16); } }
@media (min-width: 1024px) { .main { padding: var(--space-8) var(--space-10) var(--space-16); } }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}
.page-head__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.page-head__desc { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--color-fg-muted); }
@media (min-width: 768px) { .page-head__title { font-size: var(--fs-2xl); } }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--pay-ctl-sm);
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    text-decoration: none;
}
.back-link:hover { color: var(--color-fg); }

.result-meta { font-size: var(--fs-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

/* ── 4. 버튼 ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--pay-tap);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--line-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before {
    content: "";
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: pay-spin calc(var(--duration-slow) * 2) linear infinite;
}

.btn--primary { background: var(--pay-btn-bg); color: var(--pay-btn-fg); box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--pay-btn-bg-hover); box-shadow: var(--shadow-sm); }

.btn--secondary {
    background: var(--pay-card);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { background: var(--color-surface-2); border-color: var(--pay-field-border); }

.btn--ghost { color: var(--color-fg); }
.btn--ghost:hover { background: var(--color-surface-2); }

.btn--danger { background: var(--color-danger); color: var(--pay-danger-fg); box-shadow: var(--shadow-xs); }
.btn--danger:hover { background: var(--color-danger-hover); }

/* 위험하지만 1차 행동이 아닌 것(무시 처리 등): 채우지 않고 글자색만 */
.btn--danger-ghost { color: var(--tone-danger-fg); }
.btn--danger-ghost:hover { background: var(--color-danger-soft); }

.btn--sm {
    min-height: var(--pay-ctl-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.btn--icon { padding: 0; width: var(--pay-tap); }
.btn--icon.btn--sm { width: var(--pay-ctl-sm); }
.btn--block { width: 100%; }

.btn.is-copied { color: var(--tone-success-fg); border-color: var(--color-success); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── 5. 폼 ─────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--space-5); }

.form-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid .field--full { grid-column: 1 / -1; }
}

.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.legend { padding: 0; margin-bottom: var(--space-2); }

.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-fg); }
.label__opt { font-weight: var(--fw-regular); color: var(--color-fg-muted); }
.label__req { font-weight: var(--fw-regular); color: var(--tone-danger-fg); }

.input, .select, .textarea {
    width: 100%;
    min-height: var(--pay-tap);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--pay-field-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);              /* 16 — iOS 자동 확대 방지 */
    line-height: var(--line-tight);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--color-fg-muted); opacity: 1; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid var(--pay-focus);
    outline-offset: 0;
    border-color: var(--pay-focus);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--tone-danger-fg);
    border-width: 2px;
}
.input[readonly] { background: var(--pay-inset); }
.input.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.textarea { min-height: calc(var(--space-16) * 2); resize: vertical; line-height: var(--line-base); }

/* 셀렉트: 네이티브 화살표 대신 테두리로 그린 꺾쇠 (hex 데이터 URI 회피) */
.select { appearance: none; padding-right: var(--space-10); }
.select-wrap { position: relative; }
.select-wrap::after {
    content: "";
    position: absolute;
    right: var(--space-4);
    top: 50%;
    width: var(--space-2); height: var(--space-2);
    border-right: 2px solid var(--color-fg-muted);
    border-bottom: 2px solid var(--color-fg-muted);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

.search { position: relative; }
.search .input { padding-left: var(--space-10); }
.search > .icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-fg-muted);
    pointer-events: none;
}

.help { font-size: var(--fs-xs); line-height: var(--line-base); color: var(--color-fg-muted); }
.error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    line-height: var(--line-base);
    color: var(--tone-danger-fg);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--pay-tap);
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
    line-height: var(--line-base);
    cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
    flex-shrink: 0;
    width: var(--space-5); height: var(--space-5);
    margin: 0;
    accent-color: var(--pay-btn-bg);
}
.check__text { display: flex; flex-direction: column; gap: var(--space-1); }
.check__title { font-weight: var(--fw-semibold); color: var(--color-fg); }

/* 사용 여부 스위치: <input type="checkbox" role="switch" class="switch"> */
.switch {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: var(--space-10); height: var(--space-6);
    margin: 0;
    border: 1px solid var(--pay-field-border);
    border-radius: var(--radius-full);
    background: var(--pay-field-border);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.switch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--space-1);
    width: var(--space-4); height: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
    transition: left var(--duration-base) var(--ease-out);
}
.switch:checked { background: var(--pay-btn-bg); border-color: var(--pay-btn-bg); }
.switch:checked::before { left: calc(100% - var(--space-4) - var(--space-1)); background: var(--pay-btn-fg); }
.switch-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--pay-tap); cursor: pointer; }
.switch-row__state { font-size: var(--fs-sm); color: var(--color-fg-muted); }

.pair { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

.copy-field { display: flex; gap: var(--space-2); }
.copy-field .input { flex: 1; min-width: 0; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-2);
}
@media (max-width: 639px) {
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--color-fg-muted);
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }

/* ── 6. 카드 · 지표 ─────────────────────────────────────────────────────── */
.card {
    min-width: 0;
    background: var(--pay-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) 0;
}
.card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--letter-tight);
}
.card__body { padding: var(--space-4); }
/* 768px 이상의 .card__body 여백 규칙에 덮이지 않도록 특정도를 올린다 */
.card__body.card__body--flush { padding: var(--space-2) 0 0; }
.card__foot {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--pay-inset);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (min-width: 768px) {
    .card__head { padding: var(--space-5) var(--space-6) 0; }
    .card__body { padding: var(--space-5) var(--space-6); }
    .card__foot { padding: var(--space-3) var(--space-6); }
}

.grid-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1280px) { .grid-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 지표: 모바일 2열(첫 카드=금액은 전체 폭), 데스크톱 4열 */
.metrics { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--pay-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
a.metric:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.metric--wide { grid-column: 1 / -1; }
.metric__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-fg-muted);
}
.metric__value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--line-tight);
    letter-spacing: var(--letter-tight);
    font-variant-numeric: tabular-nums;
    color: var(--color-fg);
}
.metric__unit { margin-left: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg-muted); }
.metric__sub { font-size: var(--fs-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

/* 값이 0이 아닐 때만 색을 켠다 — 경보 피로 방지 */
.metric--warn.is-active { background: var(--color-warn-soft); border-color: var(--color-warn); }
.metric--danger.is-active { background: var(--color-danger-soft); border-color: var(--color-danger); }
.metric--warn.is-active :is(.metric__label, .metric__sub, .metric__unit, .metric__value) { color: var(--tone-warn-fg); }
.metric--danger.is-active :is(.metric__label, .metric__sub, .metric__unit, .metric__value) { color: var(--tone-danger-fg); }

@media (min-width: 768px) { .metric__value { font-size: var(--fs-2xl); } .metric { padding: var(--space-4) var(--space-5); } }
@media (min-width: 1024px) {
    .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
    .metric--wide { grid-column: auto; }
}

/* ── 7. 뱃지 ────────────────────────────────────────────────────────────── */
.badge {
    --badge-bg: var(--color-surface);
    --badge-fg: var(--color-fg-muted);
    --badge-border: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--space-6);
    padding: 0 var(--space-2);
    background: var(--badge-bg);
    color: var(--badge-fg);
    border: 1px solid var(--badge-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--line-tight);
    white-space: nowrap;
}
.badge .icon { width: 1.15em; height: 1.15em; vertical-align: 0; }

.badge--success { --badge-bg: var(--color-success-soft); --badge-fg: var(--tone-success-fg); }
.badge--primary { --badge-bg: var(--color-primary-soft); --badge-fg: var(--color-primary-soft-fg); }
.badge--info    { --badge-bg: var(--color-info-soft);    --badge-fg: var(--tone-info-fg); }
.badge--warn    { --badge-bg: var(--color-warn-soft);    --badge-fg: var(--tone-warn-fg); }
.badge--danger  { --badge-bg: var(--color-danger-soft);  --badge-fg: var(--tone-danger-fg); }
.badge--rose    { --badge-bg: var(--color-rose-soft);    --badge-fg: var(--color-rose-soft-fg); }
.badge--neutral { --badge-bg: var(--color-surface);      --badge-fg: var(--color-fg-muted); --badge-border: var(--color-border-strong); }

/* 모양 보조: 색만으로 구분하지 않기 위한 장치 */
.badge--outline { --badge-bg: transparent; --badge-border: currentColor; }
.badge--dashed  { --badge-border: currentColor; border-style: dashed; }
.badge--count   { min-width: var(--space-6); justify-content: center; font-variant-numeric: tabular-nums; }

/* ── 8. 표 ─────────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    background: var(--pay-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.table th {
    padding: var(--space-3) var(--space-4);
    background: var(--pay-inset);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--letter-wide);
    text-align: left;
    white-space: nowrap;
}
.table th:first-child { border-top-left-radius: var(--radius-lg); }
.table th:last-child  { border-top-right-radius: var(--radius-lg); }
.table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    vertical-align: middle;
}
.table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--pay-inset); }
.table .is-num { text-align: right; }
.table tr.is-attention td:first-child { box-shadow: inset var(--space-1) 0 0 var(--color-warn); }
.cell-sub { display: block; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.code-snippet {
    display: inline-block;
    max-width: 100%;
    padding: 0 var(--space-1);
    background: var(--pay-inset);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
    word-break: normal;
}

/* 모바일(<768): 행을 카드로 적층. 첫 줄 = 제목(c-title) | 금액(c-amount), 나머지 = "라벨 … 값" */
@media (max-width: 767px) {
    .table-wrap--stack { overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
    .table--stack, .table--stack tbody, .table--stack td { display: block; }
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table--stack tbody { display: flex; flex-direction: column; gap: var(--space-3); }
    .table--stack tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--pay-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
    }
    .table--stack tbody tr:hover { background: var(--pay-card); }
    .table--stack tr.is-attention { border-left: var(--space-1) solid var(--color-warn); }
    .table--stack tr.is-attention td:first-child { box-shadow: none; }
    .table--stack td {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-1) 0;
        border: 0;
        text-align: right;
    }
    .table--stack td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        color: var(--color-fg-muted);
        text-align: left;
    }
    .table--stack td.c-title {
        grid-column: 1; grid-row: 1;
        display: block;
        padding-bottom: var(--space-2);
        font-size: var(--fs-md);
        font-weight: var(--fw-semibold);
        text-align: left;
    }
    .table--stack td.c-amount {
        grid-column: 2; grid-row: 1;
        display: block;
        padding-bottom: var(--space-2);
        font-size: var(--fs-md);
    }
    .table--stack td.c-actions {
        justify-content: flex-end;
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }
    .table--stack td.c-actions .btn { flex: 1; min-height: var(--pay-tap); }
    .table--stack td:is(.c-title, .c-amount, .c-actions)::before { content: none; }
    /* 표 안의 폼 버튼도 링크 버튼처럼 전체 폭 */
    .table--stack td.c-actions > form { display: flex; flex: 1; }
    /* 값이 긴 칸(주소·응답)은 라벨 위, 값 아래 */
    .table--stack td.c-block {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        text-align: left;
    }
    .table--stack td.c-block .code-snippet { display: block; width: 100%; }
    /* 값이 없는 칸은 카드에서 줄을 차지하지 않게 */
    .table--stack td.is-empty { display: none; }
}

/* ── 9. 필터 바 ────────────────────────────────────────────────────────── */
.filters { background: var(--pay-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.filters__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--pay-tap);
    padding: var(--space-2) var(--space-4);
    font-weight: var(--fw-semibold);
    list-style: none;
    cursor: pointer;
}
.filters__summary::-webkit-details-marker { display: none; }
.filters__summary::after {
    content: "";
    margin-left: auto;
    width: var(--space-2); height: var(--space-2);
    border-right: 2px solid var(--color-fg-muted);
    border-bottom: 2px solid var(--color-fg-muted);
    transform: rotate(45deg);
    transition: transform var(--duration-base) var(--ease-out);
}
.filters[open] > .filters__summary::after { transform: rotate(-135deg); }
.filters__body {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--space-4) var(--space-4);
}
.filters__dates { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filters__actions { display: flex; gap: var(--space-2); align-items: flex-end; }
.filters__actions .btn { flex: 1; }
/* 기본: 고르는 칸 2 + 검색어 (입금대기) */
@media (min-width: 640px) {
    .filters__body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    .filters__q, .filters__actions { grid-column: 1 / -1; }
    .filters__actions { justify-content: flex-end; }
    .filters__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 1280px) {
    .filters__body { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr) auto; }
    .filters__q, .filters__actions { grid-column: auto; }
}
/* 넓은 필터: 상태·사이트·은행·전송 / 날짜·검색어(2칸)·버튼 (입금 내역) */
@media (min-width: 640px) {
    .filters__body--wide .filters__q { grid-column: auto; }   /* 날짜 옆에 검색어 */
}
@media (min-width: 1280px) {
    .filters__body--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .filters__body--wide .filters__q { grid-column: span 2; }
    .filters__body--wide .filters__actions { grid-column: auto; }
    .filters__body--wide .filters__actions .btn { flex: 1; }
}

/* ── 10. 목록 행 (대시보드) ──────────────────────────────────────────────── */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
}
.row:first-child { border-top: 0; }
.row__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.row__title { font-weight: var(--fw-semibold); color: var(--color-fg); text-decoration: none; }
.row__title:hover { text-decoration: underline; }
.row__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); }
/* 구분점을 항목 앞에 붙여 줄이 바뀔 때 점만 줄 끝에 남지 않게 한다 */
.row__meta > * + *::before { content: "·" / ""; margin-right: var(--space-2); }
.row__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.row__amount { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-2); }
.row__actions .btn { flex: 1; }
@media (max-width: 639px) {
    .row__actions .btn { min-height: var(--pay-tap); }
    .row__side .cluster { flex-direction: column; align-items: flex-end; gap: var(--space-1); }
}
@media (min-width: 640px) {
    .row { grid-template-columns: minmax(0, 1fr) auto auto; }
    /* 버튼 열이 없는 행은 빈 셋째 열을 두지 않아 금액이 카드 오른쪽 끝에 맞는다 */
    .row:not(:has(.row__actions)) { grid-template-columns: minmax(0, 1fr) auto; }
    .row__actions { grid-column: auto; }
    .row__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 768px) { .row { padding: var(--space-3) var(--space-6); } }

/* ── 11. 입금 상세 ─────────────────────────────────────────────────────── */
.detail { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .detail {
        gap: var(--space-6);
        grid-template-columns: minmax(0, 1fr) var(--pay-aside);
        grid-template-areas:
            "summary assign"
            "raw     assign"
            "parse   assign"
            "history history";   /* 전송 이력은 7열 표라 두 열 전체 폭을 쓴다 */
        /* 배정 패널이 왼쪽 세 카드보다 길 때 남는 높이를 셋째 행 하나가 받아, 카드 사이가 벌어지지 않게 한다 */
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        align-items: start;
    }
    .detail__summary { grid-area: summary; }
    .detail__raw     { grid-area: raw; }
    .detail__parse   { grid-area: parse; }
    .detail__history { grid-area: history; }
    .detail__assign  {
        grid-area: assign;
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
        max-height: calc(100dvh - var(--header-height) - var(--space-12));
        overflow-y: auto;
    }
}

.deposit-hero { display: flex; flex-direction: column; gap: var(--space-1); }
.deposit-hero__amount {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--line-tight);
    letter-spacing: var(--letter-tight);
    font-variant-numeric: tabular-nums;
}
.deposit-hero__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-fg); }

.kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}
.kv dt { color: var(--color-fg-muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* 알림 원문: 고정폭, 줄바꿈 유지, 긴 토큰도 화면 밖으로 안 나가게 */
.raw {
    max-height: calc(var(--space-16) * 5);
    overflow: auto;
    padding: var(--space-4);
    background: var(--pay-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--line-base);
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
}

.choices { display: flex; flex-direction: column; gap: var(--space-2); }
.choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.choice:hover { border-color: var(--pay-field-border); }
/* 라디오를 직접 그린다: 어두운 스킨의 네이티브 라디오는 고르지 않아도 회색 원판으로 보인다 */
.choice input[type="radio"] {
    appearance: none;
    display: grid;
    place-content: center;
    width: var(--space-5); height: var(--space-5);
    margin: var(--space-1) 0 0;
    border: 2px solid var(--pay-field-border);
    border-radius: var(--radius-full);
    background: var(--pay-card);
}
.choice input[type="radio"]::before {
    content: "";
    width: var(--space-2); height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--pay-btn-bg);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-out);
}
.choice input[type="radio"]:checked { border-color: var(--pay-btn-bg); }
.choice input[type="radio"]:checked::before { transform: scale(1); }
.choice:has(input:checked) {
    background: var(--color-primary-soft);
    border-color: var(--pay-btn-bg);
    box-shadow: inset 0 0 0 1px var(--pay-btn-bg);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--pay-focus); outline-offset: 2px; }
.choice__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.choice__title { font-weight: var(--fw-semibold); color: var(--color-fg); }
.choice__meta { font-size: var(--fs-xs); color: var(--color-fg-muted); }
.choice:has(input:checked) .choice__meta { color: var(--color-primary-soft-fg); }
.choice__amount { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }

.remain { display: inline-flex; align-items: center; gap: var(--space-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.remain--soon { color: var(--tone-warn-fg); font-weight: var(--fw-semibold); }
/* ── 12. 비밀값 1회 표시 ─────────────────────────────────────────────────── */
.secret {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-warn-soft);
    border: 2px solid var(--color-warn);
    border-radius: var(--radius-lg);
    animation: pay-enter var(--duration-slow) var(--ease-out);
}
.secret:focus { outline: none; }
.secret__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--tone-warn-fg); }
.secret__warn { font-size: var(--fs-sm); line-height: var(--line-base); color: var(--tone-warn-fg); }
.secret__value { display: flex; gap: var(--space-2); align-items: stretch; }
.secret__code {
    flex: 1;
    min-width: 0;
    padding: var(--space-3);
    background: var(--pay-card);
    color: var(--color-fg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--line-base);
    word-break: break-all;
    user-select: all;
}
@media (max-width: 479px) {
    .secret__value { flex-direction: column; }
}

/* ── 13. 플래시 메시지 ───────────────────────────────────────────────────── */
.flashes { display: flex; flex-direction: column; gap: var(--space-2); }
.flash {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--line-base);
    animation: pay-enter var(--duration-base) var(--ease-out);
}
.flash > .icon { margin-top: var(--space-1); }
.flash__title { display: block; font-weight: var(--fw-semibold); }
.flash .btn { color: inherit; margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 0; }
.flash--success { background: var(--color-success-soft); color: var(--tone-success-fg); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); }
.flash--error   { background: var(--color-danger-soft);  color: var(--tone-danger-fg);  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
.flash--warn    { background: var(--color-warn-soft);    color: var(--tone-warn-fg);    border-color: color-mix(in srgb, var(--color-warn) 45%, transparent); }

/* ── 14. 빈 상태 ────────────────────────────────────────────────────────── */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-4);
    text-align: center;
}
.empty__icon {
    display: grid;
    place-items: center;
    width: var(--space-12); height: var(--space-12);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-fg-muted);
}
.empty__icon .icon { width: var(--space-6); height: var(--space-6); }
.empty--good .empty__icon { background: var(--color-success-soft); color: var(--tone-success-fg); }
.empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-fg); }
.empty__desc { font-size: var(--fs-sm); color: var(--color-fg-muted); }

/* ── 15. 확인 모달 (<dialog>) ─────────────────────────────────────────────── */
.modal {
    width: min(100% - var(--space-8), calc(var(--space-16) * 7.5));
    max-height: calc(100dvh - var(--space-8));
    padding: 0;
    overflow: auto;
    background: var(--pay-card);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.modal::backdrop { background: var(--pay-backdrop); }
.modal[open] { animation: pay-pop var(--duration-base) var(--ease-out); }
.modal__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.modal__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--space-10); height: var(--space-10);
    border-radius: var(--radius-full);
    background: var(--color-danger-soft);
    color: var(--tone-danger-fg);
}
.modal[data-tone="primary"] .modal__icon { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.modal__title { padding-top: var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal__body { padding: var(--space-3) var(--space-5) var(--space-5) calc(var(--space-5) + var(--space-10) + var(--space-3)); line-height: var(--line-base); }
.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--pay-inset);
    border-top: 1px solid var(--color-border);
}
@media (max-width: 479px) {
    /* 휴대폰: 아래에서 올라오는 시트. 엄지가 닿는 곳에 버튼 */
    .modal {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        border-bottom: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .modal[open] { animation: pay-sheet var(--duration-slow) var(--ease-out); }
    .modal__body { padding-left: var(--space-5); }
    .modal__foot {
        flex-direction: column-reverse;
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }
    .modal__foot .btn { width: 100%; }
}

/* ── 16. 페이지네이션 ───────────────────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); }
.pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: var(--pay-tap);
    min-height: var(--pay-tap);
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.pagination__link:hover { background: var(--color-surface-2); }
.pagination__link[aria-current="page"] { background: var(--pay-btn-bg); color: var(--pay-btn-fg); font-weight: var(--fw-bold); }
.pagination__link[aria-disabled="true"] { color: var(--color-fg-muted); pointer-events: none; }
.pagination__gap { min-width: var(--space-6); text-align: center; color: var(--color-fg-muted); }
.pagination__info { width: 100%; text-align: center; font-size: var(--fs-xs); color: var(--color-fg-muted); }
@media (max-width: 639px) { .pagination__link.is-far, .pagination__gap { display: none; } }

/* ── 17. 단계 안내 ─────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-5); }
.steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    gap: var(--space-3);
}
.steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: var(--space-8); height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.steps__title { font-weight: var(--fw-semibold); padding-top: var(--space-1); }
.steps__desc { margin-top: var(--space-1); font-size: var(--fs-sm); line-height: var(--line-base); color: var(--color-fg-muted); }

/* ── 18. 계좌 카드 ─────────────────────────────────────────────────────── */
.account__body { display: flex; flex-direction: column; gap: var(--space-2); }
.account__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.account__bank { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.account__number { font-family: var(--font-mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; letter-spacing: var(--letter-wide); }
.account__holder { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.account.is-off { border-style: dashed; box-shadow: none; }

/* ── 19. 로그인 ─────────────────────────────────────────────────────────── */
.auth {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--space-4);
    background: var(--pay-page);
}
.auth__top { position: fixed; top: var(--space-3); right: var(--space-3); }
.auth__card { width: min(100%, var(--pay-aside)); }
.auth__card .card__body { padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.auth__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); text-align: center; }
.auth__foot { margin-top: var(--space-4); text-align: center; font-size: var(--fs-xs); color: var(--color-fg-muted); }

/* ── 20. 모션 ───────────────────────────────────────────────────────────── */
@keyframes pay-fade  { from { opacity: 0; } }
@keyframes pay-enter { from { opacity: 0; transform: translateY(calc(-1 * var(--space-1))); } }
@keyframes pay-pop   { from { opacity: 0; transform: translateY(var(--space-2)) scale(0.98); } }
@keyframes pay-sheet { from { transform: translateY(100%); } }
@keyframes pay-spin  { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 21. 고대비(윈도우 강제 색) ───────────────────────────────────────────── */
@media (forced-colors: active) {
    .badge, .switch, .choice, .metric, .card { border: 1px solid CanvasText; }
    .switch:checked { background: Highlight; }
    .nav__link[aria-current="page"] { outline: 2px solid Highlight; }
}