@charset "UTF-8";
/*
 * MetaHoop Arena - Design System Root Variables
 *
 * 이 파일 하나만 수정하면 전체 사이트의 색상, 폰트, 간격이 일괄 변경됩니다.
 * base.html에서 모든 페이지 CSS보다 먼저 로드됩니다.
 *
 * 사용법: 각 페이지 CSS에서 var(--변수명) 으로 참조
 * 예) color: var(--color-text);
 */

:root {
  /* ─────────────────────────────────────
     1. 레이아웃
     ───────────────────────────────────── */
  --header-height: 45px;

  /* ─────────────────────────────────────
     2. 브랜드 색상 (Brand Colors)
     ───────────────────────────────────── */
  --brand-red:       #e60012;    /* 헤더 호버 언더라인, 로고 강조 */
  --brand-blue:      #4d57d8;    /* 예약 캘린더, 테이블 강조, 포커스 링 */
  --brand-purple:    #a44dff;    /* 예약 버튼, 선택 상태, 타임슬롯 */
  --brand-purple-dk: #933cff;    /* 보라 버튼 호버 */
  --brand-pink:      #ff4b8a;    /* 예약확인 버튼 그라디언트 시작 */
  --brand-orange:    #ff6b3d;    /* 예약확인 버튼 그라디언트 끝 */

  /* ─────────────────────────────────────
     3. 텍스트 색상 (Text Colors)
     ───────────────────────────────────── */
  --color-text:      #12192c;    /* 본문 기본 */
  --color-heading:   #111;       /* 제목, 강조 텍스트 */
  --color-sub:       #333;       /* 보조 텍스트 */
  --color-muted:     #666;       /* 흐린 텍스트, 라벨 */
  --color-light:     #777;       /* 메타 정보, 힌트 */
  --color-disabled:  #999;       /* 비활성 텍스트 */
  --color-placeholder: #ccc;    /* 비활성 날짜 */

  /* ─────────────────────────────────────
     4. 배경 색상 (Background Colors)
     ───────────────────────────────────── */
  --bg-body:         #fff;
  --bg-body-rgb:     255, 255, 255;
  --bg-section:      #fff;       /* 섹션 배경 */
  --bg-card:         #fff;       /* 카드 배경 */
  --bg-input:        #f9fafc;    /* 입력 필드 기본 배경 */
  --bg-hover:        #f6f0ff;    /* 캘린더/타임슬롯 호버 */
  --bg-selected:     #e9d8ff;    /* 타임슬롯 선택 배경 */
  --bg-table-head:   #f3f4fb;    /* 테이블 헤더 */
  --bg-table-alt:    #fafbff;    /* 테이블 짝수행 */
  --bg-disabled:     #f9f9f9;    /* 비활성 영역 */
  --bg-info:         #f8f9ff;    /* 정보 영역 (동의, 팀카드) */
  --bg-footer:       #0b0b0b;   /* 푸터 배경 */

  /* ─────────────────────────────────────
     5. 상태 색상 (Status Colors)
     ───────────────────────────────────── */
  --color-success:      #22c55e;
  --color-success-bg:   #d1fae5;
  --color-success-text: #065f46;
  --color-success-input:#f0fdf4;

  --color-danger:       #e53e3e;
  --color-danger-dark:  #dc2626;
  --color-danger-bg:    #fee2e2;
  --color-danger-text:  #991b1b;
  --color-danger-input: #fef2f2;

  --color-error:        #ff4757;  /* 폼 유효성 에러 */
  --color-error-red:    #e35656;  /* 필수 표시, 일요일 */

  --color-info-bg:      #f0f9ff;
  --color-info-border:  #e0f2fe;
  --color-info-text:    #0369a1;

  /* ─────────────────────────────────────
     6. 보더 / 구분선 (Borders & Dividers)
     ───────────────────────────────────── */
  --border-color:    #eee;       /* 기본 구분선 */
  --border-light:    #e5e7eb;    /* 연한 테두리 */
  --border-input:    #d7d9e5;    /* 입력 필드 테두리 */
  --border-layout:   #e9ecef;    /* 레이아웃 테두리 */

  /* ─────────────────────────────────────
     7. 타이포그래피 (Typography)
     ───────────────────────────────────── */
  --font-family:     'Pretendard', system-ui, -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs:    11px;       /* 날짜 정보 */
  --font-size-sm:    12px;       /* 뱃지, 메타, 힌트 */
  --font-size-base:  14px;       /* 본문 기본 */
  --font-size-md:    16px;       /* 버튼, 소제목 */
  --font-size-lg:    18px;       /* 카드 타이틀 */
  --font-size-xl:    20px;       /* 섹션 타이틀 */
  --font-size-2xl:   22px;       /* 페이지 타이틀 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-extra:  800;
  --line-height:     1.5;

  /* ─────────────────────────────────────
     8. 모서리 둥글기 (Border Radius)
     ───────────────────────────────────── */
  --radius-sm:       4px;        /* 작은 버튼 */
  --radius-md:       6px;        /* 뱃지, 상태표시 */
  --radius-lg:       8px;        /* 버튼, 패널 */
  --radius-xl:       12px;       /* 카드, 모달 */
  --radius-2xl:      18px;       /* 큰 카드 */
  --radius-full:     999px;      /* 원형 (pill) */

  /* ─────────────────────────────────────
     9. 그림자 (Box Shadows)
     ───────────────────────────────────── */
  --shadow-card:     0 4px 12px rgba(15, 23, 42, 0.08);   /* 기본 카드 */
  --shadow-elevated: 0 10px 30px rgba(15, 23, 42, 0.06);  /* 테이블 */
  --shadow-dialog:   0 14px 40px rgba(15, 23, 42, 0.12);  /* 다이얼로그 */
  --shadow-modal:    0 20px 40px rgba(0, 0, 0, 0.2);      /* 모달 */

  /* ─────────────────────────────────────
     10. 오버레이 (Overlays)
     ───────────────────────────────────── */
  --overlay-dark:    rgba(0, 0, 0, 0.45);   /* 비디오 위 오버레이 */
  --overlay-modal:   rgba(0, 0, 0, 0.5);    /* 모달 배경 */

  /* ─────────────────────────────────────
     11. 트랜지션 (Transitions)
     ───────────────────────────────────── */
  --transition-fast:  0.2s ease;
  --transition-mid:   0.35s ease;

  /* ─────────────────────────────────────
     12. 캘린더 날짜 상태 (Calendar Day States)
     ───────────────────────────────────── */
  --day-border:        #f0f0f4;    /* 날짜 셀 테두리 */
  --bg-past-day:       #80838e;    /* 지난 날짜 배경 */
  --color-past-day:    #dedee5;    /* 지난 날짜 텍스트 */
  --color-past-sun:    #ffb3b3;    /* 지난 일요일 */
  --color-past-sat:    #b3b3ff;    /* 지난 토요일 */
  --bg-day-full:       #f5e5e5;    /* 만석 날짜 배경 */
  --border-day-full:   #e57373;    /* 만석 날짜 테두리 */
  --color-day-full:    #c62828;    /* 만석 날짜 텍스트 */

  /* ─────────────────────────────────────
     13. 버튼 / 폼 컴포넌트 (Buttons & Forms)
     ───────────────────────────────────── */
  --bg-btn-cancel:          #f0f0f0;   /* 보조 취소 버튼 배경 */
  --bg-btn-cancel-hover:    #e0e0e0;   /* 보조 취소 버튼 호버 */
  --bg-timeslot-disabled:   #f0f0f5;   /* 비활성 타임슬롯 배경 */

  /* ─────────────────────────────────────
     14. 테이블 행 상태 (Table Row States)
     ───────────────────────────────────── */
  --bg-row-selected:   #eef2ff;    /* 선택된 테이블 행 */
  --bg-row-hover:      #f8fafc;    /* 호버 테이블 행 */

  /* ─────────────────────────────────────
     15. 확인 다이얼로그 (Confirm Dialog)
     ───────────────────────────────────── */
  --bg-confirm-icon:     #f6f3ff;  /* 확인 아이콘 배경 */
  --border-confirm-icon: #e0d5ff;  /* 확인 아이콘 테두리 */
  --color-hint:          #9094a5;  /* 보조 힌트 텍스트 (footer 등) */
}

/* ===============================
   리셋 / 기본
   =============================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* 폼 요소 폰트 상속
 * 브라우저 기본값은 input·button 등에 시스템폰트를 강제 적용하므로
 * inherit 으로 body 의 --font-family 를 물려받게 합니다. */
input, button, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
}

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: rgb(var(--bg-body-rgb));
}

/* 고정 헤더 아래 콘텐츠 가림 방지 */
.content {
  padding-top: var(--header-height);
}

/* 접근성: 모션 감소 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}