@charset "UTF-8";
/* ============================================================
   모임지기 / 골프어울림 — 통합 디자인 시스템 v1
   네이비(#0F172A) + 골프그린(#16A34A)
   - 시맨틱 토큰 · 4/8px 간격 리듬 · 다크모드 · 접근성
   - 기존 페이지의 inline <style>이 덮어쓸 수 있도록 base 레이어로 설계
   ============================================================ */

/* ── 폰트 (Pretendard: 한글 UI 최적화) ────────────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ============================================================
   1. 토큰 — 라이트 모드
   ============================================================ */
:root {
    /* 브랜드: 네이비 */
    --ds-navy-950: #020617;
    --ds-navy-900: #0B1220;
    --ds-navy-800: #0F172A;
    --ds-navy-700: #1E293B;
    --ds-navy-600: #334155;
    --ds-navy-500: #475569;

    /* 액센트: 골프그린 (WCAG 대비 검증값) */
    --ds-green-800: #14532D;
    --ds-green-700: #15803D;
    --ds-green-600: #16A34A;
    --ds-green-500: #22C55E;
    --ds-green-100: #DCFCE7;
    --ds-green-50:  #F0FDF4;

    /* 중립: 슬레이트 */
    --ds-slate-50:  #F8FAFC;
    --ds-slate-100: #F1F5F9;
    --ds-slate-200: #E2E8F0;
    --ds-slate-300: #CBD5E1;
    --ds-slate-400: #94A3B8;
    --ds-slate-500: #64748B;
    --ds-slate-600: #475569;

    /* ── 시맨틱 토큰 (컴포넌트는 이것만 참조) ── */
    --ds-primary:          var(--ds-navy-800);
    --ds-primary-hover:    var(--ds-navy-700);
    --ds-on-primary:       #FFFFFF;
    --ds-primary-subtle:   #EEF2F7;

    --ds-accent:           var(--ds-green-600);
    --ds-accent-hover:     var(--ds-green-700);
    --ds-on-accent:        #FFFFFF;
    --ds-accent-subtle:    var(--ds-green-100);

    --ds-bg:               var(--ds-slate-50);
    --ds-surface:          #FFFFFF;
    --ds-surface-2:        var(--ds-slate-100);
    --ds-fg:               var(--ds-navy-950);
    --ds-fg-muted:         var(--ds-slate-500);
    --ds-border:           var(--ds-slate-200);
    --ds-border-strong:    var(--ds-slate-300);

    /* 상태 (색상 단독 의존 금지 — 아이콘/텍스트 병기) */
    --ds-success:        #059669;
    --ds-success-bg:     #ECFDF5;
    --ds-success-fg:     #065F46;
    --ds-warning:        #D97706;
    --ds-warning-bg:     #FFFBEB;
    --ds-warning-fg:     #92400E;
    --ds-danger:         #DC2626;
    --ds-danger-bg:      #FEF2F2;
    --ds-danger-fg:      #991B1B;
    --ds-info:           #0369A1;
    --ds-info-bg:        #F0F9FF;
    --ds-info-fg:        #075985;

    /* 간격 — 4/8px 리듬 */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;

    /* 타이포 스케일 */
    --ds-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
    /* 노안 가독성: 최소 라벨 하한을 올림. 루트 18px 기준 실제 픽셀은 주석 참고 */
    --ds-text-xs:   0.8125rem; /* ≈14.6px (구 12) — 배지/보조 라벨 최소 크기 */
    --ds-text-sm:   0.9375rem; /* ≈16.9px (구 14) — 본문 보조 */
    --ds-text-base: 1rem;      /* ≈18px  (구 16) — 모바일 최소 본문 */
    --ds-text-lg:   1.15rem;   /* ≈20.7px (구 18) */
    --ds-text-xl:   1.35rem;   /* ≈24.3px (구 20) */
    --ds-text-2xl:  1.6rem;    /* ≈28.8px (구 24) */
    --ds-text-3xl:  2rem;      /* ≈36px  (구 30) */
    --ds-leading:      1.6;
    --ds-leading-tight: 1.3;

    /* 라운드 · 그림자 (일관된 엘리베이션 스케일) */
    --ds-radius-sm: 6px;
    --ds-radius:    10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 18px;
    --ds-radius-full: 999px;

    --ds-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --ds-shadow-2: 0 2px 8px rgba(15, 23, 42, .08);
    --ds-shadow-3: 0 6px 20px rgba(15, 23, 42, .10);
    --ds-shadow-4: 0 16px 40px rgba(15, 23, 42, .16);

    /* 모션 */
    --ds-dur-fast: 150ms;
    --ds-dur:      220ms;
    --ds-ease-out: cubic-bezier(.22, 1, .36, 1);
    --ds-ease-in:  cubic-bezier(.4, 0, 1, 1);

    /* z-index 스케일 */
    --ds-z-nav:    1000;
    --ds-z-drop:   2000;
    --ds-z-overlay: 9000;
    --ds-z-toast:  9999;

    color-scheme: light;
}

/* ============================================================
   2. 다크모드 — 색상 반전이 아닌 별도 톤 (대비 재검증값)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ds-primary:        #1E293B;
        --ds-primary-hover:  #334155;
        --ds-on-primary:     #F8FAFC;
        --ds-primary-subtle: #16203A;

        --ds-accent:         #4ADE80;
        --ds-accent-hover:   #22C55E;
        --ds-on-accent:      #052E16;
        --ds-accent-subtle:  #14301F;

        --ds-bg:            #0B1220;
        --ds-surface:       #131C30;
        --ds-surface-2:     #1B263D;
        --ds-fg:            #E8EDF5;
        --ds-fg-muted:      #97A6BC;
        --ds-border:        #24304A;
        --ds-border-strong: #33415C;

        --ds-success:    #34D399;  --ds-success-bg: #0C2C22; --ds-success-fg: #A7F3D0;
        --ds-warning:    #FBBF24;  --ds-warning-bg: #2E2210; --ds-warning-fg: #FDE68A;
        --ds-danger:     #F87171;  --ds-danger-bg:  #2E1517; --ds-danger-fg:  #FECACA;
        --ds-info:       #38BDF8;  --ds-info-bg:    #0B2534; --ds-info-fg:    #BAE6FD;

        --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
        --ds-shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
        --ds-shadow-3: 0 6px 20px rgba(0, 0, 0, .5);
        --ds-shadow-4: 0 16px 40px rgba(0, 0, 0, .6);

        color-scheme: dark;
    }
}
/* 수동 토글 (data-theme="dark") — 미디어쿼리보다 우선 */
:root[data-theme="dark"] {
    --ds-primary:        #1E293B;
    --ds-primary-hover:  #334155;
    --ds-on-primary:     #F8FAFC;
    --ds-primary-subtle: #16203A;
    --ds-accent:         #4ADE80;
    --ds-accent-hover:   #22C55E;
    --ds-on-accent:      #052E16;
    --ds-accent-subtle:  #14301F;
    --ds-bg:            #0B1220;
    --ds-surface:       #131C30;
    --ds-surface-2:     #1B263D;
    --ds-fg:            #E8EDF5;
    --ds-fg-muted:      #97A6BC;
    --ds-border:        #24304A;
    --ds-border-strong: #33415C;
    --ds-success: #34D399; --ds-success-bg: #0C2C22; --ds-success-fg: #A7F3D0;
    --ds-warning: #FBBF24; --ds-warning-bg: #2E2210; --ds-warning-fg: #FDE68A;
    --ds-danger:  #F87171; --ds-danger-bg:  #2E1517; --ds-danger-fg:  #FECACA;
    --ds-info:    #38BDF8; --ds-info-bg:    #0B2534; --ds-info-fg:    #BAE6FD;
    color-scheme: dark;
}

/* ============================================================
   3. 베이스 — 전역 기본값 (페이지 inline style이 덮어쓸 수 있음)
   ============================================================ */
* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* 50대 노안 가독성: 루트 폰트 확대(16→24px 기준). 모든 rem 토큰이 비례 확대됨 */
    font-size: clamp(23px, 6.2vw, 25px);
}
/* 데스크톱(태블릿 이상)에서는 과확대 방지 — PC는 한 단계 작게 22px 고정 */
@media (min-width: 768px) {
    html { font-size: 22px; }
}

body {
    margin: 0;
    font-family: var(--ds-font);
    font-size: var(--ds-text-base);
    line-height: var(--ds-leading);
    color: var(--ds-fg);
    background: var(--ds-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--ds-leading-tight);
    color: var(--ds-fg);
    letter-spacing: -0.01em;
}

a { color: var(--ds-accent-hover); }

/* 숫자 정렬 — 금액/날짜 컬럼 밀림 방지 */
td, th, .ds-num, .amount-cell, .prog-amt {
    font-variant-numeric: tabular-nums;
}

/* 접근성: 포커스 링 (제거 금지) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* 클릭 가능 요소 커서 + 탭 지연 제거 */
button, [role="button"], summary, label[for] { cursor: pointer; }
button, a, input, select, textarea { touch-action: manipulation; }

/* 모바일 입력 자동확대 방지 + 터치 타깃 확보 */
input, select, textarea, button {
    font-family: inherit;
    font-size: max(16px, 1rem);
}
input:not([type="checkbox"]):not([type="radio"]),
select, textarea, button {
    min-height: 44px;
}

img, svg, video { max-width: 100%; height: auto; }

/* 가로 스크롤 방지 */
body { overflow-x: hidden; }

/* 모션 민감 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   4. 컴포넌트 프리미티브 (ds- 접두사 — 기존 클래스와 충돌 없음)
   ============================================================ */

/* --- 아이콘 --- */
.ds-icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.75; }
.ds-icon-sm { width: 16px; height: 16px; }
.ds-icon-lg { width: 24px; height: 24px; }

/* --- 버튼 --- */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ds-space-2);
    min-height: 44px; padding: 10px var(--ds-space-5);
    border: 1px solid transparent; border-radius: var(--ds-radius);
    font-size: var(--ds-text-sm); font-weight: 700; line-height: 1;
    background: var(--ds-surface-2); color: var(--ds-fg);
    transition: background var(--ds-dur-fast) var(--ds-ease-out),
                border-color var(--ds-dur-fast) var(--ds-ease-out),
                transform var(--ds-dur-fast) var(--ds-ease-out);
    text-decoration: none;
}
.ds-btn:hover  { background: var(--ds-border); }
.ds-btn:active { transform: scale(.97); }
.ds-btn[disabled], .ds-btn:disabled {
    opacity: .45; cursor: not-allowed; transform: none;
}
.ds-btn-primary   { background: var(--ds-primary); color: var(--ds-on-primary); }
.ds-btn-primary:hover { background: var(--ds-primary-hover); }
.ds-btn-accent    { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-btn-accent:hover  { background: var(--ds-accent-hover); }
.ds-btn-outline   { background: transparent; border-color: var(--ds-border-strong); color: var(--ds-fg); }
.ds-btn-outline:hover { background: var(--ds-surface-2); }
.ds-btn-danger    { background: var(--ds-danger); color: #fff; }
.ds-btn-ghost     { background: transparent; color: var(--ds-fg-muted); }
.ds-btn-ghost:hover { background: var(--ds-surface-2); color: var(--ds-fg); }
.ds-btn-sm { min-height: 36px; padding: 7px var(--ds-space-3); font-size: var(--ds-text-xs); }
.ds-btn-block { display: flex; width: 100%; }

/* --- 카드 --- */
.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-1);
    overflow: hidden;
}
.ds-card-head {
    padding: var(--ds-space-4) var(--ds-space-5);
    border-bottom: 1px solid var(--ds-border);
    font-size: var(--ds-text-sm); font-weight: 700;
    display: flex; align-items: center; gap: var(--ds-space-2);
    background: var(--ds-surface);
}
.ds-card-body { padding: var(--ds-space-5); }

/* --- 배지 (색상 단독 의존 금지: 아이콘/텍스트 동반) --- */
.ds-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--ds-radius-full);
    font-size: var(--ds-text-xs); font-weight: 700; line-height: 1.5;
    border: 1px solid transparent;
}
.ds-badge-success { background: var(--ds-success-bg); color: var(--ds-success-fg); border-color: var(--ds-success); }
.ds-badge-warning { background: var(--ds-warning-bg); color: var(--ds-warning-fg); border-color: var(--ds-warning); }
.ds-badge-danger  { background: var(--ds-danger-bg);  color: var(--ds-danger-fg);  border-color: var(--ds-danger); }
.ds-badge-info    { background: var(--ds-info-bg);    color: var(--ds-info-fg);    border-color: var(--ds-info); }
.ds-badge-neutral { background: var(--ds-surface-2);  color: var(--ds-fg-muted);   border-color: var(--ds-border); }

/* --- 폼 --- */
.ds-field { margin-bottom: var(--ds-space-4); }
.ds-label {
    display: block; margin-bottom: 6px;
    font-size: var(--ds-text-sm); font-weight: 700; color: var(--ds-fg);
}
.ds-label .ds-req { color: var(--ds-danger); margin-left: 2px; }
.ds-input, .ds-select, .ds-textarea {
    width: 100%; padding: 11px var(--ds-space-3);
    border: 1.5px solid var(--ds-border-strong); border-radius: var(--ds-radius);
    background: var(--ds-surface); color: var(--ds-fg);
    transition: border-color var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
    border-color: var(--ds-accent); outline: none;
    box-shadow: 0 0 0 3px var(--ds-accent-subtle);
}
.ds-textarea { min-height: 96px; resize: vertical; line-height: var(--ds-leading); }
/* 헬퍼는 항상 보이게 (placeholder 대체 금지) */
.ds-help  { margin-top: 5px; font-size: var(--ds-text-xs); color: var(--ds-fg-muted); }
.ds-error { margin-top: 5px; font-size: var(--ds-text-xs); color: var(--ds-danger-fg); font-weight: 600; }
.ds-input[aria-invalid="true"] { border-color: var(--ds-danger); }
/* 읽기전용과 비활성 구분 */
.ds-input[readonly] { background: var(--ds-surface-2); }
.ds-input:disabled, .ds-select:disabled { opacity: .5; cursor: not-allowed; }

/* --- 테이블 --- */
.ds-table-wrap {
    overflow-x: auto;                     /* 표만 가로 스크롤, 페이지는 금지 */
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
}
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); }
.ds-table th {
    position: sticky; top: 0;
    background: var(--ds-primary); color: var(--ds-on-primary);
    padding: var(--ds-space-3) var(--ds-space-4);
    text-align: left; font-weight: 700; font-size: var(--ds-text-xs);
    letter-spacing: .02em; white-space: nowrap;
}
.ds-table td {
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--ds-border);
    color: var(--ds-fg);
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table tbody tr:hover td { background: var(--ds-surface-2); }

/* --- 빈 상태 --- */
.ds-empty { padding: var(--ds-space-12) var(--ds-space-5); text-align: center; }
.ds-empty-icon { color: var(--ds-slate-400); margin-bottom: var(--ds-space-3); }
.ds-empty-title { font-size: var(--ds-text-base); font-weight: 700; margin-bottom: 6px; }
.ds-empty-desc  { font-size: var(--ds-text-sm); color: var(--ds-fg-muted); }

/* --- 알림 배너 --- */
.ds-alert {
    display: flex; gap: var(--ds-space-3); align-items: flex-start;
    padding: var(--ds-space-4); border-radius: var(--ds-radius);
    border-left: 4px solid; font-size: var(--ds-text-sm);
    margin-bottom: var(--ds-space-4);
}
.ds-alert-success { background: var(--ds-success-bg); border-color: var(--ds-success); color: var(--ds-success-fg); }
.ds-alert-warning { background: var(--ds-warning-bg); border-color: var(--ds-warning); color: var(--ds-warning-fg); }
.ds-alert-danger  { background: var(--ds-danger-bg);  border-color: var(--ds-danger);  color: var(--ds-danger-fg); }
.ds-alert-info    { background: var(--ds-info-bg);    border-color: var(--ds-info);    color: var(--ds-info-fg); }

/* --- 진행률 --- */
.ds-progress { height: 10px; background: var(--ds-border); border-radius: var(--ds-radius-full); overflow: hidden; }
.ds-progress-fill {
    height: 100%; border-radius: var(--ds-radius-full);
    background: linear-gradient(90deg, var(--ds-accent-hover), var(--ds-accent));
    transition: width 600ms var(--ds-ease-out);
}

/* --- 스켈레톤 (1초 이상 로딩 시 스피너 대신) --- */
.ds-skeleton {
    background: linear-gradient(90deg, var(--ds-surface-2) 25%, var(--ds-border) 37%, var(--ds-surface-2) 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.4s ease infinite;
    border-radius: var(--ds-radius-sm);
}
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --- 유틸 --- */
.ds-stack   { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-row     { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; }
.ds-muted   { color: var(--ds-fg-muted); }
.ds-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ds-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--ds-space-4); }

/* 안전영역 (노치·제스처바) */
.ds-safe-top    { padding-top: env(safe-area-inset-top); }
.ds-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* 진입 애니메이션 — 리스트 스태거용 */
.ds-fade-up { animation: ds-fade-up var(--ds-dur) var(--ds-ease-out) both; }
@keyframes ds-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }