/* ════════════════════════════════════════════════════════════
   자동 생성 파일 — 직접 수정 금지 (scripts/build_css.py 로 생성)
   소스: static/css/pc/base.css 의 @import 목록 + 그 파일들
   수정하려면 static/css/pc/base.css, static/css/tokens.css,
   static/css/pc/base/*.css, static/css/pc/components/*.css 를 고치고
   `python scripts/build_css.py` 를 다시 실행하세요.
   ════════════════════════════════════════════════════════════ */

/* ── static/css/tokens.css ── */
/* =============================================
   파일명: tokens.css
   역할:   디자인 토큰 — 색·반경·그림자·치수의 단일 진실의 출처
   사용처: PC/모바일 모든 CSS (pc/base.css 가 @import 로 로드)
   비고:   값 변경은 반드시 이 파일에서만. 다크모드는 [data-theme=dark] 오버라이드
   ============================================= */

/* [라이트 모드] 기본 토큰 값 */
:root {
    /* ── 배경 / 표면 (테마 적응) ── */
    --color-background-primary:   #ffffff;   /* 카드·헤더 등 표면 배경 */
    --color-background-secondary: #edf3f9;   /* 검색창·보조 표면 */
    --color-background-tertiary:  #f5f7fa;   /* 페이지 전체 배경 */
    --color-background-success: #e8f5e9;     /* 성공 톤 배경 (뱃지 등) */
    --color-background-danger:  #fdecea;     /* 위험 톤 배경 */
    --color-background-warning: #fff8e1;     /* 경고 톤 배경 */
    --color-background-info:    #e3f2fd;     /* 정보 톤 배경 */

    /* ── 텍스트 (테마 적응) ── */
    --color-text-primary:   #111b2e;         /* 본문 기본 텍스트 */
    --color-text-secondary: #5c687a;         /* 보조·설명 텍스트 */
    --color-text-success:   #15803d;         /* 성공 텍스트 */
    --color-text-danger:    #dc2626;         /* 위험 텍스트 */
    --color-text-warning:   #d97706;         /* 경고 텍스트 */
    --color-text-info:      #2f80ed;         /* 정보·링크 텍스트 */

    /* ── 테두리 (테마 적응) ── */
    --color-border-tertiary: #d7e0ea;        /* 구분선·기본 테두리 */

    /* ── 브랜드 색 ── */
    --color-primary:       #087853;          /* 브랜드 주색 (회원가입·관리자 주버튼 등) */
    --color-primary-hover: #066044;          /* 브랜드 주색 hover */
    --logo-primary:        #087853;          /* 워드마크 LOG 고정색 — 라이트·다크 모두 동일 */

    /* ── 고정 색 (테마 무관, 컴포넌트 전용) ── */
    --color-white:        #ffffff;           /* 컬러 배경 위 텍스트 등 항상 흰색 */
    --color-accent:       #2f80ed;           /* 주 버튼·포커스 강조 파랑 */
    --color-accent-hover: #1768d4;           /* 주 버튼 hover */
    --color-danger:       #ef4444;           /* 삭제·로그아웃 등 위험 액션 */
    --color-danger-hover: #dc2626;           /* 위험 액션 hover */
    --color-success-line: #10b981;           /* 성공 메시지 좌측 강조선 */

    /* ── 중립 그레이 (폼·보조 버튼, 테마 무관) ── */
    --color-neutral-100: #f3f4f6;            /* 보조 버튼 배경 */
    --color-neutral-200: #e5e7eb;            /* 보조 버튼 hover·테두리 */
    --color-neutral-300: #d1d5db;            /* 입력창 테두리 */
    --color-neutral-700: #374151;            /* 폼 라벨 텍스트 */
    --color-neutral-800: #333333;            /* 보조 버튼 텍스트 */

    /* ── 강조 메시지(고정) 배경/텍스트 ── */
    --color-msg-success-bg:   #d1fae5;       /* 성공 메시지 배경 */
    --color-msg-success-text: #065f46;       /* 성공 메시지 텍스트 */
    --color-msg-danger-bg:    #fee2e2;       /* 오류 메시지 배경 */
    --color-msg-danger-text:  #991b1b;       /* 오류 메시지 텍스트 */

    /* ── 헤더 전용 고정 색 (관리자 패널 버튼 · 아바타) ── */
    --color-admin-panel-bg:          #064634; /* 관리자 패널 버튼 기본 배경(브랜드 딥 그린) */
    --color-admin-panel-text:        #8cf0bd; /* 관리자 패널 버튼 기본 텍스트 */
    --color-admin-panel-bg-hover:    #04231a; /* 관리자 패널 버튼 hover 배경 */
    --color-admin-panel-bg-light:    #eff6ff; /* 라이트 모드 관리자 패널 배경 */
    --color-admin-panel-text-light:  #1d4ed8; /* 라이트 모드 관리자 패널 텍스트 */
    --color-admin-panel-bg-lighthov: #dbeafe; /* 라이트 모드 관리자 패널 hover */
    --color-avatar-bg:   #e6f1fb;            /* 유저 아바타 원형 배경 */
    --color-avatar-text: #185fa5;            /* 유저 아바타 이니셜 텍스트 */

    /* ── 포커스 링 ── */
    --ring-accent: 0 0 0 3px rgba(47, 128, 237, 0.14); /* 입력 포커스 외곽선 */

    /* ── 반경 ── */
    --border-radius-sm: 4px;   /* 뱃지·태그 */
    --border-radius-md: 8px;   /* 카드·입력창·버튼 */
    --border-radius-lg: 10px;  /* 큰 카드·모달 */

    /* ── 그림자 ── */
    --shadow-sm: 0 1px 2px rgba(4, 70, 52, 0.06);  /* 옅은 입체 */
    --shadow-md: 0 10px 24px rgba(4, 70, 52, 0.08); /* 카드 기본 */
    --shadow-lg: 0 18px 38px rgba(4, 70, 52, 0.14); /* 모달·팝오버 */

    /* ── 레이아웃 치수 ── */
    --site-header-height: 62px; /* 상단 헤더 높이 (sticky 계산용) */
    --subnav-height:      51px; /* 서브내비 높이 */

    /* ── 헤더·메뉴바 전용 (BaseballLog 필드 그린 톤, base/header.css 에서만 사용) ── */
    --cl-primary:        #087853;
    --cl-accent:          #ff5b42;
    --cl-accent-strong:   #e14b34;
    --cl-bg-elevated:     #ffffff;
    --cl-bg-muted:        #e7f3eb;
    --cl-line:            #e1eae4;
    --cl-text:            #18271f;
    --cl-text-soft:       #3e554b;
    --cl-text-muted:      #647269;
    --cl-radius-md:       var(--border-radius-md);
    --cl-font: "Pretendard Variable", Pretendard, "SUIT Variable", SUIT, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* [다크 모드] 오버라이드 — 테마 적응 토큰만 재정의 */
[data-theme="dark"] {
    --color-background-primary:   #0c2319;   /* 다크 표면 배경 — 홈 화면과 동일한 필드 그린 톤 */
    --color-background-secondary: #0f2e21;   /* 다크 보조 표면 — 홈 화면과 동일한 필드 그린 톤 */
    --color-background-tertiary:  #06120d;   /* 다크 페이지 배경 — 홈 화면과 동일한 필드 그린 톤 */
    --color-background-success: #14532d;     /* 다크 성공 톤 배경 */
    --color-background-danger:  #450a0a;     /* 다크 위험 톤 배경 */
    --color-background-warning: #451a03;     /* 다크 경고 톤 배경 */
    --color-background-info:    #1e3a5f;     /* 다크 정보 톤 배경 */
    --color-text-primary:   #f1f5f9;         /* 다크 본문 텍스트 */
    --color-text-secondary: #a8b3c7;         /* 다크 보조 텍스트 */
    --color-text-success:   #4ade80;         /* 다크 성공 텍스트 */
    --color-text-danger:    #f87171;         /* 다크 위험 텍스트 */
    --color-text-warning:   #fbbf24;         /* 다크 경고 텍스트 */
    --color-text-info:      #60a5fa;         /* 다크 정보·링크 텍스트 */
    --color-border-tertiary: #243752;        /* 다크 구분선·테두리 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);  /* 다크 옅은 그림자 */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); /* 다크 카드 그림자 */
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* 다크 모달 그림자 */

    /* ── 헤더·메뉴바 전용 다크 오버라이드 ── */
    --cl-bg-elevated: #0c2319;
    --cl-bg-muted:    #0f2e21;
    --cl-line:        #1f3a2c;
    --cl-text:        #ffffff;
    --cl-text-soft:   #a9c4b6;
    --cl-text-muted:  #7f9c8d;
}

/* ── static/css/pc/base/fonts.css ── */
/* =============================================
   파일명: base/fonts.css
   역할:   PitchSans 웹폰트 선언 (Pretendard 기반 커스텀 스포츠 서체)
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   비고:   Light(300) / Regular(400) / Bold(700) 3종
           원본: Pretendard (SIL OFL 1.1) — static/fonts/pitch-sans/LICENSE.txt 참고
   ============================================= */

@font-face {
    font-family: 'PitchSans';
    src: url('../../../fonts/pitch-sans/PitchSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PitchSans';
    src: url('../../../fonts/pitch-sans/PitchSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PitchSans';
    src: url('../../../fonts/pitch-sans/PitchSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── static/css/pc/base/reset.css ── */
/* =============================================
   파일명: base/reset.css
   역할:   브라우저 기본 스타일 초기화 + body 기본값
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   ============================================= */

/* [리셋] 모든 요소 박스 모델 통일 */
*, *::before, *::after {
    margin: 0;             /* 브라우저 기본 바깥 여백 제거 */
    padding: 0;            /* 브라우저 기본 안쪽 여백 제거 */
    box-sizing: border-box; /* 패딩·테두리를 width 안에 포함 */
}

/* [기본] 페이지 본문 */
body {
    font-family: 'PitchSans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 한글 우선 폰트 스택 */
    line-height: 1.6;                              /* 본문 줄 간격 */
    color: var(--color-text-primary);             /* 기본 텍스트색 (다크모드 자동 대응) */
    background-color: var(--color-background-tertiary); /* 페이지 전체 배경 */
    transition: background-color 0.2s, color 0.2s; /* 테마 전환 시 부드럽게 */
}

/*
  PC 전용 최소 폭 — 반드시 .is-pc-device 로 한정한다.
  이 번들은 "PC 화면에서만 쓰인다"가 아니다. pc/base.html 의 적응 셸은 전용 모바일
  템플릿이 없는 PC 화면을 모바일·태블릿에서 그대로 렌더하며, 그때도 이 번들을 읽는다.
  body 에 무조건 걸면 min-width 가 max-width 를 이기기 때문에 폭이 좁은 기기에서
  본문이 1024px 로 고정돼 화면 밖으로 잘린다(실측: 375px→649px, 768px→271px,
  834px→205px 잘림). 기기 판정은 pc/base.html 이 body 클래스로 이미 내려주고 있다.
*/
body.is-pc-device {
    min-width: 1024px;
}

/* ── static/css/pc/base/layout.css ── */
/* =============================================
   파일명: base/layout.css
   역할:   전체 페이지 레이아웃 (가운데 정렬 컨테이너 · 본문 영역)
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   ============================================= */

/* [컨테이너] 콘텐츠 가운데 정렬 래퍼 */
.container {
    max-width: 1200px;   /* 콘텐츠 최대 폭 (고정: 와이드 화면에서 가독성) */
    margin: 0 auto;      /* 좌우 자동 여백으로 가운데 정렬 */
    padding: 0 20px;     /* 작은 화면에서 좌우 최소 여백 */
}

/* [본문] 헤더/푸터 사이 메인 영역 */
.main-content {
    min-height: calc(100vh - 200px); /* 푸터가 화면 하단에 붙도록 최소 높이 확보 */
    padding: 40px 0;                 /* 본문 상하 여백 */
}

/* ── 페이지별 main 변형 클래스 ── */

/* [인증 페이지] 회원가입·찾기·인증 등 중앙 카드 레이아웃 */
.page-auth {
    background: var(--color-background-tertiary); /* 배경색 */
    padding: 48px 0;                              /* 카드 상하 여백 */
    min-height: 100vh;                            /* 전체 화면 높이 확보 */
}

/* [관리자 페이지] 관리자 전 페이지 공통 */
.page-admin {
    background: var(--color-background-tertiary); /* 배경색 */
    padding: 32px 24px 60px;                      /* 상단·좌우·하단 여백 */
    min-height: 100vh;                            /* 전체 화면 높이 확보 */
}

/* [유저 편집 페이지] 프로필 수정 — 좌우 여백 없음 (ep-wrap 이 헤더 폭에 맞춰 직접 제어) */
.page-user-edit {
    background: var(--color-background-tertiary); /* 배경색 */
    padding: 20px 0 60px;                         /* 상단·하단 여백만 (상단은 뒤로가기 제거로 축소) */
    min-height: 100vh;                            /* 전체 화면 높이 확보 */
}

/* [에러 페이지] 403·404·500·정지 */
.page-error {
    background: var(--color-background-tertiary); /* 배경색 */
    min-height: 100vh;                            /* 전체 화면 높이 확보 */
    display: flex;                                /* 에러 카드 가운데 정렬 */
    align-items: center;                          /* 세로 중앙 */
    justify-content: center;                      /* 가로 중앙 */
}

/* [랜딩 페이지] 상하 패딩 없음 (landing-container 가 직접 제어) */
.page-landing {
    padding: 0;                                   /* main-content 기본 padding 제거 */
    background: var(--color-background-tertiary); /* 배경색 */
}

/* ── 유틸리티 ── */

/* [숨김] JS가 초기 상태로 숨기는 요소 — display:none 인라인 style 대체.
   !important 가 필요한 이유: .ep-overlay/.modal-overlay/.su-panel 등
   display:flex 를 가진 CSS 클래스가 extra_css(나중 로드)에서 이 규칙을 덮기 때문.
   JS 는 style.display 대신 classList.remove/add('is-hidden') 로 토글해야 함. */
.is-hidden { display: none !important; }

/* ── static/css/pc/base/header.css ── */
/* =============================================
   파일명: base/header.css
   역할:   사이트 상단 헤더 + 메뉴바 (BaseballLog 필드 그린 톤 — 홈 화면과 동일한 스타일을
           전체 PC 페이지에 적용. 색·치수는 tokens.css 의 --cl-* 토큰만 사용)
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   ============================================= */

/* [헤더] 최상단 바 */
.site-header {
    position: sticky;                       /* 스크롤 시 화면 상단에 고정 */
    top: 0;                                 /* 뷰포트 최상단에 붙음 */
    z-index: 120;                           /* 메뉴바(125)보다 아래, 모달(200)보다 위 */
    background: var(--cl-bg-elevated);      /* 헤더 배경 — 테마에 따라 흰/짙은 녹색 자동 전환 */
    border-bottom: 1px solid var(--cl-line);
    color: var(--cl-text);
    font-family: var(--cl-font);            /* 헤더 안에서만 별도 폰트 스택 사용 */
}

/* [헤더] 내부 정렬 래퍼 */
.header-inner {
    display: flex;                          /* 로고·메뉴·우측메뉴 가로 배치 */
    align-items: center;                    /* 세로 중앙 정렬 */
    justify-content: space-between;         /* 로고(좌)와 우측 메뉴를 양끝으로 */
    gap: 22px;
    min-height: var(--site-header-height);
    max-width: 1440px;                      /* 헤더 콘텐츠 최대 폭 */
    margin: 0 auto;                         /* 가운데 정렬 */
    padding: 0 34px;                        /* 헤더 좌우 여백 */
}

/* [헤더] 로고 링크 — 마크 + 워드마크를 가로로 나란히 */
.site-logo {
    display: inline-flex;              /* 마크·워드마크 가로 배치 */
    align-items: center;               /* 높이가 달라도 세로 중앙 정렬 */
    gap: 10px;                         /* 마크와 워드마크 사이 간격 */
    min-width: 0;
    text-decoration: none;             /* 링크 밑줄 제거 */
    flex-shrink: 0;                    /* 헤더가 좁아져도 로고 압축 안 함 */
}

/* [헤더] 텍스트 로고 (이미지 없을 때 fallback) */
.site-logo-text {
    font-size: 22px;                   /* 로고 글자 크기 */
    font-weight: 600;                  /* 로고 굵기 */
    color: var(--cl-text);
    letter-spacing: -0.3px;            /* 자간 살짝 좁힘 */
}

/* [헤더] 로고 마크(심볼) — 라이트·다크 모드 모두 동일한 이미지 */
.site-logo-mark {
    height: 34px;        /* 헤더 내 마크 높이 고정 (변경 → 이 값만 수정) */
    width: auto;         /* 비율 유지하며 너비 자동 조정 */
    display: block;      /* 이미지 하단 여백(inline 기본값) 제거 */
    object-fit: contain; /* 이미지가 잘리지 않게 비율 유지 */
    flex-shrink: 0;      /* 헤더가 좁아져도 마크 압축 안 함 */
}

/* [헤더] 워드마크 PNG — 밝은/어두운 배경용 2장을 겹쳐두고 헤더 배경 톤(테마)에 맞춰 전환 */
.site-logo-wordmark {
    height: 38px;                          /* 헤더 높이 안에서 최대한 크게 */
    width: auto;                           /* 원본 비율 유지 */
    display: none;                         /* 기본은 숨김 — 아래 규칙으로 하나만 노출 */
    object-fit: contain;
    flex-shrink: 0;                        /* 헤더 축소 시 워드마크 압축 안 함 */
}

.site-logo-wordmark.logo-for-light { display: block; }
.site-logo-wordmark.logo-for-dark  { display: none; }

[data-theme="dark"] .site-logo-wordmark.logo-for-light { display: none; }
[data-theme="dark"] .site-logo-wordmark.logo-for-dark  { display: block; }

/* [헤더] 우측 메뉴 묶음 */
.header-right {
    display: flex;       /* 우측 아이템 가로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px;
    min-width: 0;
}

/* [검색] 입력 박스 — 메뉴바 도입 후 숨김 (기능은 남겨두고 화면에서만 제거) */
.search-box {
    display: none;
}

/* [관리자 패널 버튼] 관리자만 노출 */
.btn-admin-panel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius-md);
    background: var(--cl-bg-muted);
    color: var(--cl-text-soft);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.btn-admin-panel:hover { background: var(--cl-line); }

/* [회원 등록 버튼] — 메뉴바 도입 후 숨김 (기능은 남겨두고 화면에서만 제거) */
.btn-register {
    display: none;
}

/* [알림 종] 아이콘 */
.header-bell {
    font-size: 20px;
    color: var(--cl-text-soft);
    cursor: pointer;
    transition: color 0.2s;
}

.header-bell:hover { color: var(--cl-text); }

/* [알림] 종 버튼 + 배지 + 드롭다운 패널 (팝오버 자체는 사이트 공통 톤 유지) */
.notif-wrap { position: relative; }
.notif-bell-btn {
    background: none; border: none; padding: 4px; cursor: pointer;
    display: inline-flex; align-items: center; position: relative;
}
.notif-badge {
    position: absolute; top: -4px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: var(--color-text-danger, #dc2626); color: #fff;
    font-size: .66rem; font-weight: 800; line-height: 16px; text-align: center;
}
.notif-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
    width: 340px; max-width: 90vw;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
    overflow: hidden;
}
.notif-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--color-border-tertiary);
    font-size: .88rem; color: var(--color-text-primary);
}
.notif-readall { background: none; border: none; color: var(--color-primary); font-size: .78rem; font-weight: 700; cursor: pointer; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--color-text-tertiary); font-size: .84rem; }
.notif-item {
    display: block; padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-tertiary);
    text-decoration: none; color: inherit; cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-background-secondary); }
.notif-item.is-unread { background: var(--color-background-info, #eef4ff); }
.notif-item-title { font-size: .86rem; font-weight: 700; color: var(--color-text-primary); }
.notif-item-body { font-size: .78rem; color: var(--color-text-secondary); margin-top: 2px; }
.notif-item-time { font-size: .72rem; color: var(--color-text-tertiary); margin-top: 4px; }

/* [헤더 내비 링크] */
.header-navlink {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    color: var(--cl-text-soft); padding: 6px 10px;
    border-radius: var(--cl-radius-md); transition: color .15s, background .15s;
    white-space: nowrap;
}
.header-navlink:hover { color: var(--cl-primary); background: var(--cl-bg-muted); }
.header-navlink i { font-size: 17px; }

/* [아바타] 로그인 유저 프로필 사진/이니셜 원형 */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--cl-line);
    background: var(--cl-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-primary);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}
.user-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* [로그인 링크] 비로그인 상태 */
.btn-header-login {
    color: var(--cl-text-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--cl-radius-md);
    transition: background 0.2s;
}

.btn-header-login:hover { background: var(--cl-bg-muted); }

/* [회원가입 링크] 비로그인 상태 강조 */
.btn-header-signup {
    background: var(--cl-accent);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--cl-radius-md);
    transition: background 0.2s;
}

.btn-header-signup:hover { background: var(--cl-accent-strong); }

/* [테마 토글] 라이트/다크 전환 버튼 */
.btn-theme-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius-md);
    background: var(--cl-bg-muted);
    color: var(--cl-text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.btn-theme-toggle:hover {
    background: var(--cl-line);
    color: var(--cl-text);
}

/* ─────────────────────────────────────────────────
   [메뉴바] 최상단 헤더 바 위에 겹쳐서 정중앙에 배치.
   .site-header 와 같은 top(0)에 sticky 시켜 항상 같은 줄에 포개지고,
   바 자체는 클릭을 통과시키고(pointer-events:none) 버튼만 클릭 가능하게 해서
   로고·알림·아바타 등 헤더의 다른 요소를 가리지 않는다.
   subnav.html 이 header 블록에 포함되므로 여기서 전역 관리한다.
───────────────────────────────────────────────── */
.site-subnav {
    position: sticky;
    top: 0;
    z-index: 125;
    height: var(--site-header-height);
    margin-top: calc(var(--site-header-height) * -1);
    border-bottom: 0;
    background: transparent;
    pointer-events: none;
}

.subnav-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 34px;
}

.subnav-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--cl-radius-md);
    background: var(--cl-bg-elevated);
    color: var(--cl-text-muted);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
}

.subnav-btn i { font-size: 17px; }

.subnav-btn:hover {
    color: var(--cl-primary);
    background: var(--cl-bg-muted);
}

.subnav-btn.active {
    background: var(--cl-bg-muted);
    color: var(--cl-primary);
}

[data-theme="dark"] .subnav-btn.active {
    background: rgba(140, 240, 189, .14);
    color: #fff;
}

/* 헤더가 줄바꿈되는 좁은 화면에서는 겹치기 대신 헤더 아래 별도 줄로 되돌림 */
@media (max-width: 980px) {
    .header-inner {
        flex-wrap: wrap;
        padding: 10px 18px;
    }

    .site-subnav {
        position: static;
        height: auto;
        margin-top: 0;
        border-bottom: 1px solid var(--cl-line);
        background: var(--cl-bg-elevated);
        pointer-events: auto;
    }

    .subnav-inner {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 8px 18px;
        scrollbar-width: none;
    }

    .subnav-inner::-webkit-scrollbar { display: none; }

    .subnav-btn {
        flex: 0 0 auto;
        background: transparent;
    }
}

@media (max-width: 520px) {
    .header-inner {
        gap: 10px;
        padding: 10px 12px;
    }

    .btn-admin-panel { display: none; }
}

/* ─────────────────────────────────────────────────
   [아바타 정보 드롭다운] 상단 아바타(#userAvatarBtn) 클릭 시 뜨는 패널.
   원래 랜딩 페이지(landing.css)에만 있어 다른 페이지에서는 버튼을 눌러도
   아무 일도 없었음 — header.html 이 전 페이지 공통이므로 여기로 옮겨
   어디서나 동작하게 함. auth_sidebar.html 이 header.html 에 include 됨.
───────────────────────────────────────────────── */
.auth-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--cl-line);
    border-radius: 12px;
    background: var(--cl-bg-elevated);
    box-shadow: 0 14px 28px rgba(9, 58, 42, .08);
}
[data-theme="dark"] .auth-sidebar { box-shadow: none; }

.avatar-info-panel {
    position: fixed;
    top: calc(var(--site-header-height) + 10px);
    right: 34px;
    z-index: 150;
    width: 360px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - var(--site-header-height) - 24px);
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(9, 58, 42, .18);
}

.avatar-info-panel[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .avatar-info-panel {
        right: 18px;
    }
}

@media (max-width: 520px) {
    .avatar-info-panel {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

.sidebar-auth-form,
.sidebar-welcome {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-auth-form input,
.sidebar-pw-wrap input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius-md);
    background: var(--cl-bg-elevated);
    color: var(--cl-text);
    font-size: 14px;
    padding: 0 12px;
}

.sidebar-auth-form input:focus {
    border-color: var(--cl-primary);
    box-shadow: 0 0 0 3px rgba(8, 120, 83, .13);
    outline: 0;
}

.sidebar-pw-wrap {
    position: relative;
}

.sidebar-pw-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--cl-text-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

.btn-sidebar-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--cl-primary);
    border-radius: var(--cl-radius-md);
    background: var(--cl-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.btn-sidebar-login:hover {
    background: #064634;
}

.sidebar-auth-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    color: var(--cl-text-muted);
    font-size: 13px;
}

.sidebar-auth-links a {
    color: var(--cl-text-soft);
    text-decoration: none;
    font-weight: 800;
}

.sidebar-message {
    min-height: 18px;
    color: var(--cl-danger, #d14343);
    font-size: 13px;
}

.sidebar-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cl-line);
    border-radius: 9px;
    background: var(--cl-bg-muted);
}

.sidebar-tab {
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--cl-text-muted);
    font-weight: 900;
    cursor: pointer;
}

.sidebar-tab.active {
    background: var(--cl-bg-elevated);
    color: var(--cl-primary);
}

.sidebar-tab-panel {
    display: none;
}

.sidebar-tab-panel.active {
    display: block;
}

.sidebar-empty {
    margin: 0;
    padding: 16px 4px;
    color: var(--cl-text-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.sidebar-user-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--cl-primary);
    color: #fff;
    font-weight: 900;
}

.sidebar-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-nickname {
    margin: 0;
    color: var(--cl-text);
    font-size: 17px;
    font-weight: 900;
}

.sidebar-role-badge {
    display: inline-flex;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(8, 120, 83, .12);
    color: var(--cl-primary);
    font-size: 11px;
    font-weight: 900;
}

.sidebar-info-list {
    border: 1px solid var(--cl-line);
    border-radius: 9px;
    overflow: hidden;
}

.sidebar-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cl-line);
    font-size: 13px;
}

.sidebar-info-row:last-child {
    border-bottom: 0;
}

.sidebar-info-label {
    color: var(--cl-text-muted);
    font-weight: 800;
}

.sidebar-info-value {
    overflow: hidden;
    color: var(--cl-text);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-action-btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.btn-sidebar-edit,
.btn-sidebar-records,
.btn-sidebar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius-md);
    background: var(--cl-bg-elevated);
    color: var(--cl-text-soft);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}
.btn-sidebar-edit { background:var(--cl-bg-muted); color:var(--cl-primary); }
.btn-sidebar-records { background:#e8f5e9; border-color:#b7dfbc; color:#166534; }

.btn-sidebar-logout {
    background:#fff5f5;
    border-color:#f1c1c1;
    color: var(--cl-danger, #d14343);
}

.sidebar-team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-team-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px;
    border: 1px solid var(--cl-line);
    border-radius: 9px;
    color: var(--cl-text);
    text-decoration: none;
}

.sidebar-team-item:hover {
    border-color: #cfe1d6;
    background: var(--cl-bg-muted);
}
[data-theme="dark"] .sidebar-team-item:hover { border-color: #2f5a44; }

.sidebar-team-logo {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--cl-bg-muted);
    color: var(--cl-primary);
}

.sidebar-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-team-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-membership-tag {
    flex: 0 0 auto;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(8, 120, 83, .1);
    color: var(--cl-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.sidebar-suspend-banner {
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(209, 67, 67, .25);
    border-radius: 9px;
    background: rgba(209, 67, 67, .08);
    color: var(--cl-danger, #d14343);
}

.sidebar-suspend-title {
    font-weight: 900;
}

.sidebar-suspend-desc {
    margin-top: 3px;
    font-size: 12px;
}

/* ── static/css/pc/base/footer.css ── */
/* =============================================
   파일명: base/footer.css
   역할:   하단 푸터 영역
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   ============================================= */

/* [푸터] 페이지 하단 영역 — body 직계만.
   태그 셀렉터로 두면 카드·패널 하단에 쓰는 <footer>(예: pc/team/detail.html 의
   .td-poll-composer-foot)까지 margin-top:60px · padding:30px 0 · 가운데 정렬을
   물려받아 레이아웃이 벌어진다. mobile/common.css 의 header 규칙도 같은 이유로
   body > header · .m-header 로 좁혔다. */
body > footer {
    background-color: var(--color-background-primary); /* 푸터 배경 (다크모드 자동 대응) */
    border-top: 1px solid var(--color-border-tertiary); /* 본문과 구분하는 상단 선 */
    padding: 30px 0;                       /* 푸터 상하 여백 */
    text-align: center;                    /* 저작권 문구 가운데 정렬 */
    color: var(--color-text-secondary);    /* 보조 회색 텍스트 */
    margin-top: 60px;                      /* 본문과의 상단 간격 */
    font-size: 14px;                       /* 푸터 글자 크기 */
}

/* ── static/css/pc/components/buttons.css ── */
/* =============================================
   파일명: components/buttons.css
   역할:   공용 버튼 (primary · secondary · logout)
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   ============================================= */

/* [공용 버튼] 3종 공통 골격 */
.btn-primary, .btn-secondary, .btn-logout {
    padding: 11px 20px;                  /* 버튼 내부 여백 */
    border: 1px solid transparent;       /* 버튼 기준선 */
    border-radius: var(--border-radius-md); /* 모서리 둥글기 (변경 → --border-radius-md) */
    font-size: 14px;                     /* 버튼 글자 크기 */
    font-weight: 700;                    /* 명확한 액션 강조 */
    cursor: pointer;                     /* 클릭 가능 표시 */
    text-decoration: none;               /* a 태그로 쓰일 때 밑줄 제거 */
    display: inline-block;               /* a/button 모두 동일 박스 모델 */
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

/* [주 버튼] 강조 액션 */
.btn-primary  {
    background-color: var(--color-accent); /* 강조 파랑 배경 (변경 → --color-accent) */
    color: var(--color-white);             /* 흰색 텍스트 (어두운 배경 대비) */
}

/* [주 버튼] hover — 색 진하게 + 살짝 떠오름 */
.btn-primary:hover {
    background-color: var(--color-accent-hover); /* hover 시 진한 파랑 */
}

/* [보조 버튼] 약한 강조 */
.btn-secondary {
    background-color: var(--color-background-primary); /* 표면 배경 */
    border-color: var(--color-border-tertiary);        /* 낮은 대비 테두리 */
    color: var(--color-text-primary);                  /* 진회색 텍스트 */
}

/* [보조 버튼] hover — 배경 한 단계 진하게 */
.btn-secondary:hover {
    background-color: var(--color-background-secondary); /* hover 시 약간 진한 회색 */
}

/* [로그아웃 버튼] 위험 톤 */
.btn-logout {
    background-color: var(--color-danger); /* 위험 빨강 배경 (변경 → --color-danger) */
    color: var(--color-white);             /* 흰색 텍스트 */
}

/* [로그아웃 버튼] hover — 빨강 진하게 */
.btn-logout:hover {
    background-color: var(--color-danger-hover); /* hover 시 진한 빨강 */
}

/* 홈을 제외한 화면은 버튼을 각진 형태로 통일한다. 카드·표·입력 필드는 제외한다. */
body.is-pc-device:has(.main-content:not(.page-landing)) [class*="btn"],
body.is-pc-device:has(.main-content:not(.page-landing)) [class*="button"] {
    border-radius: 0 !important;
}

/* ── static/css/pc/components/forms.css ── */
/* =============================================
   파일명: components/forms.css
   역할:   공용 폼 요소 (라벨 · 입력창 · 도움말/오류 텍스트)
   사용처: 전역 — base.css 가 @import (모든 PC 페이지)
   ============================================= */

/* [전역] 모든 textarea — 수동 리사이즈 손잡이 제거.
   높이는 base.js 의 자동 높이 조절(내용에 맞춰 늘었다 줄어듦)이 담당한다. */
textarea {
    resize: none;
    overflow-y: hidden;
}

/* [폼 그룹] 라벨+입력 한 묶음 */
.form-group {
    margin-bottom: 20px; /* 다음 필드와의 세로 간격 */
}

/* [폼 라벨] 입력 위 설명 */
.form-group label {
    display: block;                  /* 한 줄 전체 차지 (입력 위에 배치) */
    margin-bottom: 8px;              /* 라벨과 입력 사이 간격 */
    font-weight: 700;                /* 명확한 입력 레이블 */
    color: var(--color-neutral-700); /* 라벨 텍스트색 (변경 → --color-neutral-700) */
    font-size: 15px;                 /* 라벨 글자 크기 */
}

/* [폼 입력] 텍스트/텍스트영역 공통 */
.form-group input, .form-group textarea {
    width: 100%;                              /* 컨테이너 가로 꽉 채움 */
    padding: 12px 14px;                       /* 입력 내부 여백 */
    border: 1px solid var(--color-neutral-300); /* 기본 테두리 (변경 → --color-neutral-300) */
    border-radius: var(--border-radius-md);   /* 모서리 둥글기 */
    font-size: 15px;                          /* 입력 글자 크기 */
    background-color: var(--color-background-primary); /* 입력 배경 */
    color: var(--color-text-primary);
    transition: border-color 0.25s, box-shadow 0.25s; /* 포커스 전환 속도 */
}

/* [폼 입력] 포커스 — 강조 테두리 + 링 */
.form-group input:focus, .form-group textarea:focus {
    outline: none;                       /* 브라우저 기본 아웃라인 제거 */
    border-color: var(--color-accent);   /* 포커스 시 강조 파랑 테두리 */
    box-shadow: var(--ring-accent);      /* 포커스 링 (변경 → --ring-accent) */
}

/* [오류 텍스트] 입력 아래 빨강 안내 */
.error {
    color: var(--color-danger); /* 오류 빨강 (변경 → --color-danger) */
    font-size: 13px;            /* 작은 글자 */
    margin-top: 5px;            /* 입력과의 간격 */
    display: block;             /* 한 줄 차지 */
}

/* [도움말 텍스트] 입력 아래 회색 안내 */
.help-text {
    color: var(--color-text-secondary); /* 보조 회색 텍스트 */
    font-size: 13px;                    /* 작은 글자 */
    margin-top: 5px;                    /* 입력과의 간격 */
    display: block;                     /* 한 줄 차지 */
}

/* ── static/css/pc/components/messages.css ── */
/* =============================================
   파일명: components/messages.css
   역할:   공용 메시지 박스 (성공 / 오류 알림)
   사용처: 전역 — base.css 가 @import (로그인·폼 응답 등)
   ============================================= */

/* [메시지] 박스 공통 */
.message {
    padding: 14px 18px;                    /* 박스 내부 여백 */
    border-radius: var(--border-radius-md); /* 모서리 둥글기 */
    margin-top: 16px;                      /* 위 요소와의 간격 */
    font-weight: 500;                      /* 약간 굵게 */
    font-size: 15px;                       /* 글자 크기 */
}

/* [메시지] 성공 톤 */
.message.success {
    background-color: var(--color-msg-success-bg);     /* 성공 배경 (변경 → --color-msg-success-bg) */
    color: var(--color-msg-success-text);              /* 성공 텍스트색 */
    border-left: 4px solid var(--color-success-line);  /* 좌측 성공 강조선 */
}

/* [메시지] 오류 톤 */
.message.error {
    background-color: var(--color-msg-danger-bg);  /* 오류 배경 (변경 → --color-msg-danger-bg) */
    color: var(--color-msg-danger-text);           /* 오류 텍스트색 */
    border-left: 4px solid var(--color-danger);    /* 좌측 오류 강조선 */
}

/* ── static/css/pc/components/badge.css ── */
/* =============================================
   파일명: components/badge.css
   역할:   상태 배지·태그 (색상별 변형 포함)
   사용처: 전역 — base.css 가 @import (커뮤니티·용병·게시판 등 여러 페이지)
   ============================================= */

/* [배지] 공통 골격 */
.badge {
    font-size: 12px;                       /* 배지 글자 크기 (작게) */
    font-weight: 500;                      /* 약간 굵게 */
    padding: 3px 8px;                      /* 내부 여백 (상하 3 / 좌우 8) */
    border-radius: var(--border-radius-sm); /* 작은 모서리 둥글기 (변경 → --border-radius-sm) */
    white-space: nowrap;                   /* 배지 텍스트 줄바꿈 방지 */
}

/* [배지] 공지 — 위험 톤 (빨강) */
.badge-notice {
    background: var(--color-background-danger); /* 위험 톤 배경 */
    color: var(--color-text-danger);            /* 위험 톤 텍스트 */
}

/* [핀 아이콘] 공지 고정 표시 — badge-notice 와 함께 사용 */
.pin-icon {
    font-size: 14px;                            /* 배지와 균형 맞는 크기 */
    color: var(--color-text-danger);            /* badge-notice 텍스트 색과 통일 */
}

/* [배지] 정보/거래 — 경고 톤 (주황) */
.badge-info {
    background: var(--color-background-warning); /* 경고 톤 배경 */
    color: var(--color-text-warning);            /* 경고 톤 텍스트 */
}

/* [배지] 거래 — 성공 톤 (초록) */
.badge-trade {
    background: var(--color-background-success); /* 성공 톤 배경 */
    color: var(--color-text-success);            /* 성공 톤 텍스트 */
}

/* [배지] 질문 — 정보 톤 (파랑) */
.badge-question {
    background: var(--color-background-info); /* 정보 톤 배경 */
    color: var(--color-text-info);            /* 정보 톤 텍스트 */
}

/* [배지] 자유 — 중성 톤 (회색) */
.badge-free {
    background: var(--color-background-secondary); /* 보조 배경 */
    color: var(--color-text-secondary);            /* 보조 텍스트 */
}

/* [배지] 긴급 모집 — 위험 톤 */
.badge-urgent {
    background: var(--color-background-danger); /* 위험 톤 배경 */
    color: var(--color-text-danger);            /* 위험 톤 텍스트 */
}

/* [배지] 모집 중 — 경고 톤 (주황) */
.badge-recruiting {
    background: var(--color-background-warning); /* 경고 톤 배경 */
    color: var(--color-text-warning);            /* 경고 톤 텍스트 */
}

/* [배지] 모집 중 — 정보 톤 (파랑) */
.badge-recruiting-blue {
    background: var(--color-background-info); /* 정보 톤 배경 */
    color: var(--color-text-info);            /* 정보 톤 텍스트 */
}

/* [배지] 모집 중 — 성공 톤 (초록) */
.badge-recruiting-green {
    background: var(--color-background-success); /* 성공 톤 배경 */
    color: var(--color-text-success);            /* 성공 톤 텍스트 */
}

/* ── static/css/pc/components/card.css ── */
/* =============================================
   파일명: components/card.css
   역할:   공용 카드 컴포넌트 (표면 박스)
   사용처: 전역 — base.css 가 @import (여러 페이지에서 .card 클래스 사용 시)
   비고:   페이지 전용 카드(예: .adm-card, .stat-card)는 각 페이지 CSS에 정의
   ============================================= */

/* [카드] 기본 표면 박스 */
.card {
    background: var(--color-background-primary);       /* 카드 배경 (다크모드 자동 대응) */
    border: 1px solid var(--color-border-tertiary);    /* 카드 테두리 */
    border-radius: var(--border-radius-lg);            /* 큰 모서리 둥글기 */
    padding: 20px 24px;                                /* 카드 내부 여백 */
    box-shadow: none;                                  /* 낮은 깊이 표현 */
}

/* [카드] 클릭 가능한 카드 (hover 강조) */
.card-interactive {
    cursor: pointer;                /* 클릭 가능 표시 */
    transition: border-color 0.2s; /* hover 테두리 전환 속도 */
}

/* [카드] 클릭 가능 hover — 그림자 강조 */
.card-interactive:hover {
    border-color: var(--color-accent); /* hover 시 테두리로 강조 */
}

/* ── static/css/pc/components/table.css ── */
/* =============================================
   파일명: components/table.css
   역할:   공용 테이블 (th·td·행 hover·정렬 화살표)
   사용처: 전역 — base.css 가 @import (여러 페이지에서 .table 클래스 사용 시)
   비고:   페이지 전용 테이블(예: .adm-table)은 각 페이지 CSS에 정의
   ============================================= */

/* [테이블] 기본 구조 */
.table {
    width: 100%;                 /* 컨테이너 가로 꽉 채움 */
    border-collapse: separate;   /* 셀 간 기준선을 선명하게 유지 */
    border-spacing: 0;
    font-size: 14px;             /* 테이블 글자 크기 */
}

/* [테이블] 헤더 셀 */
.table th {
    text-align: left;                              /* 헤더 좌측 정렬 */
    padding: 10px 16px;                            /* 셀 내부 여백 */
    background: var(--color-background-secondary); /* 헤더 배경 (본문과 구분) */
    color: var(--color-text-secondary);            /* 헤더 텍스트 회색 */
    font-size: 12px;                               /* 헤더 글자 작게 */
    font-weight: 600;                              /* 굵게 */
    border-bottom: 1px solid var(--color-border-tertiary); /* 헤더 하단 구분선 */
}

/* [테이블] 데이터 셀 */
.table td {
    padding: 11px 16px;                            /* 셀 내부 여백 */
    border-bottom: 1px solid var(--color-border-tertiary); /* 행 구분선 */
    color: var(--color-text-primary);              /* 데이터 텍스트색 */
}

/* [테이블] 마지막 행 하단 구분선 제거 */
.table tr:last-child td { border-bottom: none; }

/* [테이블] 행 hover */
.table tbody tr:hover td {
    background: var(--color-background-secondary); /* hover 시 행 배경 강조 */
}

/* ── static/css/pc/components/pagination.css ── */
/* =============================================
   파일명: components/pagination.css
   역할:   공용 페이지네이션 컨트롤
   사용처: 전역 — base.css 가 @import (목록 페이지 하단)
   비고:   페이지 전용 페이지네이션(예: .adm-pagination)은 각 페이지 CSS에 정의
   ============================================= */

/* [페이지네이션] 전체 컨테이너 */
.pagination {
    display: flex;               /* 버튼들을 가로로 배치 */
    align-items: center;         /* 버튼 높이 세로 중앙 정렬 */
    justify-content: center;     /* 가운데 정렬 */
    gap: 4px;                    /* 버튼 간 간격 */
    list-style: none;            /* li 점 제거 */
    padding: 0;                  /* 기본 padding 제거 */
    margin: 24px 0 0;            /* 목록과의 상단 여백 */
}

/* [페이지네이션] 개별 버튼 */
.pagination__btn {
    min-width: 36px;                              /* 숫자 1~2자리 동일 너비 */
    height: 36px;                                 /* 버튼 고정 높이 */
    padding: 0 8px;                               /* 좌우 내부 여백 */
    border: 1px solid var(--color-border-tertiary); /* 버튼 테두리 */
    border-radius: var(--border-radius-md);       /* 모서리 둥글기 */
    background-color: var(--color-background-primary); /* 기본 배경 */
    color: var(--color-text-primary);             /* 텍스트색 */
    font-size: 13px;                              /* 글자 크기 */
    text-decoration: none;                        /* 링크 밑줄 제거 */
    display: inline-flex;                         /* 숫자 가운데 정렬 */
    align-items: center;                          /* 세로 중앙 */
    justify-content: center;                      /* 가로 중앙 */
    cursor: pointer;                              /* 클릭 가능 표시 */
    transition: border-color 0.15s, color 0.15s;  /* hover 전환 속도 */
}

/* [페이지네이션] hover */
.pagination__btn:hover {
    border-color: var(--color-text-info); /* hover 시 파랑 테두리 */
    color: var(--color-text-info);        /* hover 시 파랑 텍스트 */
}

/* [페이지네이션] 현재 페이지 — 활성 */
.pagination__btn--active {
    background-color: var(--color-text-info);   /* 강조 파랑 배경 */
    color: var(--color-white);                  /* 흰 텍스트 */
    border-color: var(--color-text-info);       /* 테두리도 파랑 */
    font-weight: 600;                           /* 굵게 (현재 페이지 강조) */
    pointer-events: none;                       /* 현재 페이지 재클릭 방지 */
}

/* [페이지네이션] 비활성 (이전/다음 없을 때) */
.pagination__btn--disabled {
    opacity: 0.4;          /* 흐리게 */
    pointer-events: none;  /* 클릭 방지 */
}

/* ── static/css/pc/components/modal.css ── */
/* =============================================
   파일명: components/modal.css
   역할:   모달 오버레이 · 박스 구조 · 애니메이션
   사용처: 전역 — base.css 가 @import (auth 약관 모달, 유저 편집 모달 등)
   비고:   모달 내 페이지 전용 버튼(예: modal-agree-btn)은 각 페이지 CSS에 정의
   ============================================= */

/* [모달] 전체 화면 반투명 오버레이 */
.modal-overlay {
    position: fixed;                         /* 스크롤에 무관하게 고정 */
    inset: 0;                                /* top/right/bottom/left 모두 0 (전체 화면) */
    background: rgba(0, 0, 0, 0.55);         /* 반투명 검정 배경 (어두운 딤 처리) */
    display: flex;                           /* 모달 박스를 가운데 정렬 */
    align-items: center;                     /* 세로 중앙 */
    justify-content: center;                 /* 가로 중앙 */
    z-index: 1000;                           /* 헤더(z-index 없음)·드롭다운 위에 표시 */
    padding: 20px;                           /* 작은 화면에서 박스가 가장자리에 안 붙도록 */
}

/* [모달] 콘텐츠 박스 */
.modal-box {
    background: var(--color-background-primary);      /* 박스 배경 (다크모드 자동 대응) */
    border: 0.5px solid var(--color-border-tertiary); /* 얇은 테두리 */
    border-radius: var(--border-radius-lg);           /* 큰 모서리 둥글기 */
    width: 100%;                                      /* 오버레이 패딩 내에서 가로 꽉 */
    max-width: 560px;                                 /* 최대 폭 제한 (가독성) */
    max-height: 78vh;                                 /* 화면 높이의 78% 초과 시 스크롤 */
    display: flex;                                    /* head/body/foot 세로 배치 */
    flex-direction: column;                           /* 자식 세로 스택 */
    box-shadow: var(--shadow-lg);                     /* 오버레이 위에 떠 있는 느낌 */
}

/* [모달] 상단 헤더 (제목 + 닫기 버튼) */
.modal-head {
    display: flex;                                    /* 제목과 닫기를 양끝으로 */
    align-items: center;                              /* 세로 중앙 정렬 */
    justify-content: space-between;                   /* 양끝 배치 */
    padding: 18px 22px 14px;                          /* 헤더 내부 여백 */
    border-bottom: 1px solid var(--color-border-tertiary); /* 헤더 하단 구분선 */
    flex-shrink: 0;                                   /* 스크롤 시 헤더 고정 */
}

/* [모달] 제목 */
.modal-title {
    font-size: 15px;                      /* 제목 글자 크기 */
    font-weight: 700;                     /* 굵게 */
    color: var(--color-text-primary);     /* 제목 텍스트색 */
    margin: 0;                            /* 기본 여백 제거 */
}

/* [모달] 닫기(X) 버튼 */
.modal-close-btn {
    background: none;                       /* 배경 없음 */
    border: none;                           /* 테두리 없음 */
    cursor: pointer;                        /* 클릭 가능 표시 */
    color: var(--color-text-secondary);     /* 아이콘 기본 회색 */
    font-size: 20px;                        /* 아이콘 크기 */
    padding: 2px;                           /* 최소 클릭 영역 */
    display: flex;                          /* 아이콘 수직 정렬 */
    align-items: center;                    /* 세로 중앙 */
    transition: color 0.15s;               /* hover 색 전환 */
}

/* [모달] 닫기 버튼 hover */
.modal-close-btn:hover { color: var(--color-text-primary); } /* hover 시 진한색 */

/* [모달] 본문 영역 (스크롤 가능) */
.modal-body {
    padding: 18px 22px;           /* 본문 내부 여백 */
    overflow-y: auto;             /* 내용이 길면 세로 스크롤 */
    flex: 1;                      /* head/foot 제외한 남은 높이를 모두 차지 */
    font-size: 13px;              /* 본문 글자 크기 */
    line-height: 1.9;             /* 본문 줄 간격 (읽기 편하게) */
    color: var(--color-text-secondary); /* 보조 텍스트색 */
}

/* [모달] 본문 소제목 */
.modal-body h4 {
    font-size: 13px;                  /* 소제목 글자 크기 */
    font-weight: 700;                 /* 굵게 */
    color: var(--color-text-primary); /* 강조 텍스트색 */
    margin: 16px 0 6px;              /* 위 여백 / 아래 여백 */
}

/* [모달] 첫 번째 소제목은 위 여백 없음 */
.modal-body h4:first-child { margin-top: 0; }

/* [모달] 하단 푸터 (액션 버튼 영역) */
.modal-foot {
    padding: 14px 22px 18px;                          /* 푸터 내부 여백 */
    flex-shrink: 0;                                   /* 스크롤 시 푸터 고정 */
    border-top: 1px solid var(--color-border-tertiary); /* 본문과 구분선 */
}

/* 경기 라인업 — 팀·리그·기록 화면 위에서 여는 전용 작업 모달 */
.lineup-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(3, 18, 13, .68);
}
.lineup-modal-window {
    /* 팀 투표 모달(.modal-box)과 동일한 폭으로 유지한다. */
    width: min(560px, 100%);
    height: min(780px, calc(100vh - 56px));
    overflow: hidden;
    border: 1px solid var(--color-border-tertiary);
    border-radius: 0;
    background: var(--color-background-primary);
    box-shadow: var(--shadow-lg);
}
.lineup-modal-frame { display:block; width:100%; height:100%; border:0; background:var(--color-background-primary); }
body.lineup-modal-open { overflow:hidden; }
@media (max-width:620px) {
    .lineup-modal-overlay { padding:0; }
    .lineup-modal-window { width:100%; height:100%; }
}

/* ── static/css/pc/components/tooltip.css ── */
/* =============================================
   파일명: components/tooltip.css
   역할:   툴팁 (hover 시 보조 설명 말풍선)
   사용처: 전역 — base.css 가 @import (아이콘·버튼 등에 title 대체 툴팁 필요 시)
   ============================================= */

/* [툴팁] 부모 요소 — 위치 기준 */
.tooltip-wrap {
    position: relative;   /* 툴팁 말풍선의 absolute 기준점 */
    display: inline-flex; /* 자식과 함께 inline 흐름 유지 */
}

/* [툴팁] 말풍선 본체 */
.tooltip {
    position: absolute;                          /* 부모(tooltip-wrap) 기준 배치 */
    bottom: calc(100% + 6px);                   /* 부모 위에 6px 간격으로 표시 */
    left: 50%;                                   /* 가로 가운데 정렬 시작점 */
    transform: translateX(-50%);                 /* 가로 정확히 가운데 정렬 */
    background: var(--color-text-primary);       /* 다크 배경 (텍스트 대비) */
    color: var(--color-background-primary);      /* 배경 대비 텍스트색 */
    font-size: 12px;                             /* 작은 글자 */
    font-weight: 500;                            /* 약간 굵게 */
    padding: 5px 10px;                           /* 말풍선 내부 여백 */
    border-radius: var(--border-radius-sm);      /* 작은 모서리 둥글기 */
    white-space: nowrap;                         /* 텍스트 줄바꿈 방지 */
    pointer-events: none;                        /* 툴팁 자체는 마우스 이벤트 무시 */
    opacity: 0;                                  /* 기본 숨김 */
    transition: opacity 0.15s;                   /* hover 시 페이드인 */
    z-index: 100;                                /* 일반 콘텐츠 위에 표시 */
}

/* [툴팁] hover 시 표시 */
.tooltip-wrap:hover .tooltip {
    opacity: 1; /* hover 시 페이드인 */
}