/* ============================================================
   RENEWAL — 2026 개편 디자인 토큰 + 공용 컴포넌트
   ------------------------------------------------------------
   · 개편된 운영 페이지에서 main.css 뒤에 추가 로드한다.
     {% block head %}<link rel="stylesheet" href="{% static_v 'css/renewal.css' %}">{% endblock %}
   · 토큰은 main.css 와 같은 이름을 리뉴얼 값으로 재선언 → 로드 순서로 override.
     기존 페이지는 영향 없음. 개편 완료 시 이 값들을 main.css 로 병합하고 파일 삭제.
   · 컴포넌트 클래스는 rn- 접두어. 규칙 문서: DESIGN-RENEWAL.md
   · 기준 구현: 사용자 관리 (피그마 1EpA4ejBMNfVmAB2kQwsCC / 1168:5315)
   ============================================================ */

/* ── ① 토큰 재정의 (main.css 와 같은 이름, 리뉴얼 값) ── */
:root {
  --bg-1: #000000;        /* 페이지 배경 = 순검정 (기존 #0A0A0B) */
  --bg-2: #121215;        /* 콘텐츠 패널 면 (기존 #111114) */
  --surface: #212124;     /* 카드·표 헤더 면 (기존 #1A1A1F) */
  --surface-hover: #2A2A2E;

  /* mute 는 투명도(rgba) 대신 단색 — 겹침·배경에 따라 밝기가 변하지 않게 */
  --text-2: #B8B8B8;      /* 본문급 mute (기존 흰색 72%) */
  --text-3: #7A7A7A;      /* 보조급 mute (기존 흰색 48%) */
  --text-4: #717173;      /* 라벨급 mute — 필드 라벨(기안자·유형), 카드 날짜, 비선택 탭 등 */

  /* 권한(역할) 상태색 */
  /* 권한(역할)색 폐지 — 전부 흰색 (2026.08.11 확정, 구 Member #72A1FF / Admin·Super #FF81D3) */
  --role-member: #FFFFFF;
  --role-admin: #FFFFFF;
  --role-super: #FFFFFF;

  /* 결재 상태색 (피그마 결재 관리) */
  --state-done: #9CFF76;
  --state-rejected: #FF706B;

  /* 필드 라벨 공통 스케일 (2026.08 확정, 12 → 12.5 조정 2026.08.11) — 값(13~13.5px)보다 한 단계 아래.
     사용처: 결재 카드(.ap-card__date·.lbl)·결재 모달(field-stack__label)·신청 폼 라벨·프로젝트 상세(.pd-f__k) */
  --label-fs: 12.5px;
  --label-fw: 600;
}

/* ── ② 리뉴얼 레이아웃 — 콘텐츠 영역 가변 폭 ── */
/* 최대폭(1280 중앙) 해제: 패널이 GNB 우측에 붙어 화면 끝(-16px)까지 가변 */
.content { max-width: none; margin: 0; padding-bottom: 16px; }

/* ── ③ 공용 컴포넌트 ── */

/* 콘텐츠 패널 — 페이지 본문 전체를 감싸는 면. 가변 폭.
   세로: 콘텐츠가 짧아도 뷰포트 하단 -16px 까지 채우고, 길면 늘어남 */
.rn-panel {
  /* 리뉴얼 기본 폰트 = Pretendard (영문·숫자 포함). Strichpunkt 는 명시 지정된 곳만 (KPI 숫자 등) */
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 32px 54px 32px 31px;  /* 우측만 넓음 (피그마 실측) */
  min-height: calc(100vh - var(--header-h) - var(--topbar-gap) * 2 - 16px);
  min-height: calc(100dvh - var(--header-h) - var(--topbar-gap) * 2 - 16px);
}
/* 패널 내부 상한 — 콘텐츠는 1130px 까지만 (좌측 정렬). 패널 면만 늘어남 */
.rn-inner { max-width: 1130px; }

/* 페이지 제목 — 20px SemiBold. 제목 → 7px → 우측 액션 → 9px → 본문 */
.rn-h1 { margin: 0 0 7px; font-size: 20px; font-weight: 600; line-height: .95; letter-spacing: -.03em; color: #fff; }
.rn-head-actions { display: flex; justify-content: flex-end; margin-bottom: 9px; }

/* 흰색 액션 버튼 (링크·버튼 겸용) — 높이 30 고정 + 좌우 hug, 라운드 6 */
.rn-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer;  /* button 태그 사용 시 UA 기본 입체 테두리 제거 */
  background: #fff; color: #000;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.03em;
  border-radius: var(--radius-xs); height: 30px; padding: 0 13px;
  text-decoration: none; transition: opacity .15s;
}
.rn-btn:hover { opacity: .88; }
/* [hidden] 가드 (§5 — 다섯 번째 사례) — display 를 지정한 클래스는 브라우저 기본 [hidden] 을 무력화한다.
   스테이션 관리의 '분류 추가' 버튼이 노출 관리 탭에서도 보이던 버그 (2026.08.20) */
.rn-btn[hidden] { display: none; }

/* KPI 스탯 카드 — 4열 그리드(간격 10), 라벨 13.5 / 숫자 22 Strichpunkt.
   높이 88 고정 + 라벨 상단·숫자 하단 고정 (구 hug 82.7 + 숫자 25 → 96 → 88 확정 2026.08.11) */
.rn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
.rn-stat { background: var(--surface); border-radius: var(--radius-sm); padding: 18px 20px;
  height: 88px; display: flex; flex-direction: column; justify-content: space-between; }
.rn-stat .k { font-size: 13.5px; line-height: .95; letter-spacing: -.03em; color: rgba(255,255,255,.7); }
.rn-stat .v {
  /* 'Strichpunkt Sans', inherit 는 무효 선언(inherit 는 목록에 못 씀) → 토큰으로 교체 (숫자=Strichpunkt, 한글=Pretendard) */
  font-family: var(--font-sans);
  font-size: 22px; line-height: .95; font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: #fff;
}

/* 라벨 옆 도움말(ⓘ) — 호버/포커스 시 기준 설명 툴팁. 커서는 기본 유지 */
.rn-tip { position: relative; display: inline-flex; margin-left: 4px; vertical-align: -3.5px; color: var(--text-3); outline: 0; }
/* KPI 라벨 안 ⓘ — 아이콘 16 이 라벨 줄(13.5×.95=12.8)을 3.2px 부풀리지 않게 상쇄 (활성 사용자 카드만 세로가 늘어나던 문제, 2026.08.11) */
.rn-stat .k .rn-tip { margin-top: -1.6px; margin-bottom: -1.6px; }
.rn-tip:hover, .rn-tip:focus { color: #BCBCBC; }
.rn-tip__box {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; background: var(--surface); color: #FAFAFA;  /* 떠 있는 면 = --surface 로 통일 (rn-menu 와 동일, 2026.08) */
  font-size: 12px; font-weight: 400; letter-spacing: -.02em; padding: 7px 11px; border-radius: 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 10;
}
.rn-tip:hover .rn-tip__box, .rn-tip:focus .rn-tip__box { opacity: 1; }

/* 데이터 테이블 — 면 없이 테두리 래퍼(r11, 패딩 14), 알약형 헤더, 13px 본문 */
.rn-tblwrap { border: 1px solid rgba(199,199,199,.1); border-radius: var(--radius-md); padding: 14px; overflow-x: auto; }
/* 빈 상태 스트로크 박스 — 표 래퍼와 같은 테두리·라운드, 문구 중앙. 세로 38 = 래퍼 14 + 표 빈 셀 24 (2026.09.02) */
.rn-empty-box { border: 1px solid rgba(199,199,199,.1); border-radius: var(--radius-md); padding: 38px 14px; text-align: center; font-size: 13px; letter-spacing: -.03em; line-height: 1.6; color: var(--text-3); }   /* 두 줄 문구 대응 줄간격 */
.rn-empty-box__t { color: var(--text-2); font-size: 13.5px; }   /* 첫 줄(핵심 문구) 한 톤 밝게 + 13.5 (2026.09.02) */
.rn-table { width: 100%; border-collapse: collapse; min-width: 920px; }
.rn-table thead th {
  background: var(--surface);
  font-size: 13px; font-weight: 500; letter-spacing: -.03em; color: var(--text-3);
  text-align: left; height: 36.5px; padding: 0 10px; vertical-align: middle; white-space: nowrap;  /* 좌우 12 → 10 (2026.08) */
  overflow: hidden; text-overflow: ellipsis; /* 헤더도 말줄임 표준 — 가변 컬럼이 눌려도 옆 헤더와 겹치지 않게 (최후 안전망) */
}
.rn-table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.rn-table thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rn-table thead th svg { display: inline-block; vertical-align: -3px; margin-left: 1px; color: var(--text-3); } /* 전역 svg=block 리셋 방어 + 아이콘 mute 단색. -3px = 14px 아이콘을 13px 텍스트에 광학 정렬 */
.rn-table tbody td {
  padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06);  /* 좌우 12 → 10 (2026.08, 헤더와 공통) */
  overflow: hidden; text-overflow: ellipsis; /* 모든 셀 말줄임 표준 — table-layout:fixed 전제. flex 셀은 내부 스팬에서 자체 처리(.rn-who .nm) */
  font-size: 13px; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; font-weight: 500; /* 본문 = Pretendard Medium (숫자 컬럼은 페이지에서 재정의) */
}
/* placeholder(로딩·빈 상태) 행이 first/last-child 를 가로채므로 JS 가 실제 첫/마지막 데이터 행에 클래스 부여 */
.rn-table tbody tr.is-first td { padding-top: 16px; }   /* 헤더-첫 행 간격 16 (피그마 실측) */
.rn-table tbody tr.is-last td { border-bottom: 0; }     /* 마지막 데이터 행으로 스트로크 없이 종료 */
.rn-table tbody tr.rn-ph td { border-bottom: 0; }        /* 로딩·빈 상태 placeholder 행 — 데이터 행 밑줄 없음 */
/* 표 로딩 스켈레톤 (2026.09.03 규격) — 데이터 tbody 뒤 tbody.rn-sk. 블록·토큰은 main.css .sk 공용.
   블록 12 + 위아래 3.75 = 19.5 = 글자 line box(13px × 1.5) → 데이터 행과 높이 동일, 콘텐츠 도착 시 표가 움직이지 않음 */
.rn-table tbody.rn-sk { --sk-face: var(--sk-face-table); --sk-shine: var(--sk-shine-table); }   /* 표는 카드보다 어두운 면 + 약한 쉬머 3% (토큰은 main.css) */
/* 블록은 inline-block — 셀의 text-align(좌/가운데)을 그대로 따라가 숫자 열(가운데 정렬)도 자동으로 가운데.
   줄상자(19.5)는 글자 strut 이 만들어 데이터 행과 높이가 같고, 블록은 그 안에서 middle 정렬 */
.rn-table tbody.rn-sk td > .sk { display: inline-block; vertical-align: middle; height: 12px; margin: 0; }
.rn-table tbody.rn-sk td > .sk.sk-tall { margin: 7px 0; }                        /* 26px 컨트롤 자리(정렬 그립) — 12 + 14 */
.rn-table tbody.rn-sk tr:last-child td { border-bottom: 0; }                     /* 데이터 행 is-last 와 동일하게 마지막 밑줄 없음 */
/* 데이터 행 등장은 즉시 교체 — 페이드 인 없음 (180ms 페이드 제거, 사용자 지시 2026.09.03) */
/* 행 호버는 클릭 가능한 행(is-click)에만 — 클릭 안 되는 행이 반응하면 거짓 어포던스 */
.rn-table tbody tr.is-click { transition: background .12s; }
.rn-table tbody tr.is-click:hover { background: rgba(255,255,255,.02); }
.rn-table tbody td.rn-dim, .rn-dim { color: var(--text-3); } /* td 공통색(#fff)보다 특이도 높여 mute 적용 */

/* 정렬 가능 헤더 — 클릭 토글, 오름차순이면 화살표 뒤집힘. 정렬·검색 시 목록은 처음부터 다시 */
.rn-sortable { cursor: pointer; transition: color .15s; }
.rn-sortable:hover { color: rgba(255,255,255,.7); }
.rn-sortable svg { transition: transform .15s; }
.rn-sortable.is-asc svg { transform: rotate(180deg); }

/* 이름 셀 — 이니셜 아바타(20px, 이니셜 10px mute) + 이름 */
.rn-who { display: flex; align-items: center; gap: 6px; font-weight: 500; }
/* 이름 텍스트 — flex 안이라 td 의 말줄임이 안 먹으므로 자체적으로 말줄임 (아바타는 flex:none 유지) */
.rn-who .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-av {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-3);
  background: linear-gradient(135deg, #3E3E46, #26262C);
}

/* 권한 셀 = 변경 진입점. 쉐브론은 권한 텍스트 색을 그대로 상속.
   관리자(ADMIN/SUPER)가 아니면 테이블에 is-manager 가 없어 쉐브론·호버 비활성 */
.rn-role {
  display: inline-flex; align-items: center; gap: 4px;
  /* 셀 전체 폭 사용 — 텍스트 좌측 (쉐브론 폐지 2026.08.11 — 어포던스는 호버 알약만, 구 calc(100%+14)) */
  width: 100%; justify-content: space-between;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -.03em;
  background: none; border: 0; cursor: pointer; border-radius: var(--radius-xs);
  padding: 3px 7px; margin: -3px -7px; transition: background .12s;
}
.rn-role:hover { background: rgba(255,255,255,.05); }
.rn-role .c { flex: none; color: var(--text-3); }  /* 쉐브론 = 다른 표 행 끝 쉐브론과 동일한 mute (권한색 상속 안 함, 2026.08) */
.rn-role--member { color: var(--role-member); }
.rn-role--admin { color: var(--role-admin); }
.rn-role--super { color: var(--role-super); }
.rn-table:not(.is-manager) .rn-role { cursor: default; }
.rn-table:not(.is-manager) .rn-role:hover { background: none; }
.rn-table:not(.is-manager) .rn-role .c { display: none; }
/* 변경 불가 권한(SUPER — data-grade-edit 없이 렌더): 관리자 모드여도 호버·커서 반응 없음 */
.rn-role:not([data-grade-edit]) { cursor: default; }
.rn-role:not([data-grade-edit]):hover { background: none; }

/* (구 .rn-more 더보기 버튼 — 전 페이지가 페이지네이션(rn-pager)으로 전환되며 삭제, 2026.08.
   되살릴 일이 생기면 이 커밋 이전 renewal.css 에서 가져올 것) */

/* 섹션 제목 — 패널 안 h2 (제목 아래 44 간격, 본문과 12) */
.rn-sec-title { margin: 44px 0 12px; font-size: 16px; font-weight: 500; line-height: .95; letter-spacing: -.03em; color: #fff; }

/* 필터 탭 (전체/완료/반려 등) — 13px SemiBold, 선택 = 면 채움. 필터 변경 시 목록은 처음부터 다시 */
.rn-filter { display: flex; gap: 2px; margin: 19px 0 10px; }
/* display 를 지정한 요소는 [hidden] 가드를 반드시 동반한다 — author 의 display:flex 가
   UA 기본 [hidden]{display:none} 을 이겨서 숨김이 안 먹는다 (프로젝트 상세 서브탭이
   스테이션·히스토리 탭에서도 보이던 버그 2026.08. 알림 팝업에서 두 번 겪은 것과 같은 함정) */
.rn-filter[hidden] { display: none; }
.rn-filter__btn {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -.03em; line-height: .95; color: var(--text-4);
  background: none; border: 0; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer;
  transition: color .15s, background .15s;
}
.rn-filter__btn:hover { color: var(--text-2); }
.rn-filter__btn.is-on { background: var(--surface); color: #fff; }

/* 표 안 상태 텍스트 (결재 등) */
/* td.접두어 필수 — .rn-table tbody td 의 color:#fff 보다 구체도가 높아야 함 (rn-dim 과 같은 함정) */
.rn-table tbody td.rn-state--done { color: var(--state-done); }
.rn-table tbody td.rn-state--rejected { color: var(--state-rejected); }

/* 클릭으로 상세를 여는 행 — 우측 끝 쉐브론과 세트 */
.rn-table tbody tr.is-click { cursor: pointer; }

/* 페이지네이션 — 표 하단 우측. 번호 + 이전/다음. 선택 = 면 채움. 정렬·필터 시 1페이지로 리셋 */
.rn-pager { display: flex; justify-content: flex-end; align-items: center; gap: 2px; padding: 16px 0 4px;
  position: sticky; left: 0; }  /* 래퍼가 가로 스크롤 컨테이너라 표를 따라 밀리지 않게 보이는 영역에 고정 */
.rn-pager[hidden] { display: none; }
.rn-pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-xs);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-size: 13px; font-weight: 500; letter-spacing: -.03em; color: var(--text-3);
  background: none; border: 0; cursor: pointer; transition: color .15s, background .15s;
  font-variant-numeric: tabular-nums;
}
.rn-pager__btn:first-child, .rn-pager__btn:last-child { font-size: 12px; }  /* PREV/NEXT 텍스트 */
.rn-pager__btn:hover { color: #fff; }
.rn-pager__btn.is-on { background: var(--surface); color: #fff; }
.rn-pager__btn:disabled { opacity: .35; cursor: default; }
.rn-pager__btn:disabled:hover { color: var(--text-3); }
.rn-pager__btn svg { display: block; }
.rn-pager__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
  font-size: 13px; letter-spacing: -.03em; color: var(--text-3); }  /* 말줄임 "…" — 클릭 불가 */

/* ── 결재 카드 (ap-card) — 결재 관리·전자 결재 공용 (approvals.html 페이지 전용에서 승격) ──
   275×hug(결재 관리 min 235 기본), r11, 패딩 16, 카드 간격 10. 버튼 구성은 페이지별
   (결재 관리 = 반려·승인 반반 + 자세히 보기 / 전자 결재 = 자세히 보기 단독, min-height 페이지 조정) */
.ap-cards{display:flex;flex-wrap:wrap;gap:10px}
.ap-empty{font-size:13px;letter-spacing:-.03em;color:var(--text-3);padding:8px 2px}
.ap-empty--center{text-align:center}   /* 히스토리 빈 상태 — 박스 안 가로 중앙 (2026.09.03). 결재·신청의 실패 문구는 좌측 유지 */
.ap-card{display:flex;flex-direction:column;justify-content:space-between;width:275px;min-height:235px;
  background:var(--surface);border-radius:var(--radius-md);padding:16px}
.ap-card__top{display:flex;align-items:flex-start;justify-content:space-between}
.ap-card__icon{width:38px;height:38px;border-radius:9px;
  /* 디폴트 프로젝트 아이콘 — 결재 데이터엔 앱 아이콘이 없어 빈 회색 타일이던 것 (2026.08.14) */
  background:#3A3A3E url('/static/images/projects/default.png?v=2') center/cover no-repeat;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-2)}
.ap-card__date{font-size:var(--label-fs);font-weight:var(--label-fw);line-height:.95;letter-spacing:-.03em;color:var(--text-4)}
.ap-card__name{margin-top:10px;font-size:16px;line-height:.95;letter-spacing:-.03em;color:#fff}
.ap-card__meta{display:flex;gap:6px;font-size:13px;line-height:.95;letter-spacing:-.03em;color:#fff;margin-bottom:20px}
.ap-card__meta .col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.ap-card__meta .col span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-bottom:3px;margin-bottom:-3px} /* 긴 값 말줄임 + 디센더(g·y 꼬리) 보호 — 행간 .95 에서 overflow hidden 이 꼬리를 자르므로 상자만 3px 확장(레이아웃 불변) */
.ap-card__meta .lbl{font-size:var(--label-fs);font-weight:var(--label-fw);color:var(--text-4)}
/* 카드 버튼 — 12px, r6, 높이 30 고정 (시스템 버튼 규격 통일) */
.ap-card__acts{display:flex;flex-direction:column;gap:6px}
.ap-card__row{display:flex;gap:6px}
.ap-card__row .ap-btn{flex:1}  /* 가로 줄에서만 반반 분할 (세로 배치에선 flex 가 높이를 눌러버림) */
.ap-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  font-size:12px;font-weight:500;line-height:.95;letter-spacing:-.03em;
  border:0;border-radius:6px;height:26px;padding:0 3px;cursor:pointer;
  transition:filter .15s,background .15s,color .15s}  /* color 추가 (2026.08.11) — 위험 버튼 호버에서 글자만 먼저 바뀌던 어긋남 동기화 */
/* 반려 = 리소스 삭제 버튼과 동일 토큰 (2026.08.11 확정 — 구 #62626B 면): 면 --surface, 호버 시 면 밝아지고 위험색 */
.ap-btn--reject{background:var(--surface);color:var(--text-3)}
.ap-btn--reject:hover{background:var(--surface-hover);color:var(--state-rejected)}
/* 결재 카드(면 = --surface) 위에서는 버튼이 묻혀서 한 단계 밝게 (사용자 확정 2026.08.11) */
.ap-card .ap-btn--reject{background:#2E2E33}
.ap-card .ap-btn--reject:hover{background:#3A3A3E;color:var(--state-rejected)}
.ap-btn--approve{background:#fff;color:#18181A}
.ap-btn--approve:hover{opacity:.88}
/* 면 #404045 — 아이콘 타일·메뉴 호버(#3A3A3E) 계열에서 분리한 버튼 전용 값 (2026.08 확정) */
.ap-btn--detail{background:#404045;color:rgba(255,255,255,.7)}
.ap-btn--detail:hover{filter:brightness(1.15)}

/* ── 드롭다운 메뉴 (rn-menu) — 전자 결재 새 결재·내 프로젝트 카드 케밥 공용 (페이지 전용에서 승격) ──
   앵커 요소 기준 배치는 사용처가 결정 (position:absolute/fixed + 좌표) */
.rn-menu{z-index:30;width:160px;  /* 폭 160 고정 (2026.08 확정 — 구 min-width 176). 항목이 넘치면 폭이 아니라 항목을 줄일 것 */
  /* 면 = 떠 있는 글래스 (토스트·프로필 메뉴와 같은 --glass-bg 레시피, 2026.08.11 — 구 --surface 단색) */
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  border-radius:8px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif}  /* body 직속이라 rn-panel 폰트 상속이 안 닿음 — §2 (토스트·모달과 같은 이유, 2026.08.11) */
.rn-menu__label{font-size:11.5px;font-weight:500;letter-spacing:-.02em;color:var(--text-4);padding:4px 10px}  /* 상하 대칭 4 (구 위 8, 2026.08.11) */
.rn-menu__sep{height:1px;background:rgba(255,255,255,.06);margin:4px 6px}
.rn-menu__item{display:flex;align-items:center;gap:8px;  /* 아이콘 동반 항목 정렬 — 아이콘 없으면 결과 동일 */
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  font-size:13px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff;text-decoration:none;  /* 행간 1 — cselect 옵션과 높이 31 통일 (2026.08.12) */
  padding:9px 10px;border-radius:6px;transition:background .12s}
.rn-menu__item svg{flex:none;margin:-1.5px 0}  /* 전역 svg=block 리셋 아래에서 flex 아이템으로 정렬. 아이콘 16 > 글자 13 — 넘치는 3px 상쇄로 항목 높이 불변 */
.rn-menu__item:hover{background:#3A3A3E}
.rn-menu__item--danger{color:var(--state-rejected)}
/* 현재 선택된 항목 — 라벨 좌 · ✓ 우 (사용자 관리 권한 메뉴의 .gm-item 을
   스테이션 관리 노출 메뉴에서 두 번째로 쓰게 되어 공용 승격 2026.08.20) */
.rn-menu__item--sel{justify-content:space-between;gap:10px}
.rn-menu__l{display:flex;align-items:center;gap:8px}   /* 아이콘 + 라벨 묶음 (✓ 는 우측 끝 유지) */

/* ── 언더라인 탭 (rn-tabs) — 페이지 콘텐츠 전환. 한 페이지에 1개 (§4-2) ──
   프로젝트 상세 페이지 <style> 에서 **스테이션 관리에서 두 번째로 필요해져 공용 승격** (2026.08.20).
   ⚠️ 프로젝트 상세는 아직 자체 .pd-tabs 를 쓴다(옆 세션 편집 중) — 값이 같으므로 나중에 이 클래스로 통합할 것.
   규격: 탭 간격 22 / 아이콘↔라벨 6 / 탭줄↔스트로크 8 / 활성 밑줄 2px 흰색 */
.rn-tabs{display:flex;flex-direction:column;gap:8px}
.rn-tabs__row{display:flex;gap:22px;align-items:center}
.rn-tab{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;line-height:1;letter-spacing:-.03em;
  color:var(--text-3);transition:color .15s}
.rn-tab:hover{color:var(--text-2)}
.rn-tab.is-on{color:#fff}
.rn-tab svg{flex:none}
/* 활성 밑줄 2px + 전체 폭 헤어라인 (JS 가 활성 탭 폭·위치로 밑줄을 옮긴다 — getBoundingClientRect 기준) */
.rn-tabs__line{position:relative;height:2px;background:var(--border-1)}
.rn-tabs__ink{position:absolute;left:0;top:0;height:2px;width:0;background:#fff;transition:left .18s,width .18s}
/* 탭 패널 — display 를 주는 클래스엔 [hidden] 가드 필수 (§5, 네 번 당한 함정) */
.rn-tabs__panel{display:flex;flex-direction:column;gap:10px}
.rn-tabs__panel[hidden]{display:none}

/* ── 눌리지 않는 액션 버튼 (ap-btn.is-off) — 선행 조건 미충족·삭제 불가 등 ──
   프로젝트 상세 페이지 <style> 에서 **스테이션 관리 삭제 가드에서 두 번째로 필요해져 공용 승격** (2026.08.20).
   ⚠️ `disabled` 속성을 쓰면 안 된다 — 크롬이 disabled 요소에 마우스 이벤트를 보내지 않아 이유 툴팁이 뜨지 않는다.
      aria-disabled="true" 로 알리고 클릭만 핸들러에서 막는다 */
.ap-btn.is-off{background:#62626B;color:rgba(255,255,255,.7);cursor:default}
.ap-btn.is-off:hover{filter:none}
/* 이유 툴팁 — 면은 공용 .rn-tip__box 재사용, 위치만 버튼 아래·우측 정렬로 뒤집는다 */
.rn-offtip{position:relative;display:inline-flex}
.rn-offtip .rn-tip__box{left:auto;right:0;bottom:auto;top:calc(100% + 8px);transform:none;
  white-space:normal;width:max-content;max-width:260px;line-height:1.42;text-align:left;
  word-break:keep-all;overflow-wrap:break-word}   /* 한국어 단어 단위 줄바꿈 — 한 글자만 넘어가는 조각 방지 (2026.08.21) */
.rn-offtip:hover .rn-tip__box,.rn-offtip:focus-within .rn-tip__box{opacity:1}

/* ── 아이콘 버튼 (rn-ico) — 표 행·카드의 26px 면 버튼 (수정·삭제 등) ──
   프로젝트 상세 페이지 <style> 의 .pd-ico 를 **스테이션 관리에서 두 번째로 필요해져 공용 승격** (2026.08.20).
   면(fill)이 기본 — 호버에만 면이 뜨면 버튼인지 인지되지 않는다(§4-1d 확정).
   ⚠️ 프로젝트 상세는 아직 자체 .pd-ico 를 쓴다(옆 세션 편집 중) — 값 동일, 통합은 후속 과제 */
.rn-ico{width:26px;height:26px;display:grid;place-items:center;flex:none;padding:0;border:0;cursor:pointer;
  background:var(--surface);border-radius:var(--radius-xs);color:var(--text-3);
  transition:background .12s,color .12s,opacity .12s}
.rn-ico:hover{background:var(--surface-hover);color:#fff}
.rn-ico--danger:hover{color:var(--state-rejected)}
.rn-ico svg{display:block}
/* 비활성 = 35% 투명 (시스템 표준 — 페이저·메뉴 항목과 같은 값).
   ⚠️ ap-btn.is-off 의 #62626B 를 쓰면 안 된다 — 그 값은 '흰색 주 버튼'을 낮추는 용도라
      면이 --surface 인 아이콘 버튼에는 오히려 **더 밝아져** 눌리지 않는 버튼이 더 눈에 띈다 (2026.08.20 교정) */
.rn-ico[aria-disabled="true"]{opacity:.35;cursor:default}
.rn-ico[aria-disabled="true"]:hover{background:var(--surface);color:var(--text-3)}

/* ── 순서 변경 행 (rn-ord) — 표에서 드래그 핸들 + 위/아래 버튼 (스테이션 분류 관리, 2026.08.20) ──
   드래그는 핸들만 잡히게 하고(행 전체 드래그는 텍스트 선택과 충돌), 키보드 대체 수단으로 ∧∨ 버튼을 같이 둔다 */
.rn-ord{display:flex;align-items:center;gap:2px}
.rn-ord__grip{display:grid;place-items:center;width:22px;height:26px;flex:none;padding:0;border:0;background:none;
  color:var(--text-4);cursor:grab}
.rn-ord__grip:hover{color:var(--text-2)}
.rn-ord__grip:active{cursor:grabbing}
.rn-ord__btn{display:grid;place-items:center;width:22px;height:22px;flex:none;padding:0;border:0;
  border-radius:var(--radius-xs);background:none;color:var(--text-3);cursor:pointer;transition:background .12s,color .12s}
.rn-ord__btn:hover{background:var(--surface-hover);color:#fff}
.rn-ord__btn[aria-disabled="true"]{color:rgba(255,255,255,.18);cursor:default}
.rn-ord__btn[aria-disabled="true"]:hover{background:none;color:rgba(255,255,255,.18)}
/* 끌고 있는 행 + 드롭 지점 삽입선 (2px 흰색 — 탭 밑줄과 같은 값) */
.rn-table tbody tr.is-dragging{opacity:.55}
.rn-table tbody tr.is-drop-before td{box-shadow:inset 0 2px 0 #fff}
.rn-table tbody tr.is-drop-after td{box-shadow:inset 0 -2px 0 #fff}

/* ── 이미지 타일 + 원본 새 탭 열기 배지 (ad-img / ad-img__open) ──
   결재 상세 모달에서 만들었다가 **프로젝트 상세 스테이션 탭에서 두 번째로 필요해져 공용 승격** (2026.08).
   부모(.ad-img)는 position:relative + overflow 만 제공하고, 크기(정사각/16:9)는 사용처가 정한다.
   ※ 승격하면서 스코프를 `.rn-amodal .ad-img…` → `.ad-img…` 로 풀었다 (§0 절차).
     면·라운드는 기본값일 뿐이라 사용처 클래스가 뒤에서 덮어쓰면 그쪽이 이긴다 */
.ad-img { position: relative; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.ad-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 호버 시 이미지 내부 우상단. 어떤 이미지 위에서도 읽히도록 어두운 알약 배경 */
.ad-img__open {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .15s, background .15s;
}
.ad-img__open svg { width: 15px; height: 15px; display: block; }
.ad-img:hover .ad-img__open { opacity: 1; }
.ad-img__open:hover { background: rgba(0,0,0,.75); }
/* 키보드 이동 시에도 보이게 — 호버로만 뜨면 마우스 없이 못 찾는다 */
.ad-img__open:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }
/* 작은 타일(아이콘)은 배지도 축소 — 모달 48px·프로젝트 상세 56px 공통 */
.ad-img--sq .ad-img__open, .ad-img__open--sm { top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 5px; }
.ad-img--sq .ad-img__open svg, .ad-img__open--sm svg { width: 12px; height: 12px; }

/* ── 커스텀 드롭다운 펼친 목록 (cselect__menu) ──
   **body 에 fixed 로 붙어서** 모달·패널 스코프 밖이다 → `.rn-amodal …` 로는 안 잡힌다.
   renewal.css를 사용하는 운영 페이지 공용 규칙으로 선언한다.
   면·라운드·패딩·항목은 시스템 드롭다운(rn-menu)과 같은 값. 폰트는 상속이 끊기므로 직접 지정 */
.cselect__menu {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  /* 면 = 떠 있는 글래스 — rn-menu 와 동기 (--glass-bg + blur, 2026.08.11. 구 --surface 단색) */
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--topbar-blur)) saturate(1.3);
  backdrop-filter: blur(var(--topbar-blur)) saturate(1.3);
  border: 0; border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.cselect__option {
  font-family: inherit;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -.03em;  /* 한 줄 = 행간 1 (상속 1.5 정리, 2026.08.12 — 항목 높이 37.5 → 31) */
  padding: 9px 10px; border-radius: 6px; color: #fff;
}
.cselect__option:hover { background: #3A3A3E; color: #fff; }
.cselect__option.is-selected { color: #fff; font-weight: 500; }

/* ── 토스트 (개편) — 스트로크 제거 + 프로필 메뉴와 같은 글래스 면 (사용자 확정 2026.08).
   면·블러 값은 글래스 토큰(--glass-bg/--topbar-blur) 공유 — 프로필 메뉴·알림 팝업과 동일 레시피(상단바 --topbar-bg 와는 2026.08.11 분리).
   body 직속이라 rn-panel 폰트 상속이 안 닿음 → Pretendard 직접 지정 (§2 — 상단바·rn-menu 와 같은 이유) */
.toast {
  border: 0;
  /* 한 줄 구조 (2026.08) — 아이콘·텍스트 세로 중앙 */
  display: flex; align-items: center; gap: 8px;
  /* 글래스(--topbar-bg + blur)는 main.css 공통이 담당. 왼쪽 흰 글로우 그라디언트는 제거 확정 (2026.08.11) */
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
}
/* 안내 아이콘 (Tabler exclamation-circle 16px) — 마크업은 main.js 공용이라 CSS ::before 로만 붙인다.
   mask + currentColor = 글자색 상속 (§3 "텍스트와 한 몸이면 색 상속") */
.toast::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2016v.01%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2016v.01%22/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 종류별 아이콘 — base 와 특이도가 같아 **뒤에 와야 이긴다** (성공 circle-check / 에러 alert-triangle, 글로우는 공통 흰색) */
.toast--success::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E");
}
.toast--error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M10.4%203.7%201.9%2018a1.9%201.9%200%200%200%201.7%202.9h16.8a1.9%201.9%200%200%200%201.7-2.9L13.6%203.7a1.9%201.9%200%200%200-3.2%200z%22/%3E%3Cpath%20d%3D%22M12%2016v.01%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M10.4%203.7%201.9%2018a1.9%201.9%200%200%200%201.7%202.9h16.8a1.9%201.9%200%200%200%201.7-2.9L13.6%203.7a1.9%201.9%200%200%200-3.2%200z%22/%3E%3Cpath%20d%3D%22M12%2016v.01%22/%3E%3C/svg%3E");
}

/* ── 모달 (개편) — 배경 블러 제거, 딤(검정 60%)만 ── */
.modal { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ── 결재 모달 (rn-amodal) — 결재 관리·전자 결재 공용 (approvals.html 페이지 전용에서 승격 2026.08) ──
   `.modal` 에 `rn-amodal` 을 함께 붙이면 이 규격이 적용된다 (상세 · 반려 사유 팝업 공통).
   전역 확인 대화상자(uiConfirm)가 만드는 `.modal__card--confirm` 은 스코프 밖이라 별도 선택자로 맞춤.
   기준: 피그마 1335:2805 (축소 스케일 — 그려진 값 ×1.136 환산, 반지름은 원값)
   ※ 간격은 토큰 4개가 단일 소스: --ad-line-gap / --ad-row-gap / --ad-col-gap / --ad-label-gap
   ※ 라벨·값 line-height:1 필수 — 상자 높이 = 글자 크기라 지정 간격이 화면에 그대로 나옴 */
  .rn-amodal .ad-shell{width:400px;max-width:calc(100vw - 40px)}
  /* 모달은 rn-panel 밖이라 Pretendard 상속이 안 됨 — 카드에서 직접 지정 (숫자·영문 Strichpunkt 유입 차단) */
  /* ── 결재 모달 공통 규격 — 상세 · 반려 · 승인 확인 팝업이 카드·타이포·버튼을 공유 ──
     간격 토큰 4개가 단일 소스 (세 모달 모두 상속) */
  .modal__card{
    --ad-label-gap:7px;   /* 세로형(라벨 위/값 아래) 라벨-값 간격 */
    --ad-line-gap:18px;   /* 헤어라인 → 다음 내용 */
    --ad-col-gap:10px;    /* 2열 사이 = 스크린샷 타일 사이 */
    --ad-row-gap:16px;    /* 행 사이 기본 — 블록 텍스트·이미지 등 (12 → 16, 2026.08.12) */
    --ad-row-gap-h:10px;  /* 가로형(라벨 좌·값 우) 행 사이 — 기안자·카테고리 등 (12 → 10, 2026.08.12) */
    --ad-field-gap:18px;  /* 연속 입력 필드(.field) 사이 — 확인형(--confirm) 팝업 공통 (인라인 마진 하드코딩 폐지, 2026.08.19) */
  }
  .rn-amodal .modal__card,
  .modal__card--confirm{
    padding:30px 23px 23px;border:0;  /* 위 30 / 좌우·아래 23 (34 → 23 → 30 확정 2026.08.11) */
    /* 면 = 글래스, 틴트만 상단바 토큰 (--topbar-bg — 사용자 확정 2026.08.11. 토스트·드롭다운의 --glass-bg 보다 한 단계 어두움) */
    background:var(--topbar-bg);
    -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
    backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
    border-radius:var(--radius-md);
    box-shadow:4px 8px 12.5px rgba(0,0,0,.4);
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif}
  /* 폭은 셸(.ad-shell)이 잡고 카드는 그 안을 채운다 — **셸 안에서만** max-width 해제.
     구: `.rn-amodal .modal__card{max-width:none}` 이 셸 없는 팝업(반려 사유·버전 수정)의
     `--confirm` 400 상한까지 지워서 화면 전체 폭으로 벌어져 있었다 (2026.08 수정) */
  .rn-amodal .ad-shell > .modal__card{width:100%;max-width:none}
  .rn-amodal .modal__title,
  .modal__card--confirm .modal__title{margin:0 0 var(--ad-line-gap);font-size:16px;font-weight:600;line-height:1;letter-spacing:-.03em}  /* 16 (구 18, 2026.08.11) */
  /* 본문 문장 — 값 텍스트와 같은 크기, 긴 문장이라 행간 1.42 */
  .rn-amodal .modal__body,
  .modal__card--confirm .modal__body{margin:0 0 var(--ad-line-gap);font-size:13.5px;font-weight:500;
    line-height:1.42;letter-spacing:-.03em;color:#fff;
    white-space:pre-line}  /* uiConfirm 은 textContent 로 넣으므로 개행(\n)을 줄바꿈으로 렌더 */
  .rn-amodal .modal__body b,
  .modal__card--confirm .modal__body b{font-weight:600}
  /* 액션 줄 — 우측 정렬, 카드 아래 패딩과 같은 23 위 여백. main.css 의 sticky 띠 해제 */
  .rn-amodal .modal__actions,
  .modal__card--confirm .modal__actions{position:static;margin:23px 0 0;padding:0;border:0;gap:7px;background:none}
  /* 결재 상세만 사유 ↔ 버튼 줄 간격 10 (0 → 10, 2026.08.12 — 신청 폼·확인 팝업의 23 은 유지) */
  .rn-amodal .ad-shell .modal__actions{margin-top:10px}
  /* 확인 팝업 버튼 — 전역 uiConfirm 이 만드는 .btn 을 ap-btn 규격으로 (마크업은 main.js 공용이라 스타일로만 맞춤) */
  .modal__card--confirm .modal__actions .btn{
    height:26px;padding:0 13px;border:0;border-radius:6px;min-width:72px;
    font-size:12px;font-weight:500;line-height:1;letter-spacing:-.03em}
  .modal__card--confirm .modal__actions .btn--outline{background:#404045;color:rgba(255,255,255,.7)}
  .modal__card--confirm .modal__actions .btn--primary{background:#fff;color:#18181A}
  .modal__card--confirm .modal__actions .btn--danger{background:#62626B;color:rgba(255,255,255,.7)}
  /* 결재 진행 — 공용 appr-row 를 배너형으로 (면 #3A3A3E, r4). 상태색은 main 토큰 그대로 */
  .rn-amodal .appr-list{display:flex;flex-direction:column;gap:6px}
  /* 면 #25252B (사용자 확정 2026.08.11 — 구 #34343A → rgba(0,0,0,.2) → 단색 확정) */
  .rn-amodal .appr-row{background:#25252B;border-radius:6px;padding:6px 14px;font-size:12.5px;gap:7px;letter-spacing:-.03em}  /* 텍스트 12.5 (구 13.5, 2026.08.11) — 상태·결재자·일시 공통 상속 */
  .rn-amodal .appr-row__dot{width:5px;height:5px;border:0}
  .rn-amodal .appr-row__status{font-weight:500}  /* 좌측 = 상태값 (승인·반려·대기 모두 2글자라 폭 고정 불필요) */
  /* 결재자 "이름 직급"(상태값 우측)과 결재 일시(우측 끝) — 둘 다 같은 mute (사용자 확정).
     일시는 main.css 의 --text-4 를 override */
  .rn-amodal .appr-row__who,
  .rn-amodal .appr-row__meta{color:var(--text-2);font-variant-numeric:normal}  /* 고정폭 숫자 해제 (2026.08.11) — 아래 기안일 값과 동일한 비례 폭 숫자로 (main.css 의 tabular-nums 무효화) */
  .rn-amodal .appr-row__meta{margin-left:auto;text-align:right}
  .rn-amodal .appr-reason{margin:6px 0 0}
  .rn-amodal .ad-steps{margin-bottom:12px}
  /* 필드 블록 — 위 헤어라인. 필드 행간 6 / 블록 진입 12 (사용자 확정 2026.08) */
  .rn-amodal .ad-fields{display:flex;flex-direction:column;gap:var(--ad-row-gap-h);padding:var(--ad-line-gap) 0 0;border-top:1px solid rgba(255,255,255,.06)}
  .rn-amodal .ad-fields > .field-stack{display:flex;justify-content:space-between;align-items:baseline;margin:0}
  /* 라벨 공통 — line-height .95 로 상하 여백 제거(줄 높이 함정). 가로형은 간격 0, 세로형만 아래 간격 부여 */
  .rn-amodal .field-stack__label{font-size:var(--label-fs);font-weight:var(--label-fw);color:var(--text-4);letter-spacing:-.03em;
    line-height:1;margin-bottom:0}  /* 1 = 글자 상자에 여백 0 → 간격 계산이 화면과 일치. 12/600 = 라벨 공통 토큰 (구 13.5/500, 2026.08) */
  .rn-amodal .ad-reason .field-stack__label,
  .rn-amodal .ad-extra > .field-stack.is-block > .field-stack__label,
  .rn-amodal .ad-media .field-stack__label{margin-bottom:var(--ad-label-gap)}
  .rn-amodal .field-stack > div{font-size:13.5px;font-weight:500;letter-spacing:-.03em;color:#fff}
  /* 가로형 행의 값도 라벨과 같은 줄높이 — 값이 더 크면 baseline 정렬이 라벨을 아래로 밀어내 선→라벨 간격이 커진다 */
  .rn-amodal .ad-fields > .field-stack > div,
  .rn-amodal .ad-extra > .field-stack:not(.is-block) > div{line-height:1}
  .rn-amodal .ad-details:empty{display:none}  /* 상세 없는 유형 — 빈 칸이 flex gap 을 먹지 않게 */
  .rn-amodal .mono{font-family:inherit}  /* 모달 텍스트 전부 Pretendard (mono 클래스 무력화) */
  /* 첨부 파일 — 파일명 말줄임 + 우측 다운로드 아이콘 (2026.08.12) */
  .rn-amodal .ad-file{display:flex;align-items:center;gap:6px;min-width:0}
  .rn-amodal .ad-file__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .rn-amodal .ad-file__dl{flex:none;display:grid;place-items:center;color:var(--text-3);transition:color .12s}
  .rn-amodal .ad-file__dl:hover{color:#fff}
  /* 상세 안 구분선 행 — 위아래 = 행 간격(h) + 마진 보정 = 18 (다른 헤어라인과 동일 리듬) */
  .rn-amodal .ad-hr{height:1px;background:rgba(255,255,255,.06);margin:calc(var(--ad-line-gap) - var(--ad-row-gap-h)) 0}
  .rn-amodal .is-wide .ad-extra > .ad-hr{grid-column:1 / -1}
  .rn-amodal .ad-extra > .ad-hr + .field-stack.is-block{margin-top:0}  /* 구분선 다음 블록 — 블록 보정(+6) 중복 제거, 선 아래 18 유지 */
  /* 반반(is-half) 칸 — 같은 행 두 칸의 시작점이 어긋나지 않게 경계 마진·옛 헤어라인 규칙 전부 무효 (2026.08.12) */
  .rn-amodal .ad-extra > .field-stack.field-stack.is-block.is-half{margin-top:0;border-top:0;padding-top:0}
  /* is-half — wide 2컬럼에서 block(라벨 위/값 아래)이되 반 칸만 (접근 링크·첨부 파일 나란히, 2026.08.12) */
  .rn-amodal .is-wide .ad-extra > .field-stack.is-block.is-half{grid-column:auto}
  .rn-amodal .field-stack > div.is-empty{color:var(--text-3)}  /* 값 없음 = mute 중간바 */
  /* 유형별 상세(GitHub 아이디·슬러그 등) — 기본 필드와 같은 가로 배치 + 위 헤어라인으로 블록 분리
     margin-top 6 = 부모 flex gap 6 과 합쳐 헤어라인 위 12 (아래 12 와 대칭) */
  .rn-amodal .ad-extra{display:flex;flex-direction:column;gap:var(--ad-row-gap-h);
    margin-top:calc(var(--ad-line-gap) - var(--ad-row-gap-h));  /* 부모(.ad-fields) gap 과 합쳐 선 위 18 */
    padding-top:var(--ad-line-gap);border-top:1px solid rgba(255,255,255,.06)}
  .rn-amodal .ad-extra > .field-stack{display:flex;justify-content:space-between;align-items:baseline;margin:0}
  /* block 행 = 긴 텍스트·URL (한 줄 소개·상세 설명·접속 URL) — 라벨 위 / 값 아래 스택 + 줄바꿈 허용 */
  /* 블록 텍스트(한 줄 소개·상세 설명·접근 링크) 주변 간격 = --ad-row-gap(16) — 가로형 12 와 토큰 분리 (2026.08.12) */
  .rn-amodal .ad-extra > .field-stack.is-block + *,
  .rn-amodal .ad-extra > * + .field-stack.is-block{margin-top:calc(var(--ad-row-gap) - var(--ad-row-gap-h))}
  .rn-amodal .ad-extra > .field-stack.is-block{display:block}  /* 행 간격은 부모 gap 이 담당 */
  .rn-amodal .ad-extra > .field-stack.is-block > div{line-height:1.3;white-space:pre-line;word-break:break-all}  /* 1.42 → 1 → 1.3 확정 (줄 사이 여백 약 4px, 2026.08.12) */
  /* 가로 배치 그룹 ↔ 스택(block) 그룹 경계에 헤어라인 (접속 URL 위) */
  .rn-amodal .ad-extra > .field-stack:not(.is-block) + .field-stack.is-block{
    border-top:1px solid rgba(255,255,255,.06);padding-top:var(--ad-line-gap);
    margin-top:calc(var(--ad-line-gap) - var(--ad-row-gap-h))}  /* 부모 gap 보정 */
  /* 릴리즈 심사 이미지 그룹 — 2열 짝 배치(1열 아이콘/썸네일, 2열 PWA/메인), 스크린샷은 전체 폭.
     텍스트 그룹(상세 설명)과의 경계에 통짜 헤어라인 (전체 폭 블록 다음이라 선도 이어짐) */
  .rn-amodal .ad-media{display:grid;grid-template-columns:1fr 1fr;gap:var(--ad-row-gap) var(--ad-col-gap);  /* 세로도 행 토큰 (하드코딩 12 정리, 2026.08.12) */
    /* 부모(.ad-fields) gap 12 와 합쳐 선 위 18 — 차감 누락으로 30 이던 비대칭 수정 (2026.08.11) */
    margin-top:calc(var(--ad-line-gap) - var(--ad-row-gap-h));padding-top:var(--ad-line-gap);border-top:1px solid rgba(255,255,255,.06)}
  /* ad-details **안**에서 앞 내용에 이어 나오는 이미지 그룹 — 부모 gap 이 없어 18 전액을 마진으로
     (릴리즈 상세에서 선 위가 6 으로 좁던 비대칭 수정, 2026.08.12. 첫 child 로 오면 위 규칙이 fields gap 과 합산돼 18) */
  .rn-amodal .ad-details > * + .ad-media{margin-top:var(--ad-line-gap)}
  .rn-amodal .ad-media__col{display:flex;flex-direction:column;gap:var(--ad-row-gap);min-width:0}
  .rn-amodal .ad-media .field-stack{margin:0}
  .rn-amodal .ad-media__shots{grid-column:1 / -1;min-width:0}
  .rn-amodal .ad-img--sq{width:48px;height:48px}
  .rn-amodal .ad-img--wide{width:100%;aspect-ratio:16/9}
  .rn-amodal .ad-shots{display:flex;gap:var(--ad-col-gap);overflow-x:auto;padding-bottom:4px}
  .rn-amodal .ad-shots .ad-img{flex:0 0 300px;aspect-ratio:16/9}  /* 타일 너비 300 (사용자 확정) */
  .rn-amodal .ad-img--ph{display:grid;place-items:center;font-size:12px;color:var(--text-3)}
  /* ── 스테이션 릴리즈 = 넓은 2컬럼 카드 (항목이 많아 1컬럼이면 세로가 과도하게 길어짐) ── */
  .rn-amodal .ad-shell.is-wide{width:680px}
  .rn-amodal .is-wide .ad-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--ad-row-gap-h) var(--ad-col-gap)}
  .rn-amodal .is-wide .ad-details{grid-column:1 / -1}
  .rn-amodal .is-wide .ad-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--ad-row-gap-h) var(--ad-col-gap)}
  .rn-amodal .is-wide .ad-extra > .field-stack.is-block{grid-column:1 / -1}
  /* 그리드에선 인접 형제 선택자가 안 먹으므로(줄바꿈 기준이 달라짐) 첫 block 행에 직접 경계선 */
  .rn-amodal .is-wide .ad-extra > .field-stack.is-block:first-of-type{
    border-top:1px solid rgba(255,255,255,.06);padding-top:var(--ad-line-gap);
    margin-top:calc(var(--ad-line-gap) - var(--ad-row-gap-h))}  /* 부모 grid row-gap 보정 */
  /* 2컬럼 구간의 헤어라인은 컬럼별로 끊는다 — 통짜 선 해제하고 첫 행 두 칸에 각각 상단선
     (선이 컬럼 간격 10px 만큼 벌어져 "가로로 두 개씩" 보임. 전체 폭 블록은 통짜 선 유지) */
  .rn-amodal .is-wide .ad-fields{border-top:0;padding-top:0}
  .rn-amodal .is-wide .ad-fields > .field-stack:nth-child(1),
  .rn-amodal .is-wide .ad-fields > .field-stack:nth-child(2),
  .rn-amodal .is-wide .ad-extra > .field-stack:nth-child(1),
  .rn-amodal .is-wide .ad-extra > .field-stack:nth-child(2){
    border-top:1px solid rgba(255,255,255,.06);padding-top:var(--ad-line-gap)}
  .rn-amodal .is-wide .ad-extra{border-top:0;padding-top:0}
  /* 결재 사유 — 위아래 헤어라인 사이 */
  .rn-amodal .ad-reason{margin-top:var(--ad-line-gap);padding:var(--ad-line-gap) 0 0;border-top:1px solid rgba(255,255,255,.06)}  /* 사유 아래 헤어라인 제거 (2026.08.12 확정) — 위 선만 */
  .rn-amodal .ad-reason p{margin:0;font-size:13.5px;font-weight:500;line-height:1.3;letter-spacing:-.03em;color:#fff;white-space:pre-line}  /* 1.42 → 1 → 1.3 확정 (2026.08.12) */
  /* 액션 — 우측 반려/승인만 (ap-btn 시스템 규격, 최소 폭 72). background 해제 필수 — main.css 가 스크롤용 --bg-2 띠를 깖 */
  .rn-amodal .modal__actions{position:static;margin:23px 0 0;padding:0;border:0;gap:7px;background:none}  /* 위 23 = 카드 아래 패딩과 동일 (버튼 줄 상하 대칭, 사용자 확정) */
  .rn-amodal .modal__actions .ap-btn{min-width:72px;padding:0 13px}
  .rn-amodal .modal__actions .ap-btn--detail{background:#34343B}  /* 닫기·취소 면 #34343B (구 #404045 → #333333 → 확정, 2026.08.12 — 카드의 자세히 보기는 #404045 유지) */

  /* ── 반려 사유 모달 — 카드·타이포·버튼은 위 공통 규격. 식별 줄 + 인풋만 별도 ── */
  /* 대상 결재 문장 — 이 팝업의 본문(누구의 어떤 신청을 반려하는지). 아래 안내 문장은 한 단계 낮춤 */
  .rn-amodal .rj-msg{margin:0 0 var(--ad-line-gap);font-size:13.5px;font-weight:500;line-height:1.42;letter-spacing:-.03em;color:#fff}
  .rn-amodal .modal__body{color:var(--text-2)}
  .rn-amodal .field{margin:0}
  /* 확인형 팝업의 연속 입력 필드 간격 = --ad-field-gap 단일 소스 (2026.08.19 — 템플릿 인라인 margin-top 폐지).
     신청 폼(rf-card·--wide)은 자체 리듬이라 --confirm 카드에만 스코프.
     숨은 필드 뒤에는 간격을 얹지 않는다 — 버전 팝업 수정 모드(버전 칸 hidden)가 위로 뜨는 것 방지 */
  .modal__card--confirm .field + .field{margin-top:var(--ad-field-gap)}
  .modal__card--confirm .field[hidden] + .field{margin-top:0}
  /* 인풋 = 어두운 면(inset), 스트로크 제거. 한 줄 input 도 같은 문법 (min-height 만 textarea 전용) */
  /* 모달 라벨 안 ⓘ — 아이콘 14 (KPI 16 보다 한 단계 작게: 라벨 12.5 에 맞춤, 2026.08.12).
     넘치는 1.5px 은 상쇄 마진으로 — 라벨 줄 높이 불변 (KPI 카드와 같은 기법) */
  .rn-amodal label .rn-tip{margin-top:-1.1px;margin-bottom:-1.1px;vertical-align:-2.5px}
  .rn-amodal label .rn-tip svg{width:14px;height:14px}
  /* 모달 안 ⓘ 툴팁 — 스크롤 영역이 좌우를 자르므로 nowrap 중앙 정렬 대신 **감기 + 아이콘 기준 정렬**
     (pd-tip 과 같은 처리, 2026.08.12). 기본 = 아이콘 왼쪽 끝 정렬, .rn-tip--r = 오른쪽 끝 정렬(카드 우측의 아이콘용) */
  /* pre-line — 문구에 넣은 줄바꿈(\n)을 살린다. normal 이면 공백으로 합쳐졌다 (2026.08.20).
     감김(max-width 260)은 그대로 — 긴 문장은 계속 자동 줄바꿈된다 */
  .rn-amodal .rn-tip__box{white-space:pre-line;width:max-content;max-width:260px;line-height:1.42;text-align:left;
    left:0;transform:none;word-break:keep-all;overflow-wrap:break-word}   /* 단어 단위 줄바꿈 (2026.08.21) */
  .rn-amodal .rn-tip--r .rn-tip__box{left:auto;right:0}
  .rn-amodal .textarea,
  .rn-amodal .input{border-color:transparent;background:var(--input-bg);  /* 인풋 공통 글라스 틴트 (구 #25252B 단색 → --input-bg 반투명, 사용자 확정 2026.08.19) */
    padding:8px 10px;  /* 상하 8 / 좌우 10 (구 10/12, 2026.08.11 확정) */
    font-family:inherit;font-size:13px;font-weight:500;line-height:1.42;letter-spacing:-.03em;border-radius:8px}  /* 13 (구 13.5, 2026.08.11) */
  /* 한 줄 입력·읽기 값 = 행간 1 (2026.08.11 확정). 높이 41 명시 — 행간을 줄여도 박스가 줄지 않게 (중복 확인 stretch·SSO 칩 41 과 동기) */
  .rn-amodal .input{line-height:1;height:36px}  /* 36 (구 41, 2026.08.11) */
  .rn-amodal .ov-v{line-height:1}
  .rn-amodal .textarea{min-height:88px}
  .rn-amodal .textarea::placeholder,
  .rn-amodal .input::placeholder{color:var(--text-3)}
  /* 필드 라벨 — 값 라벨(field-stack__label)과 같은 급, 인풋과 7px.
     ※ :not(.check) 필수 — 체크박스도 <label class="check"> 라서 여기 걸리면
        display:block 이 flex 정렬을 죽여 박스와 글자가 어긋난다 (실제 회귀 2026.08) */
  .rn-amodal .field label:not(.check){display:block;margin-bottom:var(--ad-label-gap);
    font-size:var(--label-fs);font-weight:var(--label-fw);line-height:1;letter-spacing:-.03em;color:var(--text-4)}
  /* 라벨↔입력 간격 7 통일 (2026.08.11) — main.css .field 의 flex gap 6 이 라벨 여백 7 에 겹쳐 13 이 되던 중복 제거 */
  .rn-amodal .field{gap:0}
  .rn-amodal .modal__actions .ap-btn{min-width:72px;padding:0 13px}
  .rn-amodal .modal__actions .ap-btn--detail{background:#34343B}  /* 닫기·취소 면 #34343B (구 #404045 → #333333 → 확정, 2026.08.12 — 카드의 자세히 보기는 #404045 유지) */
  /* 반려 확정 버튼 — 되돌릴 수 없는 액션이라 위험 색 (카드의 반려 #62626B 과 구분) */
  /* 위험색(#CE423D)은 **반려 사유 팝업의 확정 버튼만** (form 안 — §4-1c 원칙 복원 2026.08.11).
     상세 모달의 반려 버튼은 카드와 같은 토큰(--surface + 호버 위험색)으로 통일 */
  .rn-amodal form .ap-btn--reject{background:#CE423D;color:#fff}
  .rn-amodal form .ap-btn--reject:hover{background:#CE423D;color:#fff;filter:brightness(1.08)}

  .rn-amodal .hint{font-size:12px;letter-spacing:-.03em}
  /* 첨부 파일 — .input 면을 그대로 쓰는 클릭형 선택 (릴리즈 폼, 형태 무관 항상 1개) */
  .rn-amodal .rf-file{display:flex;align-items:center;cursor:pointer}
  .rn-amodal .rf-file__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rn-amodal .rf-file__name.is-ph{color:var(--text-3)}   /* 미선택 = 플레이스홀더 톤 */

  /* ── 신청 폼 (rf-card) — 결재 팝업과 같은 카드 규격 위에 **본문만 스크롤** 구조만 유지 ──
     항목이 많은 폼(스테이션 릴리즈)은 결재 상세와 같은 기준으로 680 2단계 (is-wide) */
  .rn-amodal .rf-card{width:400px;max-width:calc(100vw - 40px)}
  .rn-amodal .rf-card.is-wide{width:680px}
  /* 제목 하단 구분선 — 결재 상세(.ad-fields 상단선)와 같은 문법. 선 위 18(제목 margin) / 아래 18(16 + 스크롤 상단 2) (2026.08.11) */
  .rn-amodal .rf-card form{border-top:1px solid rgba(255,255,255,.06);padding-top:16px}
  /* 폼 그룹 경계 헤어라인 — 릴리즈 폼의 칩 그룹 ↔ 이미지 그룹 사이 (위/아래 간격은 항목 간 18 규칙이 담당, 2026.08.12) */
  .rn-amodal .rf-sec-line{height:1px;background:rgba(255,255,255,.06)}
  /* 스크린샷 장수 카운터 — 라벨과 한 줄 (hint 클래스는 display:block 이라 세로로 꺾여서 분리, 2026.08.12) */
  .rn-amodal .rf-count{color:var(--text-3)}
  /* 유형별 필드가 없는 폼에서 빈 rf-dynamic 이 항목 간 18 을 두 번 먹지 않게 */
  .rn-amodal #rf-dynamic:empty{display:none}
  /* 프로젝트 행 — 스테이션 폼에서만 2열(is-2, 우측 = 카테고리), 그 외엔 1열 (2026.08.12) */
  .rn-amodal #rf-project-row:not(.is-2){display:block}
  /* 슬러그 중복 확인 버튼 — 옆 인풋과 같은 높이로 스트레치 (인풋 실측 41, 사용자 확정 2026.08.11) */
  .rn-amodal .slug-row .ap-btn{height:auto;align-self:stretch;padding:0 13px}
  /* 스크롤 구조의 좌우 여백을 리뉴얼 카드 패딩(23)에 맞춤 — main.css 는 28 기준 */
  .rn-amodal .rf-card.modal__card--scroll{padding-bottom:0}
  .rn-amodal .rf-card .modal__scroll{margin:0 -23px;padding:2px 23px 23px}
  .rn-amodal .rf-card.modal__card--scroll .modal__actions{margin:0 -23px;padding:16px 23px 23px;border-top:0}
  /* 구분선은 **실제로 스크롤이 생길 때만** — 내용이 짧으면 선이 뜬금없다 (main.js 가 is-scrollable 부여) */
  .rn-amodal .rf-card.is-scrollable .modal__actions{border-top:1px solid rgba(255,255,255,.06)}
  /* 세로형 라벨(라벨 위 / 값·입력 아래) — 결재 상세의 가로형(margin 0)과 달리 아래 간격이 필요 */
  .rn-amodal .rf-card .field-stack__label{margin-bottom:var(--ad-label-gap)}
  /* 드롭다운 — 화면에 보이는 건 커스텀(.cselect__btn), 네이티브 select 는 숨겨져 있다.
     인풋과 같은 문법으로: 스트로크 제거 + 어두운 면 */
  .rn-amodal .cselect__btn{border-color:transparent;background:#25252B;  /* 상태 배너와 동일 면 (구 --bg-2, 2026.08.11) */
    font-family:inherit;font-size:13px;font-weight:500;line-height:1;height:36px;padding-top:8px;padding-bottom:8px;padding-left:10px;letter-spacing:-.03em;border-radius:8px}  /* 행간 1 + 높이 41 · 패딩 상하 8/왼쪽 10 (쉐브론 몫 오른쪽 패딩은 main 유지, 2026.08.11) */  /* 13 (구 13.5, 2026.08.11) */
  .rn-amodal .cselect__btn:hover{border-color:transparent;background:#2B2B31}
  .rn-amodal .cselect.is-open .cselect__btn{border-color:transparent;background:#2B2B31}  /* 호버/열림 = 한 단계 밝게 (구 #17171B, 2026.08.11) */
  /* 읽기 전용·잠긴 값은 흐리게 — 눌러보기 전에 "못 고치는 칸"인 게 보이도록 (§5) */
  .rn-amodal .input[readonly],.rn-amodal .cselect__btn:disabled{opacity:.55}
  /* 입력 아래 보조 설명 — 값보다 한 단계 낮은 12px mute.
     아래 여백 14 = 다음 항목과의 간격. 없으면 힌트와 다음 라벨이 딱 붙는다 (2026.08) */
  .rn-amodal .rf-card .hint{display:block;margin:7px 0 0;color:var(--text-3);line-height:1.42}  /* 아래 여백 제거 — 항목 간 18 은 공통 규칙이 담당 (2026.08.11) */
  /* 필드 사이 간격 — main.css 의 .field 여백을 rn-amodal 이 0 으로 눌렀으므로 여기서 다시 준다 */
  /* 항목 간 간격 = 18 단일 (2026.08.11 확정 — 인라인 6/12/14 산재 정리). 형제면 무엇이든 18 */
  .rn-amodal .rf-card .modal__scroll > * + *,
  .rn-amodal .rf-card #rf-dynamic > * + *{margin-top:18px}
  .rn-amodal .rf-card .field-stack{margin-bottom:0}  /* main.css 기본 6 제거 — 첫 구간(기안자 블록 아래)만 24 로 벌어지던 원인 (2026.08.11) */