:root {
    --bg: #081121;
    --bg-deep: #0d1830;
    --panel: rgba(255, 255, 255, 0.08);
    --panel-strong: rgba(255, 255, 255, 0.10);
    --panel-soft: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 212, 77, 0.24);
    --text: #f8fbff;
    --text-soft: #d7e3fb;
    --muted: rgba(255,255,255,0.68);
    --brand: #5b84ff;
    --brand-strong: #406ef3;
    --brand-soft: rgba(91, 132, 255, 0.16);
    --accent: #ffd44d;
    --accent-strong: #ffbe0b;
    --ok: #39d98a;
    --warn: #ffd44d;
    --danger: #ff6f7d;
    --shadow: 0 20px 56px rgba(9, 19, 40, 0.30);
    --radius: 24px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at top left, rgba(83,216,255,.10), transparent 24%),
        radial-gradient(circle at top right, rgba(91,132,255,.16), transparent 30%),
        linear-gradient(180deg, #081121 0%, #0d1830 100%);
    color: var(--text);
    font-family: "Inter", "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, sans-serif;
}
a { color: inherit; text-decoration: none; }

.public-body, .member-body {
    min-height: 100vh;
}

.public-header,
.member-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(7, 16, 31, 0.74);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.public-brand,
.member-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #f8fbff;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), #fff0b5);
    box-shadow: 0 12px 30px rgba(255,212,77,.28);
    color: #111;
    font-size: 16px;
}

.public-actions,
.member-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-user,
.member-user {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
}

.public-link,
.member-logout,
.app-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
}

.account-shell {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 32px;
}

.account-card,
.page-block,
.status-box,
.menu-item,
.race-card,
.action-card {
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.account-card {
    width: 100%;
    max-width: 430px;
    padding: 26px 22px;
}

.account-title {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-bottom: 8px;
}
.account-subtitle {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.account-notice,
.account-temp-pin {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 700;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.account-temp-pin {
    background: rgba(74,141,255,.12);
    color: #dce8ff;
}

.form-row { margin-bottom: 14px; }
.form-row label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #dce8ff;
}

.app-input,
.app-select,
.app-textarea {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(245,249,255,0.96);
    color: #14213d;
    outline: none;
    font-size: 17px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.app-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #5676b3 50%), linear-gradient(135deg, #5676b3 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.app-textarea {
    min-height: 110px;
    padding: 14px 16px;
    resize: vertical;
}
.app-input:focus,
.app-select:focus,
.app-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.app-input[type="date"] {
    color-scheme: light;
}

.app-primary-btn,
.app-secondary-btn,
.amount-chip,
.bank-chip,
.icon-btn {
    border: 0;
    border-radius: 18px;
    font-weight: 800;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.app-primary-btn:hover,
.app-secondary-btn:hover,
.amount-chip:hover,
.bank-chip:hover,
.icon-btn:hover { transform: translateY(-1px); }
.app-primary-btn {
    width: 100%;
    min-height: 56px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: #fff;
    box-shadow: 0 16px 28px rgba(47,117,246,.28);
    font-size: 17px;
    margin-top: 10px;
}
.app-secondary-btn {
    width: 100%;
    min-height: 48px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    background: rgba(255,255,255,0.05);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
}

.account-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
.account-links a { color: #cfe0ff; font-size: 14px; font-weight: 700; }
.one-line-links { justify-content: center; }
.validation-summary-errors, .field-validation-error { color: #fecaca; font-size: 13px; font-weight: 700; }
.validation-summary-errors ul { padding-left: 18px; margin-bottom: 0; }
.input-validation-error { border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(255,111,125,.12); }

.member-app { min-height: 100vh; }
.member-main {
    padding: 20px 16px 116px;
    max-width: 760px;
    margin: 0 auto;
}
.member-section-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-bottom: 6px;
}
.member-section-subtitle {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.6;
}

.quick-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.status-box {
    padding: 16px;
}
.status-label { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.status-value { font-size: 24px; font-weight: 900; letter-spacing: -0.04em; }
.status-value.warn { color: #ffd166; }
.status-value.ok { color: #7ef1b2; }

.menu-list,
.simple-list { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px;
}
.menu-item-main { display: flex; flex-direction: column; gap: 4px; }
.menu-item-title { font-size: 18px; font-weight: 800; }
.menu-item-desc { color: var(--muted); font-size: 13px; }
.menu-item-value { font-size: 15px; font-weight: 800; color: #dbeafe; }
.page-block { padding: 18px 16px; margin-bottom: 14px; }
.page-block-title { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.simple-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.simple-item:last-child { border-bottom: 0; padding-bottom: 0; }
.simple-item:first-child { padding-top: 0; }
.simple-key { color: var(--muted); font-size: 13px; }
.simple-value { font-size: 16px; font-weight: 800; text-align: right; }
.badge-soft {
    display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.badge-open { background: rgba(74,141,255,.14); color: #d8e7ff; }
.badge-answer { background: rgba(57,217,138,.15); color: #bbf7d0; }
.badge-close { background: rgba(148,163,184,.15); color: #e2e8f0; }
.empty-box {
    padding: 32px 18px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
}

.race-card { padding: 18px; margin-bottom: 12px; }
.race-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.race-title { font-size: 19px; font-weight: 900; }
.race-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.race-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.race-pill {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.05); color: #dce8ff; font-size: 12px; font-weight: 700;
}
.race-reco-label { color: var(--text-soft); font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.number-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.number-chip {
    min-width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(74,141,255,.16); color: #ecf4ff; font-weight: 900; border: 1px solid rgba(96,165,250,.18);
}
.recommend-block {
    padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); margin-top: 12px;
}
.recommend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.recommend-row:last-child { margin-bottom: 0; }
.recommend-round { color: var(--text-soft); font-size: 13px; font-weight: 700; }

.member-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 25;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    background: rgba(9, 15, 27, 0.88);
    backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.member-bottom-nav a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    border-radius: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.member-bottom-nav a i {
    font-size: 19px;
    line-height: 1;
}
.member-bottom-nav a.is-active {
    background: rgba(74,141,255,.16);
    color: #f5f9ff;
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.14);
}

.amount-grid,
.bank-grid,
.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.amount-chip,
.bank-chip {
    width: 100%;
    min-height: 68px;
    padding: 14px;
    background: rgba(255,255,255,0.05);
    color: #eff5ff;
    border: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}
.amount-chip.is-active,
.bank-chip.is-active {
    background: linear-gradient(180deg, rgba(74,141,255,.24) 0%, rgba(47,117,246,.18) 100%);
    border-color: rgba(96,165,250,.28);
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.amount-main { display: block; font-size: 18px; font-weight: 900; }
.amount-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.bank-chip { display: flex; align-items: center; gap: 12px; }
.bank-chip i { font-size: 22px; color: #dce8ff; }
.picker-caption { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.form-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
.inline-icon { display: inline-flex; align-items: center; gap: 6px; }
.section-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0; }

.site-footer { margin-top: 20px; padding: 0 0 112px; }
.public-footer { padding: 20px 16px 32px; }
.admin-footer { padding: 20px 0 10px; }
.member-footer { padding-bottom: 98px; }
.footer-drop {
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18,28,49,.94) 0%, rgba(12,20,38,.98) 100%);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.footer-drop summary {
    list-style: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font-weight: 800; color: #edf3ff; position: relative;
}
.footer-drop summary::-webkit-details-marker { display:none; }
.footer-drop summary::after {
    content: '\F282'; font-family: bootstrap-icons; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted);
}
.footer-drop[open] summary::after { content: '\F286'; }
.footer-drop-body { padding: 0 16px 16px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.footer-drop-link a { color: #cfe0ff; font-weight: 700; }

.card-soft {
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 14px;
}

@media (max-width: 480px) {
    .public-brand, .member-brand { font-size: 21px; }
    .brand-mark { width: 32px; height: 32px; border-radius: 11px; }
    .account-card { padding: 22px 16px; }
    .account-title { font-size: 31px; }
    .app-input, .app-primary-btn, .app-select { min-height: 54px; font-size: 16px; }
    .quick-status, .amount-grid, .bank-grid, .action-grid { grid-template-columns: 1fr; }
}

.member-bottom-nav a.is-active, .member-bottom-nav a.active {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,212,77,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.footer-drop {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
}

.topup-hero-block {
    position: relative;
    overflow: hidden;
}
.topup-hero-block::after {
    content:"";
    position:absolute; inset:auto -30px -40px auto;
    width:140px; height:140px; border-radius:999px;
    background: radial-gradient(circle, rgba(255,212,77,.20), transparent 70%);
}
.hero-badge { display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:999px; background:rgba(91,132,255,.16); color:#d8e7ff; font-size:12px; font-weight:900; margin-bottom:12px; }
.hero-headline { font-size:26px; font-weight:900; letter-spacing:-.04em; margin-bottom:8px; }
.hero-desc { color:var(--muted); font-size:14px; line-height:1.6; }
.payment-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.payment-card { display:flex; align-items:flex-start; gap:12px; padding:16px; border-radius:22px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.payment-card.full-span { grid-column:1 / -1; }
.payment-icon { width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex:0 0 48px; background:rgba(15,23,42,.62); border:1px solid rgba(148,163,184,.12); }
.payment-icon i { font-size:24px; }
.payment-kakao .payment-icon i { color:#ffd44d; }
.payment-cardpay .payment-icon i { color:#38bdf8; }
.payment-bank .payment-icon i { color:#22e57d; }
.payment-body { flex:1 1 auto; min-width:0; }
.payment-title { font-size:16px; font-weight:900; margin-bottom:4px; }
.payment-desc { color:var(--muted); font-size:12px; line-height:1.5; }
.payment-state { display:inline-flex; align-items:center; justify-content:center; min-width:58px; height:28px; border-radius:999px; font-size:11px; font-weight:900; padding:0 10px; }
.state-live { background:rgba(57,217,138,.16); color:#bbf7d0; }
.state-soon { background:rgba(255,212,77,.16); color:#fff2b3; }
.state-hold { background:rgba(148,163,184,.16); color:#e2e8f0; }
.deposit-box { display:grid; grid-template-columns:1fr; gap:6px; }
.deposit-box div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04); }
.deposit-box span { color:var(--muted); font-size:12px; }
.deposit-box strong { font-size:14px; }
.pass-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pass-card { width:100%; text-align:left; padding:16px; min-height:176px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); color:#eff5ff; }
.pass-card.is-active { background:linear-gradient(180deg, rgba(74,141,255,.24) 0%, rgba(47,117,246,.18) 100%); border-color:rgba(96,165,250,.28); box-shadow:inset 0 0 0 1px rgba(96,165,250,.18); }
.pass-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.pass-icon { width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.62); border:1px solid rgba(148,163,184,.12); }
.pass-icon i { font-size:24px; }
.pass-icon.blue i { color:#2f6fff; }
.pass-icon.green i { color:#22e57d; }
.pass-icon.purple i { color:#9b59ff; }
.pass-icon.orange i { color:#ffb020; }
.pass-badge { min-height:26px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,.08); font-size:11px; font-weight:900; display:inline-flex; align-items:center; }
.pass-title { font-size:17px; font-weight:900; margin-bottom:10px; }
.pass-price { font-size:28px; font-weight:900; letter-spacing:-.04em; margin-bottom:8px; }
.pass-desc { color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width: 480px) {
  .payment-method-grid, .pass-grid { grid-template-columns:1fr; }
  .hero-headline { font-size:22px; }
  .payment-card { padding:14px; }
  .pass-card { min-height:156px; }
}


/* Payment select + topup refinement */
.payment-select-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.payment-method-tile {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 18px 16px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.payment-method-icon,
.selected-method-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,18,36,.72);
    border: 1px solid rgba(255,255,255,.06);
    flex: 0 0 58px;
}
.payment-method-icon i,
.selected-method-icon i {
    font-size: 28px;
}
.accent-kakao .payment-method-icon i { color: #facc15; }
.accent-card .payment-method-icon i { color: #78a6ff; }
.accent-naver .payment-method-icon i { color: #35d67f; }
.accent-bank .payment-method-icon i { color: #9b59ff; }
.payment-method-body { flex: 1 1 auto; min-width: 0; }
.payment-method-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 6px;
}
.payment-method-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.payment-method-desc {
    color: #e8f0ff;
    font-size: 14px;
    font-weight: 700;
}
.payment-method-subdesc {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
}
.payment-method-action {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 800;
}
.selected-method-banner {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.selected-method-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.selected-method-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.selected-method-desc {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}
.payment-ready-box {
    padding: 18px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
}
.payment-ready-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}
.payment-ready-desc {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}
.payment-ready-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.payment-ready-meta > div {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
}
.payment-ready-meta span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 6px;
}
.payment-ready-meta strong {
    display: block;
    font-size: 13px;
    word-break: break-all;
}
.compact-pass-grid .pass-card {
    cursor: default;
}
.compact-pass-grid .pass-card.is-static {
    pointer-events: none;
}
.topup-hero-block {
    padding: 18px 16px;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    font-weight: 800;
    color: #ffedaa;
}
.hero-headline {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-top: 12px;
}
.hero-desc {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    margin-top: 8px;
}
.payment-method-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.payment-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}
.payment-card.full-span {
    grid-column: 1 / -1;
}
.payment-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,18,36,.72);
    border: 1px solid rgba(255,255,255,.06);
    flex: 0 0 52px;
}
.payment-icon i {
    font-size: 24px;
}
.payment-kakao .payment-icon i { color: #facc15; }
.payment-cardpay .payment-icon i { color: #78a6ff; }
.payment-bank .payment-icon i { color: #35d67f; }
.payment-body { flex: 1 1 auto; min-width: 0; }
.payment-title {
    font-size: 16px;
    font-weight: 900;
}
.payment-desc {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.55;
}
.payment-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 28px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    padding: 0 10px;
}
.state-live { background: rgba(34,197,94,.18); color: #8df4b9; }
.state-hold { background: rgba(245,158,11,.18); color: #ffd78e; }
.state-soon { background: rgba(91,132,255,.18); color: #c7d7ff; }
.deposit-box {
    display: grid;
    gap: 10px;
}
.deposit-box > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.deposit-box span {
    color: var(--muted);
    font-size: 12px;
}
.deposit-box strong {
    font-size: 14px;
    word-break: break-all;
}
.form-help, .picker-caption {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
    margin-top: 8px;
}
.pass-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.pass-card {
    width: 100%;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-radius: 24px;
    padding: 16px;
    text-align: left;
}
.pass-card.is-active {
    border-color: rgba(91,132,255,.65);
    box-shadow: 0 0 0 3px rgba(91,132,255,.14) inset;
    background: linear-gradient(180deg, rgba(91,132,255,.18) 0%, rgba(91,132,255,.08) 100%);
}
.pass-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.pass-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8,18,36,.72);
    border: 1px solid rgba(255,255,255,.06);
}
.pass-icon i { font-size: 22px; }
.pass-icon.blue i { color: #2f6fff; }
.pass-icon.green i { color: #22e57d; }
.pass-icon.purple i { color: #9b59ff; }
.pass-icon.orange i { color: #ffb020; }
.pass-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 800;
}
.pass-title { font-size: 16px; font-weight: 900; margin-bottom: 10px; }
.pass-price { font-size: 24px; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 8px; }
.pass-desc { color: var(--muted); font-size: 12px; line-height: 1.5; }
.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.badge-soft {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.badge-open { background: rgba(91,132,255,.18); color: #dbeafe; }
.badge-answer { background: rgba(34,197,94,.18); color: #93f5bf; }
.badge-close { background: rgba(148,163,184,.18); color: #e2e8f0; }
.empty-box {
    padding: 24px 14px;
    text-align: center;
    color: var(--muted);
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.10);
}

@media (max-width: 430px) {
    .member-main { padding: 16px 12px 108px; }
    .member-section-title { font-size: 26px; }
    .member-section-subtitle { font-size: 13px; margin-bottom: 14px; }
    .page-block, .action-card { border-radius: 22px; }
    .action-grid, .pass-grid { grid-template-columns: 1fr; }
    .payment-method-tile { padding: 15px 14px; border-radius: 20px; }
    .payment-method-icon, .selected-method-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
    .payment-method-icon i, .selected-method-icon i { font-size: 23px; }
    .payment-method-title, .selected-method-title { font-size: 16px; }
    .payment-method-desc { font-size: 13px; }
    .payment-method-subdesc, .selected-method-desc, .form-help, .picker-caption, .payment-desc, .hero-desc { font-size: 12px; }
    .hero-headline { font-size: 20px; }
    .payment-ready-meta { grid-template-columns: 1fr; }
    .pass-card { padding: 14px; border-radius: 20px; }
    .pass-title { font-size: 15px; margin-bottom: 8px; }
    .pass-price { font-size: 22px; }
    .pass-icon { width: 42px; height: 42px; }
    .pass-icon i { font-size: 20px; }
    .app-input, .app-select, .app-textarea { min-height: 52px; font-size: 16px; }
    .app-primary-btn { min-height: 52px; font-size: 16px; }
    .simple-item { padding: 12px 0; }
    .member-bottom-nav a { min-width: 0; }
    .member-bottom-nav span { font-size: 11px; }
}


/* compact icon action tiles + modal */
.quick-icon-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}
.quick-icon-tile {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    min-height:128px;
    padding:18px 16px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
}
.quick-icon-box {
    width:48px;
    height:48px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(8,18,36,.72);
    border:1px solid rgba(255,255,255,.06);
}
.quick-icon-box i { font-size:24px; }
.quick-icon-box.blue i { color:#2f6fff; }
.quick-icon-box.green i { color:#22e57d; }
.quick-icon-box.purple i { color:#9b59ff; }
.quick-icon-box.orange i { color:#ffb020; }
.quick-icon-title { font-size:17px; font-weight:900; letter-spacing:-.03em; }
.quick-icon-desc { color:var(--muted); font-size:12px; line-height:1.45; }
.profile-simple-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.profile-simple-card {
    padding:16px 14px;
    border-radius:20px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}
.profile-simple-card .simple-key { display:block; margin-bottom:8px; }
.profile-simple-card .simple-value { text-align:left; font-size:18px; word-break:break-word; }
.wallet-admin-grid { display:grid; gap:14px; }
.wallet-admin-card {
    padding:18px 16px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
}
.wallet-admin-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.wallet-admin-left { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.wallet-admin-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(8,18,36,.72); border:1px solid rgba(255,255,255,.06); flex:0 0 44px; }
.wallet-admin-icon i { font-size:22px; color:#2f6fff; }
.wallet-admin-title { font-size:17px; font-weight:900; }
.wallet-admin-sub { color:var(--muted); font-size:12px; margin-top:3px; }
.wallet-admin-amount { font-size:28px; font-weight:900; color:#38bdf8; letter-spacing:-.04em; }
.wallet-admin-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.wallet-admin-meta-item { padding:12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.wallet-admin-meta-item span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.wallet-admin-meta-item strong { display:block; font-size:13px; word-break:break-word; }
.wallet-admin-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.app-modal-content {
    background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(11,18,32,.98) 100%);
    border:1px solid rgba(148,163,184,.14);
    border-radius:24px;
    box-shadow:0 24px 60px rgba(0,0,0,.38);
    color:#f8fbff;
}
.app-modal-header,.app-modal-footer { border:0; }
.app-modal-header { padding:18px 18px 0; }
.app-modal-body { padding:14px 18px 2px; color:#dbeafe; font-size:15px; line-height:1.7; word-break:keep-all; }
.app-modal-footer { padding:14px 18px 18px; }
.app-modal-title { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:900; }
.app-modal-btn {
    width:100%; min-height:48px; border:0; border-radius:16px; font-size:15px; font-weight:900;
    background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%); color:#fff;
}
@media (max-width: 430px) {
    .quick-icon-grid, .profile-simple-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .quick-icon-tile { min-height:112px; padding:16px 14px; border-radius:20px; }
    .quick-icon-box { width:42px; height:42px; border-radius:14px; }
    .quick-icon-box i { font-size:21px; }
    .quick-icon-title { font-size:15px; }
    .quick-icon-desc { font-size:11px; }
    .profile-simple-card { padding:14px 12px; border-radius:18px; }
    .profile-simple-card .simple-value { font-size:16px; }
    .wallet-admin-meta { grid-template-columns:1fr 1fr; }
}


/* v3 layout tuning */
.compact-center-grid{margin-top:14px;}
.compact-center-tile{align-items:center;text-align:center;min-height:104px;padding:16px 12px;gap:12px;}
.compact-center-tile .quick-icon-title{font-size:15px;}
.compact-center-tile .quick-icon-desc{display:none;}
.two-col-payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.compact-method-tile{padding:16px 14px;min-height:138px;flex-direction:column;align-items:flex-start;}
.compact-method-body{width:100%;} 
.compact-method-top{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:6px;}
.compact-method-tile .payment-method-desc{font-size:13px;line-height:1.45;}
.compact-method-tile .payment-method-action,.payment-method-subdesc{display:none;}
.payment-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.payment-price-card{padding:16px 14px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px;}
.payment-price-card span{color:var(--muted);font-size:13px;font-weight:700;}
.payment-price-card strong{font-size:22px;font-weight:900;letter-spacing:-.03em;}
.app-dark-table th,.app-dark-table td{white-space:nowrap;}
@media (max-width: 430px){.two-col-payment-grid,.payment-price-grid,.pass-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.compact-method-tile{min-height:126px;padding:14px 12px;border-radius:20px;gap:10px;}.compact-method-tile .payment-method-icon{width:48px;height:48px;flex-basis:48px;border-radius:15px;}.compact-method-tile .payment-method-icon i{font-size:22px;}.compact-method-tile .payment-method-title{font-size:15px;}.compact-method-tile .payment-method-desc{font-size:12px;}.payment-price-card{padding:14px 12px;border-radius:18px;}.payment-price-card strong{font-size:19px;}.compact-center-tile{min-height:96px;}.compact-center-tile .quick-icon-title{font-size:14px;}.app-dark-table th,.app-dark-table td{font-size:13px;}}

.member-bottom-nav-six a{min-width:0;}
.member-bottom-nav-six span{font-size:11px;}
.compact-method-center{justify-content:center;align-items:center;text-align:center;gap:14px;}
.compact-method-center .payment-method-icon{width:72px;height:72px;flex-basis:72px;border-radius:22px;}
.compact-method-center .payment-method-icon i{font-size:36px;}
.compact-method-top-center{align-items:center;justify-content:center;margin-bottom:0;}
.compact-method-center .payment-method-body{display:flex;align-items:center;justify-content:center;}
.compact-method-center .payment-method-title{font-size:17px;text-align:center;}
.payment-price-card-center{align-items:center;justify-content:center;text-align:center;}
.quick-icon-tile.compact-center-tile{align-items:center;text-align:center;}
.quick-icon-tile.compact-center-tile .quick-icon-box{margin:0 auto;}
.race-live-shell{padding:18px 14px;}
.flick-race-card{padding:8px 4px;}
.flick-race-head{text-align:center;margin-bottom:12px;}
.flick-race-badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:900;color:#ffedaa;margin-bottom:10px;}
.flick-race-title{font-size:28px;font-weight:900;letter-spacing:-.04em;margin:0;}
.flick-race-timer-wrap{display:flex;justify-content:center;margin:10px 0 14px;}
.flick-race-timer{display:inline-flex;align-items:center;justify-content:center;min-width:180px;min-height:58px;padding:0 18px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);border:1px solid rgba(255,255,255,.10);font-size:28px;font-weight:900;letter-spacing:-.04em;}
.flick-race-highlight{margin:0 auto 14px;padding:18px 16px;border-radius:22px;background:linear-gradient(180deg, rgba(91,132,255,.20) 0%, rgba(91,132,255,.08) 100%);border:1px solid rgba(91,132,255,.24);box-shadow:0 16px 30px rgba(47,117,246,.18);font-size:34px;font-weight:900;letter-spacing:-.05em;text-align:center;max-width:360px;}
.flick-race-status{margin:0 0 14px;color:#dbeafe;font-size:15px;font-weight:800;text-align:center;}
.flick-race-weather-static{width:max-content;max-width:100%;margin:0 auto 14px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:14px;font-weight:700;text-align:center;white-space:nowrap;}
.flick-race-table-wrap{margin-top:8px;}
.flick-race-table-title{font-size:18px;font-weight:900;text-align:center;margin-bottom:10px;}
.flick-race-empty-card{padding:26px 18px;border-radius:24px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12);text-align:center;}
.flick-race-empty-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:900;color:#ffedaa;margin-bottom:10px;}
.flick-race-empty-card h3{font-size:24px;font-weight:900;margin:0 0 8px;}
.flick-race-empty-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
@media (max-width:430px){.compact-method-center .payment-method-icon{width:60px;height:60px;flex-basis:60px;border-radius:18px;}.compact-method-center .payment-method-icon i{font-size:30px;}.flick-race-title{font-size:24px;}.flick-race-timer{min-width:150px;min-height:52px;font-size:24px;}.flick-race-highlight{font-size:28px;padding:16px 14px;}.flick-race-weather-static{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;}.member-bottom-nav-six span{font-size:10px;}}

.member-bottom-nav.member-bottom-nav-five { grid-template-columns: repeat(5, 1fr); }
.member-bottom-nav a span { font-size: 11px; }
@media (max-width: 430px) {
    .member-bottom-nav { gap: 2px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); }
    .member-bottom-nav a { min-width: 0; padding: 8px 4px; }
    .member-bottom-nav a i { font-size: 20px; }
    .member-bottom-nav a span { font-size: 10px; }
}
.quick-icon-box.gold { background: rgba(255,212,77,.14); color: #ffd44d; }
.install-prompt { position: fixed; left: 14px; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 1000; }
.install-prompt-card { background: linear-gradient(180deg, rgba(20,29,46,.98), rgba(8,17,33,.98)); border: 1px solid rgba(255,255,255,.10); border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 18px 16px; }
.install-prompt-header { display:flex; align-items:flex-start; gap:12px; }
.install-prompt-title { font-size: 18px; font-weight: 900; letter-spacing:-.03em; color:#fff; }
.install-prompt-text { font-size: 13px; color: rgba(255,255,255,.72); margin-top: 4px; line-height:1.5; }
.install-prompt-steps { margin: 14px 0 0 0; padding-left: 18px; color: #dce8ff; font-size: 13px; line-height: 1.7; }
.install-prompt-actions { margin-top: 14px; }
.install-prompt-btn { margin-top: 0; }
@media (max-width: 430px) {
  .install-prompt { left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .install-prompt-card { padding: 16px 14px; border-radius: 22px; }
  .install-prompt-title { font-size: 17px; }
  .install-prompt-text, .install-prompt-steps { font-size: 12px; }
}


html { background-color: #081121; }
body { background-color: #081121; }
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: #081121;
    z-index: 20;
    pointer-events: none;
}
.public-header,
.member-topbar {
    padding-top: calc(14px + env(safe-area-inset-top));
}
.member-app {
    background: radial-gradient(circle at top left, rgba(83,216,255,.10), transparent 24%),
        radial-gradient(circle at top right, rgba(91,132,255,.16), transparent 30%),
        linear-gradient(180deg, #081121 0%, #0d1830 100%);
    min-height: 100vh;
}
.account-card {
    overflow: hidden;
}
.birthdate-input,
.app-input[type="date"] {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}
.birthdate-input::-webkit-date-and-time-value,
.app-input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* 푸터 이용약관 링크 */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    padding: 12px 16px 4px;
    border-top: 1px solid rgba(148, 163, 184, .08);
    margin-top: 10px;
}
.footer-links a {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 12px;
    border-right: 1px solid rgba(148, 163, 184, .2);
    line-height: 1;
    white-space: nowrap;
}
.footer-links a:last-child {
    border-right: none;
}
.footer-links a:hover {
    color: #94a3b8;
}