*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans KR', Apple SD Gothic Neo, sans-serif;
    font-size: 14px;
    background: #f4f5f7;
    color: #333;
}

/* ── 색 ─────────────────────────────────────────────────────────
 * 헬프히어로는 **초록**이다(2026-09-09). gmas 는 파랑이다.
 * 두 서비스가 화면만 보고 구별돼야 한다 — 예전엔 두 관리자 화면이 한 글자도 다르지 않았다.
 *
 * 값은 새로 고르지 않고 **캠페이너 포털(www/layout.php)이 쓰는 두 색을 그대로** 가져왔다.
 * 새로 고르면 같은 서비스 안에 초록이 두 벌이 된다.
 *   #003426  짙은 단 — 헤더·제목
 *   #157050  밝은 단 — 링크·기본 버튼·강조
 *
 * ⚠ **의미를 나르는 색은 안 건드린다.** badge-blue·grade-h1·status-paid 의 파랑은
 *   브랜드가 아니라 **갈래 표시**다(뱃지 6색·직급 7색·정산 3상태). 초록으로 바꾸면
 *   이미 초록인 badge-green·grade-h2·status-confirmed 와 겹쳐 뜻을 잃는다.
 *   grade-h6 의 남색도 같은 이유로 그대로 둔다 — 직급 눈금의 한 칸이다.
 * ⚠ .btn-success 가 이미 초록(#16a34a)이다. 기본 버튼과 나란히 놓이므로 헷갈리면 안 된다 —
 *   #157050 은 더 어둡고 청록 쪽이라 색 거리 ΔE 37 로 떨어진다(20 이상이면 뚜렷하다).
 */
a { color: #157050; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 헤더 / 네비 ── */
.site-header {
    background: #003426;
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 52px;
    gap: 24px;
}
.site-header .logo {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
/* 메뉴는 줄바꿈하지 않고 가로로 스크롤한다.
   min-width:0 이 없으면 flex 아이템이 내용만큼 버텨서 헤더가 화면 밖으로 밀려나고,
   nowrap 이 없으면 좁은 화면에서 '모집인' 같은 글자가 세로로 접힌다. */
.site-header nav {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 구 Edge */
}
.site-header nav::-webkit-scrollbar { display: none; }   /* 52px 헤더에 스크롤바가 끼면 메뉴가 잘린다 */
.site-header nav a {
    color: #c9d8f0;
    padding: 0 14px;
    height: 52px;
    display: flex;
    align-items: center;
    font-size: 13px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}
.site-header nav a:hover, .site-header nav a.active {
    color: #fff;
    border-bottom-color: #5ccfa0;
    text-decoration: none;
}
/* 로고·이름·로그아웃은 스크롤 영역 밖이라 절대 줄어들면 안 된다 —
   줄어들면 nav 대신 이쪽이 찌그러져 정작 스크롤이 안 생긴다. */
.site-header .logo,
.site-header .who,
.site-header .logout { flex: 0 0 auto; white-space: nowrap; }
/* 이름·로그아웃은 nav 안에 있어 메뉴와 함께 가로 스크롤된다.
   메뉴 높이(52px)에 맞춰 세로 가운데로 맞춰 준다. */
.site-header .who {
    color: #cbd5e1;
    font-size: 13px;
    display: flex;
    align-items: center;
    padding: 0 10px 0 16px;
}
.site-header .logout {
    margin-left: auto;   /* 남는 공간이 있으면 오른쪽 끝, 넘치면 메뉴 뒤에 그대로 이어진다 */
    color: #94a3b8;
    font-size: 12px;
    display: flex;
    align-items: center;
    padding-right: 4px;
}

/* ── 콘텐츠 ── */
.content-area { padding: 24px 20px; max-width: 1400px; margin: 0 auto; }

/* ── 페이지 타이틀 ── */
.page-title {
    font-size: 20px;
    font-weight: 700;
    color: #003426;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-title .sub { font-size: 14px; font-weight: 400; color: #64748b; }

/* ── 플래시 ── */
.flash {
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.flash-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

/* ── 카드 ── */
.card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    margin-bottom: 20px;
}
.card-title {
    font-size: 15px;
    font-weight: 600;
    color: #003426;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* ── 버튼 ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; opacity: .9; }
.btn-primary   { background: #157050; color: #fff; border-color: #157050; }
.btn-secondary { background: #64748b; color: #fff; border-color: #64748b; }
.btn-success   { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-danger    { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-warning   { background: #d97706; color: #fff; border-color: #d97706; }
.btn-outline   { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 2px 7px; font-size: 11px; }

/* ── 테이블 ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
    background: #f8fafc;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    font-weight: 600;
    color: #475569;
}
td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
tr:hover td { background: #f8fafc; }
.summary-row td { background: #eef7f2; font-weight: 600; }

/* ── 폼 ── */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 13px;
    color: #111;
}
.form-control:focus { outline: none; border-color: #157050; box-shadow: 0 0 0 2px #b7e0cd; }
select.form-control { cursor: pointer; }
.form-row { display: flex; gap: 14px; }
.form-row .form-group { flex: 1; }
/* 월 좌우 이동 — 화살표는 줄어들지 않고 가운데 입력칸만 늘어난다 */
.month-nav { display: flex; gap: 4px; align-items: stretch; }
/* stretch 로 입력칸과 같은 높이를 만든다 — 나란히 붙여 둔 만큼 한 덩어리로 보여야 한다 */
.month-nav .btn {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
}
.month-nav .form-control { flex: 1 1 auto; min-width: 0; }
/* 열이 많은 표는 셀 안에서 글자가 접히면 행 높이가 들쭉날쭉해져 훑기 어렵다.
   .table-wrap 이 가로로 스크롤하므로 잘리지 않는다.
   ⚠ 접혀야 하는 행(아래로 펼쳐지는 상세처럼 긴 문장이 들어가는 자리)은 tr.wrap 으로 빼 준다 —
     거기까지 nowrap 이면 주소·사유가 한 줄로 뻗어 읽을 수 없게 된다. */
table.nowrap th,
table.nowrap td { white-space: nowrap; }
table.nowrap tr.wrap > td { white-space: normal; }

/* 조회·초기화는 한 덩어리 — nowrap 이 없으면 좁아질 때 둘이 갈라져 두 줄이 된다 */
.form-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; flex-wrap: nowrap; }
.form-actions .btn { flex: 0 0 auto; }
.form-hint { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* ── 배지 ── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-gray   { background: #f1f5f9; color: #475569; }
.badge-orange { background: #ffedd5; color: #c2410c; }
.badge-purple { background: #f3e8ff; color: #7e22ce; }

/* ── 직급 뱃지 ── */
.grade { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 700; font-family: monospace; }
.grade-h0 { background: #f1f5f9; color: #64748b; }
.grade-h1 { background: #dbeafe; color: #1e40af; }
.grade-h2 { background: #d1fae5; color: #065f46; }
.grade-h3 { background: #fef3c7; color: #92400e; }
.grade-h4 { background: #ffe4e6; color: #9f1239; }
.grade-h5 { background: #ede9fe; color: #5b21b6; }
.grade-h6 { background: #1e3a5f; color: #fff; }

/* ── 정산 상태 ── */
.status-draft     { background: #fef9c3; color: #713f12; }
.status-confirmed { background: #dcfce7; color: #14532d; }
.status-paid      { background: #dbeafe; color: #1e40af; }

/* ── 수치 강조 ── */
.highlight-value { font-weight: 700; color: #003426; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: #94a3b8; font-size: 12px; }
.text-danger { color: #dc2626; }
.text-success { color: #16a34a; }
.text-warning { color: #d97706; }

/* ── 섹션 타이틀 ── */
.section-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin: 20px 0 10px;
    padding-left: 10px;
    border-left: 4px solid #157050;
}

/* ── 정산 상세 박스 ── */
.payout-block {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 10px;
}
.payout-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.payout-row.total {
    border-top: 2px solid #cbd5e1;
    margin-top: 8px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #003426;
}

/* ── 강등 경고 ── */
.demotion-badge {
    background: #fee2e2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ── 검색 바 ── */
.search-bar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* ── 모달 ── */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }

/* ── 인라인 toggle ── */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.toggle input[type=checkbox] { width: 36px; height: 20px; cursor: pointer; }

/* ── sticky 테이블 헤더 ── */
.sticky-header th { position: sticky; top: 0; z-index: 1; }

/* ── 프린트 ── */
@media print {
    .noprint { display: none !important; }
    .site-header, .site-footer { display: none !important; }
    body { background: #fff; }
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    .content-area { padding: 12px; }
    /* ⚠ 세로로 쌓을 때 align-items 의 의미가 뒤집힌다.
       여러 페이지가 인라인으로 align-items:flex-end 를 준다(가로 배치에서 조회 버튼을
       입력칸 밑선에 맞추려는 것). 세로로 바뀌면 그게 '오른쪽 정렬'이 되어 입력칸이
       절반 폭으로 오른쪽에 붙고 왼쪽에 빈 공간이 생긴다. 여기서 되돌린다.
       인라인 스타일이라 !important 가 아니면 눌리지 않는다. */
    .form-row { flex-direction: column; gap: 10px; align-items: stretch !important; }
    .form-row .form-group { width: 100%; }
    /* 입력칸도 인라인 width:150px 로 고정돼 있어 같은 이유로 !important 가 필요하다 */
    .form-row .form-control { width: 100% !important; }
    /* 버튼까지 늘리면 '초기화'가 '조회'와 같은 무게로 보인다 — 제 크기로 왼쪽에 둔다.
       > 로 직계만 잡는다. 자손까지 잡으면 월 이동 화살표(.month-nav 안)가 위로 붙는다. */
    .form-row > .btn,
    .form-row > .form-actions { align-self: flex-start; }
    /* 좌우 여백·간격을 줄여 스크롤 없이 보이는 메뉴 수를 늘린다 */
    .site-header { padding: 0 10px; gap: 10px; }
    .site-header .logo { font-size: 14px; }
    .site-header nav a { padding: 0 10px; font-size: 12px; }
    /* 이름·로그아웃도 nav 안에서 같이 스크롤되므로 따로 숨기거나 붙일 필요가 없다.
       내용이 넘치면 margin-left:auto 는 저절로 0 이 되어 메뉴 뒤에 이어 붙는다. */
    .site-header .who { font-size: 12px; padding: 0 8px 0 12px; }
}

/* ── 업로드 ── */
.upload-zone {
    border: 2px dashed #93c5fd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    background: #f0f7ff;
    cursor: pointer;
}
.upload-zone:hover { background: #e0f0ff; }

/* ── 그리드 ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── 페이지네이션 ── */
.pagination { display: flex; gap: 4px; margin-top: 16px; }
.pagination a, .pagination span {
    padding: 5px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
}
.pagination a:hover { background: #f1f5f9; text-decoration: none; }
.pagination .active { background: #157050; color: #fff; border-color: #157050; }