/* ===================================================================
   RAMP (Reverent Approval & Management Portal) — 디자인 시스템
   포인트 컬러 : PANTONE 534 C = #1B365D   (회사 로고와 같은 계열)
   구조·타이포 : Apple Human Interface Guidelines / apple.com 레퍼런스
                 본문 17px / 줄간격 25px / 자간 -0.374px
                 카드 반경 18px · 버튼 높이 44px · pill 반경 980px
                 캔버스 #f5f5f7 · 중성색 #1d1d1f / #515154 / #6e6e73
   서체        : Pretendard (SF Pro 대체 · SIL OFL · 사내망 오프라인 내장)
   예외        : 표는 15px — 열이 많은 화면의 정보량을 지키기 위한 의도적 예외
   =================================================================== */

/* ---------- 웹폰트 (사내망 오프라인에서도 표시되도록 로컬 파일) ----------
   애플 SF Pro 는 애플 플랫폼 전용 라이선스라 웹앱에 실을 수 없어,
   SF Pro 의 한글 대응으로 만들어진 Pretendard 를 쓴다. (SIL OFL)
   한자·가나를 뺀 한글 11,172자 전체 + 라틴 서브셋이라 임직원 성명이 깨지지 않는다. */
@font-face {
  font-family: "Pretendard"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/Pretendard-Bold.woff2") format("woff2");
}
/* 되돌릴 때를 위해 남겨둔 명조 (현재 화면에서는 쓰지 않는다)
   @font-face { font-family:"NanumMyeongjo"; src:url("/fonts/NanumMyeongjo-Regular.woff2") format("woff2"); } */

:root {
  color-scheme: light;

  /* ---- 포인트 컬러 (PANTONE 534 C) ---- */
  --brand:        #1B365D;   /* 흰 배경 대비 11.8:1 */
  --brand-hover:  #142943;
  --brand-soft:   #eef2f8;   /* 아주 연한 배경 틴트 */
  --brand-line:   #c5d1e2;   /* 연한 경계선 */
  --on-brand:     #ffffff;   /* 브랜드색 위 글씨 (대비 12.1:1) */

  /* ---- 면 (애플 레퍼런스: canvas #f5f5f7 / surface #ffffff) ---- */
  --surface-1: #ffffff;
  --page:      #f5f5f7;

  /* ---- 잉크 (애플 중성 3단계) ---- */
  --text-primary:   #1d1d1f;
  --text-secondary: #515154;
  --text-muted:     #6e6e73;

  /* ---- 선 ---- */
  --grid:     #f0f0f2;
  --baseline: #d2d2d7;
  --border:   rgba(0, 0, 0, 0.08);

  /* ---- 상태색 (판정 표시용 — 브랜드색으로 대체 불가) ---- */
  --good:    #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical:#d03b3b;
  --success-text: #006300;
  --warning-text: #7a5400;
  --serious-text: #9c3d1c;

  /* ---- 차트 보조 (단일 계열은 브랜드색 사용) ---- */
  --series-1: var(--brand);
  --series-2: #eb6834;
  --series-3: #1baf7a;

  /* ---- 형태 (애플 레퍼런스 실측값) ---- */
  --radius:      8px;    /* 입력칸·작은 요소 */
  --radius-card: 18px;   /* 카드 — HIG 문서 카드값 */
  --pill:        980px;  /* 버튼 — apple.com CTA */
  --shadow:      0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  --shadow-flat: 0 1px 3px rgba(0,0,0,.06);

  /* ---- 서체 ---- */
  --font-title: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-body:  "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* ---- 표 전용 (의도적 예외 — 정보량 유지) ---- */
  --font-table: 15px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:        #4A7FC1;   /* 어두운 배경 대비 4.2:1 — 같은 색조의 밝은 단계 */
  --brand-hover:  #5A8FD0;
  --brand-soft:   #1c2634;
  --brand-line:   #33465e;
  --on-brand:     #0d1520;

  --surface-1: #1d1d1f;
  --page:      #000000;

  --text-primary:   #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted:     #86868b;

  --grid:     #2c2c2e;
  --baseline: #48484a;
  --border:   rgba(255, 255, 255, 0.12);

  --critical: #e66767;
  --success-text: #0ca30c;
  --warning-text: #ffce5c;
  --serious-text: #f0a582;

  --series-2: #d95926;
  --series-3: #199e70;
  --shadow:      0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --shadow-flat: 0 1px 3px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }

/* ---------- 제목 (한 서체 · 굵기와 크기로만 위계를 만든다) ---------- */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-title);
  word-break: keep-all;
}
h1 { font-weight: 600; letter-spacing: -0.5px; }
h2 { font-weight: 600; letter-spacing: -0.5px; }
h3 { font-weight: 600; letter-spacing: -0.2px; }

/* ---------- 로고 ---------- */
.logo-img { display: block; height: auto; }
/* 로고는 남색 단색이라 어두운 배경에서는 보이지 않는다 — 흰색으로 뒤집어 쓴다 */
:root[data-theme="dark"] .logo-img { filter: brightness(0) invert(1); opacity: .92; }

/* ---------- 로그인 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: var(--surface-1); border: 0; border-radius: var(--radius-card);
  padding: 44px 40px; width: 100%; max-width: 440px; box-shadow: var(--shadow);
}
.login-card .login-logo { width: 176px; margin-bottom: 30px; }
.login-card h1 { font-size: 28px; line-height: 32px; letter-spacing: 0.196px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.login-card .sub { color: var(--text-muted); font-size: 15px; line-height: 20px; letter-spacing: -0.224px; margin-bottom: 30px; }

/* ---------- 앱 레이아웃 ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; flex-shrink: 0; background: var(--surface-1);
  border-right: 1px solid var(--border); padding: 24px 14px; display: flex; flex-direction: column;
  /* 화면을 내려도 왼쪽 메뉴가 그 자리에 그대로 붙어 따라오게 한다. 메뉴 자체가 화면보다
     길어지면(메뉴 항목이 아주 많아지는 경우) 사이드바 안에서만 따로 스크롤된다. */
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.brand { padding: 0 10px 12px; }
/* 로고·제목 묶음 — 누르면 첫 화면으로 가므로 손가락 커서와 키보드 초점을 준다 */
.brand-home { cursor: pointer; border-radius: 10px; }
.brand-home:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.brand .brand-logo { width: 158px; margin-bottom: 14px; }
.brand .t {
  font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 22px;
  color: var(--text-primary); letter-spacing: -0.4px;
}
.brand .s { font-size: 13px; line-height: 18px; color: var(--text-muted); margin-top: 2px; letter-spacing: -0.08px; }
.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-group {
  /* 상위 메뉴 제목 — 작은 대문자 느낌의 라벨 (애플 문서 사이드바 방식) */
  /* 메뉴 글씨가 작다는 말씀에 한 단계씩 키움 (v1.45.1): 묶음 제목 11→12px, 항목 15→16px */
  font-size: 12px; color: var(--text-primary); padding: 24px 12px 7px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  position: relative;
}
/* 제목 위에 연한 구분선 (첫 그룹은 제외) */
.nav-group:not(:first-child)::before {
  content: ''; position: absolute; top: 12px; left: 12px; right: 12px;
  height: 1px; background: var(--border);
}
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; margin-left: 10px; border-radius: var(--radius); color: var(--text-primary);
  text-decoration: none; font-size: 16px; line-height: 22px; letter-spacing: -0.2px; cursor: pointer;
}
.nav a:hover { background: var(--brand-soft); color: var(--brand); }
.nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav a .pill {
  background: var(--critical); color: #fff; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: var(--pill); min-width: 21px; text-align: center;
  letter-spacing: 0;
}
.nav a.active .pill { background: var(--critical); color: #fff; }
.sidebar-foot { padding: 16px 12px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 18px; color: var(--text-muted); }
.sidebar-foot .who { color: var(--text-primary); font-weight: 600; font-size: 15px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- 상단 메뉴 (v1.48.0) ----------
   데스크톱은 상단 메뉴(상위 > 하위 펼침 목록). .app.top-layout 이 왼쪽 메뉴를 감추고 상단 막대를 보인다.
   폰(≤980px)은 예전 그대로(위 막대 + 아래에서 올라오는 메뉴 시트)라 아래 미디어 쿼리에서 되돌린다. */
.topnav { display: none; }
.app.top-layout { flex-direction: column; }
.app.top-layout .sidebar { display: none; }
.app.top-layout .topnav {
  display: block; position: sticky; top: 0; z-index: 30;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.topnav-row { display: flex; align-items: center; gap: 8px; padding: 0 20px; height: 64px; }
.topnav-brand { display: flex; align-items: center; margin-right: 12px; flex-shrink: 0; }
.topnav-brand .logo-img { width: 120px; }
/* overflow 를 주면 안 된다 — 스크롤 영역이 되어 펼침 목록(absolute)이 그 안에서 잘린다(미리보기에서 겪음).
   좁은 노트북은 아래 미디어 쿼리에서 글씨·여백을 줄여 맞춘다. */
.topnav-main { display: flex; gap: 10px; flex: 1; min-width: 0; }   /* 메뉴 사이를 더 띄움 (v1.48.1) */
@media (max-width: 1240px) {
  .topnav-btn { padding: 10px 10px; font-size: 15px; }
  .topnav-main { gap: 4px; }
  .topnav-brand .logo-img { width: 104px; }
  /* 그래도 한 줄에 안 들어가면 이름·단추 묶음이 둘째 줄(오른쪽 끝)로 내려간다 — 메뉴와 겹치지 않게 */
  .topnav-row { padding: 4px 14px; height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 0; }
  .topnav-main { flex: 1 0 auto; }   /* 메뉴 줄이 줄어들지 않아야 오른쪽 묶음이 내려간다 */
  .topnav-row .topnav-right { margin-left: auto; }
}
.topnav-item { position: relative; }
.topnav-btn {
  display: flex; align-items: center; gap: 5px; padding: 10px 16px; border-radius: 10px;
  font-size: 16px; font-weight: 600; color: var(--text-primary); background: transparent; border: 0;
  cursor: pointer; font-family: inherit; white-space: nowrap; letter-spacing: -0.2px;
}
a.topnav-btn { text-decoration: none; }
.topnav-btn { position: relative; }
/* "지금 여기" 표시(.on)는 밑줄, 마우스 올림·펼침은 바탕색 — 같은 모양이면 현재 묶음이 계속 눌린 것처럼 보인다 (v1.48.2) */
.topnav-item.on > .topnav-btn { color: var(--brand); }
.topnav-item.on > .topnav-btn::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  border-radius: 1px; background: var(--brand);
}
.topnav-item:hover > .topnav-btn, .topnav-item.open > .topnav-btn { background: var(--brand-soft); color: var(--brand); }
.topnav .pill {
  background: var(--critical); color: #fff; font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--pill); min-width: 20px; text-align: center; letter-spacing: 0;
}
/* 펼침 목록 — 열고 닫는 건 app.js 가 .open 으로만 한다(:hover 로도 열면 둘이 동시에 펼쳐진다, v1.48.1).
   상위 단추에 바로 붙여 마우스가 내려가는 길에 닫히지 않게 */
.topnav-drop {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 31;
  background: var(--surface-1); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
  padding: 8px; flex-direction: column; gap: 1px;
}
.topnav-item.open .topnav-drop { display: flex; }
.topnav-drop a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--text-primary);
  text-decoration: none; cursor: pointer; white-space: nowrap; letter-spacing: -0.2px;
}
.topnav-drop a:hover { background: var(--brand-soft); color: var(--brand); }
.topnav-drop a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.topnav-right { display: flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 14px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.topnav-right .who {
  font-weight: 600; color: var(--text-primary); background: none; border: 0; cursor: pointer;
  font-size: 15px; font-family: inherit; padding: 4px 6px; border-radius: 8px;
}
.topnav-right .who:hover { background: var(--brand-soft); color: var(--brand); }
/* 상단 막대의 단추는 본문 단추보다 작게 — 한 줄에 메뉴와 함께 들어가야 한다 */
.topnav-right .sub.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.app.top-layout .topbar { padding-top: 28px; }

.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 44px 40px 10px; border-bottom: 0; background: var(--page);
}
/* 제목은 애플의 section 토큰(40px/44px/600). 화면이 좁으면 자연스럽게 줄어든다. */
.topbar h2 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; }
.topbar .desc { font-size: 17px; line-height: 25px; color: var(--text-muted); margin-top: 10px; }
.content { padding: 22px 40px 80px; max-width: 1560px; }

/* ---------- 카드 (선 대신 아주 옅은 그림자 · 반경 18px) ---------- */
.card {
  background: var(--surface-1); border: 0;
  border-radius: var(--radius-card); padding: 28px 30px; margin-bottom: 20px;
  box-shadow: var(--shadow-flat);
}
.card > h3 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 6px; }
.card > .hint { font-size: 17px; line-height: 25px; color: var(--text-muted); margin-bottom: 20px; }
.card.tight { padding: 20px 22px; }

/* ---------- 통계 타일 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 20px; margin-bottom: 20px; }
.stat { background: var(--surface-1); border: 0; border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-flat); }
.stat .lbl { font-size: 15px; line-height: 20px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.stat .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stat .val {
  font-family: var(--font-body); font-size: 44px; line-height: 48px; font-weight: 600;
  margin-top: 10px; color: var(--text-primary); letter-spacing: -1px;
}
.stat .sub { font-size: 14px; line-height: 18px; color: var(--text-muted); letter-spacing: -0.224px; }
.stat.clickable { cursor: pointer; transition: box-shadow .18s ease; }
.stat.clickable:hover { box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.08); }

/* ---------- 차트 ---------- */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.bar-label { width: 176px; flex-shrink: 0; color: var(--text-secondary); text-align: right; }
.bar-track { flex: 1; background: var(--grid); border-radius: var(--pill); height: 16px; min-width: 40px; }
.bar-fill { height: 100%; border-radius: var(--pill); min-width: 2px; }
.bar-val { width: 58px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 폼 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 14px; line-height: 18px; letter-spacing: -0.224px; color: var(--text-secondary); font-weight: 600; }
.field .req { color: var(--critical); }
/* 메모처럼 긴 칸은 한 줄을 다 쓰게 한다 (칸이 한 줄뿐인 폰에서는 자동으로 무시된다) */
.form-grid .field.wide { grid-column: 1 / -1; }
/* 한 줄짜리 체크박스 (예: "이번 반기 거래 없음") */
.check-inline {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: -0.2px; color: var(--text-primary);
}
/*
 * 체크박스·라디오는 항상 18x18 로 고정한다 — 아래 `input, select, textarea` 규칙이 모든
 * <input>에 `width:100%; height:44px`를 입히는데, 체크박스에 별도 크기 지정이 없으면 이 규칙을
 * 그대로 물려받아 텍스트 입력칸만큼 거대해져 버린다("로그인 상태 유지" 체크박스가 화면을 꽉 채울
 * 만큼 커 보인다고 스크린샷으로 알려주신 문제 — v1.33.3). `.check-inline` 처럼 전용 클래스를
 * 씌운 체크박스뿐 아니라, 클래스 없이 그냥 `<input type="checkbox">`로만 쓴 곳(로그인 화면의
 * "로그인 상태 유지", 준법서약 설정의 "미서명 시 상신 차단" 등)도 항상 정상 크기가 되도록
 * type 선택자로 전역 적용한다.
 */
input[type=checkbox], input[type=radio] {
  width: 18px; height: 18px; margin: 0; padding: 0; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--baseline); background: var(--surface-1); accent-color: var(--brand);
  vertical-align: middle;
}
input:not([type=checkbox]):not([type=radio]), select, textarea {
  padding: 0 15px; height: 44px; border-radius: var(--radius); border: 1px solid var(--baseline);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 17px; letter-spacing: -0.374px; font-family: var(--font-body); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: 0;
  border-color: var(--brand);
}
textarea { resize: vertical; min-height: 88px; height: auto; padding: 12px 15px; line-height: 25px; }
input[type=file] { padding: 9px 12px; }
.help { font-size: 14px; line-height: 18px; letter-spacing: -0.224px; color: var(--text-muted); }

/* ---------- 버튼 (44px pill / 작은 버튼 36px pill) ---------- */
button {
  font-family: var(--font-body); font-size: 17px; letter-spacing: -0.374px; font-weight: 400;
  cursor: pointer; height: 44px; padding: 0 21px;
  border-radius: var(--pill); border: 1px solid transparent;
  background: var(--brand); color: var(--on-brand);
  transition: background .16s ease, opacity .16s ease;
}
button:hover { background: var(--brand-hover); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
button.ghost:hover { background: var(--brand-soft); }
button.sub { background: transparent; color: var(--text-secondary); border-color: var(--baseline); }
button.sub:hover { background: var(--page); color: var(--text-primary); }
button.danger { background: var(--critical); color: #fff; }
button.danger:hover { filter: brightness(1.08); background: var(--critical); }
/* 표 안의 삭제처럼 자주 보이지만 자주 누르지 않는 위험 버튼 — 빨간 채움 대신 테두리만 */
button.danger-outline { background: transparent; color: var(--critical); border-color: var(--critical); }
button.danger-outline:hover { background: var(--critical); color: #fff; }
.raw-line { white-space: pre-wrap; word-break: break-all; background: var(--page); border: 1px solid var(--grid);
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 22px; margin: 10px 0 14px; }
button.ok { background: var(--good); color: #fff; }
button.ok:hover { filter: brightness(1.08); background: var(--good); }
button.sm { height: 36px; padding: 0 15px; font-size: 14px; letter-spacing: -0.224px; }
/* 표 안 숫자를 클릭해 상세를 열 때 쓰는 링크 스타일 버튼 (연차 사용 갯수 등) */
button.link {
  height: auto; padding: 0; border: none; background: transparent; color: var(--brand);
  font-size: inherit; letter-spacing: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
button.link:hover { background: transparent; color: var(--brand-hover); }

/* 메뉴 관리 화면 — 드래그로 순서 옮기기 (⠿ 핸들) */
.menu-drag-handle { cursor: grab; text-align: center; color: var(--text-secondary); font-size: 16px; user-select: none; }
.menu-drag-handle:active { cursor: grabbing; }
.menu-row.dragging { opacity: 0.4; }
.menu-row.drag-over { box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.filters .field { min-width: 168px; }

/* ---------- 표 ----------
   본문은 17px 이지만 표만 15px 로 둔다. 열이 많은 화면(거래내역 리뷰·결재함)에서
   한 화면에 보이는 줄 수를 지키기 위한 의도적인 예외다. */
.table-wrap { overflow: auto; border: 0; border-radius: var(--radius-card); max-height: 660px; box-shadow: var(--shadow-flat); background: var(--surface-1); }
/* 결재 상세 팝업 안에 들어가는 작은 요약 표(받는 사람 목록 등) 전용.
   .table-wrap 과 똑같이 스크롤 박스로 감싸지만, 폭 좁은 화면에서 표를 카드로
   바꾸는 .table-wrap 의 @media (max-width:760px) 규칙은 일부러 타지 않는다 —
   그 규칙은 overflow 를 visible 로 바꾸는데, 여기처럼 max-height 로 팝업 안에
   가둬 스크롤시키는 곳에 적용되면 표 내용이 박스 밖으로 넘쳐 흘러 바로 아래
   내용(상신일시·결재 진행 등)과 겹쳐 보이는 버그가 있었다(v1.31.1). */
.mini-table-wrap { overflow: auto; border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-flat); background: var(--surface-1); }
.mini-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--font-table); font-family: var(--font-body); letter-spacing: -0.24px; }
table { width: 100%; border-collapse: collapse; font-size: var(--font-table); font-family: var(--font-body); letter-spacing: -0.24px; }
th {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--baseline);
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-1); z-index: 1;
  font-size: 13px; letter-spacing: 0;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--grid); vertical-align: middle; line-height: 21px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--brand-soft); }
tr.row-violation td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--text-muted); padding: 44px 12px; font-size: 17px; }

/* ---------- 결재 상신의 items 형 필드 (받는 사람 여러 명을 표로 입력) ---------- */
.items-field .items-table td { padding: 6px 8px; }
.items-field .items-table input { padding: 7px 9px; font-size: 14px; min-height: auto; }
.items-field .items-table th { white-space: nowrap; }
.items-field .items-summary { margin-top: 8px; }
.items-field .items-alert:empty { display: none; }
/* 표 높이 제한은 PC 에서만 (v1.62.1). 예전엔 style 속성으로 max-height:360px 을 박아 두어, 폰에서 표가 카드로 바뀌어
   길어져도 높이가 360px 에 묶인 채 넘쳐서 첨부파일·상신 버튼·신청 내역 위로 겹쳐 보였다(하나 님 스크린샷). */
.items-field .items-wrap { max-height: 360px; }
@media (max-width: 760px) {
  .items-field .items-wrap { max-height: none; overflow: visible; }
  .items-field .items-table td input { flex: 1 1 160px; min-width: 0; width: auto; min-height: 42px; font-size: 16px; }
  .items-field .items-table td input[type=date] { -webkit-appearance: none; appearance: none; background: var(--surface-1); text-align: left; }
}

/* ---------- 배지 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: var(--pill); font-size: 13px; font-weight: 600; white-space: nowrap;
  letter-spacing: 0; font-family: var(--font-body);
}
.badge.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--success-text); }
.badge.critical { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical); }
.badge.warning { background: color-mix(in srgb, var(--warning) 26%, transparent); color: var(--warning-text); }
.badge.serious { background: color-mix(in srgb, var(--serious) 20%, transparent); color: var(--serious-text); }
.badge.neutral { background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-secondary); }
.badge.info { background: var(--brand-soft); color: var(--brand); }

/* ---------- 알림 (배경을 채우지 않고 왼쪽 색선만 — 글이 주인공) ---------- */
/* 안내 상자 (v1.59.0) — 로그인 화면 안내 카드와 같은 모양: 연한 색 바탕 + 얇은 테두리 + 동그란 아이콘.
   예전에는 흰 바탕 + 왼쪽 4px 색 줄 + 글자 "!" 였다. */
.alert {
  border-radius: 14px; padding: 16px 20px 16px 16px; font-size: 17px; line-height: 25px;
  margin-bottom: 20px; background: var(--brand-soft); border: 1px solid var(--brand-line); box-shadow: none;
  display: flex; gap: 12px; align-items: flex-start; color: var(--text-primary);
}
.alert .ico { flex: 0 0 34px; height: 34px; margin-top: -5px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-1); color: var(--brand); box-shadow: 0 1px 4px rgba(27, 54, 93, .14); font-weight: 700; }
.alert .ico svg { width: 18px; height: 18px; }
.alert .alert-body { flex: 1; min-width: 0; }
.alert.err   { background: rgba(208, 59, 59, .06); border-color: rgba(208, 59, 59, .26); }
.alert.err .ico { color: var(--critical); }
.alert.warn  { background: rgba(178, 106, 0, .07); border-color: rgba(178, 106, 0, .24); }
.alert.warn .ico { color: #b26a00; }
.alert.good  { background: rgba(12, 163, 12, .06); border-color: rgba(12, 163, 12, .24); }
.alert.good .ico { color: var(--good); }
.alert b, .alert strong { font-weight: 600; }
.alert ul { margin: 10px 0 0; padding-left: 20px; }
.alert li { padding: 3px 0; }

#toast-host { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 900; }
.toast {
  background: var(--surface-1); border: 1px solid var(--grid);
  border-radius: 14px; padding: 12px 18px 12px 12px; font-size: 15px; line-height: 21px;
  box-shadow: var(--shadow); max-width: 420px; display: flex; gap: 10px; align-items: center;
  animation: slideIn .18s ease-out;
}
/* 알림 팝업도 안내 상자와 같은 동그란 아이콘 (v1.59.0) */
.toast .t-ic { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); }
.toast .t-ic svg { width: 17px; height: 17px; }
.toast.err .t-ic { background: rgba(208, 59, 59, .1); color: var(--critical); }
.toast.good .t-ic { background: rgba(12, 163, 12, .1); color: var(--good); }
.toast.warn .t-ic { background: rgba(178, 106, 0, .1); color: #b26a00; }
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- 모달 ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex;
  align-items: center; justify-content: center; padding: 20px; z-index: 800;
  backdrop-filter: saturate(180%) blur(12px);
}
.modal {
  background: var(--surface-1); border-radius: var(--radius-card); border: 0;
  padding: 32px 34px; width: 100%; max-width: 600px; max-height: 88vh; overflow: auto;
  box-shadow: 0 24px 68px rgba(0,0,0,.24);
}
.modal.wide { max-width: 960px; }
.modal h3 { font-size: 28px; line-height: 32px; letter-spacing: 0.196px; font-weight: 600; margin-bottom: 8px; }
.modal .hint { font-size: 17px; line-height: 25px; color: var(--text-muted); margin-bottom: 24px; }

/* ---------- 기타 ---------- */
.step-head { display: flex; align-items: center; gap: 11px; font-size: 24px; line-height: 30px; margin-bottom: 8px;
  font-family: var(--font-title); font-weight: 600; letter-spacing: -0.2px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--brand); color: var(--on-brand);
  font-size: 15px; font-weight: 600; flex-shrink: 0; font-family: var(--font-body); letter-spacing: 0;
}
.spinner {
  width: 17px; height: 17px; border: 2px solid var(--baseline); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { color: var(--text-muted); font-size: 17px; padding: 40px; text-align: center; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; letter-spacing: 0; }
/* 준법서약서 서명 패드 — 항상 흰 배경에 검은 선으로, 어두운 테마에서도 서명이 또렷하게 보이게 한다 */
.sig-pad-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.sig-pad { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; background: #fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.tabs button {
  background: transparent; color: var(--text-muted); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 0 16px; height: 46px; font-weight: 400; font-size: 17px;
}
.tabs button:hover { background: transparent; color: var(--text-primary); }
.tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.kv { display: grid; grid-template-columns: 168px 1fr; gap: 12px 18px; font-size: 17px; line-height: 25px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; }
.inline-edit {
  border: 1px solid var(--grid); background: var(--surface-1); padding: 0 10px;
  height: 34px; font-size: 15px; border-radius: var(--radius); width: auto;
}
.inline-edit:hover { border-color: var(--baseline); }
/* 표 칸 너비 조절 손잡이 (enableColumnResize) — th 는 이미 sticky 라 absolute 기준이 된다 */
.col-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; user-select: none; }
.col-resize:hover, .col-resizing .col-resize:hover { background: var(--baseline); }
body.col-resizing { cursor: col-resize; user-select: none; }
.warn-cell { color: var(--serious-text); font-size: 13px; }
.count-pill { font-size: 14px; color: var(--text-muted); margin-left: 8px; letter-spacing: -0.224px; }

/* ---------- 결재 진행 트랙 ---------- */
.track-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; min-width: 0; }
.track {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 15px; height: 36px;
  border-radius: var(--pill); font-size: 14px; font-weight: 500; border: 0;
  letter-spacing: -0.224px; white-space: nowrap; flex-shrink: 0;
  color: var(--brand); background: var(--brand-soft);
}
.track b { font-weight: 600; font-size: 12px; opacity: .8; }
.track.track-done { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--success-text); }
.track.track-now  { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning-text); }
.track.track-wait { color: var(--text-muted); background: var(--grid); }
.track-arrow { color: var(--text-muted); font-size: 15px; }

/* 결재 이력 타임라인 */
.timeline { display: flex; flex-direction: column; gap: 16px; margin: 10px 0 2px; }
.tl-item { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 21px; }
.tl-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff;
}
.tl-dot.ok { background: var(--good); }
.tl-dot.no { background: var(--critical); }
.tl-dot.wait { background: var(--baseline); color: var(--text-secondary); }
.tl-body { flex: 1; }
.tl-body .who { font-weight: 600; }
.tl-body .when { color: var(--text-muted); font-size: 14px; }
.tl-body .cmt { color: var(--text-secondary); margin-top: 3px; }

/* ---------- 공유용 접속 주소 (한 줄 띠 + 접히는 상세) ---------- */
.share-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface-1); border-radius: var(--radius-card);
  padding: 14px 20px; margin-bottom: 20px; box-shadow: var(--shadow-flat);
}
.share-bar .lb {
  font-size: 14px; color: var(--text-muted); font-weight: 600;
  letter-spacing: -0.224px; flex-shrink: 0;
}
.share-bar .share-url { height: 40px; font-size: 16px; }
.share-detail {
  background: var(--surface-1); border-radius: var(--radius-card);
  padding: 22px 26px; margin: -8px 0 20px; box-shadow: var(--shadow-flat);
}

/* ---------- 휴대폰 앱처럼 설치 (PWA) 카드 ---------- */
.pwa-card { margin-bottom: 20px; }
.pwa-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pwa-row .help { margin-top: 2px; }
.pwa-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) { .pwa-row { flex-direction: column; align-items: stretch; } .pwa-btns { justify-content: flex-end; } }

/* ---------- 공유용 접속 주소 카드 (설정 화면 등에서 계속 사용) ---------- */
.share-card {
  background: var(--surface-1); border: 0;
  border-radius: var(--radius-card); padding: 28px 30px; margin-bottom: 20px;
  box-shadow: var(--shadow-flat);
}
.share-card h3 { font-size: 28px; line-height: 32px; letter-spacing: 0.196px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.share-card .hint { font-size: 17px; line-height: 25px; color: var(--text-muted); margin-bottom: 20px; }
.share-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.share-row .lb { font-size: 14px; color: var(--text-muted); width: 150px; flex-shrink: 0; font-weight: 600; line-height: 18px; letter-spacing: -0.224px; }
.share-url {
  flex: 1; min-width: 240px; background: var(--surface-1); border: 1px solid var(--baseline);
  border-radius: var(--radius); padding: 0 15px; height: 44px; display: flex; align-items: center;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 17px; font-weight: 600; color: var(--brand); word-break: break-all; letter-spacing: 0;
}
.share-row button { flex-shrink: 0; }

/* =====================================================================
   휴대폰·태블릿
   대표이사님이 외부에서 폰으로 결재하시는 경우가 실제 용도이므로,
   "로그인 → 결재함 → 승인" 경로가 폰에서 편해야 한다.
   ===================================================================== */

/* 메뉴 접기 버튼·바닥 시트·백드롭 — 넓은 화면에서는 쓰지 않는다 */
.nav-toggle { display: none; }
.bottom-tabs { display: none; }
.nav-backdrop { display: none; }
.nav-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* 대시보드 블록 순서를 화면 크기에 따라 바꿀 수 있게 */
.dash { display: flex; flex-direction: column; }

@media (max-width: 980px) {
  .app { flex-direction: column; }
  /* 폰에서는 상단 메뉴 대신 예전 그대로 — 상단 막대를 감추고 .sidebar(폰에서는 위 막대 + 메뉴 시트)를 되살린다 */
  .app.top-layout .topnav { display: none; }
  .app.top-layout .sidebar { display: flex; }
  .sidebar {
    width: 100%; border-right: none; border-bottom: 1px solid var(--border);
    padding: 12px 14px 10px;
    /* 스크롤을 내려도 메뉴 버튼이 따라오게 — 폰에서는 위쪽 좁은 막대만 붙어있으면 되므로
       데스크톱용 100vh 높이는 여기서 다시 풀어준다 (풀어주지 않으면 이 막대가 화면 전체
       높이를 차지해버려 본문이 그만큼 아래로 밀려 보인다). */
    position: sticky; top: 0; z-index: 20; height: auto; overflow-y: visible; align-self: stretch;
  }

  /* 로고·제목 줄이고, 메뉴 버튼을 오른쪽에 둔다 */
  .brand { padding: 0; display: flex; align-items: center; gap: 12px; }
  /* 폰에서는 로고+제목이 한 줄로 붙고, 남은 자리를 채워 메뉴 버튼을 오른쪽으로 밀어낸다 */
  .brand-home { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
  .brand .brand-logo { width: 104px; margin: 0; flex-shrink: 0; }
  .brand .t { font-size: 15px; line-height: 19px; }
  .brand .s { display: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; flex-shrink: 0;
    height: 40px; padding: 0 16px; font-size: 15px;
    background: var(--brand-soft); color: var(--brand); border: 0;
    border-radius: var(--pill); font-weight: 600;
  }
  .nav-toggle:hover { background: var(--brand-soft); }

  /* ---- 메뉴는 아래에서 올라오는 시트로 ----
     예전에는 메뉴가 알약 모양으로 쭉 나열되어 어디가 어디인지 알기 어려웠다.
     화면 아래에서 올라오는 목록으로 바꾸고, 상위 구분(준법감시·반기 리뷰 등)을 되살린다. */
  .nav-sheet { display: none; }
  .sidebar.open .nav-sheet {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    max-height: 82vh; overflow-y: auto;
    background: var(--surface-1);
    border-radius: 20px 20px 0 0;
    padding: 6px 10px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 44px rgba(0,0,0,.28);
  }
  /* 시트 맨 위 손잡이 */
  .sidebar.open .nav-sheet::before {
    content: ''; display: block; width: 42px; height: 4px; margin: 8px auto 4px;
    border-radius: 2px; background: var(--baseline);
  }
  .sidebar.open .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(0, 0, 0, .42);
  }
  .sidebar.open .nav { display: block; }

  /* 상위 구분을 다시 보여준다 */
  .nav-group { display: block; }
  .sidebar.open .nav-group {
    padding: 18px 12px 6px; font-size: 12px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-primary); font-weight: 700;
  }
  .sidebar.open .nav-group:not(:first-child)::before {
    top: 8px;
  }
  .sidebar.open .nav a {
    background: transparent; border-radius: 10px;
    padding: 14px 12px; margin-left: 10px; font-size: 17px; line-height: 22px;
    border-bottom: 1px solid var(--grid);
  }
  .sidebar.open .nav a:last-child { border-bottom: 0; }
  .sidebar.open .nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
  .sidebar.open .sidebar-foot {
    display: block; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
  }

  /* 하단 고정 메뉴바(.bottom-tabs)에 내용이 가려지지 않도록 아래 여백을 그만큼 더 준다 */
  .content { padding: 16px 16px calc(76px + env(safe-area-inset-bottom, 0px)); max-width: 100%; }
  .topbar { padding: 18px 16px 4px; }
  .topbar h2 { font-size: 26px; }
  .topbar .desc { font-size: 15px; line-height: 21px; margin-top: 6px; }
  .bar-label { width: 116px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 12px; }
  .card, .stat, .alert, .share-card, .share-detail { padding: 18px 16px; }
  /* 안내 상자·안내 문구는 PC 기준 17px 그대로라 폰에서 화면을 다 덮었다(하나 님 제보, v1.44.3).
     폰에서만 한 단계 줄인다 — 본문 입력칸·표 글씨는 그대로 두고 "읽고 넘어가는 글"만. */
  .alert { font-size: 14px; line-height: 20px; gap: 10px; padding: 14px 14px 14px 12px; }
  .alert .ico { flex-basis: 30px; height: 30px; margin-top: -5px; }
  .alert ul { margin-top: 6px; }
  .hint, .card > .hint, .modal .hint, .share-card .hint { font-size: 14px; line-height: 20px; margin-bottom: 14px; }
  .help { font-size: 13px; line-height: 17px; }
  .card > h3, .share-card h3 { font-size: 21px; line-height: 26px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .stat .val { font-size: 34px; line-height: 38px; }
  .modal { padding: 22px 18px; border-radius: 14px; max-height: 92vh; }
  .modal h3 { font-size: 21px; line-height: 26px; }
  .share-bar { flex-direction: column; align-items: stretch; }
  .share-bar .share-url { min-width: 0; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .btn-row button { flex: 1 1 auto; }

  /* ---- 대시보드 순서 ----
     폰에서는 "지금 처리할 것"이 맨 위에 와야 한다 — 지표(dash-tiles)가 1번은 그대로 두고,
     v1.33.0에서 새로 생긴 "내가 결재할 건" 통합 목록(dash-queue, 실제로 바로 처리할 수 있는
     화면)을 지표 바로 다음, 경고 알림보다도 위로 올렸다.
     (공유 주소 블록은 v1.49.0 에 Settings 로 옮겨 가 여기 없다.) */
  .dash-tiles   { order: 1; }
  .dash-queue   { order: 2; } /* "내가 결재할 건" 통합 목록 (v1.33.0) */
  .dash-alerts  { order: 3; }
  .dash-recent  { order: 4; }
  .dash-monthly { order: 5; }
  .dash-line    { order: 6; }
  .dash-forms   { order: 6; } /* 결재선 카드 바로 다음 — 순서는 문서상 순서로 자연히 정해진다 */

  /* ---- 하단 고정 메뉴바 (Bottom Tab Bar, v1.29.5) ----
     "휴가신청·주식거래 승인처럼 자주 쓰는 화면에 바로 갈 수 있게" 해달라는 요청으로 추가.
     데스크톱에는 사이드바가 이미 있어 필요 없으므로 이 폰 전용 media query 안에서만 보인다. */
  .bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    /* 남색(브랜드 색) 배경 — 하나 님 요청으로 흰 배경에서 변경 (v1.29.7) */
    background: var(--brand); border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    /* iOS Safari에서 스크롤(특히 관성 스크롤) 중에 position:fixed 요소가 화면에 그대로
       고정되지 못하고 본문과 함께 잠깐 따라 움직이다가 스크롤이 멈춰야 제자리로 돌아오는
       고질적인 렌더링 버그가 있다 — "스크롤을 내리면 하단바가 고정이 안 되고 같이
       움직인다"고 하나 님이 스크린샷으로 알려주신 문제가 정확히 이 증상이다. 이 요소를
       별도의 GPU 합성 레이어로 강제 승격시키면(하드웨어 가속) 브라우저가 스크롤과 별개로
       화면에 고정해서 그려주므로 더 이상 본문을 따라 움직이지 않는다 — 웹에서 널리 쓰이는
       표준적인 우회 방법이다. */
    transform: translateZ(0); -webkit-transform: translateZ(0);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    will-change: transform;
  }
  .bottom-tabs a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 1px; border-radius: 10px; color: rgba(255, 255, 255, 0.62); text-decoration: none;
    font-size: 10.5px; line-height: 13px; text-align: center; cursor: pointer; min-width: 0;
  }
  .bottom-tabs a .bt-icon { position: relative; display: inline-flex; }
  .bottom-tabs a svg { width: 20px; height: 20px; }
  .bottom-tabs a.active { color: #ffffff; font-weight: 600; }
  .bottom-tabs a .pill {
    position: absolute; top: -6px; right: -10px; min-width: 15px; height: 15px;
    padding: 0 3px; border-radius: 8px; background: var(--critical); color: #fff;
    border: 1.5px solid var(--brand);
    font-size: 10px; line-height: 15px; text-align: center;
  }
}

/* ---------- 좁은 화면에서는 표를 카드로 ----------
   열이 4~5개인 표는 폰 너비에 들어가지 않아 글자가 한 자씩 쪼개지고
   버튼이 화면 밖으로 밀려난다. 한 줄(tr)을 카드 하나로 쌓아 보여준다.
   각 칸의 열 이름은 views.js 의 labelTableCells() 가 data-l 로 붙여둔다. */
@media (max-width: 760px) {
  .table-wrap {
    overflow: visible; max-height: none;
    background: transparent; box-shadow: none; border-radius: 0;
  }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr {
    background: var(--surface-1); border-radius: var(--radius-card);
    box-shadow: var(--shadow-flat); padding: 14px 16px; margin-bottom: 12px;
  }
  .table-wrap tbody tr:hover { background: var(--surface-1); }
  /* 칸 이름과 값의 경계가 흐리다는 제보(v1.44.5) — 칸마다 얇은 구분선, 칸 이름은 굵게·폭 고정,
     값과 세로 가운데 맞춤. 배지(사용·초기PW 등)가 있는 줄도 이름과 같은 높이에 선다. */
  .table-wrap td {
    border: 0; padding: 9px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    text-align: left; white-space: normal; word-break: break-word;
  }
  .table-wrap td + td { border-top: 1px solid var(--border); }
  .table-wrap td::before {
    content: attr(data-l);
    flex: 0 0 88px; max-width: 34%;
    color: var(--text-secondary); font-size: 13px; line-height: 18px; font-weight: 600;
  }
  /* 직원 목록처럼 첫 칸이 "누구"인 표는 첫 칸을 카드 제목으로 쓴다 */
  .card-head-first .table-wrap td:first-child { font-size: 18px; font-weight: 700; padding: 2px 0 10px; }
  .card-head-first .table-wrap td:first-child::before { display: none; }
  /* 열 이름이 없는 칸(버튼 칸 등)은 이름 자리를 비우고 폭을 다 쓴다 */
  .table-wrap td[data-l=""]::before { display: none; }
  .table-wrap td[data-l=""] { padding-top: 10px; }
  .table-wrap td[data-l=""] .btn-row,
  .table-wrap td[data-l=""] > button { width: 100%; }
  .table-wrap td.num { text-align: left; }
  /* 위반 표시는 왼쪽 선 대신 카드 전체 왼쪽 테두리로 */
  .table-wrap tr.row-violation { box-shadow: inset 4px 0 0 var(--critical), var(--shadow-flat); }
  .table-wrap tr.row-violation td:first-child { box-shadow: none; }
  /* 카드 안 버튼은 손가락으로 누를 수 있게 */
  .table-wrap tbody button { min-height: 40px; }

  /* 결재 창에서 승인·반려 버튼을 아래에 고정한다.
     내용이 길면 버튼이 한참 아래로 밀려나는데, 폰에서 가장 자주 누르는 버튼이라
     스크롤하지 않고 바로 누를 수 있어야 한다. */
  .modal .btn-row {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--surface-1);
    margin: 18px -18px 0; padding: 14px 18px;
    border-top: 1px solid var(--border);
  }
  .modal .btn-row button { flex: 1 1 40%; min-height: 46px; }
}

/* 목표 달성률 막대 (인사평가 OKR, v1.35.0)
   숫자만으로는 한눈에 안 들어와서 폭으로도 보여준다. 표 안에서 쓰이므로 높이를 낮게 잡고,
   값이 0%일 때도 회색 바탕은 그대로 보이게 둔다. */
.okr-bar { margin-top: 3px; height: 5px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.okr-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--brand);
  transition: width .2s ease; }

/* 목표 상세 팝업의 지표·하위목표 줄 (v1.46.2) — 표 대신 한 줄 카드 */
.okr-items { display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; }
.okr-item { padding: 10px 12px; }
.okr-item + .okr-item { border-top: 1px solid var(--border); }
.okr-item-head { display: flex; align-items: flex-start; gap: 8px; }
.okr-item-head .badge { flex: none; }
.okr-item-name { flex: 1; min-width: 0; font-weight: 500; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.okr-item-pct { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.okr-item .okr-bar { margin: 6px 0 4px; }

/* 1:1 기록에서 남이 쓴 칸을 읽기 전용으로 보여줄 때 (v1.36.0)
   입력칸처럼 보이되 눌리지 않게, 줄바꿈은 그대로 살린다. */
.ro-note { white-space: pre-wrap; padding: 10px 12px; border-radius: 8px; min-height: 44px;
  background: color-mix(in srgb, var(--text-muted) 8%, transparent); }

/* ---- OKR 나무 목록 · 진행 기록 (v1.37.0) ---- */
tr.okr-root > td:first-child { font-weight: 600; }
tr.okr-kid > td { background: color-mix(in srgb, var(--panel) 92%, var(--text) 8%); }
tr.okr-ctx > td:first-child { opacity: .72; }
.okr-ind { display: inline-block; color: var(--text-muted); }
.okr-ind i { font-style: normal; }
button.linkish {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--link, #1a5fd0);
  text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
button.linkish:hover { opacity: .75; }
.okr-ci {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px;
}
.okr-ci-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.okr-ci-head .help { margin-left: auto; }
.okr-ci-note { margin-top: 6px; white-space: pre-wrap; }
.okr-ci-blk { margin-top: 6px; font-size: .92em; color: var(--text-muted); }
.okr-ci-form { margin-bottom: 10px; }

/* ---- 360 리뷰 자체 진행 (양식 · 배정 · 작성) — v1.38.0 ---- */
.tplq {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.tplq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tplq-head > b { min-width: 20px; color: var(--text-muted); }
.tplq-head .inline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pick-list {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; margin-top: 8px;
}
label.pick {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
label.pick:hover { background: color-mix(in srgb, var(--panel) 88%, var(--text) 12%); }
label.pick .help { margin-left: auto; }
label.pick.sm { display: inline-flex; padding: 4px 8px; }
.wq { border-top: 1px solid var(--border); padding: 12px 0; }
.wq:first-child { border-top: 0; }
.wq-t { font-weight: 600; }
.wq-t .req { color: var(--danger, #c0392b); }
.wq-scale { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.wq textarea { width: 100%; }

/* 카드 제목 옆 버튼 (v1.47.0 목표 추가) */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-head h3 { margin: 0; }

/* 목표 입력 팝업의 지표 줄 (v1.47.0) — 이름 · 단위 · 시작 · 현재 · 목표 · 지우기 */
.okr-mhead, .okr-mrow { display: grid; grid-template-columns: minmax(0, 2.4fr) 96px repeat(3, minmax(0, 1fr)) 32px;
  gap: 6px; align-items: center; }
.okr-mhead { margin: 4px 0 2px; }
.okr-mrow { margin-bottom: 6px; }
.okr-mrow input, .okr-mrow select { min-width: 0; width: 100%; }
@media (max-width: 640px) {
  /* 폰에서는 첫 줄에 이름·지우기, 둘째 줄에 단위·시작·현재·목표 (칸 이름은 입력칸 안내 글로) */
  .okr-mhead { display: none; }
  .okr-mrow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 0; border-top: 1px solid var(--border); }
  .okr-mrow [data-f="name"] { grid-column: 1 / 4; grid-row: 1; }
  .okr-mrow [data-mdel] { grid-column: 4; grid-row: 1; justify-self: end; }
}

/* Microsoft 로그인 버튼 (v1.50.0) — 네 칸짜리 로고는 그림 파일 없이 CSS 로 */
.login-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--text-muted); font-size: 13px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.ms-logo { display: inline-grid; grid-template-columns: 9px 9px; gap: 2px; }
.ms-logo i { width: 9px; height: 9px; display: block; }
.ms-logo i:nth-child(1) { background: #f25022; } .ms-logo i:nth-child(2) { background: #7fba00; }
.ms-logo i:nth-child(3) { background: #00a4ef; } .ms-logo i:nth-child(4) { background: #ffb900; }

/* 평가 결과 상세 — 문항별로 [문항 · 가중치] / [점수 막대 · 등급] / [서술] (v1.51.1) */
.hr-review { margin-top: 10px; }
.hr-review-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); font-size: 16px; }
.hr-reviewer { color: var(--text-muted); font-size: 14px; }
.hr-review-total { margin-left: auto; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.hr-q { padding: 14px 0; }
.hr-q + .hr-q { border-top: 1px solid var(--grid); }
.hr-q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hr-q-title { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.hr-q-weight { flex: none; font-size: 12px; color: var(--text-muted); background: var(--grid);
  padding: 2px 8px; border-radius: var(--pill); }
.hr-q-score { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hr-q-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hr-q-max { font-size: 13px; color: var(--text-muted); }
.hr-q-bar { width: 96px; height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.hr-q-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.hr-q-score.hi .hr-q-bar > span { background: var(--good); }
.hr-q-score.lo .hr-q-bar > span { background: var(--warning); }
.hr-q-level { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: var(--pill);
  background: var(--brand-soft); color: var(--brand); }
.hr-q-text { margin-top: 10px; padding: 10px 14px; background: var(--page); border-radius: 10px;
  white-space: pre-wrap; font-size: 15px; line-height: 1.65; color: var(--text-primary); }

/* 시스템 이름·로고 — 마크는 public/img/app-mark.svg */
.app-mark { display: block; flex-shrink: 0; border-radius: 22%; }
.app-word { font-weight: 800; letter-spacing: .14em; color: var(--brand); }
.topnav-brand { gap: 9px; }
.topnav-brand .app-word { font-size: 21px; line-height: 1; }
.app-login { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.app-login h1 { font-size: 34px; line-height: 1; letter-spacing: .14em; font-weight: 800; color: var(--brand); margin: 0; }
.app-full { font-size: 13px; color: var(--text-muted); margin-top: 6px; letter-spacing: .01em; }
.login-card .company-logo { width: 96px; margin: 22px 0 0; opacity: .75; }
/* .brand .t 의 자간·색보다 앞서도록 한 단계 더 구체적으로 */
.brand .t.app-word { font-size: 19px; letter-spacing: .14em; color: var(--brand); font-weight: 800; }
.brand .brand-logo.app-mark { width: 36px; height: 36px; margin-bottom: 10px; }
@media (max-width: 980px) {
  .brand .brand-logo.app-mark { width: 30px; height: 30px; margin: 0; }
  .brand .t.app-word { font-size: 17px; }
}

/* RAMP 첫 화면 배너 (v1.54.0, 시안 B) — 흰 카드 · 오른쪽 하늘색 사선 면(로고의 경사로) · 인사말 · 오늘 할 일 숫자 세 칸 */
.topbar.topbar-hidden { display: none; }
.app-hero {
  position: relative; overflow: hidden; margin: 8px 0 22px; padding: 28px 34px;
  border-radius: 22px; background: var(--surface-1); box-shadow: var(--shadow-flat);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
/* 사선 면 두 겹 — 오른쪽 위로 올라가는 경사로 */
.app-hero::before, .app-hero::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; }
.app-hero::before { width: 48%; background: linear-gradient(115deg, transparent 0 30%, color-mix(in srgb, var(--brand) 7%, transparent) 30% 100%); }
.app-hero::after  { width: 30%; background: linear-gradient(115deg, transparent 0 30%, color-mix(in srgb, #8FB8E8 22%, transparent) 30% 100%); }
.app-hero > * { position: relative; z-index: 1; }
.app-hero-body { min-width: 0; }
.app-hero-co { font-size: 12px; font-weight: 700; letter-spacing: .28em; color: #4A7FC1; }
.app-hero-title { display: flex; align-items: center; gap: 14px; margin: 10px 0 6px; }
.app-hero-title img { border-radius: 12px; flex-shrink: 0; }
.app-hero-name { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: .18em; color: var(--brand); }
.app-hero-full { font-size: 14.5px; color: var(--text-muted); letter-spacing: .02em; }
.app-hero-full b { color: var(--brand); font-weight: 800; }
.app-hero-hi { margin-top: 14px; font-size: 15.5px; color: var(--text-primary); }
.app-hero-hi b { color: var(--brand); }
.app-hero-kpis { display: flex; gap: 12px; flex-shrink: 0; }
.app-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 124px; height: auto;
  padding: 14px 18px; border-radius: 16px; border: 0; cursor: pointer; font-family: inherit; text-align: left;
  background: var(--surface-1); box-shadow: 0 2px 12px rgba(27, 54, 93, .10); color: var(--text-primary);
  transition: transform .12s ease, box-shadow .12s ease;
}
.app-kpi:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(27, 54, 93, .16); }
.app-kpi[disabled] { cursor: default; opacity: 1; }
.app-kpi small { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.app-kpi b { font-size: 30px; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.app-kpi b span { font-size: 14px; font-weight: 600; margin-left: 2px; color: var(--text-muted); }
.app-kpi.hot b { color: var(--critical); }
@media (max-width: 980px) {
  .app-hero { flex-direction: column; align-items: stretch; gap: 16px; margin: 4px 0 16px; padding: 20px; border-radius: 18px; }
  .app-hero::before { width: 70%; } .app-hero::after { width: 42%; }
  .app-hero-name { font-size: 32px; }
  .app-hero-title img { width: 36px; height: 36px; border-radius: 9px; }
  .app-hero-full { font-size: 12.5px; }
  .app-hero-hi { font-size: 14px; margin-top: 10px; }
  .app-hero-kpis { gap: 8px; }
  .app-kpi { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; }
  .app-kpi b { font-size: 22px; }
  .app-kpi small { font-size: 11.5px; }
}

/* 결재 상세 팝업 구역 (v1.54.1) — 머리 / RIMS 요약 / 신청 내용 / 결재 진행 을 칸으로 나눈다 */
.fd-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.fd-kind { font-size: 13px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fd-title { margin: 6px 0 8px; font-size: 20px; line-height: 1.35; }
.fd-sec { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--page); }
.fd-sec-h { font-size: 12.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; margin-bottom: 8px; }
.fd-kv { font-size: 15px; line-height: 22px; gap: 0 16px; grid-template-columns: 110px 1fr; }
.fd-kv dt, .fd-kv dd { padding: 8px 0; border-top: 1px solid var(--border); }
.fd-kv dt:first-of-type, .fd-kv dd:first-of-type { border-top: 0; }
.fd-kv dd { white-space: pre-wrap; }
.fd-sec .timeline { margin: 0; }
.fd-rims { margin-top: 4px; padding: 16px; border-radius: 14px; background: var(--brand-soft); }
.fd-rims-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fd-rims-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.fd-rims-amt { font-size: 26px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fd-rims-amt span { font-size: 15px; font-weight: 600; margin-left: 2px; }
.fd-rims-no { font-size: 12.5px; color: var(--text-muted); text-align: right; }
.fd-rims-link { display: flex; align-items: center; justify-content: center; margin-top: 12px; height: 42px; border-radius: 999px;
  background: var(--surface-1); color: var(--brand); font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.fd-rims-link:hover { background: var(--brand); color: #fff; }
.fd-rims-note { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); text-align: center; }
@media (max-width: 760px) {
  /* 폰에서도 이름과 값을 한 줄에 — 위아래로 쌓으면 항목끼리 섞여 보인다 */
  .fd-kv { grid-template-columns: 88px 1fr; gap: 0 12px; }
  .fd-kv dt { margin-top: 0; }
  .fd-title { font-size: 18px; }
}

/* 리뷰 쓰기 — 등급 문구와 함께 고르는 칸 (v1.55.0, 레몬베이스 척도) */
.wq-levels { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wq-level { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-1); font-size: 15px; }
.wq-level b { width: 22px; text-align: center; color: var(--brand); font-variant-numeric: tabular-nums; }
.wq-level:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.wq-level input { margin: 0; }

/* 레몬베이스 1:1 기록 (v1.56.0) — 어젠다 아래 코멘트를 들여 쓴다 */
.lb11-agenda { padding: 10px 0; border-top: 1px solid var(--border); }
.lb11-agenda:first-of-type { border-top: 0; }
.lb11-a .lb11-txt { font-weight: 600; }
.lb11-c { margin: 8px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--border); }
.lb11-who { font-size: 12.5px; color: var(--brand); font-weight: 700; }
.lb11-txt { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }

/* 대시보드 OKR 카드 (v1.56.0) */
.okr-dash-mine { display: flex; flex-direction: column; gap: 10px; }
.okr-dash-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 10px; }
.okr-dash-row .okr-bar { grid-column: 1 / -1; margin: 0; }
.okr-dash-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.okr-dash-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
.okr-dash-late { color: var(--critical); font-weight: 600; }

/* 두세 개짜리 탭 단추 (v1.56.1 — 레몬베이스 1:1 재직자/퇴사자) */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--page); }
.seg button { height: 32px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.seg button.on { background: var(--surface-1); color: var(--brand); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* 월간 1:1 어젠다 + 코멘트 (v1.57.0) */
.th-box { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--page); }
.th-head { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.th-agenda { padding: 10px 0; border-top: 1px solid var(--border); }
.th-agenda:first-of-type { border-top: 0; }
.th-a .th-txt { font-weight: 600; }
.th-c { margin: 8px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--border); }
.th-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.th-meta b { color: var(--brand); }
.th-meta .linkish { font-size: 12px; padding: 0; height: auto; }
.th-txt { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }
.th-reply { display: flex; gap: 6px; margin: 8px 0 0 18px; }
.th-reply input { height: 36px; font-size: 14px; }
.th-new { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.th-new textarea { min-height: 52px; font-size: 14.5px; }
.th-reply button, .th-new button { flex-shrink: 0; white-space: nowrap; }

/* Monthly 1:1 관리자 탭 (v1.58.1) */
.oo-tabs { margin: 0 0 14px; }

/* 로그인 화면 안내 카드 (v1.59.0) — 세션 만료·로그아웃은 부드럽게, 손볼 게 있는 안내만 주황 톤 */
.login-note { display: flex; gap: 12px; align-items: center; padding: 14px 16px; margin: -8px 0 24px;
  border-radius: 14px; background: var(--brand-soft); border: 1px solid var(--brand-line); animation: lnIn .28s ease-out; }
.login-note .ln-ic { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-1); color: var(--brand); box-shadow: 0 1px 4px rgba(27, 54, 93, .14); }
.login-note .ln-ic svg { width: 19px; height: 19px; }
.login-note .ln-t { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-primary); }
.login-note .ln-s { font-size: 13.5px; line-height: 19px; color: var(--text-secondary); margin-top: 2px; }
.login-note.good .ln-ic { color: var(--good); }
.login-note.warn { background: rgba(178, 106, 0, .07); border-color: rgba(178, 106, 0, .24); align-items: flex-start; }
.login-note.warn .ln-ic { color: #b26a00; }
.login-note.warn .ln-s { color: var(--text-primary); font-size: 14px; line-height: 20px; }
@keyframes lnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 숫자에 붙는 말풍선 (v1.62.3 — 연차 관리 「소멸」 칸) — 마우스를 올리거나(PC) 누르면(폰, 포커스) 사유가 위에 뜬다.
   JS 없이 :hover/:focus 로만 — 표를 다시 그려도 따로 연결할 것이 없다. 점선 밑줄 = "눌러 보면 설명이 있다" */
.tip { position: relative; cursor: help; border-bottom: 1px dotted var(--text-muted); outline: none; }
.tip:focus-visible { box-shadow: 0 0 0 2px var(--brand-line); border-radius: 3px; }
.tip::after {
  content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 8px); z-index: 30;
  background: var(--text-primary); color: var(--surface-1); font-size: 12.5px; line-height: 18px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s, transform .12s;
}
.tip:hover::after, .tip:focus::after { opacity: 1; transform: none; }

/* ===== HR 화면 ===== */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 28px; }
.grid-2 h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-muted); font-weight: 600; }
tr.row-cancelled td { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
tr.row-cancelled td .help, tr.row-cancelled td .badge, tr.row-cancelled td button { text-decoration: none; }
tr.row-changed td { font-weight: 600; background: color-mix(in srgb, var(--brand) 6%, transparent); }
.leader-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 160px; overflow: auto; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; }
table.list-edit input:not([type=checkbox]) { width: 100%; min-width: 90px; }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { padding-left: 18px; border-left: 2px solid var(--border); margin: 4px 0 10px 6px; }
.org-dept-name { font-weight: 700; color: var(--brand); padding: 6px 0 2px; }
.org-person { padding: 4px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.org-leader { margin-left: auto; }
.form-grid + .form-grid { margin-top: 12px; }
.chg { display: flex; flex-direction: column; gap: 2px; }
.im-problem { color: #b42318; font-size: 12px; margin-top: 4px; line-height: 1.4; }
:root[data-theme="dark"] .im-problem { color: #f97066; }
.wh-change { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 2px 0; }