/* ===== CSS Custom Properties (Theme Tokens) ===== */
:root {
    /* Dark Mode — SHARK/CHIPBANK 다크+골드 컨셉 (2026-07 개편 프리뷰).
       우선 테마 토큰만 다크로 전환. 개별 컴포넌트에 하드코딩된 색(예: #fff, rgba(26,26,26,..))은
       아직 남아 있으므로 완성 단계에서 별도로 쓸어내야 한다. */
    --bg: #060A16;              /* 딥 네이비-블랙 배경 (더 어둡고 푸른 톤) */
    --surface: #0F1526;         /* 카드/헤더 표면 (딥 네이비) */
    --text-primary: #F3F5F8;    /* 본문(밝은 화이트) */
    --text-secondary: #99A3B4;  /* 보조 텍스트(뮤트 블루그레이) */
    --point: #E3B341;           /* 포인트 — 골드 */
    --point-gold: #F2C94C;      /* 밝은 골드(그라디언트용) */
    --point-soft: rgba(227, 179, 65, 0.14);
    --point-gold-soft: rgba(242, 201, 76, 0.16);
    --point-shadow: rgba(227, 179, 65, 0.20);
    --point-shadow-strong: rgba(227, 179, 65, 0.32);
    --border: #262E3F;          /* 어두운 슬레이트 보더 */

    /* 보조 강조 — 쿨톤 틸. **골드(--point)를 이미 쓴 자리 옆에서 다른 성격의 주 동작**을 구분해야 할 때만
       쓴다(2026-07-30, 크릴샵의 GTO 이용권 구매 버튼이 첫 사례 — 같은 화면의 크릴 구매 버튼이 골드다).
       골드의 보색 쪽이라 딥 네이비 배경에서 서로 묻히지 않고, 흰 글씨의 가독성도 유지된다.
       ⚠ 두 번째 강조색이라 남용하면 화면에 주인공이 둘이 된다 — 새로 쓸 자리는 한 번 더 생각할 것. */
    --accent-cool: #17A398;
    --accent-cool-soft: rgba(23, 163, 152, 0.14);

    /* 워드마크 "ChipBank"의 'Bank' 부분 전용 브랜드 색. 강조색(--point)과 의도적으로 분리한 토큰이다 —
       테마 강조색을 나중에 바꿔도 로고 색은 따라 변하지 않아야 한다. 로고 외의 용도로 쓰지 말 것. */
    --brand-bank: #DF8D28;

    /* --header-height / --header-panel-height는 고정 헤더가 제거되면서 함께 삭제됐다(2026-07-25).
       상단바는 콘텐츠와 함께 스크롤되므로 레이아웃이 높이를 미리 알아야 할 이유가 없다. */
    /* dark "only" — 브라우저/OS의 자동 라이트·강제 테마가 우리 색을 덮어쓰지 못하게 고정한다.
       (단, 사용자가 직접 설치한 CSS 재작성 확장프로그램까지는 웹에서 막을 수 없다.) */
    color-scheme: dark only;
}


/* ===== Reset & Base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* hidden 대신 clip: 가로 스크롤은 막되 스크롤 컨테이너(스크롤포트)를 만들지 않는다.
       hidden이면 자식의 position:sticky가 윈도우 스크롤과 어긋나 일부 인앱 브라우저(텔레그램 등)에서 sticky가 안 먹는다. */
    overflow-x: clip; /* prevent horizontal scroll without breaking sticky descendants */
    height: 100%;
    background-color: var(--bg); /* ensure root bg contrasts with header surface on mobile */
}

body {
    min-height: 100%;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* block horizontal overflow while preserving vertical scroll on iOS Safari */
}

button,
input,
select,
textarea {
    font-family: inherit;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.72;
}

/* ===== 로고(워드마크) =====
   고정 헤더(.app-header*)와 확장 패널 스타일은 2026-07-25 헤더 제거와 함께 전부 삭제됐다.
   전역 상단바는 AppTopbar.razor.css(.app-topbar*)가 담당한다. 여기 남은 .app-logo는
   랜딩(/)과 로그인 오버레이의 텍스트 워드마크용이다. */
.app-logo {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    user-select: none;
    position: relative;
    top: -1px;
    text-decoration: none;
    cursor: pointer;
}

/* 워드마크의 'Bank'. 강조색(--point)이 아니라 로고 전용 --brand-bank를 쓴다(위 토큰 주석 참고). */
.app-logo .logo-point {
    color: var(--brand-bank);
}

/* ===== Icon Button (shared style) ===== */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 4px;
    line-height: 1;
}

.icon-btn:hover {
    color: var(--point);
}

/* ===== Body ===== */
/* 고정 헤더가 없어졌으므로 상단 여백이 필요 없다(상단바가 콘텐츠와 함께 스크롤된다).
   과거의 padding-top: var(--header-height) / .header-expanded / .no-header / .no-header-plain은
   전부 제거했다 — 이제 "헤더 유무"로 갈리는 상태가 없고, 남은 구분은 사용자 영역의 폰 프레임뿐이라
   클래스 이름도 .user-frame으로 바꿨다. */
.app-body {
    box-sizing: border-box; /* min-height 100dvh에 상/하 패딩을 포함시켜, 짧은 콘텐츠에서 40px 만큼 더 스크롤되는 것 방지 */
    padding-top: 0;
    padding-bottom: 40px;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

/* 모바일 기본: 사용자 영역 배경은 네이비(컬럼이 화면 폭을 꽉 채우므로 프레임 불필요).
   PC에서만 아래 미디어쿼리로 바깥을 블랙 처리해 폰 프레임처럼 보이게 한다. */
.app-body.user-frame {
    background: var(--bg);
}

.app-body.user-frame .app-body-inner {
    background: transparent;
    /* 좌우 여백을 네이비 컬럼(.layout-main) 안쪽으로 옮긴다 — 아래 참조.
       (여기서 빼야 배너가 컬럼 밖 블랙으로 삐져나가지 않고 컬럼 폭을 꽉 채운다.) */
    padding: 0;
}

/* PC: 프레임(네이비 컬럼)이 곧 .layout-main. 여백을 컬럼 안쪽(padding)에 둬야
   배너의 -12px full-bleed가 컬럼 좌우 끝에 정확히 맞는다.
   모바일: 컬럼이 화면 폭을 꽉 채우므로 배경/그림자는 자연히 안 보이고, 12px 여백만 콘텐츠에 적용된다. */
.app-body.user-frame .layout-main {
    background: var(--bg);
    padding: 0 12px;
}

/* PC 전용 폰 프레임: 바깥은 블랙, 640 컬럼은 화면 높이만큼 채우고 가장자리 그림자.
   모바일에는 적용하지 않아(컬럼 강제 높이 없음) 짧은 콘텐츠에서 불필요한 스크롤이 생기지 않는다. */
@media (min-width: 641px) {
    .app-body.user-frame {
        background: #000000;
    }

    .app-body.user-frame .layout-main {
        min-height: 100dvh;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 48px rgba(0, 0, 0, 0.6);
    }
}


.app-body-inner {
    width: 100%;
    max-width: 940px; /* 900px content + 40px padding */
    margin: 0 auto;
    padding: 0 12px 0;
    background-color: var(--bg);
    min-width: 0;
}

/* Layout Container */
.layout-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.layout-main {
    flex: 1;
    width: 100%;
    max-width: 640px;
    min-width: 0;
    box-sizing: border-box;
}

.layout-main.layout-main-master {
    max-width: 100%;
}

.layout-main.layout-main-partner {
    max-width: 100%;
}

/* ===== Page Header Row (shared: title left, back button right) ===== */
.section-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
}

.section-page-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 100%;
}

.page-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.page-back-btn:hover {
    border-color: var(--point);
    color: var(--point);
}

/* ===== Utility ===== */
h1:focus {
    outline: none;
}

/* ===== Blazor Error UI ===== */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


/* ===== Page Section (공통 페이지 상단 여백) ===== */
/* 모든 서브 페이지의 외부 컨테이너에 page-section 클래스를 추가하면
   헤더와의 간격, 하단 여백, 레이아웃이 자동으로 통일됩니다. */
.page-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 24px 80px;
}

/* reg-* 공통 클래스 (Register + StoreRegister 공용) */
.reg-field { display: flex; flex-direction: column; gap: 6px; }
.reg-label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; }
.reg-input-wrap { position: relative; display: flex; align-items: center; }
.reg-input-icon { position: absolute; left: 12px; color: var(--text-secondary); pointer-events: none; flex-shrink: 0; }
.reg-input {
    width: 100%;
    padding: 11px 12px 11px 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reg-input::placeholder { color: var(--text-secondary); opacity: 0.72; }
.reg-input:focus { border-color: var(--point); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15); }
.reg-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer;
}
.reg-submit {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
    background: var(--point); color: #0A0A0A;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.16);
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    margin-top: 6px;
}
.reg-submit:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 107, 53, 0.22); }
.reg-submit:active:not(:disabled) { transform: translateY(0); }
.reg-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.register-title { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.register-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }

/* ===== Dashboard Shared Styles ===== */
.dashboard {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 0 80px;
}

.dashboard-inner {
    width: 100%;
    max-width: 900px;
    min-width: 0;
}

.section-page-title strong {
    font-size: inherit;
    font-weight: 800;
}

/* Store Status LED */
.store-status-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Empty State */
.store-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.store-empty span {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* Store Card */
.store-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
}

.store-card:hover {
    border-color: var(--point);
    box-shadow: 0 4px 20px var(--point-shadow);
    transform: translateY(-2px);
}

.store-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
}

.store-address {
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.store-loading {
    height: 200px;
}

@media (max-width: 600px) {
    .dashboard {
        padding: 20px 0;
    }
}

/* ===== Mobile Global Safety ===== */
@media (max-width: 600px) {
    .app-body-inner {
        padding: 0 12px;
    }

    .tab-content-panel {
        padding: 0 !important;
    }

    .user-sub-page {
        padding: 0 !important;
    }

    /* prevent all elements from overflowing viewport */
    img, video, svg, canvas, iframe {
        max-width: 100%;
    }

    /* prevent Safari auto-zoom on focused form controls */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* table scrolls within its own container */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Settings Overlay (global fallback — CSS isolation 변경 후 브라우저 캐시 우회용) ─ */
.settings-overlay {
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 200;
    padding: 16px;
}

.settings-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: min(100%, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.match-settings-inner {
    width: 100%;
    max-width: 900px;
    min-width: 0;
}

/* ── Match List / Form 공용 스타일 (StoreDetail + StoreSettings 공용) ── */
.match-list-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.match-list-item:hover {
    border-color: var(--point);
    box-shadow: 0 4px 14px var(--point-shadow);
}

.match-list-item.active {
    border-color: var(--point);
    box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.55);
}

.match-list-item.add-new {
    justify-content: center;
    border-style: dashed;
    color: var(--text-secondary);
}

.match-list-item.add-new:hover {
    color: var(--point);
    background: rgba(255, 107, 53, 0.05);
}

.match-title {
    font-weight: 600;
    color: var(--text-primary);
}

.match-actions {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.match-list-item:hover .match-actions {
    color: var(--point);
}

.match-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 48px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.3s ease;
    position: relative;
    /* .match-list-card와 같은 24px. 이게 없어서 **추가 폼이 바로 아래 목록 카드에 붙어 보였다**
       (매장 설정의 관리자 추가 → "내역이 없습니다"/관리자 목록. 2026-07-29 수정).
       추가 폼은 거의 항상 목록 위에 오므로 카드 자체가 아래 여백을 갖는 것이 맞다 —
       폼이 마지막 요소인 경우(대시보드 인라인 패널)에도 섹션 간격과 겹쳐 문제되지 않는다. */
    margin-bottom: 24px;
}

.match-form-card-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.match-form-card-close:hover {
    color: var(--point);
    background: color-mix(in srgb, var(--point) 8%, transparent);
}

/* 타이틀이 있는 카드(경기 상세 등)는 X 버튼을 카드 위에 절대 위치로 띄우지 않고 타이틀과 같은
   줄에 나란히 배치한다 — 이 경우 .match-form-card-close 전용 padding-top 버퍼(48px)가 필요 없으므로
   표준 카드 패딩(16px)으로 되돌린다. CLAUDE.md 참고. */
.match-form-card-with-title {
    padding-top: 16px;
}

/* 닫기(X) 버튼이 **아예 없는** 카드. .match-form-card의 padding-top 48px은 절대 위치 X 버튼과 콘텐츠가
   겹치지 않게 두는 버퍼이므로, 버튼이 없으면 위쪽만 비어 보인다 — 표준 패딩(16px)으로 되돌린다.
   대시보드의 인라인 패널들이 이 부류다: 카드 자체가 액션 카드로 여닫히므로(같은 카드 재클릭은 무시,
   다른 카드를 누르면 전환) 패널 안에 닫기 버튼을 두지 않는다. CLAUDE.md §13 참고. */
.match-form-card-no-close {
    padding-top: 16px;
}

.match-card-title-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.match-card-title-close:hover {
    color: var(--point);
    background: color-mix(in srgb, var(--point) 8%, transparent);
}

/* 인라인 패널(관리 / 사업자 추가 / 매장 상세 하위 화면)의 헤더 닫기 버튼.
   한때는 섹션 "+" 버튼(.add-section-btn)과 크기·모양을 맞춘 30px 사각(테두리+표면색 채움)이었으나,
   2026-08-13 Jay 지적("X 버튼이 다른 X 버튼과 달라, 네모 필요 없다") — 앱의 다른 X 버튼
   (.match-form-card-close/.match-card-title-close)은 전부 테두리·채움이 없는 아이콘 버튼인데 이것만
   달랐다. 그래서 그 둘과 완전히 같은 모양(테두리 없음, hover에서만 포인트색 배경)으로 통일했다. */
.panel-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.panel-close-btn:hover {
    color: var(--point);
    background: color-mix(in srgb, var(--point) 8%, transparent);
}

/* 매장 상세의 **탭 아래**에 놓이는 서브 패널(회원 / 포인트 이력 / 설정)의 컨테이너.
   이미 매장 상세의 컨테이너 안이라 page-section 패딩을 얹지 않는다. ⚠ **위 여백을 주지 않는다** —
   패딩이 0이라 하위 화면 첫 섹션의 margin-top 32px이 이 컨테이너를 뚫고 나와(margin collapsing)
   탭 줄의 margin-bottom 16px과 합쳐 32px이 된다(§10 표준). 여기서 또 주면 겹쳐서 64px이 되고,
   대시보드 인라인(.store-detail-embedded의 32px)까지 더해지면 더 벌어진다.
   (타이틀·닫기 X는 2026-08-02에 없어졌다 — 탭이 계속 보이므로 둘 다 할 일이 없다.)
   전역에 두는 이유: StoreMembers/StoreSettings 둘이 같은 규칙을 쓰므로
   격리 CSS 3곳에 복제하지 않는다(§12의 격리 원칙은 "한 페이지 전용"에 적용된다). */
.store-subpage-embedded {
    display: block;
    width: 100%;
    padding: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.form-error {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    text-align: center;
}

.form-success {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.2);
    text-align: center;
}

/* ── Playing Card (global — MarkupString로 삽입되는 요소라 CSS isolation의 scope 속성이
   붙지 않는다. 격리 CSS에 똑같이 넣어도 절대 안 먹히므로 반드시 여기(app.css)에 둔다.)
   height는 padding이 아니라 고정값으로 준다 — 슈트 기호(♥♦♠♣)마다 폰트 글리프의
   ascent/descent가 달라서 padding만으로는 카드마다 세로폭이 미묘하게 들쭉날쭉해진다
   (예: 하트가 클로버보다 살짝 커 보임). height 고정 + line-height:1 + flex 중앙정렬로
   어떤 슈트여도 카드 박스 높이가 항상 같게 만든다. ── */
.playing-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: 1px solid #D4D4D4;
    border-radius: 6px;
    background: #FFFFFF; /* 트럼프 카드는 테마와 무관하게 항상 흰 배경 */
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.playing-card.red { color: #dc2626; }        /* 하트/다이아 */
.playing-card.black { color: #111111; }       /* 스페이드/클로버 — 테마 무관 검정 고정 */

.playing-card.back {
    color: var(--text-secondary);
    border-style: dashed;
    background: var(--bg);
}

/* ── Store Detail (global fallback) ─────────────────────────────────── */
.store-detail {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 0 80px;
}

.store-detail-inner {
    width: 100%;
    max-width: 900px;
    min-width: 0;
}

/* ── Global Animations ─────────────────────────────────────────────────── */
/* Blazor CSS isolation scopes @keyframes, so these are defined globally */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Global Utility Classes ─────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:not(:disabled):hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--point);
    color: #fff;
}

.btn-primary:not(:disabled):hover {
    box-shadow: 0 6px 16px var(--point-shadow);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:not(:disabled):hover {
    border-color: var(--point);
    color: var(--point);
}

.btn-danger {
    background: #dc2626;
    color: #fff;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 8px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.form-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--point);
    box-shadow: 0 0 0 3px var(--point-soft);
}

.form-control:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--border);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* ===== 숫자 입력의 스피너(위아래 화살표)는 쓰지 않는다 — 전역 =====
   `type="number"`는 유지한다(모바일 숫자 키패드, `min`/`max` 검증). 없애는 것은 **화살표뿐**이다.
   이 프로젝트의 숫자 칸은 좌석·좌석수·레벨·분·비율처럼 값을 직접 입력하는 것들이라 화살표를 눌러
   1씩 오르내릴 일이 없고, 화살표가 칸 폭을 먹어 같은 줄의 다른 입력칸과 리듬이 어긋난다.
   좁은 칸(40~64px)에서는 텍스트와 겹쳐 보이기까지 한다(2026-07-30 Jay 지정).
   **화살표가 필요한 칸이 생기면 그 화면에서만 되살린다** — 기본은 없는 쪽이다.
   ⚠ 화면마다 다시 선언하지 않는다(§12) — 예전에는 영상 광고·엔트리 설정·브레이크 분 입력이 각자
   같은 규칙을 복제해 두고 있었고, 새 숫자 칸을 만들면 매번 빠뜨렸다. */
input[type="number"] {
    /* Firefox: 스피너 자체를 없앤다. `appearance`는 최신 브라우저용 표준 표기다. */
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    /* WebKit/Blink: 스피너는 별도 셰도우 요소라 위 규칙으로 사라지지 않는다.
       margin: 0을 함께 줘야 화살표가 차지했던 여백까지 회수된다. */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* select는 **브라우저 기본 화살표를 쓰지 않는다.** 기본 화살표는 컨트롤 우측 테두리에 딱 붙어 그려져
   같은 폼의 입력칸들과 리듬이 어긋나 보인다(2026-07-29 Jay 지적: 영상 광고의 "대상" select).
   설정 팝업의 언어 select(`.app-select`)처럼 화살표를 직접 그리고 **우측에서 12px 안쪽**에 둔다.
   `padding-right: 36px`은 긴 옵션 텍스트가 화살표 밑으로 파고들지 않게 비워두는 자리다.
   ⚠ `select`에만 걸어야 한다 — `.form-control`은 input·textarea도 함께 쓰므로 타입 선택자로 좁히지
   않으면 그쪽에도 오른쪽 여백 36px과 배경 이미지가 붙는다. */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ===== 목록 행의 삭제(휴지통) 버튼 — 표준 =====
   여러 행을 다루는 목록에서 행을 지우는 버튼은 **휴지통 아이콘**이고 이 클래스를 쓴다(§13·§27).
   X는 "닫기"의 기호이므로 삭제에 쓰지 않는다 — 영상 광고가 X를 쓰다가 2026-07-29에 맞췄다.
   크기는 섹션 "+" 버튼(`.add-section-btn`)과 정확히 같다: 30px 사각 / radius 8 / 아이콘 16px.
   같은 화면에 나란히 보이므로 26px·28px 같은 값이 섞이면 바로 눈에 띈다.
   hover는 **파괴적 동작이라 포인트색이 아니라 빨강**이다(닫기 X의 hover와 일부러 다르다).
   전역으로 둔 이유: 매장 설정(관리자·닉네임 선점)과 마스터 광고 패널이 같은 버튼을 쓰는데,
   격리 CSS에 각각 선언하면 세 곳의 크기·hover가 조용히 갈린다(실제로 갈려 있었다). */
.row-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.row-delete-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.3);
}

/* 행을 고치는 버튼(연필) — 삭제와 크기를 맞추되(30px 사각/radius 8/아이콘 16px, 같은 행에 나란히
   보이므로 값이 갈리면 바로 눈에 띈다) hover는 파괴적 동작이 아니므로 §13의 X 버튼 hover 표준(포인트색)을
   따른다(2026-08-17 추가 — 매장 테이블 목록의 연필 아이콘이 첫 사용처). */
.row-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.row-edit-btn:hover {
    color: var(--point);
    background: color-mix(in srgb, var(--point) 8%, transparent);
    border-color: color-mix(in srgb, var(--point) 30%, transparent);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.form-actions.form-actions-center {
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.page-btn:hover:not(:disabled) {
    border-color: var(--point);
    color: var(--point);
}


.page-btn.active {
    background: var(--point);
    color: #fff;
    border-color: var(--point);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0 8px;
}


/* 서브페이지에서만 바로가기 카드를 스크롤 시 상단에 고정한다(홈은 정적).
   완전히 붙이지 않고 카메라(노치)/상태바 영역만큼 여백을 둔다 — safe-area-inset-top + 8px. */
.user-sub-page .shortcut-card {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    z-index: 10;
}

/* ===== User Sub-page Layout ===== */
/* 지갑, 경기, 매장, 메시지, 게시판 등 사용자 서브 페이지 공용 레이아웃 */
/* 홈(UserDashboard)의 scoped .dashboard { padding: 24px 0 } 와 동일하게 맞춤 */
.dashboard:has(.user-sub-page) {
    padding-top: 24px;
}

/* 서브페이지: 상단바(AppTopbar)와 콘텐츠 사이 간격 (홈의 상단바↔배너 여백과 유사). */
.user-sub-page {
    margin-top: 8px;
}

.user-sub-page {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.user-sub-page-content {
    animation: userSubPageFadeIn 0.18s ease;
}

@keyframes userSubPageFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.user-sub-page-placeholder {
    font-size: 0.95rem;
    color: var(--text-secondary);
    padding: 40px 0;
    text-align: center;
}


/* ===== Section Add Button (타이틀 우측 + 버튼) ===== */
.add-section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--point) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--point) 20%, transparent);
    color: var(--point);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.add-section-btn:hover {
    background: var(--point);
    border-color: var(--point);
    color: #ffffff;
    transform: scale(1.08);
}


/* ===== App Select (공통 셀렉트 박스 스타일) ===== */
.app-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-select:focus {
    border-color: var(--point);
    box-shadow: 0 0 0 3px var(--point-soft);
}

.app-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== List Empty State ===== */
.list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* match-list-card는 자체 padding: 16px이 있으므로 내부 list-empty 패딩을 보정 */
.match-list-card .list-empty {
    padding: 12px 20px;
}

/* ===== 표준 회원 표 (검색 헤더 + member-table) =====
   원래 StoreMembers.razor.css에만 있던 격리 CSS였는데, 마스터 크릴 페이지의 "크릴 보유 TOP 10"이
   같은 표를 그대로 재사용하면서 전역으로 옮겼다(2026-08-04 Jay 지정 — "표준 표로 쓸거니까 스타일
   공유"). Blazor CSS 격리(§12)라 두 컴포넌트가 같은 클래스를 쓰려면 여기 있어야 한다.

   **새로 표를 붙이는 화면도 이 클래스를 그대로 쓴다** — `.store-users-header`(타이틀+검색 행) +
   `.member-table-wrap` > `.member-table`(thead/tbody) + 컬럼 클래스(`.col-name`/`.col-login`/
   `.col-caviar`/`.col-point`/`.col-date`) 조합이 표준이다. 화면마다 다시 선언하지 않는다.

   `.col-nickname`(StoreMembers 전용, 매장 닉네임)·`.col-email`(CaviarKrillPanel 전용, 이메일)은
   2026-08-05에 추가됐다 — 둘 다 정렬 기능이 없는 "읽기만" 컬럼이라 `cursor:pointer`/`.sorted` 그룹에는
   넣지 않는다. 서로 다른 화면에서만 쓰는 클래스라 섞일 일이 없다.

   ⚠ 정렬 가능한 헤더 스타일(`cursor:pointer`, `.sorted`)이 포함돼 있지만 **표가 꼭 정렬을 구현해야
   하는 것은 아니다** — 크릴 TOP 10처럼 고정 정렬(크릴 내림차순)만 쓰는 화면은 헤더에 `@onclick`을
   안 붙이면 그만이고, 안 붙여도 스타일 자체는 무해하다(눌러도 아무 일이 안 나는 텍스트일 뿐).

   메시지 아이콘(`.member-msg-btn`/`.member-msg-dot`)은 여기 없다 — 그건 회원 관리 화면만의 기능이라
   `StoreMembers.razor.css`에 그대로 남아 있다. */
.store-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 12px;
}

.store-users-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-left: 2px;
    margin: 0;
}

.store-users-search {
    position: relative;
    max-width: 200px;
    flex: 1;
}

.store-users-search input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.store-users-search input:focus {
    border-color: var(--point);
}

.store-users-search svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.store-users-search .spin-icon {
    animation: spin 1s linear infinite;
    transform-origin: center;
    color: var(--point-gold);
}

.member-table-wrap {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
}

.member-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.88rem;
}

.member-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--point) 5%, var(--surface));
    border-bottom: 1px solid color-mix(in srgb, var(--point) 12%, var(--border));
    white-space: nowrap;
}

/* 정렬 가능한 헤더 — 누를 수 있다는 신호로 커서·hover만 준다(§27의 "누를 수 없는 곳에 손 모양 금지"와 같은 취지).
   컬럼 5개 전부(이름·마지막 활동·캐비어·포인트류·가입일) 정렬 가능이 표준이다(2026-08-04 Jay 지정) —
   정렬을 구현하지 않는 화면은 그냥 텍스트로 쓰면 된다(위 설명 참고). */
.member-table thead th.col-name,
.member-table thead th.col-login,
.member-table thead th.col-point,
.member-table thead th.col-caviar,
.member-table thead th.col-date {
    cursor: pointer;
    user-select: none;
}

.member-table thead th.col-name:hover,
.member-table thead th.col-login:hover,
.member-table thead th.col-point:hover,
.member-table thead th.col-caviar:hover,
.member-table thead th.col-date:hover {
    color: var(--point);
}

/* 지금 적용된 정렬 기준. 화살표를 쓰지 않는 이유는 컬럼마다 방향이 하나로 고정돼 있어서다. */
.member-table thead th.sorted {
    color: var(--point);
    font-weight: 700;
}

.member-table tbody tr {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.member-table tbody tr:last-child {
    border-bottom: none;
}

.member-table tbody tr:hover {
    background: var(--surface-hover, rgba(0,0,0,0.02));
}

.member-table tbody td {
    padding: 15px 14px;
    vertical-align: middle;
    color: var(--text-primary);
}

/* 2026-08-20 Jay 지정 — 100px이면 닉네임 정책(NicknamePolicy) 상한인 8자도 말줄임(...)으로 잘렸다.
   메시지 아이콘(22px)+간격(4px)+좌우 패딩(28px)을 빼면 텍스트에 남는 폭이 8자를 못 채웠던 게 원인이라
   170px로 늘린다. col-login(마지막 활동)은 고정폭이 아니라 `width:100%`로 남는 공간을 그대로 흡수하는
   칸이라(바로 아래 규칙) 여기서 폭을 늘리면 그만큼 자동으로 줄어든다 — col-login 쪽은 따로 건드릴
   필요가 없다. */
.member-table .col-name {
    font-weight: 600;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    text-align: center;
}

/* 이름(+아이콘류) 셀 — 컬럼 폭이 100px로 좁을 때 이름이 길어도 옆에 붙는 요소(있다면)가 밀려나지
   않게 이름 쪽(.member-name-text)만 말줄임한다. */
.member-name-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.member-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 마지막 활동 — 헤더·값 모두 가운데(2026-07-30 Jay 지정). 날짜는 자릿수가 고정된 짧은 값이라
   왼쪽에 붙이면 넓은 컬럼 안에서 혼자 떨어져 보인다. 남는 폭은 이 컬럼이 흡수한다(width: 100%). */
.member-table .col-login {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 포인트류(포인트/크릴 등 주 재화) — **억 단위(100,000,000, 11자)까지 한 줄에 들어가야 한다.** 폭을
   넉넉히 잡고 `tabular-nums`로 자릿수 폭을 고정한다(비례 폭 숫자는 값에 따라 컬럼이 흔들린다). */
.member-table .col-point {
    text-align: right;
    white-space: nowrap;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    font-variant-numeric: tabular-nums;
}

/* 헤더는 가운데, 값은 오른쪽(2026-07-30 Jay 지정) — 단위 한 단어("AT")는 컬럼 폭 안에서 가운데가
   자연스럽고, 숫자는 자릿수를 맞춰 읽어야 하므로 오른쪽 정렬을 유지한다. **캐비어·크릴과 다른 예외다**
   (바로 아래 참고) — "AT"는 단위 라벨이라 가운데가 자연스럽지만, "캐비어"·"크릴"은 그 자체가 숫자
   컬럼의 이름이라 값과 맞춰 우측 정렬한다(2026-08-05 Jay 지정). */
.member-table thead th.col-point {
    text-align: center;
}

/* 캐비어 — 계정 단위 재화. 포인트와 같은 숫자 컬럼이라 값은 오른쪽이다.
   폭은 포인트보다 좁게 잡았다(입상 지급용이라 억 단위까지 갈 값이 아니다 — 필요해지면 함께 늘린다). */
.member-table .col-caviar {
    text-align: right;
    white-space: nowrap;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    font-variant-numeric: tabular-nums;
}

/* 헤더도 값과 같은 우측 정렬(2026-08-05 Jay 지정 — 예전엔 가운데였다). "AT"와 달리 캐비어·크릴은
   단위 라벨이 아니라 그 컬럼 자체의 이름이라 값의 자릿수 끝과 헤더 텍스트 끝을 맞추는 편이 더 깔끔하게
   읽힌다. 크릴(마스터 TOP 10, `.col-point` 재사용)의 헤더 우측 정렬은 `CaviarKrillPanel.razor.css`가
   이 페이지에만 격리로 덮어쓴다 — 여기서 `.col-point`를 직접 바꾸면 StoreMembers의 "AT" 헤더까지
   같이 바뀐다. */
.member-table thead th.col-caviar {
    text-align: right;
}

.member-table .col-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    text-align: center;
}

.member-table thead th.col-date {
    text-align: center;
}

/* 매장 닉네임(StoreMembers 전용, 2026-08-05 추가) — 이름과 마찬가지로 짧은 텍스트라 가운데 정렬하고
   말줄임한다. 닉네임이 없으면 "-"로 채워지므로 값이 비어 보이지 않는다. */
.member-table .col-nickname {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 이메일(CaviarKrillPanel 전용, 2026-08-05 추가 — 가입일 대신) — 이름보다 길어질 수 있어 폭을 넉넉히
   잡고 말줄임한다. 숫자 컬럼이 아니라 왼쪽 정렬한다(포인트/캐비어처럼 자릿수를 맞출 이유가 없다). */
.member-table .col-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-table thead th.col-email {
    text-align: left;
}

/* ===== History Load More (표 아래 "더보기" 페이징) ===== */
.history-load-more {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 0 0 12px 12px;
}

.history-load-more:hover {
    background: rgba(255, 107, 53, 0.05);
    color: var(--point);
}

@media (max-width: 600px) {
    .member-table-wrap {
        width: 100%;
    }

    .member-table,
    .member-table thead,
    .member-table tbody {
        display: block;
        width: 100%;
    }

    .member-table thead tr,
    .member-table tbody tr {
        display: flex;
        width: 100%;
        align-items: center;
    }

    /* 좁은 화면에서는 가입일과 마지막 활동을 감춘다 — 이름·캐비어·포인트가 먼저다(2026-08-01 Jay 지정,
       기존 "이름·마지막 활동·포인트"에서 마지막 활동 대신 캐비어로 교체). 이메일(col-email, CaviarKrillPanel
       전용)도 같은 이유로 감춘다(2026-08-05 추가) — 마스터 모바일 화면은 지금처럼 이름·캐비어·크릴 셋만
       보이면 된다. 매장 닉네임(col-nickname, StoreMembers 전용)은 여기 넣지 않는다 — 그 화면은 모바일에서도
       보여야 한다(아래 StoreMembers 전용 폭·폰트 조정은 `StoreMembers.razor.css`에 스코프로 있다). */
    .member-table thead th.col-date,
    .member-table tbody td.col-date,
    .member-table thead th.col-login,
    .member-table tbody td.col-login,
    .member-table thead th.col-email,
    .member-table tbody td.col-email {
        display: none;
    }

    /* 포인트류 컬럼이 116px을 고정으로 먹으므로 이름을 88px로 줄인다. */
    .member-table thead th.col-name,
    .member-table tbody td.col-name {
        flex: 0 0 88px;
        width: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .member-table tbody td.col-name {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .member-table thead th.col-caviar,
    .member-table tbody td.col-caviar {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 모바일도 **억 단위가 한 줄에 들어가야 한다.** 폭을 늘릴 여지가 없으므로(화면 자체가 좁다)
       숫자만 한 단계 작게 쓰고 `tabular-nums`로 자릿수를 고정한다. */
    .member-table thead th.col-point,
    .member-table tbody td.col-point {
        flex: 0 0 116px;
        width: 116px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 14px;
    }

    .member-table tbody td.col-point {
        font-size: 0.72rem;
    }

    .member-table thead th.col-point {
        justify-content: center;
        padding-right: 0;
    }

    /* col-caviar는 여기서 display:flex를 선언한 적이 없다 — 그래서 justify-content는 원래부터 무효였고
       (Blazor 격리 CSS의 각 화면별 규칙이 flex:구 비율만 정한다), 정렬은 위 text-align(우측)이 그대로
       담당한다. 예전에 여기 있던 justify-content:center는 죽은 코드라 2026-08-05에 지웠다. */
}